diff --git a/frontend/components/ui/userButton.tsx b/frontend/components/ui/userButton.tsx
index 62d3eb4..9cb7747 100644
--- a/frontend/components/ui/userButton.tsx
+++ b/frontend/components/ui/userButton.tsx
@@ -9,10 +9,16 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { User } from "@/lib/types"
+import { useClerk } from "@clerk/nextjs"
 import { LogOut, Pencil } from "lucide-react"
+import { useRouter } from "next/navigation"
 
 export default function UserButton({ userData }: { userData: User }) {
   if (!userData) return null
+
+  const { signOut } = useClerk()
+  const router = useRouter()
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
@@ -30,7 +36,10 @@ export default function UserButton({ userData }: { userData: User }) {
           {/* open modal with name and email (disabled) */}
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem className="!text-destructive cursor-pointer">
+        <DropdownMenuItem
+          onClick={() => signOut(() => router.push("/"))}
+          className="!text-destructive cursor-pointer"
+        >
           <LogOut className="mr-2 h-4 w-4" />
           <span>Log Out</span>
         </DropdownMenuItem>