diff --git a/src/components/panel-ui/doctor/app-navbar.tsx b/src/components/panel-ui/doctor/app-navbar.tsx
index e0070a1..58a9545 100644
--- a/src/components/panel-ui/doctor/app-navbar.tsx
+++ b/src/components/panel-ui/doctor/app-navbar.tsx
@@ -1,14 +1,13 @@
-import { Bell, User } from "lucide-react"
+import { Bell } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
+
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+	SignInButton,
+	SignedIn,
+	SignedOut,
+	UserButton
+} from '@clerk/nextjs';
 
 import { Menu } from "lucide-react"
 import { SidebarTrigger } from "@/components/ui/sidebar"
@@ -22,7 +21,7 @@ export default function Navbar() {
             <div className="container mx-auto px-6 py-3">
                 <div className="flex items-center justify-between">
                     <div className="flex items-center">
-                        <SidebarTrigger className="text-gray-200 focus:outline-none focus:text-gray-300">
+                        <SidebarTrigger className="text-gray-200 focus:outline-none focus:text-gray-300 dark:focus:text-gray-700">
                             <Menu className="h-6 w-6" />
                         </SidebarTrigger>
                         <span className="ml-4 text-xl font-semibold">My Dashboard</span>
@@ -32,21 +31,12 @@ export default function Navbar() {
                             <Button variant="ghost" size="icon">
                                 <Bell className="h-5 w-5" />
                             </Button>
-                            <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                    <Button variant="ghost" size="icon">
-                                        <User className="h-5 w-5" />
-                                    </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent align="end">
-                                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                                    <DropdownMenuSeparator />
-                                    <DropdownMenuItem>Profile</DropdownMenuItem>
-                                    <DropdownMenuItem>Settings</DropdownMenuItem>
-                                    <DropdownMenuItem>Sign out</DropdownMenuItem>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
                             <ModeToggle />
+                            <div className="bg-primary text-primary-foreground shadow hover:bg-primary/90 px-4 py-2 rounded-md mx-2">
+                                <SignedIn>
+                                    <UserButton />
+                                </SignedIn>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/src/components/panel-ui/patient/app-navbar.tsx b/src/components/panel-ui/patient/app-navbar.tsx
index e0070a1..58a9545 100644
--- a/src/components/panel-ui/patient/app-navbar.tsx
+++ b/src/components/panel-ui/patient/app-navbar.tsx
@@ -1,14 +1,13 @@
-import { Bell, User } from "lucide-react"
+import { Bell } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
+
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+	SignInButton,
+	SignedIn,
+	SignedOut,
+	UserButton
+} from '@clerk/nextjs';
 
 import { Menu } from "lucide-react"
 import { SidebarTrigger } from "@/components/ui/sidebar"
@@ -22,7 +21,7 @@ export default function Navbar() {
             <div className="container mx-auto px-6 py-3">
                 <div className="flex items-center justify-between">
                     <div className="flex items-center">
-                        <SidebarTrigger className="text-gray-200 focus:outline-none focus:text-gray-300">
+                        <SidebarTrigger className="text-gray-200 focus:outline-none focus:text-gray-300 dark:focus:text-gray-700">
                             <Menu className="h-6 w-6" />
                         </SidebarTrigger>
                         <span className="ml-4 text-xl font-semibold">My Dashboard</span>
@@ -32,21 +31,12 @@ export default function Navbar() {
                             <Button variant="ghost" size="icon">
                                 <Bell className="h-5 w-5" />
                             </Button>
-                            <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                    <Button variant="ghost" size="icon">
-                                        <User className="h-5 w-5" />
-                                    </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent align="end">
-                                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                                    <DropdownMenuSeparator />
-                                    <DropdownMenuItem>Profile</DropdownMenuItem>
-                                    <DropdownMenuItem>Settings</DropdownMenuItem>
-                                    <DropdownMenuItem>Sign out</DropdownMenuItem>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
                             <ModeToggle />
+                            <div className="bg-primary text-primary-foreground shadow hover:bg-primary/90 px-4 py-2 rounded-md mx-2">
+                                <SignedIn>
+                                    <UserButton />
+                                </SignedIn>
+                            </div>
                         </div>
                     </div>
                 </div>