diff --git a/frontend/src/components/MilestoneTimeline.tsx b/frontend/src/components/MilestoneTimeline.tsx
index 2c3e9a2..dd5d633 100644
--- a/frontend/src/components/MilestoneTimeline.tsx
+++ b/frontend/src/components/MilestoneTimeline.tsx
@@ -1,18 +1,15 @@
 "use client";
 
-import { Activity, Check, Lock } from "lucide-react";
+import { Check, Clock, Lock, AlertTriangle } from "lucide-react";
 
-export type MilestoneStatus = "completed" | "active" | "locked";
+export type MilestoneStatus = "completed" | "active" | "pending" | "disputed";
 
 export type Milestone = {
   id: string;
   title: string;
+  date: string;
   description: string;
-  amount: string;
-  due: string;
   status: MilestoneStatus;
-  progress: number;
-  releaseDetails: string;
 };
 
 const statusMeta: Record<
@@ -20,34 +17,56 @@ const statusMeta: Record<
   {
     label: string;
     iconBg: string;
-    text: string;
     iconColor: string;
+    borderColor: string;
+    badgeBg: string;
+    badgeText: string;
+    isLocked: boolean;
   }
 > = {
   completed: {
-    label: "Released",
-    iconBg: "bg-emerald-500/15 text-emerald-300 border-emerald-300/60",
-    text: "Funds disbursed",
-    iconColor: "text-emerald-300",
+    label: "Completed",
+    iconBg: "bg-emerald-500",
+    iconColor: "text-white",
+    borderColor: "border-emerald-500",
+    badgeBg: "bg-emerald-500/20",
+    badgeText: "text-emerald-300",
+    isLocked: false,
   },
   active: {
-    label: "Active",
-    iconBg: "bg-amber-500/15 text-amber-300 border-amber-300/60 animate-pulse",
-    text: "Pending verification",
-    iconColor: "text-amber-400",
+    label: "In Progress",
+    iconBg: "bg-amber-500",
+    iconColor: "text-white",
+    borderColor: "border-amber-400",
+    badgeBg: "bg-amber-500/20",
+    badgeText: "text-amber-300",
+    isLocked: false,
   },
-  locked: {
-    label: "Locked",
-    iconBg: "bg-slate-700/60 text-slate-200 border-slate-500/40",
-    text: "Awaiting prior milestones",
-    iconColor: "text-slate-200",
+  pending: {
+    label: "Pending",
+    iconBg: "bg-transparent",
+    iconColor: "text-slate-400",
+    borderColor: "border-slate-500",
+    badgeBg: "bg-slate-500/20",
+    badgeText: "text-slate-400",
+    isLocked: true,
+  },
+  disputed: {
+    label: "Disputed",
+    iconBg: "bg-rose-500",
+    iconColor: "text-white",
+    borderColor: "border-rose-500",
+    badgeBg: "bg-rose-500/20",
+    badgeText: "text-rose-300",
+    isLocked: false,
   },
 };
 
 const iconMap: Record<MilestoneStatus, typeof Check> = {
   completed: Check,
-  active: Activity,
-  locked: Lock,
+  active: Clock,
+  pending: Lock,
+  disputed: AlertTriangle,
 };
 
 type MilestoneTimelineProps = {
@@ -55,55 +74,81 @@ type MilestoneTimelineProps = {
 };
 
 export default function MilestoneTimeline({ milestones }: MilestoneTimelineProps) {
+  const today = new Date();
+
   return (
-    <div className="relative  md:pl-8">
+    <div className="relative w-full max-w-2xl">
       <div
         aria-hidden="true"
-        className="absolute  top-5 h-[calc(83%-1.25rem)] w-px bg-white/50"
+        className="absolute left-6 top-8 bottom-8 w-0.5 bg-gradient-to-b from-emerald-500/50 via-amber-500/50 to-slate-600/30"
       />
-      <div className="space-y-10">
-        {milestones.map((milestone) => {
+
+      <div className="space-y-8">
+        {milestones.map((milestone, index) => {
           const meta = statusMeta[milestone.status];
           const StatusIcon = iconMap[milestone.status];
+          const milestoneDate = new Date(milestone.date);
+          const isFuture = milestoneDate > today && meta.isLocked;
 
           return (
-            <div key={milestone.id} className="relative">
-              <div className="absolute left-0 top-1">
+            <div
+              key={milestone.id}
+              className={`relative flex gap-6 ${index === milestones.length - 1 ? "" : ""}`}
+            >
+              <div className="relative z-10 flex-shrink-0">
                 <div
-                  className={`flex h-12 w-12 items-center justify-center rounded-2xl border p-2 ${meta.iconBg}`}
+                  className={
+                    "flex h-12 w-12 items-center justify-center rounded-full border-2 " +
+                    (milestone.status === "active" ? "animate-pulse " : "") +
+                    (milestone.status === "completed" ? "bg-emerald-500 border-emerald-500 " : "") +
+                    (milestone.status === "active" ? "bg-amber-500 " + meta.borderColor + " " : "") +
+                    (milestone.status === "pending" ? "border-2 border-slate-500 bg-slate-900/50 " : "") +
+                    (milestone.status === "disputed" ? "bg-rose-500 " + meta.borderColor : "")
+                  }
                 >
                   <StatusIcon className={`h-5 w-5 ${meta.iconColor}`} />
                 </div>
               </div>
 
-              <div className="ml-14 rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0px_30px_60px_rgba(2,6,23,0.35)]">
-                <div className="flex items-center justify-between gap-6">
-                  <div>
-                    <p className="text-xs font-semibold uppercase tracking-[0.2em] text-white/60">
-                      {meta.label}
-                    </p>
-                    <h3 className="text-xl font-semibold leading-snug text-white">{milestone.title}</h3>
+              <div
+                className={`
+                  relative flex-1 rounded-xl border p-5
+                  ${milestone.status === "completed" ? "border-emerald-500/30 bg-emerald-500/5" : ""}
+                  ${milestone.status === "active" ? "border-amber-400/50 bg-amber-500/5 shadow-[0_0_20px_rgba(251,191,36,0.1)]" : ""}
+                  ${milestone.status === "pending" ? "border-slate-600/30 bg-slate-800/30" : ""}
+                  ${milestone.status === "disputed" ? "border-rose-500/30 bg-rose-500/5" : ""}
+                `}
+              >
+                {isFuture && (
+                  <div className="absolute inset-0 rounded-xl bg-slate-900/60 backdrop-blur-[2px] flex items-center justify-center">
+                    <div className="flex items-center gap-2 text-slate-400">
+                      <Lock className="h-4 w-4" />
+                      <span className="text-sm font-medium">Locked until due date</span>
+                    </div>
                   </div>
-                  <span className="text-sm font-semibold text-white/70">{milestone.amount}</span>
-                </div>
-                <p className="mt-3 text-sm text-white/70">{milestone.description}</p>
-                <div className="mt-4 flex flex-wrap items-center justify-between gap-3 text-xs text-white/60">
-                  <span>{milestone.due}</span>
-                  <span>{milestone.releaseDetails}</span>
-                </div>
-                <div className="mt-4 flex flex-col gap-2">
-                  <div className="flex items-center justify-between text-xs font-medium text-white/70">
-                    <span>Progress</span>
-                    <span>{milestone.progress}%</span>
-                  </div>
-                  <div className="h-2 rounded-full bg-white/10">
-                    <div
-                      className="h-2 rounded-full bg-gradient-to-r from-amber-500 via-amber-400 to-rose-500 transition-all"
-                      style={{ width: `${milestone.progress}%` }}
-                    />
+                )}
+
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <h3 className="text-lg font-semibold text-white truncate">
+                        {milestone.title}
+                      </h3>
+                      <span
+                        className={`
+                          inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
+                          ${meta.badgeBg} ${meta.badgeText}
+                        `}
+                      >
+                        {meta.label}
+                      </span>
+                    </div>
+                    <p className="mt-1 text-sm text-slate-400">{milestone.date}</p>
+                    <p className="mt-2 text-sm text-slate-300 leading-relaxed">
+                      {milestone.description}
+                    </p>
                   </div>
                 </div>
-                <p className="mt-4 text-xs text-white/60">{meta.text}</p>
               </div>
             </div>
           );
diff --git a/frontend/src/components/PasskeySignModal.tsx b/frontend/src/components/PasskeySignModal.tsx
new file mode 100644
index 0000000..89adf9e
--- /dev/null
+++ b/frontend/src/components/PasskeySignModal.tsx
@@ -0,0 +1,383 @@
+"use client";
+
+import React, { useEffect, useRef, useCallback, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, Fingerprint, Check, Loader2 } from "lucide-react";
+import { signWithPasskey, type PasskeySignError, type TransactionSummary } from "@/lib/passkey";
+
+type ModalState = "idle" | "pending" | "success" | "biometric_error" | "transaction_error";
+
+interface PasskeySignModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: (signedTxXDR: string) => void;
+  onError?: (error: PasskeySignError) => void;
+  transactionSummary: TransactionSummary;
+  rawTransactionXDR: string;
+}
+
+/**
+ * Inline SVG icons matching the existing app design
+ */
+const FingerprintIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4" />
+    <path d="M14 13.12c0 2.38 0 6.38-1 8.88" />
+    <path d="M17.29 21.02c.12-.6.43-2.3.5-3.02" />
+    <path d="M2 12a10 10 0 0 1 18-6" />
+    <path d="M2 16h.01" />
+    <path d="M21.8 16c.2-2 .131-5.354 0-6" />
+    <path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2" />
+    <path d="M8.65 22c.21-.66.45-1.32.57-2" />
+    <path d="M9 6.8a6 6 0 0 1 9 5.2v2" />
+  </svg>
+);
+
+export const PasskeySignModal: React.FC<PasskeySignModalProps> = ({
+  isOpen,
+  onClose,
+  onSuccess,
+  onError,
+  transactionSummary,
+  rawTransactionXDR,
+}) => {
+  const [state, setState] = useState<ModalState>("idle");
+  const [errorMessage, setErrorMessage] = useState<string>("");
+  const [signedXDR, setSignedXDR] = useState<string>("");
+  const modalRef = useRef<HTMLDivElement>(null);
+  const firstFocusableRef = useRef<HTMLButtonElement>(null);
+  const lastFocusableRef = useRef<HTMLButtonElement>(null);
+
+  // Reset state when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setState("idle");
+      setErrorMessage("");
+      setSignedXDR("");
+    }
+  }, [isOpen]);
+
+  // Auto-dismiss on success
+  useEffect(() => {
+    if (state === "success" && signedXDR) {
+      const timer = setTimeout(() => {
+        onSuccess(signedXDR);
+      }, 1500);
+      return () => clearTimeout(timer);
+    }
+  }, [state, signedXDR, onSuccess]);
+
+  // Focus trap and Escape key handling
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Only allow Escape when in idle or error states
+      if (event.key === "Escape") {
+        if (state === "idle" || state === "biometric_error" || state === "transaction_error") {
+          onClose();
+        }
+        return;
+      }
+
+      // Focus trap
+      if (event.key === "Tab") {
+        const focusableElements = modalRef.current?.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (!focusableElements || focusableElements.length === 0) return;
+
+        const firstElement = focusableElements[0] as HTMLElement;
+        const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+        if (event.shiftKey) {
+          if (document.activeElement === firstElement) {
+            lastElement.focus();
+            event.preventDefault();
+          }
+        } else {
+          if (document.activeElement === lastElement) {
+            firstElement.focus();
+            event.preventDefault();
+          }
+        }
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    
+    // Focus first element when modal opens
+    const timer = setTimeout(() => {
+      firstFocusableRef.current?.focus();
+    }, 100);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      clearTimeout(timer);
+    };
+  }, [isOpen, state, onClose]);
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  const handleSign = useCallback(async () => {
+    setState("pending");
+    setErrorMessage("");
+
+    try {
+      const signed = await signWithPasskey(rawTransactionXDR);
+      setSignedXDR(signed);
+      setState("success");
+    } catch (error) {
+      const passkeyError = error as PasskeySignError;
+      
+      if (passkeyError.code === "BIOMETRIC_CANCELLED" || passkeyError.code === "BIOMETRIC_FAILED") {
+        setState("biometric_error");
+        setErrorMessage(passkeyError.message);
+      } else {
+        setState("transaction_error");
+        setErrorMessage(passkeyError.message);
+      }
+      
+      onError?.(passkeyError);
+    }
+  }, [rawTransactionXDR, onError]);
+
+  const handleRetry = useCallback(() => {
+    handleSign();
+  }, [handleSign]);
+
+  const handleBackdropClick = useCallback(() => {
+    // Only close when in idle or error states
+    if (state === "idle" || state === "biometric_error" || state === "transaction_error") {
+      onClose();
+    }
+  }, [state, onClose]);
+
+  // Don't render if not open
+  if (!isOpen) return null;
+
+  const canClose = state === "idle" || state === "biometric_error" || state === "transaction_error";
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          className="fixed inset-0 z-50 flex items-center justify-center"
+          role="presentation"
+        >
+          {/* Backdrop */}
+          <div
+            className="absolute inset-0 bg-slate-950/80 backdrop-blur-sm"
+            onClick={handleBackdropClick}
+            aria-hidden="true"
+          />
+
+          {/* Modal */}
+          <motion.div
+            ref={modalRef}
+            initial={{ opacity: 0, scale: 0.95, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 20 }}
+            transition={{ duration: 0.2, ease: "easeOut" }}
+            className="relative w-full max-w-md mx-4 rounded-3xl border border-white/10 bg-slate-900/95 p-6 shadow-2xl"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="passkey-modal-title"
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between mb-6">
+              <h2
+                id="passkey-modal-title"
+                className="text-xl font-semibold text-white"
+              >
+                Confirm Transaction
+              </h2>
+              {canClose && (
+                <button
+                  ref={firstFocusableRef}
+                  type="button"
+                  onClick={onClose}
+                  className="rounded-full p-2 text-white/60 transition hover:bg-white/10 hover:text-white"
+                  aria-label="Close"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              )}
+            </div>
+
+            {/* Transaction Summary Card */}
+            <div className="mb-6 rounded-2xl border border-white/5 bg-white/5 p-4">
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs uppercase tracking-[0.4em] text-white/50">Action</span>
+                  <span className="text-sm font-medium text-white">{transactionSummary.action}</span>
+                </div>
+                
+                {transactionSummary.amount && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs uppercase tracking-[0.4em] text-white/50">Amount</span>
+                    <span className="text-sm font-medium text-purple-300">{transactionSummary.amount}</span>
+                  </div>
+                )}
+                
+                {transactionSummary.recipient && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs uppercase tracking-[0.4em] text-white/50">Recipient</span>
+                    <span className="text-sm font-medium text-white">{transactionSummary.recipient}</span>
+                  </div>
+                )}
+                
+                {transactionSummary.fee && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs uppercase tracking-[0.4em] text-white/50">Fee</span>
+                    <span className="text-sm font-medium text-white/70">{transactionSummary.fee}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* STATE 1: IDLE */}
+            {state === "idle" && (
+              <div className="space-y-4">
+                <button
+                  type="button"
+                  onClick={handleSign}
+                  className="w-full rounded-2xl border border-white/10 bg-gradient-to-r from-purple-500 to-purple-400 px-6 py-4 text-base font-semibold text-slate-950 shadow-lg shadow-purple-500/40 transition hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-slate-900 inline-flex items-center justify-center gap-3"
+                >
+                  <FingerprintIcon />
+                  Sign with Biometrics
+                </button>
+
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="w-full text-center text-sm text-white/50 transition hover:text-white/80 focus:outline-none focus:underline"
+                >
+                  Cancel
+                </button>
+              </div>
+            )}
+
+            {/* STATE 2: PENDING */}
+            {state === "pending" && (
+              <div className="flex flex-col items-center justify-center py-8 space-y-4">
+                <Loader2
+                  className="h-10 w-10 animate-spin text-purple-400"
+                  aria-label="Signing in progress"
+                />
+                <p className="text-sm text-white/70">
+                  Waiting for biometric confirmation…
+                </p>
+              </div>
+            )}
+
+            {/* STATE 3: SUCCESS */}
+            {state === "success" && (
+              <motion.div
+                initial={{ scale: 0.8, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                className="flex flex-col items-center justify-center py-8 space-y-4"
+              >
+                <div className="rounded-full bg-green-500/20 p-3">
+                  <Check className="h-10 w-10 text-green-400" aria-label="Signing successful" />
+                </div>
+                <p className="text-base font-medium text-white">Signed successfully</p>
+              </motion.div>
+            )}
+
+            {/* STATE 4: BIOMETRIC ERROR */}
+            {state === "biometric_error" && (
+              <div className="space-y-4">
+                <div
+                  role="alert"
+                  className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4"
+                >
+                  <p className="text-sm text-amber-200">
+                    Biometric sign-in was cancelled or failed. Please try again.
+                  </p>
+                </div>
+
+                <button
+                  type="button"
+                  onClick={handleSign}
+                  className="w-full rounded-2xl border border-white/10 bg-gradient-to-r from-purple-500 to-purple-400 px-6 py-4 text-base font-semibold text-slate-950 shadow-lg shadow-purple-500/40 transition hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-slate-900 inline-flex items-center justify-center gap-3"
+                >
+                  <FingerprintIcon />
+                  Sign with Biometrics
+                </button>
+
+                <button
+                  ref={lastFocusableRef}
+                  type="button"
+                  onClick={onClose}
+                  className="w-full text-center text-sm text-white/50 transition hover:text-white/80 focus:outline-none focus:underline"
+                >
+                  Cancel
+                </button>
+              </div>
+            )}
+
+            {/* STATE 5: TRANSACTION ERROR */}
+            {state === "transaction_error" && (
+              <div className="space-y-4">
+                <div
+                  role="alert"
+                  className="rounded-xl border border-rose-500/30 bg-rose-500/10 p-4"
+                >
+                  <p className="text-sm text-rose-200">
+                    {errorMessage.length > 120 ? `${errorMessage.slice(0, 120)}…` : errorMessage}
+                  </p>
+                </div>
+
+                <div className="flex gap-3">
+                  <button
+                    type="button"
+                    onClick={handleRetry}
+                    className="flex-1 rounded-2xl border border-white/10 bg-gradient-to-r from-purple-500 to-purple-400 px-4 py-3 text-sm font-semibold text-slate-950 transition hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-slate-900"
+                  >
+                    Retry
+                  </button>
+                  <button
+                    ref={lastFocusableRef}
+                    type="button"
+                    onClick={onClose}
+                    className="flex-1 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-slate-900"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            )}
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default PasskeySignModal;
diff --git a/frontend/src/lib/passkey.ts b/frontend/src/lib/passkey.ts
new file mode 100644
index 0000000..491f33e
--- /dev/null
+++ b/frontend/src/lib/passkey.ts
@@ -0,0 +1,137 @@
+/**
+ * Passkey/WebAuthn signing utilities for Soroban transactions
+ * 
+ * This module provides a mock implementation of WebAuthn-based transaction
+ * signing. In production, this would interface with the actual WebAuthn API
+ * and Soroban SDK.
+ */
+
+export type PasskeyErrorCode =
+  | 'BIOMETRIC_CANCELLED'
+  | 'BIOMETRIC_FAILED'
+  | 'TRANSACTION_REJECTED'
+  | 'UNKNOWN';
+
+export interface PasskeySignError {
+  code: PasskeyErrorCode;
+  message: string;
+}
+
+export interface TransactionSummary {
+  action: string;
+  amount?: string;
+  recipient?: string;
+  fee?: string;
+}
+
+/**
+ * Maps WebAuthn errors to our PasskeySignError format
+ */
+function mapWebAuthnError(error: unknown): PasskeySignError {
+  if (error instanceof Error) {
+    // Common WebAuthn error names
+    if (
+      error.name === 'NotAllowedError' ||
+      error.name === 'AbortError' ||
+      error.message?.includes('cancelled') ||
+      error.message?.includes('denied')
+    ) {
+      return {
+        code: 'BIOMETRIC_CANCELLED',
+        message: 'Biometric sign-in was cancelled. Please try again.',
+      };
+    }
+
+    if (
+      error.name === 'InvalidStateError' ||
+      error.name === 'SecurityError' ||
+      error.message?.includes('failed') ||
+      error.message?.includes('unavailable')
+    ) {
+      return {
+        code: 'BIOMETRIC_FAILED',
+        message: 'Biometric verification failed. Please try again.',
+      };
+    }
+  }
+
+  return {
+    code: 'UNKNOWN',
+    message: error instanceof Error ? error.message : 'An unexpected error occurred',
+  };
+}
+
+/**
+ * Mock implementation of passkey-based transaction signing.
+ * 
+ * In production, this would:
+ * 1. Call navigator.credentials.get() with the challenge
+ * 2. Use the assertion to sign the Soroban transaction
+ * 3. Return the signed transaction XDR
+ * 
+ * @param transactionXDR - The raw Soroban transaction XDR to sign
+ * @returns Promise resolving to the signed transaction XDR
+ * @throws PasskeySignError on signing failure
+ */
+export async function signWithPasskey(transactionXDR: string): Promise<string> {
+  // Check if WebAuthn is supported
+  if (typeof window === 'undefined' || !window.PublicKeyCredential) {
+    throw {
+      code: 'BIOMETRIC_FAILED',
+      message: 'Biometric authentication is not supported on this device.',
+    } as PasskeySignError;
+  }
+
+  try {
+    // In production, this would be an actual WebAuthn call:
+    // const assertion = await navigator.credentials.get({
+    //   publicKey: {
+    //     challenge: Uint8Array.from(atob(challenge), c => c.charCodeAt(0)),
+    //     allowCredentials: [...],
+    //     userVerification: 'required',
+    //   }
+    // });
+    
+    // For now, simulate the async nature of biometric prompt
+    await new Promise((resolve, reject) => {
+      // Simulate user interaction delay (1-2 seconds)
+      const delay = 1200;
+      
+      setTimeout(() => {
+        // 10% chance of biometric failure for testing
+        const shouldFail = Math.random() < 0.1;
+        
+        if (shouldFail) {
+          reject(new Error('NotAllowedError'));
+        } else {
+          resolve(undefined);
+        }
+      }, delay);
+    });
+
+    // Return a mock signed transaction XDR
+    // In production, this would be the actual signed XDR
+    const mockSignedXDR = `SIGNED_${transactionXDR}_${Date.now()}`;
+    return mockSignedXDR;
+    
+  } catch (error) {
+    throw mapWebAuthnError(error);
+  }
+}
+
+/**
+ * Check if the device supports biometric authentication
+ */
+export async function isPasskeySupported(): Promise<boolean> {
+  if (typeof window === 'undefined') return false;
+  
+  if (!window.PublicKeyCredential) return false;
+  
+  try {
+    // Check if user verifying platform authenticator is available
+    const available = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
+    return available;
+  } catch {
+    return false;
+  }
+}