diff --git a/apps/docs-dev/package.json b/apps/docs-dev/package.json
index c9f71eb..463a9b6 100644
--- a/apps/docs-dev/package.json
+++ b/apps/docs-dev/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "@repo/docs-dev",
+    "name": "docs-dev",
     "version": "0.0.0",
     "type": "module",
     "private": true,
diff --git a/apps/docs-dev/src/.vitepress/theme/custom.css b/apps/docs-dev/src/.vitepress/theme/custom.css
index ebaa726..0d698c6 100644
--- a/apps/docs-dev/src/.vitepress/theme/custom.css
+++ b/apps/docs-dev/src/.vitepress/theme/custom.css
@@ -26,62 +26,3 @@
   --vp-c-brand-3: #652ed9;
   --vp-c-brand-soft: rgba(101, 46, 217, 0.25);
 }
-
-/* Custom Enterprise Section Styles */
-.enterprise-section {
-  max-width: 1152px;
-  margin: 0 auto;
-  padding: 64px 24px;
-}
-.enterprise-section h2 {
-  font-size: 2.2em;
-  font-weight: 700;
-  margin-bottom: 0.5em;
-  letter-spacing: -0.02em;
-  line-height: 1.2;
-}
-.enterprise-section > p {
-  font-size: 1.2em;
-  color: var(--vp-c-text-2);
-  margin-bottom: 2.5em;
-  max-width: 700px;
-}
-.enterprise-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 24px;
-}
-.enterprise-card {
-  padding: 32px 24px;
-  border-radius: 12px;
-  background-color: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  transition: border-color 0.25s, background-color 0.25s, transform 0.25s;
-}
-.enterprise-card:hover {
-  border-color: var(--vp-c-brand-1);
-  transform: translateY(-2px);
-}
-.enterprise-card h3 {
-  font-size: 1.25em;
-  font-weight: 600;
-  margin-bottom: 0.75em;
-  color: var(--vp-c-text-1);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.enterprise-card h3::before {
-  content: '';
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: var(--vp-c-brand-1);
-}
-.enterprise-card p {
-  font-size: 1em;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  margin: 0;
-}
diff --git a/apps/docs-dev/src/index.md b/apps/docs-dev/src/index.md
index 15eed87..fbb548b 100644
--- a/apps/docs-dev/src/index.md
+++ b/apps/docs-dev/src/index.md
@@ -14,43 +14,252 @@ hero:
       link: /overview
 
 features:
-  - title: 🧩 Component Library
-    details: A centralized, highly accessible UI component library built for scale.
-    link: /packages/ui/
-    linkText: Explore Components
-  - title: 🔌 Core API Engine
-    details: Robust state management and data fetching patterns across all applications.
+  - title: 🧩 App Layout Engine
+    details: Core App Shell wrapping Mantine for rapid, consistent layout creation across all products.
+    link: /packages/ui/CORE-APP-SHELL
+    linkText: Explore App Shell
+  - title: 📝 Form Primitives
+    details: RHF + Zod + Mantine components designed for O(1) render cost and deep type safety.
+    link: /packages/ui/FORM-COMPONENTS
+    linkText: View Forms
+  - title: 🖥️ Desktop Ecosystem
+    details: Complete Electron integration with secure Inter-Process Communication (IPC) and Bridge Architecture.
+    link: /apps/desktop/
+    linkText: Desktop Docs
+  - title: 🔌 Core Architecture
+    details: Robust state management, Event Bus, first-class i18n, and unified Storage layers.
     link: /packages/core-api/
-    linkText: View API Engine
-  - title: 🌐 Internationalization
-    details: First-class i18n support built into the core for global reach.
-    link: /packages/core-i18n/
-    linkText: Read i18n Docs
-  - title: 🖥️ Desktop IPC
-    details: Secure and performant Inter-Process Communication architecture for desktop apps.
-    link: /apps/desktop/IPC_ARCHITECTURE
-    linkText: Explore IPC
+    linkText: Explore Core
 ---
-
-<div class="enterprise-section" >
-  <h2>Why this Monorepo Exists</h2>
-  <p>Building high-end enterprise applications requires strict consistency, shared tooling, and well-defined boundaries. This monorepo serves as the absolute source of truth for our frontend ecosystem.</p>
-  
-  <div class="enterprise-grid">
-    <div class="enterprise-card">
+<div class="custom-divider"></div>
+<div class="bento-container">
+  <div class="bento-header">
+    <h2>Why this Monorepo Exists</h2>
+    <p>Building high-end enterprise applications requires strict consistency, shared tooling, and well-defined boundaries. This monorepo serves as the absolute source of truth for our frontend ecosystem.</p>
+  </div>
+  <div class="bento-grid">
+    <div class="bento-card">
+      <div class="bento-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
+      </div>
       <h3>Unified Tooling</h3>
-      <p>By enforcing strict linting, formatting, and building patterns at the root, we ensure that every application in the ecosystem adheres to our high standards without duplicate configuration.</p>
+      <p>By enforcing strict linting, formatting, and building patterns at the root (powered by Turborepo), we ensure that every application in the ecosystem adheres to our high standards without duplicate configuration.</p>
     </div>
-    
-    <div class="enterprise-card">
+    <div class="bento-card">
+      <div class="bento-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+      </div>
       <h3>Shared Domain Logic</h3>
-      <p>The separation of UI and Core logic means our web, desktop, and potential mobile applications all share the same state management and event-driven architecture, reducing cognitive load.</p>
+      <p>The separation of UI components and Core logic guarantees that our web and desktop applications all share the exact same state management and event-driven architecture, drastically reducing cognitive load.</p>
     </div>
-    
-    <div class="enterprise-card">
+    <div class="bento-card">
+      <div class="bento-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
+      </div>
       <h3>Accelerated Velocity</h3>
-      <p>Stop reinventing the wheel. With a rich library of primitive components and pre-configured Vite/TypeScript environments, teams can start building product features on day one.</p>
+      <p>With a rich library of 22+ advanced Form components, pre-configured Vite/TypeScript environments, and an enterprise App Shell, teams can stop reinventing the wheel and start building product features on day one.</p>
     </div>
   </div>
 </div>
 
+<style scoped>
+/* ==========================================================================
+   SECTION 1: GLOBAL & HERO BACKGROUNDS (Masked Dot Grid & Top Glow)
+   ========================================================================== */
+:global(.VPHome) {
+  position: relative;
+  z-index: 0;
+}
+
+/* Efek Brand Glow memancar halus dari atas tengah (Area Hero) */
+:global(.VPHome::before) {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  max-width: 1200px;
+  height: 800px;
+  background: radial-gradient(ellipse at top, var(--vp-c-brand-soft) 0%, transparent 70%);
+  filter: blur(100px);
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* Efek Dot Grid yang dibatasi hanya setinggi Hero dan memudar ke bawah */
+:global(.VPHome::after) {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 600px;
+  background-image: radial-gradient(var(--vp-c-divider) 1px, transparent 1px);
+  background-size: 24px 24px;
+  background-position: top center;
+  z-index: -2;
+  pointer-events: none;
+  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
+  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
+}
+
+
+/* ==========================================================================
+   SECTION 2: BENTO CONTAINER & HEADER (Structured Minimalism)
+   ========================================================================== */
+/* Divider dengan jarak vertikal yang presisi dan lega */
+.custom-divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--vp-c-divider);
+  margin: 80px 0 64px 0; 
+}
+
+.bento-container {
+  max-width: 1152px;
+  margin: auto;
+  padding: 0 24px;
+  position: relative;
+}
+
+.bento-header {
+  text-align: center;
+  margin-bottom: 64px;
+}
+
+.bento-header h2 {
+  font-size: 2.5em;
+  font-weight: 700;
+  margin-bottom: 20px;
+  color: var(--vp-c-text-1);
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  border-top: none;
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.bento-header p {
+  font-size: 1.15em;
+  color: var(--vp-c-text-2);
+  max-width: 760px; /* Memaksa teks membungkus menjadi 2 baris yang ideal */
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+
+/* ==========================================================================
+   SECTION 2: BENTO GRID & CARD DESIGN (Premium Glassmorphism)
+   ========================================================================== */
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+}
+
+.bento-card {
+  background: var(--vp-c-bg-soft);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid var(--vp-c-divider); /* Border solid yang tipis dan bersih */
+  border-radius: 16px;
+  padding: 40px 32px; /* Spacing dalam yang luas memberikan kesan premium */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  /* Transisi mulus untuk pergerakan, border, dan bayangan */
+  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
+              border-color 0.4s ease, 
+              box-shadow 0.4s ease;
+
+  /* Perubahan Utama: Bayangan statis yang sangat halus (elegan, tidak berisik) */
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  
+  /* Transisi hover yang lebih lembut dan "mahal" */
+  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+/* Interaksi hover kartu: Terangkat sedikit dengan pendaran tipis warna brand */
+.bento-card:hover {
+  /* Elevasi yang lebih tinggi saat di-hover */
+  transform: translateY(-8px);
+  
+  /* Shadow saat hover: Warna brand dengan opasitas sangat rendah agar tetap profesional */
+  box-shadow: 0 20px 25px -5px rgba(101, 46, 217, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  
+  /* Border sedikit lebih terang */
+  border-color: var(--vp-c-brand-1);
+}
+
+.bento-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: var(--vp-c-bg-mute);
+  color: var(--vp-c-brand-1); 
+  margin-bottom: 24px;
+  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
+}
+
+.bento-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* Interaksi hover ikon: Mengisi warna latar dengan warna brand */
+.bento-card:hover .bento-icon {
+  background: var(--vp-c-brand-1);
+  color: #ffffff;
+  transform: scale(1.05);
+}
+
+.bento-card h3 {
+  font-size: 1.3em;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.bento-card p {
+  font-size: 1em;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin: 0;
+}
+
+
+/* ==========================================================================
+   9. MEDIA QUERIES (Responsive Adaptations)
+   ========================================================================== */
+@media (max-width: 768px) {
+  .custom-divider {
+    margin: 48px 0;
+  }
+  .bento-header {
+    margin-bottom: 48px;
+  }
+  .bento-header h2 {
+    font-size: 2em;
+  }
+  .bento-header p {
+    font-size: 1.05em;
+  }
+  .bento-card {
+    padding: 32px 24px;
+  }
+}
+
+@media (max-width: 480px) {
+  .bento-grid {
+    grid-template-columns: 1fr; /* Menjadi satu kolom penuh pada ponsel kecil */
+  }
+  .bento-card {
+    padding: 24px;
+  }
+}
+</style>
\ No newline at end of file