diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index c61abdd..4e6773b 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -1,4 +1,3 @@
-import { Logout } from '@/components/user/sso-logout-button';
 import { RedirectButton } from '@/components/user/redirect-button';
 import { ThemePicker } from '@/components/user/theme-picker';
 
@@ -8,7 +7,7 @@ export default function Home() {
       <div className='absolute top-4 right-4'>{<ThemePicker />}</div>
       <div>
         <h1>Home</h1>
-        <Logout />
+        <RedirectButton redirectUrl='/logout' buttonText='Logout' />
         <RedirectButton redirectUrl='/settings' buttonText='Settings' />
       </div>
     </div>
diff --git a/src/app/logout/page.tsx b/src/app/logout/page.tsx
new file mode 100644
index 0000000..15f29aa
--- /dev/null
+++ b/src/app/logout/page.tsx
@@ -0,0 +1,40 @@
+import { signOut } from '@/auth';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+export default function SignOutPage() {
+  return (
+    <div className='flex flex-col items-center justify-center h-screen'>
+      <form
+        action={async () => {
+          'use server';
+          await signOut({ redirectTo: '/login' });
+        }}
+      >
+        <Card className='w-[350px] max-w-screen'>
+          <CardHeader>
+            <CardTitle className='text-lg text-center'>Logout</CardTitle>
+            <CardDescription className='text-center'>
+              Are you sure you want to log out?
+            </CardDescription>
+          </CardHeader>
+          <CardContent className='gap-6 flex flex-col'>
+            <Button
+              className='hover:bg-blue-600 hover:text-white'
+              type='submit'
+              variant='secondary'
+            >
+              Logout
+            </Button>
+          </CardContent>
+        </Card>
+      </form>
+    </div>
+  );
+}