diff --git a/app/components/AppSidebar.vue b/app/components/AppSidebar.vue
index 457b74b..15604d8 100644
--- a/app/components/AppSidebar.vue
+++ b/app/components/AppSidebar.vue
@@ -1,77 +1,104 @@
 <script setup lang="ts">
 import {
+  BriefcaseBusiness,
   CreditCard,
   Database,
-  Grid,
-  HelpCircle,
-  Settings
+  FolderKanban,
+  LayoutDashboard
 } from "@lucide/vue"
+import { computed, ref, watch } from 'vue'
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 
 import {
   Sidebar,
   SidebarContent,
+  SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
-  SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
 } from '@/components/ui/sidebar'
 
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.jpg",
+const route = useRoute()
+
+const groups = [
+  {
+    title: 'Master',
+    icon: FolderKanban,
+    items: [
+      { title: 'Dashboard', url: '/admin/dashboard', icon: LayoutDashboard },
+      { title: 'Jenis Bisnis', url: '/admin/business-types', icon: BriefcaseBusiness },
+      { title: 'Plans', url: '/admin/plans', icon: CreditCard },
+    ],
   },
-  navMain: [
-    {
-      title: "Dashboard",
-      url: "/admin/dashboard",
-      icon: Grid,
-    },
-    {
-      title: "Jenis Bisnis",
-      url: "/admin/business-types",
-      icon: Grid,
-    },
-    {
-      title: "Plans",
-      url: "/admin/plans",
-      icon: CreditCard,
-    },
-  ],
-}
+]
+
+const activeGroup = ref(
+  groups.find(g => g.items.some(it => route.path === it.url))?.title ?? groups[0].title
+)
+
+watch(() => route.path, (path) => {
+  const found = groups.find(g => g.items.some(it => it.url === path))
+  if (found) activeGroup.value = found.title
+})
+
+const currentGroup = computed(() => groups.find(g => g.title === activeGroup.value))
 </script>
 
 <template>
   <Sidebar collapsible="icon">
-    <SidebarHeader>
-      <SidebarMenu>
-        <SidebarMenuItem>
-          <SidebarMenuButton as-child class="data-[slot=sidebar-menu-button]:p-1.5!">
-            <a href="#">
-              <Database class="size-6!" />
-              <span class="text-lg font-semibold">Profitra</span>
-            </a>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarMenu>
-    </SidebarHeader>
-    <SidebarContent>
-      <SidebarGroupContent class="flex flex-col gap-2">
-        <SidebarGroupLabel>Master</SidebarGroupLabel>
-        <SidebarMenu>
-          <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
-            <SidebarMenuButton as-child :tooltip="item.title">
-              <NuxtLink :to="item.url">
-                <component :is="item.icon" v-if="item.icon" />
-                <span>{{ item.title }}</span>
-              </NuxtLink>
+    <div class="flex flex-row h-full w-full">
+      <!-- Left: Icon Rail -->
+      <div class="flex w-(--sidebar-width-icon) shrink-0 flex-col items-center border-r py-2 gap-1">
+        <SidebarMenuButton as-child class="p-1.5! mb-2">
+          <a href="#">
+            <img src="/assets/icon.png" class="size-6!" />
+          </a>
+        </SidebarMenuButton>
+
+        <Tooltip v-for="g in groups" :key="g.title">
+          <TooltipTrigger as-child>
+            <SidebarMenuButton as-child size="lg" :data-active="activeGroup === g.title || undefined"
+              @click="activeGroup = g.title">
+              <button>
+                <component :is="g.icon" />
+              </button>
             </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarContent>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            {{ g.title }}
+          </TooltipContent>
+        </Tooltip>
+      </div>
+
+      <!-- Right: Content Panel -->
+      <div class="flex flex-1 flex-col min-w-0">
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel class="text-lg font-bold mb-5">
+              {{ currentGroup?.title }}
+            </SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem v-for="item in currentGroup?.items" :key="item.title">
+                  <SidebarMenuButton as-child :is-active="route.path === item.url">
+                    <NuxtLink :to="item.url">
+                      <component :is="item.icon" v-if="item.icon" />
+                      <span>{{ item.title }}</span>
+                    </NuxtLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </div>
+    </div>
   </Sidebar>
 </template>
diff --git a/docs/history/2026-07-25-sidebar-dua-panel.md b/docs/history/2026-07-25-sidebar-dua-panel.md
new file mode 100644
index 0000000..4fcfb4c
--- /dev/null
+++ b/docs/history/2026-07-25-sidebar-dua-panel.md
@@ -0,0 +1,105 @@
+# Sidebar Dua Panel (Icon Rail + Content Panel)
+
+**Tanggal:** 2026-07-25
+**Status:** Selesai
+
+## Tujuan
+Merubah struktur sidebar dari satu panel menjadi dua panel: Icon Rail (kiri) berisi icon group menu, dan Content Panel (kanan) berisi sub-menu dari group yang dipilih.
+
+## Yang Dikerjakan
+
+### 1. Restrukturisasi Data Menu
+Data menu diubah dari flat `navMain` menjadi grouped `groups[]` agar mendukung multiple group.
+
+**Sebelum:**
+```ts
+navMain: [
+  { title: "Dashboard", url: "/admin/dashboard", icon: Grid },
+  { title: "Jenis Bisnis", url: "/admin/business-types", icon: Grid },
+  { title: "Plans", url: "/admin/plans", icon: CreditCard },
+]
+```
+
+**Sesudah:**
+```ts
+const activeGroup = ref('Master')
+
+const groups = [
+  {
+    title: 'Master',
+    icon: Database,
+    items: [
+      { title: 'Dashboard', url: '/admin/dashboard', icon: Grid },
+      { title: 'Jenis Bisnis', url: '/admin/business-types', icon: Grid },
+      { title: 'Plans', url: '/admin/plans', icon: CreditCard },
+    ],
+  },
+]
+```
+
+### 2. Perubahan Layout Sidebar
+Sidebar diubah dari single panel menjadi dua panel berdampingan (flex-row).
+
+**Layout Baru:**
+```
+┌─────────────────────────────────────────────┐
+│ [Icon Rail]         │ [Content Panel]       │
+│ ~3rem fixed         │ flex-1               │
+├─────────────────────┼───────────────────────┤
+│ ◉ [Database]        │ Master               │
+│   (Logo)            │ ──────────────       │
+│                     │ • Dashboard          │
+│ ◉ [Database] ◀aktif │ • Jenis Bisnis      │
+│   (Master)          │ • Plans              │
+│   ↑ hover → "Master"│                      │
+└─────────────────────────────────────────────┘
+```
+
+### 3. Tooltip pada Icon Rail
+- Sebelumnya menggunakan `:tooltip` prop dari `SidebarMenuButton` yang hanya muncul saat sidebar collapsed
+- Sekarang menggunakan `Tooltip` + `TooltipContent` dari `@/components/ui/tooltip` agar selalu muncul di hover
+
+### 4. Hapus Header "Profitra"
+- `SidebarHeader` yang berisi tulisan "Profitra" dihapus
+- Sub-menu langsung berada di bagian atas panel kanan (tanpa spasi kosong)
+
+### 5. Group Label Styling
+- `SidebarGroupLabel` diberi `class="text-lg font-bold"` agar lebih besar dan tebal
+
+### 6. Sistem Filter Group
+- Klik icon group di panel kiri → `activeGroup` berubah → panel kanan menampilkan sub-menu dari group yang dipilih
+- Icon yang aktif mendapat highlight via CSS `data-active="true"`
+
+## File yang Diubah
+
+| File | Aksi | Detail |
+|------|------|--------|
+| `app/components/AppSidebar.vue` | Diubah | Restrukturisasi dari flat menu ke grouped menu dengan two-panel layout, tooltip custom, hapus header, styling label |
+
+### 7. Active State Menu
+- Menu item yang sedang aktif (sesuai URL route) mendapat `is-active` → muncul highlight background
+- `activeGroup` otomatis terdeteksi dari route path saat halaman dimuat
+- Ketika navigasi ke halaman lain, `activeGroup` otomatis berubah mengikuti route baru
+- User tetap bisa klik icon group secara manual untuk melihat group lain
+
+### 8. Route Detection
+```ts
+const route = useRoute()
+
+// Auto-detect active group from current URL
+const activeGroup = ref(
+  groups.find(g => g.items.some(it => route.path === it.url))?.title ?? groups[0].title
+)
+
+// Watch route changes
+watch(() => route.path, (path) => {
+  const found = groups.find(g => g.items.some(it => it.url === path))
+  if (found) activeGroup.value = found.title
+})
+```
+
+## Notes
+- Menggunakan `collapsible="icon"` agar spacing mechanism (peer) tetap berfungsi dengan `SidebarInset`
+- Tooltip menggunakan `Tooltip` dari reka-ui via `@/components/ui/tooltip` agar muncul di hover meski sidebar expanded
+- `useRoute()` auto-import dari Nuxt
+- Siap untuk penambahan group baru (Manaje, Konten, dll) cukup dengan menambah entry di array `groups`
diff --git a/public/assets/icon.png b/public/assets/icon.png
new file mode 100644
index 0000000..be687fc
Binary files /dev/null and b/public/assets/icon.png differ