diff --git a/app/layout.tsx b/app/layout.tsx
index f05f748..1f51d07 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono, Inter } from "next/font/google";
 import "./globals.css";
 
-const inter = Inter({subsets:['latin'],variable:'--font-sans'});
+const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -15,8 +15,12 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "RxLab Auth",
+  description: "RxLab Auth is a simple authentication system for RxLab",
+  openGraph: {
+    title: "RxLab Auth",
+    description: "RxLab Auth is a simple authentication system for RxLab",
+  },
 };
 
 export default function RootLayout({
diff --git a/components/dashboard/dashboard-shell.tsx b/components/dashboard/dashboard-shell.tsx
index c3f4d99..3d31a21 100644
--- a/components/dashboard/dashboard-shell.tsx
+++ b/components/dashboard/dashboard-shell.tsx
@@ -1,4 +1,3 @@
-import { headers } from "next/headers";
 import { DashboardHeader } from "./dashboard-header";
 import { SidebarNav } from "./sidebar-nav";
 import type { NavItem } from "./types";
@@ -12,7 +11,7 @@ interface DashboardShellProps {
   homeHref: string;
 }
 
-export async function DashboardShell({
+export function DashboardShell({
   children,
   title,
   logo,
@@ -20,9 +19,6 @@ export async function DashboardShell({
   headerRight,
   homeHref,
 }: DashboardShellProps) {
-  const headersList = await headers();
-  const currentPath = headersList.get("x-pathname") || "/";
-
   return (
     <div className="min-h-screen bg-background">
       <DashboardHeader
@@ -34,7 +30,7 @@ export async function DashboardShell({
       />
 
       <div className="container mx-auto flex gap-8 px-4 py-6 sm:px-6 lg:py-8">
-        <SidebarNav navItems={navItems} currentPath={currentPath} />
+        <SidebarNav navItems={navItems} />
         <main className="flex-1 min-w-0">{children}</main>
       </div>
     </div>
diff --git a/components/dashboard/sidebar-nav.tsx b/components/dashboard/sidebar-nav.tsx
index 21d66f0..0cec27a 100644
--- a/components/dashboard/sidebar-nav.tsx
+++ b/components/dashboard/sidebar-nav.tsx
@@ -1,4 +1,7 @@
+"use client";
+
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import {
   User,
   KeyRound,
@@ -19,10 +22,10 @@ const iconMap: Record<string, typeof User> = {
 
 interface SidebarNavProps {
   navItems: NavItem[];
-  currentPath: string;
 }
 
-export function SidebarNav({ navItems, currentPath }: SidebarNavProps) {
+export function SidebarNav({ navItems }: SidebarNavProps) {
+  const currentPath = usePathname();
   return (
     <aside className="hidden md:flex w-56 shrink-0 flex-col gap-1">
       {navItems.map((item) => {