diff --git a/apps/docs-dev/src/.vitepress/config.mts b/apps/docs-dev/src/.vitepress/config.mts
index 8b2d764..e995515 100644
--- a/apps/docs-dev/src/.vitepress/config.mts
+++ b/apps/docs-dev/src/.vitepress/config.mts
@@ -3,10 +3,14 @@ import { withMermaid } from 'vitepress-plugin-mermaid'
 
 const config = withMermaid(
   defineConfig({
-    title: "Frontend Monorepo",
+    // title: "Frontend Monorepo",
+    title: 'Frontend Arch',
     description: "Centralized documentation for the Enterprise Frontend Monorepo",
-
+    head: [
+        ['link', { rel: 'icon', href: '/favicon.svg' }] // Jika Anda menggunakan favicon.svg
+      ],
     themeConfig: {
+      logo: '/logo.svg',
       nav: [
         { text: 'Docs', link: '/overview' },
       ],
diff --git a/apps/docs-dev/src/.vitepress/theme/custom.css b/apps/docs-dev/src/.vitepress/theme/custom.css
index 0d698c6..5746fe5 100644
--- a/apps/docs-dev/src/.vitepress/theme/custom.css
+++ b/apps/docs-dev/src/.vitepress/theme/custom.css
@@ -26,3 +26,55 @@
   --vp-c-brand-3: #652ed9;
   --vp-c-brand-soft: rgba(101, 46, 217, 0.25);
 }
+
+/* Sesuaikan ukuran logo di navbar */
+/* .VPNavBar .logo {
+  height: 32px;
+}
+
+.VPNavBar .VPNavBarTitle{
+  
+} */
+
+/* ==========================================================================
+   OPTIMASI NAVBAR TITLE & LOGO (ELEGANT ALIGNMENT)
+   ========================================================================== */
+.VPNavBar .VPNavBarTitle {
+  display: flex;
+  align-items: center; /* Memastikan logo & teks sejajar sempurna secara vertikal */
+  gap: 12px;           /* Spasi yang lebih longgar dan elegan antara logo & teks */
+  padding: 0 16px;     /* Memberikan ruang napas di dalam kontainer title */
+}
+
+/* ==========================================================================
+   ELEGANT HARMONIOUS GRADIENT (Subtle Mode-Aware)
+   ========================================================================== */
+.VPNavBar .VPNavBarTitle .title {
+  /* LIGHT MODE: Gradien dari warna Brand gelap ke warna Brand terang */
+  /* Kita hindari hitam pekat, gunakan ungu yang lebih dalam */
+  background: linear-gradient(135deg, #4b23a6 0%, var(--vp-c-brand-1) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  transition: all 0.3s ease;
+}
+
+/* DARK MODE: Gradien dari ungu sangat muda ke warna Brand */
+.dark .VPNavBar .VPNavBarTitle .title {
+  /* Kita kurangi dominasi putih dengan menggunakan ungu yang sangat terang */
+  background: linear-gradient(135deg, #c5a8ff 30%, var(--vp-c-brand-1) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  /* Glow diperhalus agar tidak terlalu menyilaukan */
+  filter: drop-shadow(0 0 8px rgba(101, 46, 217, 0.2));
+}
+
+/* Hover effect yang lebih kalem */
+.VPNavBar .VPNavBarTitle .title:hover {
+  filter: drop-shadow(0 0 12px rgba(101, 46, 217, 0.4));
+}
+
+.VPNavBar .logo {
+  height: 28px;            /* Menyeimbangkan ukuran logo dengan tinggi teks */
+  width: 28px;
+  margin-right: 0;         /* Margin sudah digantikan oleh 'gap' pada parent */
+}
\ No newline at end of file
diff --git a/apps/docs-dev/src/public/favicon.svg b/apps/docs-dev/src/public/favicon.svg
new file mode 100644
index 0000000..4328d48
--- /dev/null
+++ b/apps/docs-dev/src/public/favicon.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Blok Utama: Ungu lebih terang agar kontras di latar gelap -->
+  <rect x="6" y="6" width="16" height="16" rx="4" fill="#8a57f3"/>
+  <!-- Blok Sekunder: Sedikit lebih terang -->
+  <rect x="18" y="18" width="16" height="16" rx="4" fill="#8a57f3" fill-opacity="0.8"/>
+</svg>
diff --git a/apps/docs-dev/src/public/logo.svg b/apps/docs-dev/src/public/logo.svg
new file mode 100644
index 0000000..7abbacf
--- /dev/null
+++ b/apps/docs-dev/src/public/logo.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Blok Utama (Brand Color) -->
+  <rect x="6" y="6" width="16" height="16" rx="4" fill="#652ed9"/>
+  <!-- Blok Sekunder (Memberikan kesan struktur & kedalaman) -->
+  <rect x="18" y="18" width="16" height="16" rx="4" fill="#652ed9" fill-opacity="0.6"/>
+</svg>