diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 2ac205b..b749aac 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -5,7 +5,9 @@ import { Auth } from "@supabase/auth-ui-react";
 import { ThemeSupa } from "@supabase/auth-ui-shared";
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import type { AuthChangeEvent, Session } from "@supabase/supabase-js";
+import { Button } from "@/components/ui/button";
+import { KeyRound } from "lucide-react";
+import type { AuthChangeEvent, Session, Provider } from "@supabase/supabase-js";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -20,6 +22,12 @@ export default function LoginPage() {
     return () => subscription.unsubscribe();
   }, [router]);
 
+  const handleOidcSignIn = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: 'pocket_id' as Provider,
+    });
+  };
+
   return (
     <div className="flex items-center justify-center min-h-screen bg-background">
       <div className="w-full max-w-md p-8 space-y-8">
@@ -35,6 +43,20 @@ export default function LoginPage() {
           view="sign_in"
           showLinks={true}
         />
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-background px-2 text-muted-foreground">
+              Or continue with
+            </span>
+          </div>
+        </div>
+        <Button variant="outline" className="w-full" onClick={handleOidcSignIn}>
+          <KeyRound className="mr-2 h-4 w-4" />
+          Sign in with Pocket ID
+        </Button>
       </div>
     </div>
   );