diff --git a/components/ui/login.tsx b/components/ui/login.tsx
index 07edb90..b1b32a9 100644
--- a/components/ui/login.tsx
+++ b/components/ui/login.tsx
@@ -1,11 +1,13 @@
 "use client";
-import { signIn } from "@auth/nextjs/client";
+
+import { useRouter } from "next/navigation";
 
 export function Login() {
+  const router = useRouter();
   return (
     <button
       className="inline-flex w-full items-center justify-center rounded border border-zinc-800 bg-white h-8 px-4 -my-1.5 text-sm leading-6 tracking-tight text-zinc-900 transition-colors ease-in-out hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-50"
-      onClick={() => signIn("github")}
+      onClick={() => router.push("/api/auth/signin")}
     >
       <span className="font-medium">Login</span>
     </button>
diff --git a/components/ui/user-menu.tsx b/components/ui/user-menu.tsx
index fb32743..4cfc263 100644
--- a/components/ui/user-menu.tsx
+++ b/components/ui/user-menu.tsx
@@ -2,15 +2,16 @@
 import { ThemeToggle } from "@/components/theme-toggle";
 import { type Session } from "@auth/nextjs/types";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { signOut } from "@auth/nextjs/client";
 
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 
 export interface UserMenuProps {
   session: Session;
 }
 
 export function UserMenu({ session }: UserMenuProps) {
+  const router = useRouter();
   return (
     <div className="flex items-center justify-between">
       <DropdownMenu.Root>
@@ -83,7 +84,7 @@ export function UserMenu({ session }: UserMenuProps) {
             </DropdownMenu.Item>
             <DropdownMenu.Item
               className="py-2 px-3 hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200 cursor-pointer text-xs focus:outline-none"
-              onClick={() => signOut()}
+              onClick={() => router.push("/api/auth/signout")}
             >
               Log Out
             </DropdownMenu.Item>