diff --git a/jest.setup.ts b/jest.setup.ts
index 81c621c..8aec8f0 100644
--- a/jest.setup.ts
+++ b/jest.setup.ts
@@ -3,3 +3,14 @@ import { TextEncoder, TextDecoder } from 'util';
 
 (global as any).TextEncoder = TextEncoder;
 (global as any).TextDecoder = TextDecoder;
+
+(global as any).BroadcastChannel = class {
+  onmessage = null;
+  postMessage() {}
+  close() {}
+};
+
+beforeAll(() => {
+  jest.spyOn(console, 'error').mockImplementation(() => {});
+  jest.spyOn(console, 'warn').mockImplementation(() => {});
+});
diff --git a/src/AuthProvider.tsx b/src/AuthProvider.tsx
index 32aa77f..651bce6 100644
--- a/src/AuthProvider.tsx
+++ b/src/AuthProvider.tsx
@@ -9,7 +9,7 @@ import React, {
 } from 'react';
 
 import { AuthMode, createFetchWithAuth } from './fetchWithAuth';
-import LoadingSpinner from './LoadingSpinner';
+import LoadingSpinner from './components/LoadingSpinner';
 import { usePreviousSignIn } from './hooks/usePreviousSignIn';
 import {
   AuthenticatorTransportFuture,
diff --git a/src/AuthRoutes.tsx b/src/AuthRoutes.tsx
index 0408eb1..e1c0506 100644
--- a/src/AuthRoutes.tsx
+++ b/src/AuthRoutes.tsx
@@ -1,18 +1,22 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 
-import Login from '@/Login';
-import MfaLogin from '@/MfaLogin';
-import PassKeyLogin from '@/PassKeyLogin';
-import RegisterPasskey from '@/RegisterPassKey';
-import VerifyOTP from '@/VerifyOTP';
+import Login from '@/views/Login';
+import PassKeyLogin from '@/views/PassKeyLogin';
+import PasskeyRegistration from '@/views/PassKeyRegistration';
+import PhoneRegistration from '@/views/PhoneRegistration';
+import EmailRegistration from '@/views/EmailRegistration';
+import VerifyMagicLink from '@/views/VerifyMagicLink';
+import MagicLinkSent from './components/MagicLinkSent';
 
 export const AuthRoutes = () => (
   <Routes>
     <Route path="/login" element={<Login />} />
     <Route path="/passKeyLogin" element={<PassKeyLogin />} />
-    <Route path="/mfaLogin" element={<MfaLogin />} />
-    <Route path="/verifyOTP" element={<VerifyOTP />} />
-    <Route path="/registerPasskey" element={<RegisterPasskey />} />
+    <Route path="/verifyPhoneOTP" element={<PhoneRegistration />} />
+    <Route path="/verifyEmailOTP" element={<EmailRegistration />} />
+    <Route path="/verify-magiclink" element={<VerifyMagicLink />} />
+    <Route path="/registerPasskey" element={<PasskeyRegistration />} />
+    <Route path="/magic-link-sent" element={<MagicLinkSent />} />
     <Route path="*" element={<Navigate to="/login" replace />} />
   </Routes>
 );
diff --git a/src/MfaLogin.tsx b/src/MfaLogin.tsx
deleted file mode 100644
index fd2d4ad..0000000
--- a/src/MfaLogin.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { useAuth } from '@/AuthProvider';
-import { useInternalAuth } from '@/context/InternalAuthContext';
-import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import styles from './styles/mfaLogin.module.css';
-import { createFetchWithAuth } from './fetchWithAuth';
-
-const MfaLogin: React.FC = () => {
-  const { apiHost, mode } = useAuth();
-  const { validateToken } = useInternalAuth();
-  const navigate = useNavigate();
-  const [OTP, setOTP] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [resendMsg, setResendMsg] = useState('');
-  const [timeLeft, setTimeLeft] = useState(300);
-  const [selectedMethod, setSelectedMethod] = useState<string | null>(null);
-
-  const maskedPhone = '****1234';
-  const maskedEmail = 'j***@example.com';
-
-  const fetchWithAuth = createFetchWithAuth({
-    authMode: mode,
-    authHost: apiHost,
-  });
-
-  const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60)
-      .toString()
-      .padStart(2, '0');
-    const s = (seconds % 60).toString().padStart(2, '0');
-    return `${m}:${s}`;
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setLoading(true);
-
-    try {
-      await verifyOTP();
-    } catch {
-      setError('Unexpected error occurred.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const verifyOTP = async () => {
-    const endpoint =
-      selectedMethod === 'phone'
-        ? 'otp/verify-login-phone-otp'
-        : 'otp/verify-login-email-otp';
-
-    try {
-      const response = await fetchWithAuth(`/${endpoint}`, {
-        method: 'POST',
-        body: JSON.stringify({ verificationToken: OTP }),
-      });
-
-      if (!response.ok) {
-        setError('Verification failed.');
-        return;
-      }
-
-      await validateToken();
-      navigate('/');
-    } catch (err) {
-      console.error('Error verifying OTP', err);
-      setError('Verification failed.');
-    }
-  };
-
-  const sendOTP = async (target: string) => {
-    setError('');
-    const endpoint =
-      target === 'phone'
-        ? 'otp/generate-login-phone-otp'
-        : 'otp/generate-login-email-otp';
-
-    try {
-      const response = await fetchWithAuth(`/${endpoint}`, {
-        method: 'GET',
-      });
-
-      if (!response.ok) {
-        setError(
-          `Failed to send ${target} code. If this persists, refresh the page and try again.`
-        );
-      } else {
-        setResendMsg(
-          `Verification ${target === 'phone' ? 'SMS' : 'email'} has been sent.`
-        );
-      }
-    } catch {
-      setError(
-        `Failed to send ${target} code. If this persists, refresh the page and try again.`
-      );
-    }
-  };
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTimeLeft(prev => (prev > 0 ? prev - 1 : 0));
-    }, 1000);
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.card}>
-        <h2 className={styles.title}>Multi-factor Authentication</h2>
-
-        {resendMsg && <p className={styles.msg}>{resendMsg}</p>}
-
-        <div className={styles.buttonGroup}>
-          <button
-            onClick={() => {
-              setSelectedMethod('phone');
-              sendOTP('phone');
-            }}
-            className={`${styles.button} ${
-              selectedMethod === 'phone' ? styles.selected : ''
-            }`}
-          >
-            Send code to phone: <span className="font-mono">{maskedPhone}</span>
-          </button>
-
-          <button
-            onClick={() => {
-              setSelectedMethod('email');
-              sendOTP('email');
-            }}
-            className={`${styles.button} ${
-              selectedMethod === 'email' ? styles.selected : ''
-            }`}
-          >
-            Send code to email: <span className="font-mono">{maskedEmail}</span>
-          </button>
-        </div>
-
-        {selectedMethod && (
-          <>
-            {error && <p className={styles.error}>{error}</p>}
-            <label htmlFor="otp" className={styles.codeLabel}>
-              Enter the 6-digit code sent to your {selectedMethod}. <br />
-              <span className={styles.countdown}>
-                Code expires in: {formatTime(timeLeft)}
-              </span>
-            </label>
-            <input
-              id="otp"
-              type="text"
-              maxLength={6}
-              className={styles.input}
-              placeholder="••••••"
-              onChange={e => setOTP(e.target.value)}
-            />
-            <button
-              onClick={handleSubmit}
-              className={styles.submit}
-              disabled={!OTP || OTP.length < 6 || loading}
-            >
-              {loading ? 'Verifying...' : 'Verify'}
-            </button>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default MfaLogin;
diff --git a/src/components/AuthFallbackOptions.tsx b/src/components/AuthFallbackOptions.tsx
new file mode 100644
index 0000000..384ddb5
--- /dev/null
+++ b/src/components/AuthFallbackOptions.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { isValidEmail, isValidPhoneNumber } from '../utils';
+
+import styles from '../styles/login.module.css';
+
+interface AuthFallbackOptionsProps {
+  identifier: string;
+  onMagicLink: () => void;
+  onPhoneOtp: () => void;
+  onPasskeyRetry: () => void;
+}
+
+const AuthFallbackOptions: React.FC<AuthFallbackOptionsProps> = ({
+  identifier,
+  onMagicLink,
+  onPhoneOtp,
+  onPasskeyRetry,
+}) => {
+  const showMagicLink = isValidEmail(identifier);
+  const showPhoneOtp = isValidPhoneNumber(identifier);
+
+  return (
+    <div className={styles.fallbackCard}>
+      <div className={styles.fallbackHeader}>Passkeys unavailable on this device</div>
+
+      <p className={styles.fallbackDescription}>Choose another secure sign-in method.</p>
+
+      <div className={styles.fallbackActions}>
+        {showMagicLink && (
+          <button
+            type="button"
+            className={styles.fallbackActionButton}
+            onClick={onMagicLink}
+          >
+            <span className={styles.actionTitle}>Email Magic Link</span>
+            <span className={styles.actionSubtext}>
+              Send a secure sign-in link to your email
+            </span>
+          </button>
+        )}
+
+        {showPhoneOtp && (
+          <button
+            type="button"
+            className={styles.fallbackActionButton}
+            onClick={onPhoneOtp}
+          >
+            <span className={styles.actionTitle}>Text Message Code</span>
+            <span className={styles.actionSubtext}>Receive a one-time code via SMS</span>
+          </button>
+        )}
+      </div>
+
+      <button type="button" className={styles.linkButton} onClick={onPasskeyRetry}>
+        Try passkey anyway
+      </button>
+    </div>
+  );
+};
+
+export default AuthFallbackOptions;
diff --git a/src/LoadingSpinner.tsx b/src/components/LoadingSpinner.tsx
similarity index 100%
rename from src/LoadingSpinner.tsx
rename to src/components/LoadingSpinner.tsx
diff --git a/src/components/MagicLinkSent.tsx b/src/components/MagicLinkSent.tsx
new file mode 100644
index 0000000..1f13c35
--- /dev/null
+++ b/src/components/MagicLinkSent.tsx
@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from 'react';
+import { useAuth } from '@/AuthProvider';
+import { useInternalAuth } from '@/context/InternalAuthContext';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+import styles from '@/styles/magiclink.module.css';
+import { createFetchWithAuth } from '@/fetchWithAuth';
+
+const MagicLinkSent: React.FC = () => {
+  const { apiHost, mode: authMode } = useAuth();
+  const { validateToken } = useInternalAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const fetchWithAuth = createFetchWithAuth({
+    authMode,
+    authHost: apiHost,
+  });
+
+  const identifier = location.state?.identifier;
+
+  const [cooldown, setCooldown] = useState(30);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCooldown(c => (c > 0 ? c - 1 : 0));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  const resend = async () => {
+    if (cooldown > 0) return;
+
+    await fetchWithAuth(`/magic-link`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    setCooldown(30);
+  };
+
+  useEffect(() => {
+    const channel = new BroadcastChannel('seamless-auth');
+
+    channel.onmessage = async event => {
+      if (event.data?.type === 'MAGIC_LINK_AUTH_SUCCESS') {
+        const response = await fetchWithAuth(`/magic-link/check`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+        if (response.status === 200) {
+          await validateToken();
+          navigate('/');
+        }
+      }
+    };
+
+    return () => {
+      channel.close();
+    };
+  }, [fetchWithAuth, navigate, validateToken]);
+
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      try {
+        const response = await fetchWithAuth(`/magic-link/check`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+        if (response.status === 200) {
+          await validateToken();
+          navigate('/');
+        }
+      } catch {
+        /* ignore */
+      }
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, [apiHost, validateToken, navigate]);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <div className={styles.iconWrapper}>
+          <div className={styles.iconRing}></div>
+
+          <svg
+            className={styles.mailIcon}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+          >
+            <path d="M4 6h16v12H4z" />
+            <path d="m4 6 8 6 8-6" />
+          </svg>
+        </div>
+
+        <h2 className={styles.heading}>Check your email</h2>
+
+        <p className={styles.message}>
+          If an account exists for this address, we sent a secure sign-in link.
+        </p>
+
+        <div className={styles.identifier}>{identifier}</div>
+
+        <p className={styles.helperText}>
+          Open the email and click the link to finish signing in.
+        </p>
+
+        <p className={styles.helperText}>
+          Didn’t receive anything? Check your spam folder or try creating a new account.
+        </p>
+
+        <div className={styles.actions}>
+          <button
+            className={styles.secondaryButton}
+            disabled={cooldown > 0}
+            onClick={resend}
+          >
+            Resend link
+          </button>
+
+          {cooldown > 0 && (
+            <div className={styles.cooldown}>Available in {cooldown}s</div>
+          )}
+
+          <button className={styles.linkButton} onClick={() => navigate('/login')}>
+            Change email or phone
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MagicLinkSent;
diff --git a/src/components/OtpInput.tsx b/src/components/OtpInput.tsx
new file mode 100644
index 0000000..038c41d
--- /dev/null
+++ b/src/components/OtpInput.tsx
@@ -0,0 +1,63 @@
+import React, { useRef } from 'react';
+import styles from '@/styles/otpInput.module.css';
+
+interface Props {
+  length?: number;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const OtpInput: React.FC<Props> = ({ length = 6, value, onChange }) => {
+  const inputs = useRef<Array<HTMLInputElement | null>>([]);
+
+  const values = value.split('').concat(Array(length).fill('')).slice(0, length);
+
+  const handleChange = (index: number, char: string) => {
+    if (!/^\d?$/.test(char)) return;
+
+    const newValue = value.substring(0, index) + char + value.substring(index + 1);
+
+    onChange(newValue.trim());
+
+    if (char && inputs.current[index + 1]) {
+      inputs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
+    if (e.key === 'Backspace' && !values[index] && inputs.current[index - 1]) {
+      inputs.current[index - 1]?.focus();
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent) => {
+    const pasted = e.clipboardData.getData('text').replace(/\D/g, '');
+
+    if (pasted.length === length) {
+      onChange(pasted);
+      inputs.current[length - 1]?.focus();
+    }
+
+    e.preventDefault();
+  };
+
+  return (
+    <div className={styles.otpContainer} onPaste={handlePaste}>
+      {values.map((digit, i) => (
+        <input
+          key={i}
+          ref={el => (inputs.current[i] = el)}
+          type="text"
+          inputMode="numeric"
+          maxLength={1}
+          value={digit || ''}
+          className={styles.otpInput}
+          onChange={e => handleChange(i, e.target.value)}
+          onKeyDown={e => handleKeyDown(i, e)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default OtpInput;
diff --git a/src/TermsModal.tsx b/src/components/TermsModal.tsx
similarity index 98%
rename from src/TermsModal.tsx
rename to src/components/TermsModal.tsx
index ef4127c..c992a9d 100644
--- a/src/TermsModal.tsx
+++ b/src/components/TermsModal.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-import styles from './styles/termsModal.module.css';
+import styles from '@/styles/termsModal.module.css';
 
 interface TermsModalProps {
   isOpen: boolean;
diff --git a/src/components/phoneInput.tsx b/src/components/phoneInput.tsx
index 6909f3d..815a2a0 100644
--- a/src/components/phoneInput.tsx
+++ b/src/components/phoneInput.tsx
@@ -2,7 +2,7 @@ import { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js';
 import { useEffect, useState } from 'react';
 
 import styles from '../styles/login.module.css';
-import TermsModal from '../TermsModal';
+import TermsModal from './TermsModal';
 
 const countries = [
   { code: 'US', name: 'United States', dialCode: '+1', flag: '🇺🇸' },
diff --git a/src/styles/login.module.css b/src/styles/login.module.css
index e1fe70c..930c9fd 100644
--- a/src/styles/login.module.css
+++ b/src/styles/login.module.css
@@ -119,9 +119,84 @@
   border: 1px solid #d1d5db;
 }
 
-/* Optional: responsive adjustment */
 @media (max-width: 500px) {
   .phoneRow {
     grid-template-columns: 1fr;
   }
 }
+
+/* Fallback container */
+
+.fallbackCard {
+  margin-top: 18px;
+  padding: 18px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.fallbackHeader {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #f3f4f6;
+}
+
+.fallbackDescription {
+  font-size: 0.85rem;
+  color: #9ca3af;
+  line-height: 1.4;
+}
+
+.fallbackActions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.fallbackActionButton {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+
+  padding: 12px 14px;
+  border-radius: 8px;
+
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.fallbackActionButton:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.actionTitle {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #f9fafb;
+}
+
+.actionSubtext {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  margin-top: 2px;
+}
+
+.linkButton {
+  margin-top: 6px;
+  background: none;
+  border: none;
+  color: #60a5fa;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.linkButton:hover {
+  text-decoration: underline;
+}
diff --git a/src/styles/magiclink.module.css b/src/styles/magiclink.module.css
new file mode 100644
index 0000000..98c62da
--- /dev/null
+++ b/src/styles/magiclink.module.css
@@ -0,0 +1,133 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.card {
+  background-color: #1f2937;
+  padding: 2.5rem 2rem;
+  border-radius: 0.75rem;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
+  width: 100%;
+  max-width: 420px;
+  text-align: center;
+}
+
+/* ICON */
+
+.iconWrapper {
+  position: relative;
+  margin-bottom: 1.25rem;
+  display: flex;
+  justify-content: center;
+}
+
+.mailIcon {
+  width: 38px;
+  height: 38px;
+  color: #a5b4fc;
+  z-index: 2;
+}
+
+.iconRing {
+  position: absolute;
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: rgba(99, 102, 241, 0.15);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.6);
+    opacity: 0.8;
+  }
+  70% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+/* TEXT */
+
+.heading {
+  font-size: 1.55rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+}
+
+.message {
+  color: #d1d5db;
+  font-size: 0.95rem;
+  margin-bottom: 1rem;
+  line-height: 1.4;
+}
+
+.identifier {
+  font-weight: 600;
+  font-size: 1rem;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 0.45rem 0.6rem;
+  border-radius: 6px;
+  margin-bottom: 1rem;
+  display: inline-block;
+}
+
+.helperText {
+  color: #9ca3af;
+  font-size: 0.85rem;
+  margin-bottom: 0.6rem;
+  line-height: 1.4;
+}
+
+/* ACTIONS */
+
+.actions {
+  margin-top: 1.6rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.secondaryButton {
+  padding: 0.65rem;
+  border-radius: 8px;
+  border: 1px solid #374151;
+  background: #111827;
+  color: white;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.secondaryButton:hover:not(:disabled) {
+  background: #1f2937;
+}
+
+.secondaryButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cooldown {
+  font-size: 0.8rem;
+  color: #9ca3af;
+}
+
+.linkButton {
+  margin-top: 0.4rem;
+  background: none;
+  border: none;
+  color: #a5b4fc;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+
+.linkButton:hover {
+  text-decoration: underline;
+}
diff --git a/src/styles/otpInput.module.css b/src/styles/otpInput.module.css
new file mode 100644
index 0000000..5d29dbe
--- /dev/null
+++ b/src/styles/otpInput.module.css
@@ -0,0 +1,26 @@
+.otpContainer {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.otpInput {
+  width: 42px;
+  height: 48px;
+  text-align: center;
+  font-size: 1.2rem;
+  border-radius: 8px;
+  border: 1px solid #4b5563;
+  background: #374151;
+  color: white;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.otpInput:focus {
+  outline: none;
+  border-color: #60a5fa;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25);
+}
diff --git a/src/styles/verifyMagiclink.module.css b/src/styles/verifyMagiclink.module.css
new file mode 100644
index 0000000..b97a7b4
--- /dev/null
+++ b/src/styles/verifyMagiclink.module.css
@@ -0,0 +1,83 @@
+.container {
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.card {
+  background-color: #1f2937;
+  width: 100%;
+  max-width: 28rem;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+.title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 1rem;
+  color: white;
+}
+
+.verificationContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  margin: 20px 0;
+}
+
+.spinner {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 3px solid rgba(255, 255, 255, 0.15);
+  border-top-color: #60a5fa;
+  animation: spin 0.9s linear infinite;
+}
+
+.successIcon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(16, 185, 129, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checkIcon {
+  width: 22px;
+  height: 22px;
+  color: #34d399;
+  animation: checkPop 0.25s ease-out;
+}
+
+.successText {
+  color: #34d399;
+  font-size: 0.9rem;
+}
+
+@keyframes checkPop {
+  0% {
+    transform: scale(0.6);
+    opacity: 0;
+  }
+  80% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/views/EmailRegistration.tsx b/src/views/EmailRegistration.tsx
new file mode 100644
index 0000000..ba04668
--- /dev/null
+++ b/src/views/EmailRegistration.tsx
@@ -0,0 +1,166 @@
+import { useAuth } from '@/AuthProvider';
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import styles from '@/styles/verifyOTP.module.css';
+import { createFetchWithAuth } from '@/fetchWithAuth';
+import { isPasskeySupported } from '@/utils';
+import { useInternalAuth } from '@/context/InternalAuthContext';
+
+const EmailRegistration: React.FC = () => {
+  const navigate = useNavigate();
+  const { apiHost, mode } = useAuth();
+  const { validateToken } = useInternalAuth();
+
+  const [loading, setLoading] = useState(false);
+  const [emailOtp, setEmailOtp] = useState('');
+  const [emailTimeLeft, setEmailTimeLeft] = useState(300);
+  const [error, setError] = useState('');
+  const [resendMsg, setResendMsg] = useState('');
+  const [passkeyAvailable, setPasskeyAvailable] = useState(false);
+
+  const fetchWithAuth = createFetchWithAuth({
+    authMode: mode,
+    authHost: apiHost,
+  });
+
+  const onResendEmail = async () => {
+    setError('');
+    setResendMsg('');
+
+    const response = await fetchWithAuth(`/otp/generate-email-otp`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    if (!response.ok) {
+      setError(
+        'Failed to send Email code. If this persists, refresh the page and try again.'
+      );
+      return;
+    }
+
+    setResendMsg('Verification email has been resent.');
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (emailOtp.length !== 6) {
+      setError('Please enter a valid code.');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const response = await fetchWithAuth(`/otp/verify-email-otp`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          verificationToken: emailOtp,
+        }),
+        credentials: 'include',
+      });
+
+      if (!response.ok) {
+        setError('Verification failed.');
+        return;
+      }
+
+      if (passkeyAvailable) {
+        navigate('/registerPasskey');
+      } else {
+        await validateToken();
+        navigate('/');
+      }
+    } catch (err) {
+      console.error(err);
+      setError('Verification failed.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatTime = (seconds: number) => {
+    const m = Math.floor(seconds / 60)
+      .toString()
+      .padStart(2, '0');
+    const s = (seconds % 60).toString().padStart(2, '0');
+    return `${m}:${s}`;
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setEmailTimeLeft(prev => (prev > 0 ? prev - 1 : 0));
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    async function checkSupport() {
+      const supported = await isPasskeySupported();
+      setPasskeyAvailable(supported);
+    }
+
+    checkSupport();
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <h2 className={styles.title}>Verify Your Email</h2>
+
+        <p className={styles.subtitle}>
+          We sent you a verification email. Enter the code below.
+        </p>
+
+        {error && <p className={styles.error}>{error}</p>}
+        {resendMsg && <p className={styles.success}>{resendMsg}</p>}
+
+        <form onSubmit={handleSubmit} className={styles.form}>
+          <div>
+            <label htmlFor="emailCode" className={styles.label}>
+              Email Verification Code
+              <span className={styles.timer}>
+                {' '}
+                — Code expires in {formatTime(emailTimeLeft)}
+              </span>
+            </label>
+
+            <input
+              id="emailCode"
+              type="text"
+              maxLength={6}
+              value={emailOtp}
+              autoComplete="off"
+              onChange={e => setEmailOtp(e.target.value)}
+              className={styles.input}
+              required
+            />
+
+            <button type="button" onClick={onResendEmail} className={styles.resend}>
+              Resend code to email
+            </button>
+          </div>
+
+          <button type="submit" className={styles.button} disabled={loading}>
+            {loading ? 'Verifying...' : 'Verify & Continue'}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => navigate('/login')}
+            className={styles.toggle}
+          >
+            Back to login
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default EmailRegistration;
diff --git a/src/Login.tsx b/src/views/Login.tsx
similarity index 52%
rename from src/Login.tsx
rename to src/views/Login.tsx
index bff496a..489dad1 100644
--- a/src/Login.tsx
+++ b/src/views/Login.tsx
@@ -5,9 +5,10 @@ import { useInternalAuth } from '@/context/InternalAuthContext';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import styles from './styles/login.module.css';
-import { isPasskeySupported, isValidEmail, isValidPhoneNumber } from './utils';
-import { createFetchWithAuth } from './fetchWithAuth';
+import styles from '@/styles/login.module.css';
+import { isPasskeySupported, isValidEmail, isValidPhoneNumber } from '../utils';
+import { createFetchWithAuth } from '@/fetchWithAuth';
+import AuthFallbackOptions from '@/components/AuthFallbackOptions';
 
 const Login: React.FC = () => {
   const navigate = useNavigate();
@@ -22,6 +23,7 @@ const Login: React.FC = () => {
   const [emailError, setEmailError] = useState<string>('');
   const [identifierError, setIdentifierError] = useState<string>('');
   const [passkeyAvailable, setPasskeyAvailable] = useState(false);
+  const [showFallbackOptions, setShowFallbackOptions] = useState(false);
 
   const fetchWithAuth = createFetchWithAuth({
     authMode,
@@ -103,23 +105,26 @@ const Login: React.FC = () => {
   const login = async () => {
     setFormErrors('');
 
-    try {
-      const response = await fetchWithAuth(`/login`, {
-        method: 'POST',
-        body: JSON.stringify({ identifier, passkeyAvailable }),
-      });
+    const response = await fetchWithAuth(`/login`, {
+      method: 'POST',
+      body: JSON.stringify({ identifier, passkeyAvailable }),
+    });
 
-      if (!response.ok) {
-        setFormErrors('Failed to send login link. Please try again.');
-        return;
-      }
+    if (!response.ok) {
+      setFormErrors('Failed to send login link. Please try again.');
+      return;
+    }
+
+    if (!passkeyAvailable) {
+      setShowFallbackOptions(true);
+      return;
+    }
 
+    try {
       await handlePasskeyLogin();
     } catch (err) {
-      console.error('Unexpected login error', err);
-      setFormErrors(
-        'An unexpected error occured. Try again. If the problem persists, try resetting your password'
-      );
+      console.error('Passkey login failed', err);
+      setShowFallbackOptions(true);
     }
   };
 
@@ -140,7 +145,7 @@ const Login: React.FC = () => {
       const data = await response.json();
 
       if (data.message === 'Success') {
-        navigate('/verifyOTP');
+        navigate('/verifyPhoneOTP');
       }
       setFormErrors(
         'An unexpected error occured. Try again. If the problem persists, try resetting your password'
@@ -153,6 +158,43 @@ const Login: React.FC = () => {
     }
   };
 
+  const sendMagicLink = async () => {
+    try {
+      const response = await fetchWithAuth(`/magic-link`, {
+        method: 'GET',
+      });
+
+      if (!response.ok) {
+        setFormErrors('Failed to send magic link.');
+        return;
+      }
+
+      navigate('/magic-link-sent');
+    } catch (err) {
+      console.error(err);
+      setFormErrors('Failed to send magic link.');
+    }
+  };
+
+  const sendPhoneOtp = async () => {
+    try {
+      const response = await fetchWithAuth(`/login/phone-otp`, {
+        method: 'POST',
+        body: JSON.stringify({ identifier }),
+      });
+
+      if (!response.ok) {
+        setFormErrors('Failed to send OTP.');
+        return;
+      }
+
+      navigate('/verifyPhoneOTP');
+    } catch (err) {
+      console.error(err);
+      setFormErrors('Failed to send OTP.');
+    }
+  };
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -167,96 +209,94 @@ const Login: React.FC = () => {
           {mode === 'login' ? 'Sign In' : 'Create Account'}
         </h2>
 
-        {!passkeyAvailable ? (
-          <p className={styles.message}>
-            ❌ This device doesn't support passkey login. You must provide or register a
-            passkey.
-          </p>
-        ) : (
-          <>
-            <form onSubmit={handleSubmit}>
-              {mode === 'login' && (
+        <>
+          <form onSubmit={handleSubmit}>
+            {mode === 'login' && (
+              <div className={styles.inputGroup}>
+                <label htmlFor="identifier" className={styles.label}>
+                  Email Address / Phone Number
+                </label>
+                <input
+                  id="identifier"
+                  type="text"
+                  value={identifier}
+                  onChange={handleIdentifierChange}
+                  autoComplete="off"
+                  placeholder="Email or Phone Number"
+                  className={styles.input}
+                  onBlur={() => {
+                    if (identifier) {
+                      const isValid =
+                        isValidEmail(identifier) || isValidPhoneNumber(identifier);
+                      setIdentifierError(
+                        isValid ? '' : 'Please enter a valid email or phone number'
+                      );
+                    }
+                  }}
+                  required
+                />
+                <p className={styles.helperText}>
+                  Phone numbers must include a country code e.g. +1
+                </p>
+                {showFallbackOptions && (
+                  <AuthFallbackOptions
+                    identifier={identifier}
+                    onMagicLink={sendMagicLink}
+                    onPhoneOtp={sendPhoneOtp}
+                    onPasskeyRetry={handlePasskeyLogin}
+                  />
+                )}
+
+                {identifierError && <p className={styles.error}>{identifierError}</p>}
+              </div>
+            )}
+            {mode === 'register' && (
+              <>
                 <div className={styles.inputGroup}>
-                  <label htmlFor="identifier" className={styles.label}>
-                    Email Address / Phone Number
+                  <label htmlFor="email" className={styles.label}>
+                    Email Address
                   </label>
                   <input
-                    id="identifier"
-                    type="text"
-                    value={identifier}
-                    onChange={handleIdentifierChange}
+                    id="email"
+                    type="email"
+                    value={email}
+                    onChange={handleEmailChange}
                     autoComplete="off"
-                    placeholder="Email or Phone Number"
                     className={styles.input}
                     onBlur={() => {
-                      if (identifier) {
-                        const isValid =
-                          isValidEmail(identifier) || isValidPhoneNumber(identifier);
-                        setIdentifierError(
-                          isValid ? '' : 'Please enter a valid email or phone number'
-                        );
+                      if (email) {
+                        const isValid = isValidEmail(email);
+                        setEmailError(isValid ? '' : 'Please enter a valid email');
                       }
                     }}
                     required
                   />
-                  <p className={styles.helperText}>
-                    Phone numbers must include a country code e.g. +1
-                  </p>
-                  {identifierError && <p className={styles.error}>{identifierError}</p>}
+                  {emailError && <p className={styles.error}>{emailError}</p>}
                 </div>
-              )}
-
-              {mode === 'register' && (
-                <>
-                  <div className={styles.inputGroup}>
-                    <label htmlFor="email" className={styles.label}>
-                      Email Address
-                    </label>
-                    <input
-                      id="email"
-                      type="email"
-                      value={email}
-                      onChange={handleEmailChange}
-                      autoComplete="off"
-                      className={styles.input}
-                      onBlur={() => {
-                        if (email) {
-                          const isValid = isValidEmail(email);
-                          setEmailError(isValid ? '' : 'Please enter a valid email');
-                        }
-                      }}
-                      required
-                    />
-                    {emailError && <p className={styles.error}>{emailError}</p>}
-                  </div>
-
-                  <PhoneInputWithCountryCode
-                    phone={phone}
-                    setPhone={setPhone}
-                    phoneError={phoneError}
-                    setPhoneError={setPhoneError}
-                  />
-                </>
-              )}
-
-              <button type="submit" className={styles.button} disabled={!canSubmit()}>
-                {mode === 'login' ? 'Login' : 'Register'}
-              </button>
-
-              {formErrors && <p className={styles.error}>{formErrors}</p>}
-
-              <button
-                type="button"
-                onClick={() => setMode(mode === 'login' ? 'register' : 'login')}
-                className={styles.toggle}
-              >
-                {mode === 'login'
-                  ? "Don't have an account? Create one"
-                  : 'Already have an account? Sign in'}
-              </button>
-            </form>
-          </>
-        )}
+
+                <PhoneInputWithCountryCode
+                  phone={phone}
+                  setPhone={setPhone}
+                  phoneError={phoneError}
+                  setPhoneError={setPhoneError}
+                />
+              </>
+            )}
+            <button type="submit" className={styles.button} disabled={!canSubmit()}>
+              {mode === 'login' ? 'Login' : 'Register'}
+            </button>
+            {formErrors && <p className={styles.error}>{formErrors}</p>}
+            <button
+              type="button"
+              onClick={() => setMode(mode === 'login' ? 'register' : 'login')}
+              className={styles.toggle}
+            >
+              {mode === 'login'
+                ? "Don't have an account? Create one"
+                : 'Already have an account? Sign in'}
+            </button>
+          </form>
+        </>
       </div>
     </div>
   );
diff --git a/src/PassKeyLogin.tsx b/src/views/PassKeyLogin.tsx
similarity index 94%
rename from src/PassKeyLogin.tsx
rename to src/views/PassKeyLogin.tsx
index bdf1e51..6655534 100644
--- a/src/PassKeyLogin.tsx
+++ b/src/views/PassKeyLogin.tsx
@@ -4,8 +4,8 @@ import { useInternalAuth } from '@/context/InternalAuthContext';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import styles from './styles/passKeyLogin.module.css';
-import { createFetchWithAuth } from './fetchWithAuth';
+import styles from '@/styles/passKeyLogin.module.css';
+import { createFetchWithAuth } from '../fetchWithAuth';
 
 const PassKeyLogin: React.FC = () => {
   const navigate = useNavigate();
diff --git a/src/RegisterPassKey.tsx b/src/views/PassKeyRegistration.tsx
similarity index 94%
rename from src/RegisterPassKey.tsx
rename to src/views/PassKeyRegistration.tsx
index 62f8252..483d4aa 100644
--- a/src/RegisterPassKey.tsx
+++ b/src/views/PassKeyRegistration.tsx
@@ -9,11 +9,11 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import styles from '@/styles/registerPasskey.module.css';
-import { isPasskeySupported, parseUserAgent } from './utils';
-import { createFetchWithAuth } from './fetchWithAuth';
-import DeviceNameModal from './components/DeviceNameModal';
+import { isPasskeySupported, parseUserAgent } from '@/utils';
+import { createFetchWithAuth } from '@/fetchWithAuth';
+import DeviceNameModal from '@/components/DeviceNameModal';
 
-const RegisterPasskey: React.FC = () => {
+const PasskeyRegistration: React.FC = () => {
   const { apiHost, mode } = useAuth();
   const { validateToken } = useInternalAuth();
   const navigate = useNavigate();
@@ -177,4 +177,4 @@ const RegisterPasskey: React.FC = () => {
   );
 };
 
-export default RegisterPasskey;
+export default PasskeyRegistration;
diff --git a/src/VerifyOTP.tsx b/src/views/PhoneRegistration.tsx
similarity index 51%
rename from src/VerifyOTP.tsx
rename to src/views/PhoneRegistration.tsx
index b4387db..1df048a 100644
--- a/src/VerifyOTP.tsx
+++ b/src/views/PhoneRegistration.tsx
@@ -2,21 +2,19 @@ import { useAuth } from '@/AuthProvider';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import styles from './styles/verifyOTP.module.css';
-import { createFetchWithAuth } from './fetchWithAuth';
+import styles from '@/styles/verifyOTP.module.css';
+import { createFetchWithAuth } from '../fetchWithAuth';
+import OtpInput from '@/components/OtpInput';
 
-const VerifyOTP: React.FC = () => {
+const PhoneRegistration: React.FC = () => {
   const navigate = useNavigate();
   const { apiHost, mode } = useAuth();
 
-  const [emailOtp, setEmailOtp] = useState('');
   const [phoneOtp, setPhoneOtp] = useState('');
   const [phoneVerified, setPhoneVerified] = useState<boolean | null>(null);
-  const [emailVerified, setEmailVerified] = useState<boolean | null>(null);
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
   const [resendMsg, setResendMsg] = useState('');
-  const [emailTimeLeft, setEmailTimeLeft] = useState(300);
   const [phoneTimeLeft, setPhoneTimeLeft] = useState(300);
 
   const fetchWithAuth = createFetchWithAuth({
@@ -28,11 +26,6 @@ const VerifyOTP: React.FC = () => {
     e.preventDefault();
     setError('');
 
-    if (emailOtp.length !== 6) {
-      setError('Please enter a valid code.');
-      return;
-    }
-
     if (phoneOtp.length !== 6) {
       setError('Please enter a valid code.');
       return;
@@ -40,7 +33,6 @@ const VerifyOTP: React.FC = () => {
 
     setLoading(true);
     try {
-      verifyEmailOTP();
       verifyPhoneOTP();
     } catch {
       setError('Unexpected error occurred.');
@@ -78,60 +70,6 @@ const VerifyOTP: React.FC = () => {
     setLoading(false);
   };
 
-  const verifyEmailOTP = async () => {
-    setLoading(true);
-    try {
-      if (!emailVerified) {
-        const response = await fetchWithAuth(`/otp/verify-email-otp`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            verificationToken: emailOtp,
-          }),
-          credentials: 'include',
-        });
-
-        if (!response.ok) {
-          setError('Verification failed.');
-        } else {
-          setEmailVerified(true);
-        }
-      }
-    } catch (error: unknown) {
-      console.error(error);
-      setError('Verification failed.');
-    }
-
-    setLoading(false);
-  };
-
-  const onResendEmail = async () => {
-    setError('');
-    const response = await fetchWithAuth(`/otp/generate-email-otp`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    const data = await response.json();
-
-    if (!response.ok) {
-      setError(
-        'Failed to send Email code. If this persists, refresh the page and try again.'
-      );
-      return;
-    } else {
-      setResendMsg('Verification email has been resent.');
-      if (data.token) {
-        // Set a new token
-        localStorage.setItem('token', data.token);
-      }
-    }
-  };
-
   const onResendPhone = async () => {
     setError('');
     const response = await fetchWithAuth(`/otp/generate-phone-otp`, {
@@ -157,15 +95,10 @@ const VerifyOTP: React.FC = () => {
     }
   };
 
-  const handleResend = (type: 'email' | 'phone') => {
+  const handleResend = async () => {
     setResendMsg('');
-    if (type === 'email') {
-      onResendEmail();
-      setResendMsg('Verification email has been resent.');
-    } else {
-      onResendPhone();
-      setResendMsg('Verification SMS has been resent.');
-    }
+    await onResendPhone();
+    setResendMsg('Verification SMS has been resent.');
   };
 
   const getStatusIcon = (verified: boolean | null) => {
@@ -182,14 +115,6 @@ const VerifyOTP: React.FC = () => {
     return `${m}:${s}`;
   };
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setEmailTimeLeft(prev => (prev > 0 ? prev - 1 : 0));
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, []);
-
   useEffect(() => {
     const interval = setInterval(() => {
       setPhoneTimeLeft(prev => (prev > 0 ? prev - 1 : 0));
@@ -199,52 +124,38 @@ const VerifyOTP: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    if (emailVerified && phoneVerified) {
-      navigate('/registerPasskey');
+    const nextStep = async () => {
+      const response = await fetchWithAuth(`/otp/generate-email-otp`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        setError(
+          'Failed to send Email code. If this persists, refresh the page and try registering again.'
+        );
+        return;
+      } else {
+        navigate('/verifyEmailOTP');
+      }
+    };
+    if (phoneVerified) {
+      nextStep();
     }
-  }, [emailVerified, phoneVerified, navigate]);
+  }, [phoneVerified, navigate, fetchWithAuth]);
 
   return (
     <div className={styles.container}>
       <div className={styles.card}>
-        <h2 className={styles.title}>Verify Your Contact Info</h2>
-        <p className={styles.subtitle}>
-          Enter the codes sent to your email and phone number.
-        </p>
+        <h2 className={styles.title}>Verify Your Phone Number</h2>
+        <p className={styles.subtitle}>Enter the code sent to your phone number.</p>
 
         {error && <p className={styles.error}>{error}</p>}
         {resendMsg && <p className={styles.success}>{resendMsg}</p>}
 
         <form onSubmit={handleSubmit} className={styles.form}>
-          <div>
-            <label htmlFor="emailCode" className={styles.label}>
-              Email Verification Code {getStatusIcon(emailVerified)} -{' '}
-              <span className={styles.timer}>
-                Code expires in: {formatTime(emailTimeLeft)}
-              </span>
-            </label>
-            <input
-              id="emailCode"
-              type="text"
-              maxLength={6}
-              value={emailOtp}
-              autoComplete="off"
-              onChange={e => {
-                setEmailOtp(e.target.value);
-                setEmailVerified(null);
-              }}
-              className={styles.input}
-              required
-            />
-            <button
-              type="button"
-              onClick={() => handleResend('email')}
-              className={styles.resend}
-            >
-              Resend code to email
-            </button>
-          </div>
-
           <div>
             <label htmlFor="phoneCode" className={styles.label}>
               Phone Verification Code {getStatusIcon(phoneVerified)} -{' '}
@@ -252,24 +163,10 @@ const VerifyOTP: React.FC = () => {
                 Code expires in: {formatTime(phoneTimeLeft)}
               </span>
             </label>
-            <input
-              id="phoneCode"
-              type="text"
-              maxLength={6}
-              pattern="\d{6}"
-              inputMode="numeric"
-              value={phoneOtp}
-              autoComplete="off"
-              onChange={e => {
-                setPhoneOtp(e.target.value);
-                setPhoneVerified(null);
-              }}
-              className={styles.input}
-              required
-            />
+            <OtpInput length={6} value={phoneOtp} onChange={setPhoneOtp} />
             <button
               type="button"
-              onClick={() => handleResend('phone')}
+              onClick={() => handleResend()}
               className={styles.resend}
             >
               Resend code to phone
@@ -293,4 +190,4 @@ const VerifyOTP: React.FC = () => {
   );
 };
 
-export default VerifyOTP;
+export default PhoneRegistration;
diff --git a/src/views/VerifyMagicLink.tsx b/src/views/VerifyMagicLink.tsx
new file mode 100644
index 0000000..2488a77
--- /dev/null
+++ b/src/views/VerifyMagicLink.tsx
@@ -0,0 +1,98 @@
+import { useAuth } from '@/AuthProvider';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+import styles from '@/styles/verifyMagiclink.module.css';
+import { createFetchWithAuth } from '@/fetchWithAuth';
+
+const VerifyMagicLink: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const token = searchParams.get('token');
+  const { apiHost, mode } = useAuth();
+
+  const [error, setError] = useState('');
+  const [successMsg, setSuccessMsg] = useState('');
+
+  const fetchWithAuth = createFetchWithAuth({
+    authMode: mode,
+    authHost: apiHost,
+  });
+
+  useEffect(() => {
+    const verify = async () => {
+      const response = await fetchWithAuth(`/magic-link/verify/${token}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        console.error('Failed to verify token');
+        setError('Failed to verify token');
+        return;
+      }
+
+      const channel = new BroadcastChannel('seamless-auth');
+
+      channel.postMessage({
+        type: 'MAGIC_LINK_AUTH_SUCCESS',
+      });
+
+      setSuccessMsg(
+        'You have been verified on the device and browser that initiated this request'
+      );
+
+      setTimeout(() => {
+        navigate('/');
+      }, 900);
+    };
+    if (token) {
+      verify();
+    } else {
+      setError('Missing token for verification.');
+      console.error('No token found', token);
+    }
+  }, [token, fetchWithAuth, navigate]);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <h1 className={styles.title}>Verifying your login</h1>
+
+        <div className={styles.verificationContent}>
+          {!successMsg && !error && <div className={styles.spinner}></div>}
+
+          {successMsg && (
+            <div className={styles.successIcon}>
+              <svg
+                viewBox="0 0 24 24"
+                className={styles.checkIcon}
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <path d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+          )}
+
+          {!successMsg && !error && (
+            <p className={styles.helperText}>
+              Please wait while we securely verify your sign-in link.
+            </p>
+          )}
+
+          {successMsg && (
+            <p className={styles.successText}>Login verified. Redirecting…</p>
+          )}
+
+          {error && <p className={styles.error}>{error}</p>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VerifyMagicLink;
diff --git a/tests/AuthFallbackOptions.test.tsx b/tests/AuthFallbackOptions.test.tsx
new file mode 100644
index 0000000..e563bb8
--- /dev/null
+++ b/tests/AuthFallbackOptions.test.tsx
@@ -0,0 +1,133 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import AuthFallbackOptions from '@/components/AuthFallbackOptions';
+
+import { isValidEmail, isValidPhoneNumber } from '@/utils';
+
+jest.mock('@/utils', () => ({
+  isValidEmail: jest.fn(),
+  isValidPhoneNumber: jest.fn(),
+}));
+
+describe('AuthFallbackOptions', () => {
+  const magicLinkHandler = jest.fn();
+  const phoneOtpHandler = jest.fn();
+  const passkeyHandler = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders magic link option when identifier is an email', () => {
+    (isValidEmail as jest.Mock).mockReturnValue(true);
+    (isValidPhoneNumber as jest.Mock).mockReturnValue(false);
+
+    render(
+      <AuthFallbackOptions
+        identifier="test@example.com"
+        onMagicLink={magicLinkHandler}
+        onPhoneOtp={phoneOtpHandler}
+        onPasskeyRetry={passkeyHandler}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: /email magic link/i })).toBeInTheDocument();
+
+    expect(
+      screen.queryByRole('button', { name: /text message code/i })
+    ).not.toBeInTheDocument();
+  });
+
+  test('renders phone OTP option when identifier is a phone number', () => {
+    (isValidEmail as jest.Mock).mockReturnValue(false);
+    (isValidPhoneNumber as jest.Mock).mockReturnValue(true);
+
+    render(
+      <AuthFallbackOptions
+        identifier="+15555555555"
+        onMagicLink={magicLinkHandler}
+        onPhoneOtp={phoneOtpHandler}
+        onPasskeyRetry={passkeyHandler}
+      />
+    );
+
+    expect(
+      screen.getByRole('button', { name: /text message code/i })
+    ).toBeInTheDocument();
+
+    expect(
+      screen.queryByRole('button', { name: /email magic link/i })
+    ).not.toBeInTheDocument();
+  });
+
+  test('calls magic link handler when magic link button is clicked', () => {
+    (isValidEmail as jest.Mock).mockReturnValue(true);
+    (isValidPhoneNumber as jest.Mock).mockReturnValue(false);
+
+    render(
+      <AuthFallbackOptions
+        identifier="test@example.com"
+        onMagicLink={magicLinkHandler}
+        onPhoneOtp={phoneOtpHandler}
+        onPasskeyRetry={passkeyHandler}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /email magic link/i }));
+
+    expect(magicLinkHandler).toHaveBeenCalledTimes(1);
+  });
+
+  test('calls phone OTP handler when phone button is clicked', () => {
+    (isValidEmail as jest.Mock).mockReturnValue(false);
+    (isValidPhoneNumber as jest.Mock).mockReturnValue(true);
+
+    render(
+      <AuthFallbackOptions
+        identifier="+15555555555"
+        onMagicLink={magicLinkHandler}
+        onPhoneOtp={phoneOtpHandler}
+        onPasskeyRetry={passkeyHandler}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /text message code/i }));
+
+    expect(phoneOtpHandler).toHaveBeenCalledTimes(1);
+  });
+
+  test('always renders passkey retry option', () => {
+    (isValidEmail as jest.Mock).mockReturnValue(false);
+    (isValidPhoneNumber as jest.Mock).mockReturnValue(false);
+
+    render(
+      <AuthFallbackOptions
+        identifier="anything"
+        onMagicLink={magicLinkHandler}
+        onPhoneOtp={phoneOtpHandler}
+        onPasskeyRetry={passkeyHandler}
+      />
+    );
+
+    expect(
+      screen.getByRole('button', { name: /try passkey anyway/i })
+    ).toBeInTheDocument();
+  });
+
+  test('calls passkey retry handler when clicked', () => {
+    (isValidEmail as jest.Mock).mockReturnValue(false);
+    (isValidPhoneNumber as jest.Mock).mockReturnValue(false);
+
+    render(
+      <AuthFallbackOptions
+        identifier="anything"
+        onMagicLink={magicLinkHandler}
+        onPhoneOtp={phoneOtpHandler}
+        onPasskeyRetry={passkeyHandler}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /try passkey anyway/i }));
+
+    expect(passkeyHandler).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/tests/AuthRoutes.test.tsx b/tests/AuthRoutes.test.tsx
index 1496c9b..d97a45b 100644
--- a/tests/AuthRoutes.test.tsx
+++ b/tests/AuthRoutes.test.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
-import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import { AuthRoutes } from '../src/AuthRoutes';
 
-jest.mock('@/Login', () => () => <div>Login Page</div>);
-jest.mock('@/MfaLogin', () => () => <div>MFA Login Page</div>);
-jest.mock('@/PassKeyLogin', () => () => <div>Passkey Login Page</div>);
-jest.mock('@/RegisterPassKey', () => () => <div>Register Passkey Page</div>);
-jest.mock('@/VerifyOTP', () => () => <div>Verify OTP Page</div>);
+jest.mock('@/views/Login', () => () => <div>Login Page</div>);
+jest.mock('@/views/PassKeyLogin', () => () => <div>Passkey Login Page</div>);
+jest.mock('@/views/PassKeyRegistration', () => () => <div>Register Passkey Page</div>);
+jest.mock('@/views/PhoneRegistration', () => () => <div>Verify Phone Page</div>);
 
 describe('AuthRoutes', () => {
   it('renders Login page on /login', () => {
@@ -19,15 +17,6 @@ describe('AuthRoutes', () => {
     expect(screen.getByText('Login Page')).toBeInTheDocument();
   });
 
-  it('renders MFA Login page on /mfaLogin', () => {
-    render(
-      <MemoryRouter initialEntries={['/mfaLogin']}>
-        <AuthRoutes />
-      </MemoryRouter>
-    );
-    expect(screen.getByText('MFA Login Page')).toBeInTheDocument();
-  });
-
   it('renders Passkey Login page on /passKeyLogin', () => {
     render(
       <MemoryRouter initialEntries={['/passKeyLogin']}>
@@ -46,13 +35,13 @@ describe('AuthRoutes', () => {
     expect(screen.getByText('Register Passkey Page')).toBeInTheDocument();
   });
 
-  it('renders Verify OTP page on /verifyOTP', () => {
+  it('renders Phone OTP page on /verifyPhoneOTP', () => {
     render(
-      <MemoryRouter initialEntries={['/verifyOTP']}>
+      <MemoryRouter initialEntries={['/verifyPhoneOTP']}>
         <AuthRoutes />
       </MemoryRouter>
     );
-    expect(screen.getByText('Verify OTP Page')).toBeInTheDocument();
+    expect(screen.getByText('Verify Phone Page')).toBeInTheDocument();
   });
 
   it('redirects unknown routes to /login', () => {
diff --git a/tests/EmailRegistration.test.tsx b/tests/EmailRegistration.test.tsx
new file mode 100644
index 0000000..5f5cb52
--- /dev/null
+++ b/tests/EmailRegistration.test.tsx
@@ -0,0 +1,169 @@
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
+import EmailRegistration from '@/views/EmailRegistration';
+
+import { useAuth } from '@/AuthProvider';
+import { useInternalAuth } from '@/context/InternalAuthContext';
+import { createFetchWithAuth } from '@/fetchWithAuth';
+import { isPasskeySupported } from '@/utils';
+
+import { useNavigate } from 'react-router-dom';
+
+jest.mock('@/AuthProvider');
+jest.mock('@/context/InternalAuthContext');
+jest.mock('@/fetchWithAuth');
+jest.mock('@/utils');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+describe('EmailRegistration', () => {
+  const navigate = jest.fn();
+  const validateToken = jest.fn();
+  const mockFetch = jest.fn();
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+
+    (useNavigate as jest.Mock).mockReturnValue(navigate);
+
+    (useAuth as jest.Mock).mockReturnValue({
+      apiHost: 'http://localhost',
+      mode: 'web',
+    });
+
+    (useInternalAuth as jest.Mock).mockReturnValue({
+      validateToken,
+    });
+
+    (createFetchWithAuth as jest.Mock).mockReturnValue(mockFetch);
+
+    (isPasskeySupported as jest.Mock).mockResolvedValue(false);
+
+    mockFetch.mockResolvedValue({ ok: true });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.useRealTimers();
+  });
+
+  test('renders verification page', () => {
+    render(<EmailRegistration />);
+
+    expect(screen.getByText(/verify your email/i)).toBeInTheDocument();
+  });
+
+  test('shows validation error if OTP is not 6 digits', async () => {
+    render(<EmailRegistration />);
+
+    fireEvent.change(screen.getByLabelText(/email verification code/i), {
+      target: { value: '123' },
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: /verify & continue/i }));
+
+    expect(screen.getByText(/please enter a valid code/i)).toBeInTheDocument();
+  });
+
+  test('submits OTP and verifies email', async () => {
+    mockFetch.mockResolvedValueOnce({ ok: true });
+
+    render(<EmailRegistration />);
+
+    fireEvent.change(screen.getByLabelText(/email verification code/i), {
+      target: { value: '123456' },
+    });
+
+    await act(async () => {
+      fireEvent.submit(screen.getByRole('button', { name: /verify & continue/i }));
+    });
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      '/otp/verify-email-otp',
+      expect.objectContaining({
+        method: 'POST',
+      })
+    );
+  });
+
+  test('resend email triggers API call', async () => {
+    render(<EmailRegistration />);
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /resend code to email/i }));
+    });
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      '/otp/generate-email-otp',
+      expect.objectContaining({
+        method: 'GET',
+      })
+    );
+  });
+
+  test('timer counts down', () => {
+    render(<EmailRegistration />);
+
+    expect(screen.getByText(/05:00/)).toBeInTheDocument();
+
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(screen.getByText(/04:59/)).toBeInTheDocument();
+  });
+
+  test('successful verification navigates to registerPasskey if supported', async () => {
+    (isPasskeySupported as jest.Mock).mockResolvedValue(true);
+    mockFetch.mockResolvedValue({ ok: true });
+
+    render(<EmailRegistration />);
+
+    await waitFor(() => {
+      expect(isPasskeySupported).toHaveBeenCalled();
+    });
+
+    fireEvent.change(screen.getByLabelText(/email verification code/i), {
+      target: { value: '123456' },
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /verify & continue/i }));
+    });
+
+    await waitFor(() => {
+      expect(isPasskeySupported).toHaveBeenCalled();
+    });
+
+    expect(navigate).toHaveBeenCalledWith('/registerPasskey');
+  });
+
+  test('successful verification logs in if passkeys not supported', async () => {
+    (isPasskeySupported as jest.Mock).mockResolvedValue(false);
+    mockFetch.mockResolvedValue({ ok: true });
+
+    render(<EmailRegistration />);
+
+    fireEvent.change(screen.getByLabelText(/email verification code/i), {
+      target: { value: '123456' },
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /verify & continue/i }));
+    });
+
+    await act(async () => {});
+
+    expect(validateToken).toHaveBeenCalled();
+    expect(navigate).toHaveBeenCalledWith('/');
+  });
+
+  test('back to login navigates to login page', () => {
+    render(<EmailRegistration />);
+
+    fireEvent.click(screen.getByRole('button', { name: /back to login/i }));
+
+    expect(navigate).toHaveBeenCalledWith('/login');
+  });
+});
diff --git a/tests/MagicLinkSent.test.tsx b/tests/MagicLinkSent.test.tsx
new file mode 100644
index 0000000..e2607b0
--- /dev/null
+++ b/tests/MagicLinkSent.test.tsx
@@ -0,0 +1,143 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import MagicLinkSent from '@/components/MagicLinkSent';
+
+import { useAuth } from '@/AuthProvider';
+import { useInternalAuth } from '@/context/InternalAuthContext';
+import { createFetchWithAuth } from '@/fetchWithAuth';
+
+import { useNavigate, useLocation } from 'react-router-dom';
+
+jest.mock('@/AuthProvider');
+jest.mock('@/context/InternalAuthContext');
+jest.mock('@/fetchWithAuth');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+  useLocation: jest.fn(),
+}));
+
+describe('MagicLinkSent', () => {
+  const navigate = jest.fn();
+  const validateToken = jest.fn();
+  const mockFetch = jest.fn();
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+
+    (useNavigate as jest.Mock).mockReturnValue(navigate);
+
+    (useLocation as jest.Mock).mockReturnValue({
+      state: { identifier: 'test@example.com' },
+    });
+
+    (useAuth as jest.Mock).mockReturnValue({
+      apiHost: 'http://localhost',
+      mode: 'web',
+    });
+
+    (useInternalAuth as jest.Mock).mockReturnValue({
+      validateToken,
+    });
+
+    (createFetchWithAuth as jest.Mock).mockReturnValue(mockFetch);
+
+    mockFetch.mockResolvedValue({ status: 200 });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.useRealTimers();
+  });
+
+  test('renders identifier from router state', () => {
+    render(<MagicLinkSent />);
+
+    expect(screen.getByText('test@example.com')).toBeInTheDocument();
+  });
+
+  test('cooldown timer counts down', () => {
+    render(<MagicLinkSent />);
+
+    expect(screen.getByText(/available in 30s/i)).toBeInTheDocument();
+
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(screen.getByText(/available in 29s/i)).toBeInTheDocument();
+  });
+
+  test('resend button disabled during cooldown', () => {
+    render(<MagicLinkSent />);
+
+    const button = screen.getByRole('button', { name: /resend link/i });
+
+    expect(button).toBeDisabled();
+  });
+
+  test('resend triggers request when cooldown reaches zero', async () => {
+    render(<MagicLinkSent />);
+
+    act(() => {
+      jest.advanceTimersByTime(30000);
+    });
+
+    const button = screen.getByRole('button', { name: /resend link/i });
+
+    await act(async () => {
+      fireEvent.click(button);
+    });
+
+    expect(mockFetch).toHaveBeenCalledWith('/magic-link', expect.any(Object));
+  });
+
+  test('change email button navigates to login', () => {
+    render(<MagicLinkSent />);
+
+    fireEvent.click(screen.getByRole('button', { name: /change email or phone/i }));
+
+    expect(navigate).toHaveBeenCalledWith('/login');
+  });
+
+  test('broadcast channel success triggers login', async () => {
+    const close = jest.fn();
+
+    let createdChannel: any;
+
+    (global as any).BroadcastChannel = jest.fn().mockImplementation(() => {
+      createdChannel = {
+        onmessage: null,
+        close,
+      };
+
+      return createdChannel;
+    });
+
+    mockFetch.mockResolvedValue({ status: 200 });
+
+    render(<MagicLinkSent />);
+
+    await act(async () => {
+      await createdChannel.onmessage({
+        data: { type: 'MAGIC_LINK_AUTH_SUCCESS' },
+      });
+    });
+
+    expect(mockFetch).toHaveBeenCalledWith('/magic-link/check', expect.any(Object));
+    expect(validateToken).toHaveBeenCalledTimes(1);
+    expect(navigate).toHaveBeenCalledWith('/');
+  });
+
+  test('polling success triggers login', async () => {
+    render(<MagicLinkSent />);
+
+    await act(async () => {
+      jest.advanceTimersByTime(5000);
+    });
+
+    expect(mockFetch).toHaveBeenCalledWith('/magic-link/check', expect.any(Object));
+
+    expect(validateToken).toHaveBeenCalled();
+    expect(navigate).toHaveBeenCalledWith('/');
+  });
+});
diff --git a/tests/MfaLogin.test.tsx b/tests/MfaLogin.test.tsx
deleted file mode 100644
index f4520f6..0000000
--- a/tests/MfaLogin.test.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
-import MfaLogin from '../src/MfaLogin';
-
-const mockNavigate = jest.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useNavigate: () => mockNavigate,
-}));
-
-const mockValidateToken = jest.fn();
-jest.mock('@/AuthProvider', () => ({
-  useAuth: () => ({ apiHost: 'https://api.example.com' }),
-}));
-jest.mock('@/context/InternalAuthContext', () => ({
-  useInternalAuth: () => ({ validateToken: mockValidateToken }),
-}));
-
-beforeEach(() => {
-  jest.resetAllMocks();
-  global.fetch = jest.fn().mockResolvedValue({
-    ok: true,
-    json: async () => ({}),
-  });
-});
-
-describe('MfaLogin', () => {
-  it('renders MFA options', () => {
-    render(<MfaLogin />);
-    expect(screen.getByText(/Multi-factor Authentication/i)).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', { name: /Send code to phone/i })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', { name: /Send code to email/i })
-    ).toBeInTheDocument();
-  });
-
-  it('sends phone OTP when clicking phone button', async () => {
-    (global.fetch as jest.Mock).mockResolvedValue({ ok: true });
-
-    render(<MfaLogin />);
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: /Send code to phone/i }));
-    });
-
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        'https://api.example.com/otp/generate-login-phone-otp',
-        expect.objectContaining({ method: 'GET' })
-      );
-      expect(screen.getByText(/Verification SMS has been sent/i)).toBeInTheDocument();
-    });
-  });
-
-  it('sends email OTP when clicking email button', async () => {
-    (global.fetch as jest.Mock).mockResolvedValueOnce({ ok: true });
-
-    render(<MfaLogin />);
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: /Send code to email/i }));
-    });
-
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        'https://api.example.com/otp/generate-login-email-otp',
-        expect.objectContaining({ method: 'GET' })
-      );
-      expect(screen.getByText(/Verification email has been sent/i)).toBeInTheDocument();
-    });
-  });
-
-  it('shows error if sendOTP fails', async () => {
-    (global.fetch as jest.Mock).mockResolvedValueOnce({ ok: false });
-    (global.fetch as jest.Mock).mockResolvedValueOnce({ ok: false });
-
-    render(<MfaLogin />);
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: /Send code to phone/i }));
-    });
-    await waitFor(() => {
-      expect(screen.getByText(/Failed to send phone code/i)).toBeInTheDocument();
-    });
-  });
-
-  it('verifies OTP successfully for email', async () => {
-    (global.fetch as jest.Mock).mockResolvedValueOnce({ ok: true }); // verify-login-email-otp
-
-    render(<MfaLogin />);
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: /Send code to email/i }));
-    });
-
-    // Step 2: Type OTP
-    await waitFor(() => {
-      fireEvent.change(screen.getByPlaceholderText(/••••••/i), {
-        target: { value: '123456' },
-      });
-    });
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: /Verify/i }));
-    });
-
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        'https://api.example.com/otp/verify-login-email-otp',
-        expect.objectContaining({
-          method: 'POST',
-          body: JSON.stringify({ verificationToken: '123456' }),
-        })
-      );
-      expect(mockValidateToken).toHaveBeenCalled();
-      expect(mockNavigate).toHaveBeenCalledWith('/');
-    });
-  });
-
-  it('shows error when OTP verification fails', async () => {
-    (global.fetch as jest.Mock).mockResolvedValueOnce({ ok: false });
-    (global.fetch as jest.Mock).mockResolvedValueOnce({ ok: false });
-
-    render(<MfaLogin />);
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: /Send code to phone/i }));
-    });
-
-    await waitFor(() => {
-      fireEvent.change(screen.getByPlaceholderText(/••••••/i), {
-        target: { value: '111111' },
-      });
-    });
-
-    fireEvent.click(screen.getByRole('button', { name: /Verify/i }));
-
-    await waitFor(() => {
-      expect(screen.getByText(/Verification failed/i)).toBeInTheDocument();
-    });
-  });
-
-  it('disables Verify button until OTP is 6 digits', async () => {
-    render(<MfaLogin />);
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: /Send code to phone/i }));
-    });
-    const verifyBtn = screen.getByRole('button', { name: /Verify/i });
-    expect(verifyBtn).toBeDisabled();
-  });
-});
diff --git a/tests/OtpInuput.test.tsx b/tests/OtpInuput.test.tsx
new file mode 100644
index 0000000..a3d0224
--- /dev/null
+++ b/tests/OtpInuput.test.tsx
@@ -0,0 +1,96 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import OtpInput from '@/components/OtpInput';
+
+describe('OtpInput', () => {
+  const onChange = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders default number of inputs (6)', () => {
+    render(<OtpInput value="" onChange={onChange} />);
+
+    const inputs = screen.getAllByRole('textbox');
+    expect(inputs).toHaveLength(6);
+  });
+
+  test('renders custom length', () => {
+    render(<OtpInput length={4} value="" onChange={onChange} />);
+
+    const inputs = screen.getAllByRole('textbox');
+    expect(inputs).toHaveLength(4);
+  });
+
+  test('calls onChange when typing a number', () => {
+    render(<OtpInput value="" onChange={onChange} />);
+
+    const inputs = screen.getAllByRole('textbox');
+
+    fireEvent.change(inputs[0], { target: { value: '1' } });
+
+    expect(onChange).toHaveBeenCalledWith('1');
+  });
+
+  test('rejects non-numeric input', () => {
+    render(<OtpInput value="" onChange={onChange} />);
+
+    const inputs = screen.getAllByRole('textbox');
+
+    fireEvent.change(inputs[0], { target: { value: 'a' } });
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test('moves focus to next input after entering digit', () => {
+    render(<OtpInput value="" onChange={onChange} />);
+
+    const inputs = screen.getAllByRole('textbox');
+
+    const focusSpy = jest.spyOn(inputs[1], 'focus');
+
+    fireEvent.change(inputs[0], { target: { value: '1' } });
+
+    expect(focusSpy).toHaveBeenCalled();
+  });
+
+  test('moves focus back on backspace when current empty', () => {
+    render(<OtpInput value="1" onChange={onChange} />);
+
+    const inputs = screen.getAllByRole('textbox');
+
+    inputs[1].focus();
+
+    fireEvent.keyDown(inputs[1], { key: 'Backspace' });
+
+    expect(document.activeElement).toBe(inputs[0]);
+  });
+
+  test('handles paste of full otp', () => {
+    render(<OtpInput value="" onChange={onChange} />);
+
+    const container = screen.getAllByRole('textbox')[0].parentElement!;
+
+    fireEvent.paste(container, {
+      clipboardData: {
+        getData: () => '123456',
+      },
+    });
+
+    expect(onChange).toHaveBeenCalledWith('123456');
+  });
+
+  test('ignores paste if length does not match', () => {
+    render(<OtpInput value="" onChange={onChange} />);
+
+    const container = screen.getAllByRole('textbox')[0].parentElement!;
+
+    fireEvent.paste(container, {
+      clipboardData: {
+        getData: () => '123',
+      },
+    });
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
diff --git a/tests/PassKeyLogin.test.tsx b/tests/PassKeyLogin.test.tsx
index f11fa31..48d3df3 100644
--- a/tests/PassKeyLogin.test.tsx
+++ b/tests/PassKeyLogin.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import PassKeyLogin from '../src/PassKeyLogin';
+import PassKeyLogin from '../src/views/PassKeyLogin';
 
 // 🧠 Mock react-router navigate
 const mockNavigate = jest.fn();
diff --git a/tests/PhoneInput.test.tsx b/tests/PhoneInput.test.tsx
index bb5c1c2..b0a3701 100644
--- a/tests/PhoneInput.test.tsx
+++ b/tests/PhoneInput.test.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import PhoneInputWithCountryCode from '../src/components/phoneInput';
+import PhoneInputWithCountryCode from '@/components/phoneInput';
 
 jest.mock('libphonenumber-js', () => ({
   AsYouType: jest.fn().mockImplementation(() => ({
@@ -10,7 +9,7 @@ jest.mock('libphonenumber-js', () => ({
 }));
 
 jest.mock(
-  '../src/TermsModal',
+  '@/components/TermsModal',
   () => (props: any) =>
     props.isOpen ? <div data-testid="terms-modal">Modal Open</div> : null
 );
diff --git a/tests/PhoneRegistration.test.tsx b/tests/PhoneRegistration.test.tsx
new file mode 100644
index 0000000..d620734
--- /dev/null
+++ b/tests/PhoneRegistration.test.tsx
@@ -0,0 +1,159 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import PhoneRegistration from '@/views/PhoneRegistration';
+
+import { useAuth } from '@/AuthProvider';
+import { createFetchWithAuth } from '@/fetchWithAuth';
+import { useNavigate } from 'react-router-dom';
+
+jest.mock('@/AuthProvider');
+jest.mock('@/fetchWithAuth');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+jest.mock('@/components/OtpInput', () => (props: any) => (
+  <input
+    data-testid="otp-input"
+    value={props.value}
+    onChange={e => props.onChange(e.target.value)}
+  />
+));
+
+describe('PhoneRegistration', () => {
+  const navigate = jest.fn();
+  const mockFetch = jest.fn();
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+
+    (useNavigate as jest.Mock).mockReturnValue(navigate);
+
+    (useAuth as jest.Mock).mockReturnValue({
+      apiHost: 'http://localhost',
+      mode: 'web',
+    });
+
+    (createFetchWithAuth as jest.Mock).mockReturnValue(mockFetch);
+
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({}),
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.useRealTimers();
+    localStorage.clear();
+  });
+
+  test('renders phone verification screen', () => {
+    render(<PhoneRegistration />);
+
+    expect(screen.getByText(/verify your phone number/i)).toBeInTheDocument();
+  });
+
+  test('shows error when OTP is not 6 digits', () => {
+    render(<PhoneRegistration />);
+
+    fireEvent.change(screen.getByTestId('otp-input'), {
+      target: { value: '123' },
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: /verify & continue/i }));
+
+    expect(screen.getByText(/please enter a valid code/i)).toBeInTheDocument();
+  });
+
+  test('submits OTP verification request', async () => {
+    render(<PhoneRegistration />);
+
+    fireEvent.change(screen.getByTestId('otp-input'), {
+      target: { value: '123456' },
+    });
+
+    await act(async () => {
+      fireEvent.submit(screen.getByRole('button', { name: /verify & continue/i }));
+    });
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      '/otp/verify-phone-otp',
+      expect.objectContaining({
+        method: 'POST',
+      })
+    );
+  });
+
+  test('resend SMS triggers API call', async () => {
+    render(<PhoneRegistration />);
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /resend code to phone/i }));
+    });
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      '/otp/generate-phone-otp',
+      expect.objectContaining({
+        method: 'GET',
+      })
+    );
+  });
+
+  test('resend stores token if returned', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ token: 'abc123' }),
+    });
+
+    render(<PhoneRegistration />);
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /resend code to phone/i }));
+    });
+
+    expect(localStorage.getItem('token')).toBe('abc123');
+  });
+
+  test('timer counts down', () => {
+    render(<PhoneRegistration />);
+
+    expect(screen.getByText(/05:00/)).toBeInTheDocument();
+
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(screen.getByText(/04:59/)).toBeInTheDocument();
+  });
+
+  test('successful phone verification triggers email OTP and navigation', async () => {
+    mockFetch
+      .mockResolvedValueOnce({ ok: true }) // verify phone
+      .mockResolvedValueOnce({ ok: true }); // generate email otp
+
+    render(<PhoneRegistration />);
+
+    fireEvent.change(screen.getByTestId('otp-input'), {
+      target: { value: '123456' },
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /verify & continue/i }));
+    });
+
+    await act(async () => {});
+
+    expect(mockFetch).toHaveBeenCalledWith('/otp/generate-email-otp', expect.any(Object));
+
+    expect(navigate).toHaveBeenCalledWith('/verifyEmailOTP');
+  });
+
+  test('back to login navigates correctly', () => {
+    render(<PhoneRegistration />);
+
+    fireEvent.click(screen.getByRole('button', { name: /back to login/i }));
+
+    expect(navigate).toHaveBeenCalledWith('/login');
+  });
+});
diff --git a/tests/RegisterPassKey.test.tsx b/tests/RegisterPassKey.test.tsx
index 05e6782..53ccd0d 100644
--- a/tests/RegisterPassKey.test.tsx
+++ b/tests/RegisterPassKey.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import RegisterPasskey from '../src/RegisterPassKey';
+import RegisterPasskey from '../src/views/PassKeyRegistration';
 
 const mockNavigate = jest.fn();
 const mockValidateToken = jest.fn();
diff --git a/tests/TermsModal.test.tsx b/tests/TermsModal.test.tsx
index c63f8af..76109e9 100644
--- a/tests/TermsModal.test.tsx
+++ b/tests/TermsModal.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import TermsModal from '../src/TermsModal';
+import TermsModal from '../src/components/TermsModal';
 
 describe('TermsModal', () => {
   it('does not render when isOpen is false', () => {
diff --git a/tests/VerifyMagicLink.test.tsx b/tests/VerifyMagicLink.test.tsx
new file mode 100644
index 0000000..0362c22
--- /dev/null
+++ b/tests/VerifyMagicLink.test.tsx
@@ -0,0 +1,136 @@
+import { render, screen, act } from '@testing-library/react';
+import VerifyMagicLink from '@/views/VerifyMagicLink';
+
+import { useAuth } from '@/AuthProvider';
+import { createFetchWithAuth } from '@/fetchWithAuth';
+
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+jest.mock('@/AuthProvider');
+jest.mock('@/fetchWithAuth');
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+  useSearchParams: jest.fn(),
+}));
+
+describe('VerifyMagicLink', () => {
+  const navigate = jest.fn();
+  const mockFetch = jest.fn();
+  const postMessage = jest.fn();
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+
+    (useNavigate as jest.Mock).mockReturnValue(navigate);
+
+    (useAuth as jest.Mock).mockReturnValue({
+      apiHost: 'http://localhost',
+      mode: 'web',
+    });
+
+    (createFetchWithAuth as jest.Mock).mockReturnValue(mockFetch);
+
+    global.BroadcastChannel = jest.fn(() => ({
+      postMessage,
+      close: jest.fn(),
+    })) as any;
+
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  test('shows error when token missing', async () => {
+    (useSearchParams as jest.Mock).mockReturnValue([new URLSearchParams()]);
+
+    render(<VerifyMagicLink />);
+
+    expect(
+      await screen.findByText(/missing token for verification/i)
+    ).toBeInTheDocument();
+  });
+
+  test('shows error when verification fails', async () => {
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('?token=abc123'),
+    ]);
+
+    mockFetch.mockResolvedValue({
+      ok: false,
+    });
+
+    render(<VerifyMagicLink />);
+
+    expect(await screen.findByText(/failed to verify token/i)).toBeInTheDocument();
+  });
+
+  test('successful verification shows success message', async () => {
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('?token=abc123'),
+    ]);
+
+    mockFetch.mockResolvedValue({
+      ok: true,
+    });
+
+    render(<VerifyMagicLink />);
+
+    expect(await screen.findByText(/login verified/i)).toBeInTheDocument();
+  });
+
+  test('broadcasts login success message', async () => {
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('?token=abc123'),
+    ]);
+
+    mockFetch.mockResolvedValue({
+      ok: true,
+    });
+
+    render(<VerifyMagicLink />);
+
+    await screen.findByText(/login verified/i);
+
+    expect(postMessage).toHaveBeenCalledWith({
+      type: 'MAGIC_LINK_AUTH_SUCCESS',
+    });
+  });
+
+  test('redirects after success timeout', async () => {
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('?token=abc123'),
+    ]);
+
+    mockFetch.mockResolvedValue({
+      ok: true,
+    });
+
+    render(<VerifyMagicLink />);
+
+    await screen.findByText(/login verified/i);
+
+    act(() => {
+      jest.advanceTimersByTime(900);
+    });
+
+    expect(navigate).toHaveBeenCalledWith('/');
+  });
+
+  test('shows spinner during verification', () => {
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('?token=abc123'),
+    ]);
+
+    mockFetch.mockResolvedValue({
+      ok: true,
+    });
+
+    render(<VerifyMagicLink />);
+
+    expect(screen.getByText(/please wait while we securely verify/i)).toBeInTheDocument();
+  });
+});
diff --git a/tests/VerifyOTP.test.tsx b/tests/VerifyOTP.test.tsx
deleted file mode 100644
index 08804dc..0000000
--- a/tests/VerifyOTP.test.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import VerifyOTP from '../src/VerifyOTP';
-
-const mockNavigate = jest.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useNavigate: () => mockNavigate,
-}));
-
-jest.mock('../src/AuthProvider', () => ({
-  useAuth: () => ({ apiHost: 'https://api.example.com' }),
-}));
-
-jest.mock(
-  '../src/styles/verifyOTP.module.css',
-  () => new Proxy({}, { get: (_, key) => key })
-);
-
-beforeEach(() => {
-  jest.resetAllMocks();
-  global.fetch = jest.fn();
-  localStorage.clear();
-});
-
-describe('VerifyOTP Component', () => {
-  it('renders the form with expected fields', () => {
-    render(<VerifyOTP />);
-    expect(screen.getByText(/Verify Your Contact Info/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/Email Verification Code/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/Phone Verification Code/i)).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', { name: /Verify & Continue/i })
-    ).toBeInTheDocument();
-  });
-
-  it('shows error if OTPs are not 6 digits on submit', async () => {
-    render(<VerifyOTP />);
-    fireEvent.submit(screen.getByRole('button', { name: /Verify & Continue/i }));
-    await waitFor(() => {
-      expect(screen.getByText(/Please enter a valid code/i)).toBeInTheDocument();
-    });
-  });
-
-  it('verifies both email and phone when valid OTPs are entered', async () => {
-    (global.fetch as jest.Mock)
-      .mockResolvedValueOnce({ ok: true, json: async () => ({}) }) // email verify
-      .mockResolvedValueOnce({ ok: true, json: async () => ({}) }); // phone verify
-
-    render(<VerifyOTP />);
-
-    fireEvent.change(screen.getByLabelText(/Email Verification Code/i), {
-      target: { value: '123456' },
-    });
-    fireEvent.change(screen.getByLabelText(/Phone Verification Code/i), {
-      target: { value: '654321' },
-    });
-
-    fireEvent.submit(screen.getByRole('button', { name: /Verify & Continue/i }));
-
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        'https://api.example.com/otp/verify-email-otp',
-        expect.objectContaining({ method: 'POST' })
-      );
-      expect(global.fetch).toHaveBeenCalledWith(
-        'https://api.example.com/otp/verify-phone-otp',
-        expect.objectContaining({ method: 'POST' })
-      );
-    });
-  });
-
-  it('shows error when verification fails', async () => {
-    (global.fetch as jest.Mock)
-      .mockResolvedValueOnce({ ok: false, json: async () => ({}) }) // email verify
-      .mockResolvedValueOnce({ ok: false, json: async () => ({}) }); // phone verify
-
-    render(<VerifyOTP />);
-
-    fireEvent.change(screen.getByLabelText(/Email Verification Code/i), {
-      target: { value: '123456' },
-    });
-    fireEvent.change(screen.getByLabelText(/Phone Verification Code/i), {
-      target: { value: '654321' },
-    });
-
-    fireEvent.submit(screen.getByRole('button', { name: /Verify & Continue/i }));
-
-    await waitFor(() => {
-      expect(screen.getByText(/Verification failed/i)).toBeInTheDocument();
-    });
-  });
-
-  it('resends email OTP and updates message', async () => {
-    (global.fetch as jest.Mock).mockResolvedValueOnce({
-      ok: true,
-      json: async () => ({ token: 'new-token' }),
-    });
-
-    render(<VerifyOTP />);
-
-    fireEvent.click(screen.getByRole('button', { name: /Resend code to email/i }));
-
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        'https://api.example.com/otp/generate-email-otp',
-        expect.objectContaining({ method: 'GET' })
-      );
-      expect(screen.getByText(/Verification email has been resent/i)).toBeInTheDocument();
-    });
-  });
-
-  it('resends phone OTP and updates message', async () => {
-    (global.fetch as jest.Mock).mockResolvedValueOnce({
-      ok: true,
-      json: async () => ({ token: 'new-token' }),
-    });
-
-    render(<VerifyOTP />);
-
-    fireEvent.click(screen.getByRole('button', { name: /Resend code to phone/i }));
-
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        'https://api.example.com/otp/generate-phone-otp',
-        expect.objectContaining({ method: 'GET' })
-      );
-      expect(screen.getByText(/Verification SMS has been resent/i)).toBeInTheDocument();
-    });
-  });
-
-  it('navigates to /registerPasskey when both verifications succeed', async () => {
-    (global.fetch as jest.Mock).mockResolvedValue({ ok: true, json: async () => ({}) });
-
-    render(<VerifyOTP />);
-
-    fireEvent.change(screen.getByLabelText(/Email Verification Code/i), {
-      target: { value: '111111' },
-    });
-    fireEvent.change(screen.getByLabelText(/Phone Verification Code/i), {
-      target: { value: '222222' },
-    });
-
-    fireEvent.submit(screen.getByRole('button', { name: /Verify & Continue/i }));
-
-    await waitFor(() => {
-      expect(mockNavigate).toHaveBeenCalledWith('/registerPasskey');
-    });
-  });
-});
diff --git a/tests/authProvider.test.tsx b/tests/authProvider.test.tsx
index 16df879..3285abf 100644
--- a/tests/authProvider.test.tsx
+++ b/tests/authProvider.test.tsx
@@ -3,7 +3,7 @@ import { AuthProvider, useAuth } from '../src/AuthProvider';
 import { createFetchWithAuth } from '../src/fetchWithAuth';
 
 jest.mock('../src/fetchWithAuth');
-jest.mock('../src/LoadingSpinner', () => () => <div>Loading...</div>);
+jest.mock('../src/components/LoadingSpinner', () => () => <div>Loading...</div>);
 jest.mock('@/context/InternalAuthContext', () => ({
   InternalAuthProvider: ({ children }: any) => <div>{children}</div>,
 }));
diff --git a/tests/fetchWithAuth.test.tsx b/tests/fetchWithAuth.test.tsx
index c8fadf3..3e61e5b 100644
--- a/tests/fetchWithAuth.test.tsx
+++ b/tests/fetchWithAuth.test.tsx
@@ -1,6 +1,5 @@
 import { createFetchWithAuth } from '../src/fetchWithAuth';
 
-// Mock global fetch
 const mockFetch = jest.fn();
 global.fetch = mockFetch as any;
 
diff --git a/tests/loadingSpinner.test.tsx b/tests/loadingSpinner.test.tsx
index 130435c..0f06a67 100644
--- a/tests/loadingSpinner.test.tsx
+++ b/tests/loadingSpinner.test.tsx
@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
-import LoadingSpinner from '../src/LoadingSpinner';
+import LoadingSpinner from '../src/components/LoadingSpinner';
 
 describe('Login Component', () => {
   it('renders the login form correctly', () => {
diff --git a/tests/login.test.tsx b/tests/login.test.tsx
index d6507f5..9cd19f0 100644
--- a/tests/login.test.tsx
+++ b/tests/login.test.tsx
@@ -1,30 +1,26 @@
-import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
-import Login from '../src/Login';
-
-const mockNavigate = jest.fn();
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
+import Login from '@/views/Login';
+
+import { useAuth } from '@/AuthProvider';
+import { useInternalAuth } from '@/context/InternalAuthContext';
+import { createFetchWithAuth } from '@/fetchWithAuth';
+import { isPasskeySupported, isValidEmail, isValidPhoneNumber } from '@/utils';
+
+import { useNavigate } from 'react-router-dom';
+import { startAuthentication } from '@simplewebauthn/browser';
+
+jest.mock('@/AuthProvider');
+jest.mock('@/context/InternalAuthContext');
+jest.mock('@/fetchWithAuth');
+jest.mock('@/utils', () => ({
+  isPasskeySupported: jest.fn(),
+  isValidEmail: jest.fn(),
+  isValidPhoneNumber: jest.fn(),
+}));
+jest.mock('@simplewebauthn/browser');
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
-  useNavigate: () => mockNavigate,
-}));
-
-const mockStartAuthentication = jest.fn();
-jest.mock('@simplewebauthn/browser', () => ({
-  startAuthentication: (...args: any[]) => mockStartAuthentication(...args),
-}));
-
-jest.mock('@/AuthProvider', () => ({
-  useAuth: () => ({ apiHost: 'https://api.example.com' }),
-}));
-
-const mockValidateToken = jest.fn();
-jest.mock('@/context/InternalAuthContext', () => ({
-  useInternalAuth: () => ({ validateToken: mockValidateToken }),
-}));
-
-jest.mock('../src/utils', () => ({
-  isPasskeySupported: () => jest.fn().mockResolvedValue(true),
-  isValidEmail: () => jest.fn(email => email.includes('@')),
-  isValidPhoneNumber: () => jest.fn(phone => phone.startsWith('+')),
+  useNavigate: jest.fn(),
 }));
 
 jest.mock('@/components/phoneInput', () => (props: any) => (
@@ -35,152 +31,201 @@ jest.mock('@/components/phoneInput', () => (props: any) => (
   />
 ));
 
-beforeEach(() => {
-  jest.resetAllMocks();
-  global.fetch = jest.fn() as any;
-});
+jest.mock('@/components/AuthFallbackOptions', () => (props: any) => (
+  <div data-testid="fallback-options">
+    <button onClick={props.onMagicLink}>MagicLink</button>
+    <button onClick={props.onPhoneOtp}>PhoneOTP</button>
+    <button onClick={props.onPasskeyRetry}>RetryPasskey</button>
+  </div>
+));
 
-describe('Login Component', () => {
-  it('renders register mode by default', async () => {
-    await act(async () => {
-      render(<Login />);
-    });
+describe('Login', () => {
+  const navigate = jest.fn();
+  const validateToken = jest.fn();
+  const mockFetch = jest.fn();
 
-    expect(await screen.findByText('Create Account')).toBeInTheDocument();
-  });
+  beforeEach(() => {
+    (useNavigate as jest.Mock).mockReturnValue(navigate);
 
-  it('toggles between register and login modes', async () => {
-    await act(async () => {
-      render(<Login />);
+    (useAuth as jest.Mock).mockReturnValue({
+      apiHost: 'http://localhost',
+      hasSignedInBefore: true,
+      mode: 'web',
     });
-    const toggleButton = screen.getByRole('button', { name: /Already have an account/i });
-    fireEvent.click(toggleButton);
-    expect(await screen.findByText('Sign In')).toBeInTheDocument();
-  });
 
-  it('submits register form successfully', async () => {
-    (global.fetch as jest.Mock).mockResolvedValueOnce({
-      ok: true,
-      json: async () => ({ message: 'Success' }),
+    (useInternalAuth as jest.Mock).mockReturnValue({
+      validateToken,
     });
 
-    await act(async () => {
-      render(<Login />);
-    });
+    (createFetchWithAuth as jest.Mock).mockReturnValue(mockFetch);
+
+    (isPasskeySupported as jest.Mock).mockResolvedValue(false);
 
-    fireEvent.change(screen.getByLabelText(/Email Address/i), {
-      target: { value: 'user@example.com' },
+    (isValidEmail as jest.Mock).mockReturnValue(true);
+    (isValidPhoneNumber as jest.Mock).mockReturnValue(false);
+
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ message: 'Success', mfaLogin: false }),
     });
-    fireEvent.change(screen.getByTestId('phone-input'), {
-      target: { value: '+15555555555' },
+
+    (startAuthentication as jest.Mock).mockResolvedValue({});
+
+    jest.clearAllMocks();
+  });
+
+  test('renders login form when user has signed in before', async () => {
+    render(<Login />);
+
+    expect(await screen.findByText(/sign in/i)).toBeInTheDocument();
+  });
+
+  test('shows validation error on invalid identifier', async () => {
+    (isValidEmail as jest.Mock).mockReturnValue(false);
+    (isValidPhoneNumber as jest.Mock).mockReturnValue(false);
+
+    render(<Login />);
+
+    const input = screen.getByPlaceholderText(/email or phone number/i);
+
+    fireEvent.change(input, { target: { value: 'invalid' } });
+    fireEvent.blur(input);
+
+    expect(
+      await screen.findByText(/please enter a valid email or phone number/i)
+    ).toBeInTheDocument();
+  });
+
+  test('login triggers API request', async () => {
+    mockFetch.mockResolvedValue({ ok: true });
+
+    render(<Login />);
+
+    const input = screen.getByPlaceholderText(/email or phone number/i);
+
+    fireEvent.change(input, {
+      target: { value: 'test@example.com' },
     });
 
-    const submitButton = screen.getByRole('button', { name: /Register/i });
+    const loginButton = await screen.findByRole('button', { name: /login/i });
+
+    await waitFor(() => {
+      expect(loginButton).toBeEnabled();
+    });
 
     await act(async () => {
-      fireEvent.click(submitButton);
+      fireEvent.click(loginButton);
     });
 
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        'https://api.example.com/registration/register',
-        expect.objectContaining({
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            email: 'user@example.com',
-            phone: '+15555555555',
-          }),
-        })
-      );
-    });
-
-    expect(mockNavigate).toHaveBeenCalledWith('/verifyOTP');
+    expect(mockFetch).toHaveBeenCalledWith(
+      '/login',
+      expect.objectContaining({ method: 'POST' })
+    );
   });
 
-  it('shows error when registration fails', async () => {
-    (global.fetch as jest.Mock).mockResolvedValueOnce({ ok: false });
+  test('fallback options appear if passkeys unavailable', async () => {
+    (isPasskeySupported as jest.Mock).mockResolvedValue(false);
 
-    await act(async () => {
-      render(<Login />);
+    render(<Login />);
+
+    const input = screen.getByPlaceholderText(/email or phone number/i);
+
+    fireEvent.change(input, { target: { value: 'test@example.com' } });
+
+    const loginButton = await screen.findByRole('button', { name: /login/i });
+
+    await waitFor(() => {
+      expect(loginButton).toBeEnabled();
     });
 
-    fireEvent.change(screen.getByLabelText(/Email Address/i), {
-      target: { value: 'user@example.com' },
+    fireEvent.click(loginButton);
+
+    expect(await screen.findByTestId('fallback-options')).toBeInTheDocument();
+  });
+
+  test('magic link option navigates to magic link sent page', async () => {
+    (isPasskeySupported as jest.Mock).mockResolvedValue(false);
+
+    render(<Login />);
+
+    fireEvent.change(screen.getByPlaceholderText(/email or phone number/i), {
+      target: { value: 'test@example.com' },
     });
-    fireEvent.change(screen.getByTestId('phone-input'), {
-      target: { value: '+15555555555' },
+
+    const loginButton = await screen.findByRole('button', { name: /login/i });
+
+    await act(async () => {
+      fireEvent.click(loginButton);
     });
 
-    fireEvent.click(screen.getByRole('button', { name: /Register/i }));
+    const magicLink = await screen.findByText('MagicLink');
 
-    await waitFor(() => {
-      expect(
-        screen.getByText(
-          /An unexpected error occured. Try again. If the problem persists, try resetting your password/i
-        )
-      ).toBeInTheDocument();
+    await act(async () => {
+      fireEvent.click(magicLink);
     });
+
+    expect(navigate).toHaveBeenCalledWith('/magic-link-sent');
   });
 
-  it('handles login flow and successful passkey verification', async () => {
-    (global.fetch as jest.Mock)
-      // login API call
-      .mockResolvedValueOnce({ ok: true })
-      // generate-authentication-options
-      .mockResolvedValueOnce({ ok: true, json: async () => ({}) })
-      // verify-authentication
-      .mockResolvedValueOnce({
-        ok: true,
-        json: async () => ({ message: 'Success', token: 'abc' }),
-      });
+  test('phone OTP option navigates to verify phone', async () => {
+    (isValidEmail as jest.Mock).mockReturnValue(false);
+    (isValidPhoneNumber as jest.Mock).mockReturnValue(true);
+    (isPasskeySupported as jest.Mock).mockResolvedValue(false);
 
-    mockStartAuthentication.mockResolvedValueOnce({ credential: '123' });
+    render(<Login />);
 
-    await act(async () => {
-      render(<Login />);
+    fireEvent.change(screen.getByPlaceholderText(/email or phone number/i), {
+      target: { value: '+15555555555' },
     });
 
-    // Switch to login mode
-    fireEvent.click(screen.getByRole('button', { name: /Already have an account/i }));
+    const loginButton = await screen.findByRole('button', { name: /login/i });
 
-    fireEvent.change(screen.getByLabelText(/Email Address \/ Phone Number/i), {
-      target: { value: 'user@example.com' },
+    await act(async () => {
+      fireEvent.click(loginButton);
     });
 
-    fireEvent.click(screen.getByRole('button', { name: /Login/i }));
+    const phoneOtp = await screen.findByText('PhoneOTP');
 
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        'https://api.example.com/login',
-        expect.objectContaining({ method: 'POST' })
-      );
+    await act(async () => {
+      fireEvent.click(phoneOtp);
     });
 
-    expect(mockValidateToken).toHaveBeenCalled();
-    expect(mockNavigate).toHaveBeenCalledWith('/');
+    expect(navigate).toHaveBeenCalledWith('/verifyPhoneOTP');
   });
 
-  it('shows error when login fails', async () => {
-    (global.fetch as jest.Mock).mockResolvedValueOnce({ ok: false });
+  test('register mode submits registration', async () => {
+    (isValidEmail as jest.Mock).mockReturnValue(true);
+    (isValidPhoneNumber as jest.Mock).mockReturnValue(true);
 
-    await act(async () => {
-      render(<Login />);
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ message: 'Success' }),
+    });
+
+    render(<Login />);
+
+    fireEvent.click(screen.getByText(/don't have an account/i));
+
+    fireEvent.change(screen.getByLabelText(/email address/i), {
+      target: { value: 'test@example.com' },
     });
-    fireEvent.click(screen.getByRole('button', { name: /Already have an account/i }));
 
-    fireEvent.change(screen.getByLabelText(/Email Address \/ Phone Number/i), {
-      target: { value: 'user@example.com' },
+    fireEvent.change(screen.getByTestId('phone-input'), {
+      target: { value: '+15555555555' },
     });
 
-    fireEvent.click(screen.getByRole('button', { name: /Login/i }));
+    const registerButton = await screen.findByRole('button', {
+      name: /register/i,
+    });
 
-    await waitFor(() =>
-      expect(
-        screen.getByText(
-          /An unexpected error occured. Try again. If the problem persists, try resetting your password/i
-        )
-      ).toBeInTheDocument()
-    );
+    await waitFor(() => {
+      expect(registerButton).toBeEnabled();
+    });
+
+    await act(async () => {
+      fireEvent.click(registerButton);
+    });
+
+    expect(navigate).toHaveBeenCalledWith('/verifyPhoneOTP');
   });
 });