diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index 2fb13d3..efd7345 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
-    import { onMount } from "svelte";
+    import { onMount, createEventDispatcher } from "svelte";
     import { supabase } from "$lib/supabaseClient";
 
     let user: any = null;
@@ -50,6 +50,9 @@
         | "vm"
         | "it";
 
+    export let pageName = "";
+    const dispatch = createEventDispatcher();
+
     // Semua menu
     const fullMenu: MenuItem[] = [
         {
@@ -155,15 +158,19 @@
         if (item.sub) {
             goto(item.url);
             activeUrl = item.url;
+            dispatch('changePage', item.name);
             openMenus[item.name] = !openMenus[item.name];
         } else {
             activeUrl = item.url;
+            pageName = item.name;
+            dispatch('changePage', item.name);
             goto(item.url);
         }
     }
 
     function handleSubClick(sub: SubMenuItem) {
         activeUrl = sub.url;
+        dispatch('changePage', sub.name);
         goto(sub.url);
     }
 
diff --git a/src/routes/backoffice/+layout.svelte b/src/routes/backoffice/+layout.svelte
index 350742c..da6b841 100644
--- a/src/routes/backoffice/+layout.svelte
+++ b/src/routes/backoffice/+layout.svelte
@@ -53,10 +53,12 @@
         localStorage.clear();
         goto("/login");
     }
+
+    let pageName = "Dashboard";
 </script>
 
 <div class="flex h-screen">
-    <Sidebar />
+    <Sidebar {pageName} on:changePage={(e) => pageName = e.detail} />
 
     <!-- Main Content -->
     <div class="flex-1 flex flex-col bg-gray-100 overflow-hidden">
@@ -64,7 +66,7 @@
         <div
             class="flex items-center justify-between bg-white shadow px-6 py-3 border-b"
         >
-            <div class="text-lg font-semibold text-gray-700">Dashboard</div>
+            <div class="text-lg font-semibold text-gray-700">{pageName}</div>
 
             <div class="flex items-center gap-6">
                 <!-- Notifications -->