diff --git a/web/src/components/ResetPassword.tsx b/web/src/components/ResetPassword.tsx
index 4c8f168..09b5366 100644
--- a/web/src/components/ResetPassword.tsx
+++ b/web/src/components/ResetPassword.tsx
@@ -1,28 +1,28 @@
 import { useState, useEffect } from 'react';
 import { resetPlatformPassword } from '../lib/authSession';
 import { Button, Input } from './ui/Primitives';
-
-export function ResetPassword() {
-    const [password, setPassword] = useState('');
-    const [loading, setLoading] = useState(false);
-    const [message, setMessage] = useState<string | null>(null);
-    const [error, setError] = useState<string | null>(null);
-
-    useEffect(() => {
-        // Handle hash fragment if present (implicit flow)
-        const hash = window.location.hash;
-        if (hash && hash.includes('type=recovery')) {
-            // Supabase handles the session automatically if the link is clicked
-            // We just need to let the user set a new password
-        }
-    }, []);
-
-    const handlePasswordReset = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setLoading(true);
-        setError(null);
-        setMessage(null);
-
+
+export function ResetPassword() {
+    const [password, setPassword] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        // Handle hash fragment if present (implicit flow)
+        const hash = window.location.hash;
+        if (hash && hash.includes('type=recovery')) {
+            // Supabase handles the session automatically if the link is clicked
+            // We just need to let the user set a new password
+        }
+    }, []);
+
+    const handlePasswordReset = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+        setMessage(null);
+
         try {
             await resetPlatformPassword(password);
             setMessage('Password updated successfully! You can now login.');
@@ -32,19 +32,19 @@ export function ResetPassword() {
                 }
             }, 2000);
         } catch (err: any) {
-            setError(err.message);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    return (
-        <div className="login-container">
-            <div className="login-card">
-                <h1>Reset Password</h1>
-                <p className="subtitle">Enter your new password below</p>
-
-                <form onSubmit={handlePasswordReset}>
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="login-container">
+            <div className="login-card">
+                <h1>Reset Password</h1>
+                <p className="subtitle">Enter your new password below</p>
+
+                <form onSubmit={handlePasswordReset}>
                     <div className="form-group">
                         <Input
                             label="New Password"
@@ -52,111 +52,125 @@ export function ResetPassword() {
                             value={password}
                             onChange={(e) => setPassword(e.target.value)}
                             placeholder="New password"
-                            required
-                        />
-                    </div>
-
-                    {error && <div className="error-message">{error}</div>}
-                    {message && <div className="success-message" style={{ color: '#00ff88', marginBottom: '20px', textAlign: 'center' }}>{message}</div>}
-
+                            required
+                        />
+                    </div>
+
+                    {error && <div className="error-message">{error}</div>}
+                    {message && <div className="success-message">{message}</div>}
+
                     <Button type="submit" disabled={loading || !!message} className="auth-button">
                         {loading ? 'Updating...' : 'Update Password'}
                     </Button>
-                </form>
-            </div>
-            <style>{`
-        .login-container {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          min-height: 100vh;
-          background: #0a0b0d;
-          color: #fff;
-        }
-
-        .login-card {
-          background: #14151a;
-          border: 1px solid rgba(255, 255, 255, 0.1);
-          padding: 40px;
-          border-radius: 16px;
-          width: 100%;
-          max-width: 400px;
-          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-        }
-
-        h1 {
-          margin: 0 0 8px 0;
-          font-size: 1.5rem;
-          text-align: center;
-          background: linear-gradient(90deg, #fff, #00ff88);
-          -webkit-background-clip: text;
-          background-clip: text;
-          -webkit-text-fill-color: transparent;
-        }
-
-        .subtitle {
-          text-align: center;
-          color: #929292;
-          margin-bottom: 32px;
-          font-size: 0.9rem;
-        }
-
-        .form-group {
-          margin-bottom: 20px;
-        }
-
-        label {
-          display: block;
-          margin-bottom: 8px;
-          color: #ccc;
-          font-size: 0.9rem;
-        }
-
-        input {
-          width: 100%;
-          padding: 12px;
-          background: rgba(255, 255, 255, 0.05);
-          border: 1px solid rgba(255, 255, 255, 0.1);
-          border-radius: 8px;
-          color: #fff;
-          font-size: 1rem;
-          box-sizing: border-box;
-        }
-
-        input:focus {
-          outline: none;
-          border-color: #00ff88;
-        }
-
-        .auth-button {
-          width: 100%;
-          padding: 12px;
-          background: #00ff88;
-          color: #000;
-          border: none;
-          border-radius: 8px;
-          font-weight: bold;
-          font-size: 1rem;
-          cursor: pointer;
-          margin-top: 10px;
-          transition: opacity 0.2s;
-        }
-
-        .auth-button:disabled {
-          opacity: 0.7;
-          cursor: not-allowed;
-        }
-
-        .error-message {
-          color: #ff3366;
-          background: rgba(255, 51, 102, 0.1);
-          padding: 10px;
-          border-radius: 6px;
-          margin-bottom: 20px;
-          font-size: 0.9rem;
-          text-align: center;
-        }
-      `}</style>
-        </div>
-    );
-}
+                </form>
+            </div>
+            <style>{`
+        .login-container {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-height: 100vh;
+          background: var(--background);
+          color: var(--foreground);
+        }
+
+        .login-card {
+          background: var(--card);
+          border: 1px solid var(--border);
+
+          padding: 40px;
+          border-radius: 16px;
+          width: 100%;
+          max-width: 400px;
+          box-shadow: var(--card-shadow);
+        }
+
+        h1 {
+          margin: 0 0 8px 0;
+          font-size: 1.5rem;
+          text-align: center;
+          background: linear-gradient(90deg, var(--foreground), var(--bl-success));
+
+          -webkit-background-clip: text;
+          background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+
+        .subtitle {
+          text-align: center;
+          color: var(--muted-foreground);
+
+          margin-bottom: 32px;
+          font-size: 0.9rem;
+        }
+
+        .form-group {
+          margin-bottom: 20px;
+        }
+
+        label {
+          display: block;
+          margin-bottom: 8px;
+          color: var(--muted-foreground);
+
+          font-size: 0.9rem;
+        }
+
+        input {
+          width: 100%;
+          padding: 12px;
+          background: var(--input);
+          border: 1px solid var(--border);
+
+          border-radius: 8px;
+          color: var(--foreground);
+          font-size: 1rem;
+          box-sizing: border-box;
+        }
+
+        input:focus {
+          outline: none;
+          border-color: var(--bl-focus-ring);
+
+        }
+
+        .auth-button {
+          width: 100%;
+          padding: 12px;
+          background: var(--bl-success);
+          color: var(--primary-foreground);
+
+          border: none;
+          border-radius: 8px;
+          font-weight: bold;
+          font-size: 1rem;
+          cursor: pointer;
+          margin-top: 10px;
+          transition: opacity 0.2s;
+        }
+
+        .auth-button:disabled {
+          opacity: 0.7;
+          cursor: not-allowed;
+        }
+
+        .error-message {
+          color: var(--bl-danger);
+          background: var(--bl-danger-muted);
+
+          padding: 10px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          font-size: 0.9rem;
+          text-align: center;
+        }
+
+        .success-message {
+          color: var(--bl-success);
+          margin-bottom: 20px;
+          text-align: center;
+        }
+      `}</style>
+        </div>
+    );
+}