diff --git a/resources/js/Layouts/AuthenticatedLayout.tsx b/resources/js/Layouts/AuthenticatedLayout.tsx
index d4c3413..28989bd 100644
--- a/resources/js/Layouts/AuthenticatedLayout.tsx
+++ b/resources/js/Layouts/AuthenticatedLayout.tsx
@@ -222,26 +222,28 @@ export default function AuthenticatedLayout({ children }: { children: React.Reac
 
     return (
         <div className="flex min-h-screen bg-slate-50">
-            {/* Mobile Header */}
-            <header className="lg:hidden fixed top-0 left-0 right-0 h-16 bg-white border-b border-slate-200 z-[60] flex items-center justify-between px-4">
-                <Link href="/" className="flex items-center gap-2">
-                    <div className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg">K</div>
-                    <span className="font-bold text-slate-900">小小冰室 ERP</span>
-                </Link>
-                <button
-                    onClick={() => setIsMobileOpen(!isMobileOpen)}
-                    className="p-2 text-slate-600 hover:bg-slate-100 rounded-lg"
-                >
-                    {isMobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
-                </button>
+            {/* Mobile Header -> Global Header */}
+            <header className="fixed top-0 left-0 right-0 h-16 bg-white border-b border-slate-200 z-[60] flex items-center justify-between px-4 transition-all duration-300">
+                <div className="flex items-center gap-2">
+                    <button
+                        onClick={() => setIsMobileOpen(!isMobileOpen)}
+                        className="p-2 -ml-2 text-slate-600 hover:bg-slate-100 rounded-lg lg:hidden"
+                    >
+                        {isMobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+                    </button>
+                    <Link href="/" className="flex items-center gap-2">
+                        <div className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg">K</div>
+                        <span className="font-bold text-slate-900">小小冰室 ERP</span>
+                    </Link>
+                </div>
             </header>
 
             {/* Sidebar Desktop */}
             <aside className={cn(
-                "fixed left-0 top-0 bottom-0 bg-white border-r border-slate-200 z-50 transition-all duration-300 ease-in-out hidden lg:flex flex-col",
+                "fixed left-0 top-0 bottom-0 bg-white border-r border-slate-200 z-50 transition-all duration-300 ease-in-out hidden lg:flex flex-col pt-16",
                 isCollapsed ? "w-20" : "w-64"
             )}>
-                <div className="h-16 flex items-center justify-between px-6 border-b border-slate-100">
+                <div className="hidden h-16 items-center justify-between px-6 border-b border-slate-100">
                     {!isCollapsed && (
                         <Link href="/" className="flex items-center gap-2 group">
                             <div className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg group-hover:scale-110 transition-transform">K</div>
@@ -308,7 +310,7 @@ export default function AuthenticatedLayout({ children }: { children: React.Reac
                 "flex-1 transition-all duration-300 min-h-screen overflow-auto",
                 "lg:ml-64",
                 isCollapsed && "lg:ml-20",
-                "pt-16 lg:pt-0" // Mobile header spacing
+                "pt-16" // Always allow space for header
             )}>
                 <div className="relative">
                     {children}
diff --git a/resources/js/Pages/Product/Index.tsx b/resources/js/Pages/Product/Index.tsx
index fc4c71a..257c8c2 100644
--- a/resources/js/Pages/Product/Index.tsx
+++ b/resources/js/Pages/Product/Index.tsx
@@ -16,6 +16,7 @@ import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router } from "@inertiajs/react";
 import { debounce } from "lodash";
 import Pagination from "@/Components/shared/Pagination";
+import BreadcrumbNav from "@/Components/shared/BreadcrumbNav";
 
 export interface Category {
   id: number;
@@ -177,6 +178,14 @@ export default function ProductManagement({ products, categories, filters }: Pag
       <div className="container mx-auto p-6 max-w-7xl">
         {/* Header */}
         <div className="mb-6">
+          <BreadcrumbNav
+            items={[
+              { label: "首頁", href: "/" },
+              { label: "商品與庫存管理" },
+              { label: "商品資料管理", isPage: true },
+            ]}
+            className="mb-2"
+          />
           <h1 className="mb-2">商品資料管理</h1>
           <p className="text-gray-600">管理小小冰室原物料與成品資料</p>
         </div>