diff --git a/web/__tests__/login.test.tsx b/web/__tests__/login.test.tsx
new file mode 100644
index 0000000..20680af
--- /dev/null
+++ b/web/__tests__/login.test.tsx
@@ -0,0 +1,222 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { useRouter } from 'next/navigation';
+import LoginPage from '../app/(auth)/login/page';
+import api from '../lib/api';
+
+// Mock Next.js router
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(),
+  useSearchParams: jest.fn(),
+}));
+
+// Mock API
+jest.mock('../lib/api', () => ({
+  __esModule: true,
+  default: {
+    getToken: jest.fn(),
+    checkEmail: jest.fn(),
+    requestOTP: jest.fn(),
+    saveEmail: jest.fn(),
+  },
+}));
+
+describe('LoginPage', () => {
+  const mockPush = jest.fn();
+  const mockReplace = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useRouter as jest.Mock).mockReturnValue({
+      push: mockPush,
+      replace: mockReplace,
+    });
+    (api.getToken as jest.Mock).mockResolvedValue(null);
+  });
+
+  it('renders login form correctly', () => {
+    render(<LoginPage />);
+
+    expect(screen.getByText('Welcome to WellNuo')).toBeInTheDocument();
+    expect(screen.getByLabelText('Email address')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /get verification code/i })).toBeInTheDocument();
+  });
+
+  it('redirects to dashboard if already authenticated', async () => {
+    (api.getToken as jest.Mock).mockResolvedValue('mock-token');
+
+    render(<LoginPage />);
+
+    await waitFor(() => {
+      expect(mockReplace).toHaveBeenCalledWith('/dashboard');
+    });
+  });
+
+  it('shows error for empty email', async () => {
+    render(<LoginPage />);
+
+    const form = screen.getByRole('button', { name: /get verification code/i }).closest('form');
+    fireEvent.submit(form!);
+
+    await waitFor(() => {
+      expect(screen.getByText('Email is required')).toBeInTheDocument();
+    });
+  });
+
+  it('shows error for invalid email format', async () => {
+    render(<LoginPage />);
+
+    const emailInput = screen.getByLabelText('Email address');
+    const form = screen.getByRole('button', { name: /get verification code/i }).closest('form');
+
+    fireEvent.change(emailInput, { target: { value: 'invalid-email' } });
+    fireEvent.submit(form!);
+
+    await waitFor(() => {
+      expect(screen.getByText('Please enter a valid email address')).toBeInTheDocument();
+    });
+  });
+
+  it('validates correct email format', async () => {
+    (api.checkEmail as jest.Mock).mockResolvedValue({ ok: true, data: { exists: true } });
+    (api.requestOTP as jest.Mock).mockResolvedValue({ ok: true });
+
+    render(<LoginPage />);
+
+    const emailInput = screen.getByLabelText('Email address');
+    const submitButton = screen.getByRole('button', { name: /get verification code/i });
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(api.checkEmail).toHaveBeenCalledWith('test@example.com');
+      expect(api.requestOTP).toHaveBeenCalledWith('test@example.com');
+    });
+  });
+
+  it('navigates to verify-otp on successful OTP request', async () => {
+    (api.checkEmail as jest.Mock).mockResolvedValue({ ok: true, data: { exists: true } });
+    (api.requestOTP as jest.Mock).mockResolvedValue({ ok: true });
+    (api.saveEmail as jest.Mock).mockResolvedValue(undefined);
+
+    render(<LoginPage />);
+
+    const emailInput = screen.getByLabelText('Email address');
+    const form = screen.getByRole('button', { name: /get verification code/i }).closest('form');
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.submit(form!);
+
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith(
+        expect.stringMatching(/\/verify-otp\?email=test(%40|@)example\.com/)
+      );
+    });
+  });
+
+  it('shows loading state during OTP request', async () => {
+    (api.checkEmail as jest.Mock).mockResolvedValue({ ok: true, data: { exists: true } });
+    (api.requestOTP as jest.Mock).mockImplementation(() => new Promise(() => {})); // Never resolves
+
+    render(<LoginPage />);
+
+    const emailInput = screen.getByLabelText('Email address');
+    const submitButton = screen.getByRole('button', { name: /get verification code/i });
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Sending code...')).toBeInTheDocument();
+      expect(submitButton).toBeDisabled();
+    });
+  });
+
+  it('shows error message on failed OTP request', async () => {
+    (api.checkEmail as jest.Mock).mockResolvedValue({ ok: true, data: { exists: true } });
+    (api.requestOTP as jest.Mock).mockResolvedValue({
+      ok: false,
+      error: { message: 'Failed to send OTP' },
+    });
+
+    render(<LoginPage />);
+
+    const emailInput = screen.getByLabelText('Email address');
+    const submitButton = screen.getByRole('button', { name: /get verification code/i });
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Failed to send OTP')).toBeInTheDocument();
+    });
+  });
+
+  it('shows invite code field when toggled', () => {
+    render(<LoginPage />);
+
+    const inviteToggle = screen.getByText('Have an invite code?');
+    fireEvent.click(inviteToggle);
+
+    expect(screen.getByLabelText('Invite code (optional)')).toBeInTheDocument();
+  });
+
+  it('includes invite code in navigation params when provided', async () => {
+    (api.checkEmail as jest.Mock).mockResolvedValue({ ok: true, data: { exists: false } });
+    (api.requestOTP as jest.Mock).mockResolvedValue({ ok: true });
+    (api.saveEmail as jest.Mock).mockResolvedValue(undefined);
+
+    render(<LoginPage />);
+
+    const emailInput = screen.getByLabelText('Email address');
+    const inviteToggle = screen.getByText('Have an invite code?');
+    fireEvent.click(inviteToggle);
+
+    const inviteInput = screen.getByLabelText('Invite code (optional)');
+    const submitButton = screen.getByRole('button', { name: /get verification code/i });
+
+    fireEvent.change(emailInput, { target: { value: 'new@example.com' } });
+    fireEvent.change(inviteInput, { target: { value: 'INVITE123' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith(
+        expect.stringContaining('inviteCode=INVITE123')
+      );
+    });
+  });
+
+  it('handles network errors gracefully', async () => {
+    (api.checkEmail as jest.Mock).mockRejectedValue(new Error('Network error'));
+
+    render(<LoginPage />);
+
+    const emailInput = screen.getByLabelText('Email address');
+    const submitButton = screen.getByRole('button', { name: /get verification code/i });
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Network error. Please check your connection.')).toBeInTheDocument();
+    });
+  });
+
+  it('trims and lowercases email before submission', async () => {
+    (api.checkEmail as jest.Mock).mockResolvedValue({ ok: true, data: { exists: true } });
+    (api.requestOTP as jest.Mock).mockResolvedValue({ ok: true });
+
+    render(<LoginPage />);
+
+    const emailInput = screen.getByLabelText('Email address');
+    const submitButton = screen.getByRole('button', { name: /get verification code/i });
+
+    fireEvent.change(emailInput, { target: { value: '  TEST@EXAMPLE.COM  ' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(api.checkEmail).toHaveBeenCalledWith('test@example.com');
+      expect(api.requestOTP).toHaveBeenCalledWith('test@example.com');
+    });
+  });
+});
diff --git a/web/app/(auth)/login/page.tsx b/web/app/(auth)/login/page.tsx
new file mode 100644
index 0000000..b4996db
--- /dev/null
+++ b/web/app/(auth)/login/page.tsx
@@ -0,0 +1,247 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import api from '@/lib/api';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [inviteCode, setInviteCode] = useState('');
+  const [showInviteCode, setShowInviteCode] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Check if already authenticated
+  useEffect(() => {
+    const checkAuth = async () => {
+      const token = await api.getToken();
+      if (token) {
+        router.replace('/dashboard');
+      }
+    };
+    checkAuth();
+  }, [router]);
+
+  const validateEmail = (email: string): boolean => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const handleContinue = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    const trimmedEmail = email.trim().toLowerCase();
+
+    // Validate email
+    if (!trimmedEmail) {
+      setError('Email is required');
+      return;
+    }
+
+    if (!validateEmail(trimmedEmail)) {
+      setError('Please enter a valid email address');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      // Check if email exists in database
+      const checkResult = await api.checkEmail(trimmedEmail);
+
+      // Request OTP code
+      const otpResult = await api.requestOTP(trimmedEmail);
+
+      if (otpResult.ok) {
+        // Save email for OTP verification page
+        await api.saveEmail(trimmedEmail);
+
+        // Navigate to OTP verification
+        const params = new URLSearchParams({
+          email: trimmedEmail,
+          isNewUser: checkResult.ok && checkResult.data?.exists ? '0' : '1',
+        });
+
+        if (inviteCode.trim()) {
+          params.set('inviteCode', inviteCode.trim());
+        }
+
+        router.push(`/verify-otp?${params.toString()}`);
+      } else {
+        setError(otpResult.error?.message || 'Failed to send verification code. Please try again.');
+      }
+    } catch {
+      setError('Network error. Please check your connection.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        {/* Logo */}
+        <div className="flex flex-col items-center">
+          <div className="w-24 h-24 bg-indigo-600 rounded-full flex items-center justify-center text-white text-4xl font-bold shadow-lg">
+            W
+          </div>
+          <h1 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+            Welcome to WellNuo
+          </h1>
+          <p className="mt-2 text-center text-sm text-gray-600">
+            Enter your email to get started
+          </p>
+        </div>
+
+        {/* Login Form */}
+        <div className="bg-white py-8 px-6 shadow-xl rounded-lg sm:px-10">
+          <form className="space-y-6" onSubmit={handleContinue}>
+            {/* Email Input */}
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                Email address
+              </label>
+              <div className="mt-1">
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                  placeholder="you@example.com"
+                  disabled={isLoading}
+                />
+              </div>
+            </div>
+
+            {/* Invite Code Toggle */}
+            <div>
+              <button
+                type="button"
+                onClick={() => setShowInviteCode(!showInviteCode)}
+                className="text-sm text-indigo-600 hover:text-indigo-500 flex items-center gap-1"
+                disabled={isLoading}
+              >
+                <svg
+                  className={`w-4 h-4 transition-transform ${showInviteCode ? 'rotate-90' : ''}`}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+                Have an invite code?
+              </button>
+            </div>
+
+            {/* Invite Code Input */}
+            {showInviteCode && (
+              <div>
+                <label htmlFor="inviteCode" className="block text-sm font-medium text-gray-700">
+                  Invite code (optional)
+                </label>
+                <div className="mt-1">
+                  <input
+                    id="inviteCode"
+                    name="inviteCode"
+                    type="text"
+                    value={inviteCode}
+                    onChange={(e) => setInviteCode(e.target.value)}
+                    className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                    placeholder="Enter invite code"
+                    disabled={isLoading}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Error Message */}
+            {error && (
+              <div className="rounded-md bg-red-50 p-4">
+                <div className="flex">
+                  <div className="flex-shrink-0">
+                    <svg
+                      className="h-5 w-5 text-red-400"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                  <div className="ml-3">
+                    <p className="text-sm font-medium text-red-800">{error}</p>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Submit Button */}
+            <div>
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {isLoading ? (
+                  <div className="flex items-center gap-2">
+                    <svg
+                      className="animate-spin h-5 w-5 text-white"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      />
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      />
+                    </svg>
+                    Sending code...
+                  </div>
+                ) : (
+                  'Get verification code'
+                )}
+              </button>
+            </div>
+          </form>
+
+          {/* Footer */}
+          <div className="mt-6">
+            <div className="relative">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-gray-300" />
+              </div>
+              <div className="relative flex justify-center text-sm">
+                <span className="px-2 bg-white text-gray-500">
+                  By continuing, you agree to our Terms & Privacy Policy
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Additional Info */}
+        <div className="text-center text-sm text-gray-600">
+          <p>We&apos;ll send you a verification code to your email</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/app/(auth)/verify-otp/page.tsx b/web/app/(auth)/verify-otp/page.tsx
new file mode 100644
index 0000000..104a6e6
--- /dev/null
+++ b/web/app/(auth)/verify-otp/page.tsx
@@ -0,0 +1,262 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import api from '@/lib/api';
+
+export default function VerifyOtpPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const email = searchParams.get('email') || '';
+
+  const [otp, setOtp] = useState(['', '', '', '', '', '']);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [canResend, setCanResend] = useState(false);
+  const [countdown, setCountdown] = useState(60);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  // Countdown timer for resend
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
+      return () => clearTimeout(timer);
+    } else {
+      setCanResend(true);
+    }
+  }, [countdown]);
+
+  // Focus first input on mount
+  useEffect(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+
+  const handleChange = (index: number, value: string) => {
+    // Only allow digits
+    if (!/^\d*$/.test(value)) return;
+
+    const newOtp = [...otp];
+    newOtp[index] = value.slice(-1); // Take only the last digit
+    setOtp(newOtp);
+
+    // Auto-focus next input
+    if (value && index < 5) {
+      inputRefs.current[index + 1]?.focus();
+    }
+
+    // Auto-submit when all 6 digits are entered
+    if (index === 5 && value && newOtp.every(digit => digit !== '')) {
+      handleVerify(newOtp.join(''));
+    }
+  };
+
+  const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+    // Handle backspace
+    if (e.key === 'Backspace' && !otp[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, 6);
+
+    if (pastedData.length === 6) {
+      const newOtp = pastedData.split('');
+      setOtp(newOtp);
+      inputRefs.current[5]?.focus();
+      handleVerify(pastedData);
+    }
+  };
+
+  const handleVerify = async (code?: string) => {
+    setError(null);
+    const otpCode = code || otp.join('');
+
+    if (otpCode.length !== 6) {
+      setError('Please enter the complete 6-digit code');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const result = await api.verifyOTP(email, otpCode);
+
+      if (result.ok && result.data) {
+        // Save auth token
+        localStorage.setItem('accessToken', result.data.accessToken);
+        localStorage.setItem('userId', result.data.userId.toString());
+
+        // Get user profile to determine next screen
+        const profileResult = await api.getMe();
+
+        if (profileResult.ok && profileResult.data) {
+          const user = profileResult.data.user;
+          const beneficiaries = profileResult.data.beneficiaries || [];
+
+          // Navigation logic (similar to NavigationController)
+          if (!user.firstName) {
+            router.replace('/enter-name');
+          } else if (beneficiaries.length === 0) {
+            router.replace('/add-loved-one');
+          } else {
+            router.replace('/dashboard');
+          }
+        } else {
+          router.replace('/dashboard');
+        }
+      } else {
+        setError(result.error?.message || 'Invalid verification code');
+        setOtp(['', '', '', '', '', '']);
+        inputRefs.current[0]?.focus();
+      }
+    } catch {
+      setError('Network error. Please try again.');
+      setOtp(['', '', '', '', '', '']);
+      inputRefs.current[0]?.focus();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleResend = async () => {
+    setError(null);
+    setCanResend(false);
+    setCountdown(60);
+
+    try {
+      const result = await api.requestOTP(email);
+      if (!result.ok) {
+        setError('Failed to resend code. Please try again.');
+        setCanResend(true);
+      }
+    } catch {
+      setError('Network error. Please try again.');
+      setCanResend(true);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        {/* Header */}
+        <div className="flex flex-col items-center">
+          <div className="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center text-white text-2xl font-bold shadow-lg">
+            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+          </div>
+          <h1 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+            Check your email
+          </h1>
+          <p className="mt-2 text-center text-sm text-gray-600">
+            We sent a verification code to
+          </p>
+          <p className="text-center text-sm font-medium text-gray-900">
+            {email}
+          </p>
+        </div>
+
+        {/* OTP Form */}
+        <div className="bg-white py-8 px-6 shadow-xl rounded-lg sm:px-10">
+          <div className="space-y-6">
+            {/* OTP Inputs */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 text-center mb-4">
+                Enter verification code
+              </label>
+              <div className="flex gap-2 justify-center" onPaste={handlePaste}>
+                {otp.map((digit, index) => (
+                  <input
+                    key={index}
+                    ref={(el) => {
+                      inputRefs.current[index] = el;
+                    }}
+                    type="text"
+                    inputMode="numeric"
+                    maxLength={1}
+                    value={digit}
+                    onChange={(e) => handleChange(index, e.target.value)}
+                    onKeyDown={(e) => handleKeyDown(index, e)}
+                    disabled={isLoading}
+                    className="w-12 h-12 text-center text-2xl font-bold border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors"
+                  />
+                ))}
+              </div>
+            </div>
+
+            {/* Error Message */}
+            {error && (
+              <div className="rounded-md bg-red-50 p-4">
+                <div className="flex">
+                  <div className="flex-shrink-0">
+                    <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <div className="ml-3">
+                    <p className="text-sm font-medium text-red-800">{error}</p>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Verify Button */}
+            <div>
+              <button
+                type="button"
+                onClick={() => handleVerify()}
+                disabled={isLoading || otp.some(digit => !digit)}
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {isLoading ? (
+                  <div className="flex items-center gap-2">
+                    <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                    </svg>
+                    Verifying...
+                  </div>
+                ) : (
+                  'Verify code'
+                )}
+              </button>
+            </div>
+
+            {/* Resend Code */}
+            <div className="text-center">
+              {canResend ? (
+                <button
+                  type="button"
+                  onClick={handleResend}
+                  className="text-sm font-medium text-indigo-600 hover:text-indigo-500"
+                >
+                  Resend code
+                </button>
+              ) : (
+                <p className="text-sm text-gray-600">
+                  Resend code in {countdown}s
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Back to Login */}
+        <div className="text-center">
+          <button
+            type="button"
+            onClick={() => router.back()}
+            className="text-sm text-gray-600 hover:text-gray-900 flex items-center justify-center gap-1"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            Back to login
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/app/(main)/dashboard/page.tsx b/web/app/(main)/dashboard/page.tsx
new file mode 100644
index 0000000..89f36f5
--- /dev/null
+++ b/web/app/(main)/dashboard/page.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+export default function DashboardPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900">Dashboard</h1>
+        <p className="mt-2 text-gray-600">Coming soon...</p>
+      </div>
+    </div>
+  );
+}
diff --git a/web/lib/api.ts b/web/lib/api.ts
index 69dcaed..0796f12 100644
--- a/web/lib/api.ts
+++ b/web/lib/api.ts
@@ -891,3 +891,4 @@ class ApiService {
 }
 
 export const api = new ApiService();
+export default api;