diff --git a/apps/frontend/app/console/login/components/PasskeyLoginPage.tsx b/apps/frontend/app/console/login/components/PasskeyLoginPage.tsx
new file mode 100644
index 0000000..1486d6f
--- /dev/null
+++ b/apps/frontend/app/console/login/components/PasskeyLoginPage.tsx
@@ -0,0 +1,24 @@
+import { AuthAPI } from "@/lib/api/client";
+import LoginHeader from "./LoginHeader";
+import { Button } from "@/components/ui/button";
+import { startAuthentication } from "@simplewebauthn/browser";
+
+export default function PasskeyLoginPage() {
+    return (
+        <>
+            <LoginHeader h2="使用通行证登录到您的账户" />
+            <div className="h-37.5 flex justify-center items-center">
+                <span className="text-sm text-zinc-500 border rounded-2xl p-5">还没想好这里放点啥捏～</span>
+            </div>
+            <Button type="submit" className="w-full">
+                登录
+            </Button>
+        </>
+    )
+}
+
+export async function handleSubmit() {
+    const optionsJSON = await AuthAPI.getLoginByPasskeyOptions();
+    const credentialResponse = await startAuthentication({ optionsJSON });
+    return AuthAPI.loginByPasskey(credentialResponse);
+}
\ No newline at end of file
diff --git a/apps/frontend/app/console/login/page.tsx b/apps/frontend/app/console/login/page.tsx
index 500c042..11fd96e 100644
--- a/apps/frontend/app/console/login/page.tsx
+++ b/apps/frontend/app/console/login/page.tsx
@@ -7,7 +7,6 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 import { KeyRound, Phone, FileKey2 } from "lucide-react";
-import EmailLoginMode from "./components/EmailLoginMode";
 import PasswordLoginMode from "./components/PasswordLoginMode";
 import PhoneLoginMode from "./components/SmsLoginMode";
 import { useEffect, useState } from "react";
@@ -15,6 +14,7 @@ import LoginBG from './components/login-bg.jpg';
 import Image from "next/image";
 import { handleAPIError } from "@/lib/api/common";
 import { useUserStore } from "@/store/useUserStore";
+import PasskeyLoginPage from "./components/PasskeyLoginPage";
 
 export type SubmitMode = 'password' | 'sms' | 'passkey';
 
@@ -46,6 +46,8 @@ export default function Login() {
                                             return import('./components/PasswordLoginMode');
                                         } else if (loginMode === 'sms') {
                                             return import('./components/SmsLoginMode');
+                                        } else if (loginMode === 'passkey') {
+                                            return import('./components/PasskeyLoginPage');
                                         }
                                     })())?.handleSubmit;
                                     if (!handler) {
@@ -64,7 +66,7 @@ export default function Login() {
 
                                         {loginMode === 'password' ? <PasswordLoginMode /> : null}
                                         {loginMode === 'sms' ? <PhoneLoginMode /> : null}
-                                        {/* {loginMode === 'email' ? <EmailLoginMode onSendCode={handleSendCode} /> : null} */}
+                                        {loginMode === 'passkey' ? <PasskeyLoginPage /> : null}
 
                                         <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
                                             <span className="bg-card text-muted-foreground relative z-10 px-2">