diff --git a/frontend/app/(protected)/_components/SideNavigation.jsx b/frontend/app/(protected)/_components/SideNavigation.jsx
new file mode 100644
index 00000000..583f3985
--- /dev/null
+++ b/frontend/app/(protected)/_components/SideNavigation.jsx
@@ -0,0 +1,84 @@
+// File: frontend/app/(protected)/_components/SideNavigation.jsx
+'use client'; // <-- 1. กำหนดให้ไฟล์นี้เป็น Client Component
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Home, FileText, Settings, Package2 } from 'lucide-react';
+import { can } from "@/lib/rbac";
+import { cn } from "@/lib/utils";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export function SideNavigation({ user }) { // 2. รับข้อมูล user มาจาก props
+  const pathname = usePathname(); // 3. ใช้งาน usePathname ได้แล้ว
+
+  const navLinks = [
+    { href: '/dashboard', label: 'Dashboard', icon: Home },
+    { href: '/correspondences', label: 'Correspondences', icon: FileText },
+    { href: '/drawings', label: 'Drawings', icon: FileText },
+    // ... เพิ่มเมนูอื่นๆ ตามต้องการ
+  ];
+
+  const adminLink = { 
+    href: '/admin/users', 
+    label: 'Admin', 
+    icon: Settings, 
+    requiredPermission: 'manage_users' 
+  };
+
+  return (
+    <div className="flex h-full max-h-screen flex-col gap-2">
+      <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+        <Link href="/dashboard" className="flex items-center gap-2 font-semibold">
+          <Package2 className="h-6 w-6" />
+          <span className="">LCB P3 DMS</span>
+        </Link>
+      </div>
+      <div className="flex-1">
+        <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
+          {navLinks.map(({ href, label, icon: Icon }) => (
+            <Link
+              key={href}
+              href={href}
+              className={cn(
+                'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
+                // ตรวจสอบ Path ปัจจุบันเพื่อ active เมนู
+                pathname === href || (href !== '/dashboard' && pathname.startsWith(href)) ? 'bg-muted text-primary' : ''
+              )}
+            >
+              <Icon className="h-4 w-4" />
+              {label}
+            </Link>
+          ))}
+          
+          {user && can(user, adminLink.requiredPermission) && (
+            <>
+              <div className="my-2 border-t"></div>
+              <Link
+                href={adminLink.href}
+                className={cn(
+                  'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
+                   pathname.startsWith('/admin') ? 'bg-muted text-primary' : ''
+                )}
+              >
+                <adminLink.icon className="h-4 w-4" />
+                {adminLink.label}
+              </Link>
+            </>
+          )}
+        </nav>
+      </div>
+      <div className="mt-auto p-4">
+        <Card>
+          <CardHeader className="p-2 pt-0 md:p-4">
+            <CardTitle>Need Help?</CardTitle>
+            <CardDescription>Contact support for any issues.</CardDescription>
+          </CardHeader>
+          <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
+            <Button size="sm" className="w-full">Contact Support</Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/(protected)/layout.jsx b/frontend/app/(protected)/layout.jsx
index f70acf32..d697b552 100644
--- a/frontend/app/(protected)/layout.jsx
+++ b/frontend/app/(protected)/layout.jsx
@@ -1,39 +1,26 @@
-// frontend/app/(protected)/layout.jsx
-// frontend/app/(protected)/layout.jsx
+// File: frontend/app/(protected)/layout.jsx
 
-import { cookies, headers } from "next/headers"; // 1. ยังคงใช้ฟังก์ชันฝั่ง Server
+import { cookies } from "next/headers"; // 1. ยังคงใช้ฟังก์ชันฝั่ง Server
 import { redirect } from "next/navigation";
-import { Bell, Users } from 'lucide-react';
-
+import { Users } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 
-// 2. Import Navigation Component ที่เราสร้างขึ้นมาใหม่
-import { Navigation } from "./_components/navigation";
-
-export const metadata = { title: "DMS | Protected" };
+// 2. Import SideNavigation Component ที่เราสร้างขึ้นมาใหม่
+import { SideNavigation } from "./_components/SideNavigation";
 
+// (ฟังก์ชัน fetchSession และตัวแปรอื่นๆ เหมือนเดิม)
 const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
 
 async function fetchSession() {
   const cookieStore = cookies();
   const token = cookieStore.get("access_token")?.value;
-
   if (!token) return null;
-
   try {
     const res = await fetch(`${API_BASE}/api/auth/me`, {
       headers: { Authorization: `Bearer ${token}` },
       cache: "no-store",
     });
-
     if (!res.ok) return null;
     return await res.json();
   } catch (error) {
@@ -42,12 +29,10 @@ async function fetchSession() {
   }
 }
 
-
 export default async function ProtectedLayout({ children }) {
   // 3. ดึงข้อมูล Session บน Server
   const session = await fetchSession();
 
-  // ถ้าไม่มี session หรือ user ให้ redirect ไปหน้า login
   if (!session?.user) {
     redirect("/login");
   }
@@ -55,13 +40,12 @@ export default async function ProtectedLayout({ children }) {
   return (
     <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
       <aside className="hidden border-r bg-muted/40 md:block">
-        {/* 4. ใช้ Navigation Component และส่งข้อมูล user เป็น props */}
-        <Navigation user={session.user} />
+        {/* 4. ใช้ SideNavigation Component และส่งข้อมูล user เป็น props */}
+        <SideNavigation user={session.user} />
       </aside>
       
       <div className="flex flex-col">
         <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
-          {/* Mobile navigation can be here */}
           <div className="flex-1 w-full">
             {/* Optional: Add a search bar */}
           </div>
@@ -77,12 +61,14 @@ export default async function ProtectedLayout({ children }) {
               <DropdownMenuSeparator />
               <DropdownMenuItem>Settings</DropdownMenuItem>
               <DropdownMenuSeparator />
-              {/* Logout button in client-side auth context handles the action */}
-              <DropdownMenuItem>Logout</DropdownMenuItem>
+              <DropdownMenuItem>
+                {/* ปุ่ม Logout จริงๆ ควรอยู่ใน Client Component ที่เรียกใช้ useAuth() hook */}
+                Logout
+              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
         </header>
-        <main className="flex-1 p-4 lg:p-6">
+        <main className="flex flex-col flex-1 gap-4 p-4 lg:gap-6 lg:p-6">
           {children}
         </main>
       </div>