diff --git a/src/app/(auth)/auth/callback/page.tsx b/src/app/(auth)/auth/callback/page.tsx
new file mode 100644
index 0000000..cd3e1c6
--- /dev/null
+++ b/src/app/(auth)/auth/callback/page.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import { useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { LoaderCircle } from "lucide-react"
+import { authClient } from "@/infrastructure/auth/client"
+
+export default function AuthCallbackPage() {
+  const router = useRouter()
+  const { data: session, isPending } = authClient.useSession()
+
+  useEffect(() => {
+    if (isPending) return
+    if (!session) {
+      router.replace("/login")
+      return
+    }
+    router.replace(session.user.role === "admin" ? "/admin" : "/dashboard")
+  }, [session, isPending, router])
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 pt-40">
+      <LoaderCircle className="size-8 animate-spin text-ma-admin-primary" />
+      <p className="text-2xl font-semibold text-primary">Signing you in...</p>
+    </div>
+  )
+}
diff --git a/src/app/(auth)/auth/signout/page.tsx b/src/app/(auth)/auth/signout/page.tsx
new file mode 100644
index 0000000..aca7c11
--- /dev/null
+++ b/src/app/(auth)/auth/signout/page.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { LoaderCircle } from "lucide-react"
+import { authClient } from "@/infrastructure/auth/client"
+
+export default function SignOutPage() {
+  const router = useRouter()
+
+  useEffect(() => {
+    const signOut = async () => {
+      try {
+        await authClient.signOut()
+      } finally {
+        router.push("/login")
+      }
+    }
+    signOut()
+  }, [router])
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 pt-40">
+      <LoaderCircle className="size-8 animate-spin text-ma-admin-primary" />
+      <p className="text-2xl font-semibold text-primary">Logging out...</p>
+    </div>
+  )
+}
diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
new file mode 100644
index 0000000..bb35b54
--- /dev/null
+++ b/src/app/(auth)/layout.tsx
@@ -0,0 +1,27 @@
+import Image from "next/image"
+import Link from "next/link"
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="min-h-screen bg-white">
+      <header className="bg-white">
+        <div className="mx-auto px-4 py-5 lg:max-w-7xl lg:px-25 2xl:max-w-360 2xl:px-50">
+          <Link href="/" className="flex w-[157px] flex-col gap-1">
+            <Image
+              src="/figma-home/logo.svg"
+              alt="ModernAdvocates Inc."
+              width={58}
+              height={44}
+              priority
+            />
+          </Link>
+        </div>
+      </header>
+      {children}
+    </div>
+  )
+}
diff --git a/src/features/auth/components/auth-google-button.tsx b/src/features/auth/components/auth-google-button.tsx
index e5afd9e..ae7c184 100644
--- a/src/features/auth/components/auth-google-button.tsx
+++ b/src/features/auth/components/auth-google-button.tsx
@@ -38,7 +38,7 @@ export function AuthGoogleButton({ label }: { label: string }) {
   const handleSignIn = async () => {
     setPending(true)
     try {
-      await authClient.signIn.social({ provider: "google", callbackURL: "/dashboard" })
+      await authClient.signIn.social({ provider: "google", callbackURL: "/auth/callback" })
     } catch {
       toast.error("Failed to sign in with Google. Please try again.")
     } finally {
diff --git a/src/features/platform/components/sidebar-navigation.tsx b/src/features/platform/components/sidebar-navigation.tsx
index 0b45ed6..af9ff02 100644
--- a/src/features/platform/components/sidebar-navigation.tsx
+++ b/src/features/platform/components/sidebar-navigation.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import Link from "next/link"
-import { usePathname } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import {
   LayoutGrid,
   PlayCircle,
@@ -13,7 +13,6 @@ import {
   LogOut,
 } from "lucide-react"
 import { cn } from "@/shared/utils"
-import { authClient } from "@/infrastructure/auth/client"
 import {
   Sidebar,
   SidebarContent,
@@ -45,14 +44,15 @@ export function SidebarNavigation({
   ...props
 }: React.ComponentProps<typeof Sidebar>) {
   const pathname = usePathname()
+  const router = useRouter()
 
   const isActive = (url: string) => {
     if (url === "/admin") return pathname === "/admin"
     return pathname === url || pathname.startsWith(url + "/")
   }
 
-  const handleLogout = async () => {
-    await authClient.signOut()
+  const handleLogout = () => {
+    router.push("/auth/signout")
   }
 
   return (
@@ -142,13 +142,13 @@ export function SidebarNavigation({
         </SidebarGroup>
       </SidebarContent>
 
-      <SidebarFooter>
+      <SidebarFooter className='px-4'>
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton
               asChild
               tooltip="Log out"
-              className="text-red-500 hover:bg-red-50 hover:text-red-500!"
+              className="text-red-500 hover:bg-red-50 h-10 text-lg hover:text-red-500!"
             >
               <button onClick={handleLogout} type="button">
                 <LogOut className="size-4" />