diff --git a/apps/hackathon/src/app/auth/forgot-password/page.tsx b/apps/hackathon/src/app/auth/forgot-password/page.tsx
index 7f9fe22..b28aacc 100644
--- a/apps/hackathon/src/app/auth/forgot-password/page.tsx
+++ b/apps/hackathon/src/app/auth/forgot-password/page.tsx
@@ -3,6 +3,7 @@ import { supabase } from '@imphnen-frontend-service/service';
 import { Link, useNavigate } from 'react-router';
 import { toast } from 'sonner';
 import { Icon } from '@iconify/react';
+import ThemeToggle from '../../../components/theme-toggle';
 
 export default function ForgotPasswordPage() {
   const [email, setEmail] = useState('');
@@ -80,13 +81,23 @@ export default function ForgotPasswordPage() {
   }
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between mb-6">
+          <button
+            onClick={() => navigate('/auth/login')}
+            className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center"
+          >
+            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
+            Back to Login
+          </button>
+          <ThemeToggle />
+        </div>
         <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
             Forgot Password?
           </h2>
-          <p className="text-gray-600">
+          <p className="text-gray-600 dark:text-gray-400">
             No worries, we'll send you reset instructions
           </p>
         </div>
@@ -95,7 +106,7 @@ export default function ForgotPasswordPage() {
           <div>
             <label
               htmlFor="email"
-              className="block text-sm font-medium text-gray-700 mb-1"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
             >
               Email Address
             </label>
@@ -106,7 +117,7 @@ export default function ForgotPasswordPage() {
               onChange={(e) => setEmail(e.target.value)}
               placeholder="your@email.com"
               disabled={isLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              className="bg-white dark:bg-gray-800 w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
               required
             />
           </div>
@@ -119,16 +130,6 @@ export default function ForgotPasswordPage() {
             {isLoading ? 'Sending...' : 'Send Reset Link'}
           </button>
         </form>
-
-        <div className="mt-8">
-          <Link
-            to="/auth/login"
-            className="text-primary-500 hover:text-primary-600 flex items-center"
-          >
-            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
-            <span> Back to Login</span>
-          </Link>
-        </div>
       </div>
     </div>
   );
diff --git a/apps/hackathon/src/app/auth/login/page.tsx b/apps/hackathon/src/app/auth/login/page.tsx
index 4d6bfdd..87f4ca3 100644
--- a/apps/hackathon/src/app/auth/login/page.tsx
+++ b/apps/hackathon/src/app/auth/login/page.tsx
@@ -115,8 +115,8 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-neutral-950 p-4">
-      <div className="bg-white dark:bg-neutral-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-neutral-700">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
         <div className="flex items-center justify-between mb-6">
           <button
             onClick={() => navigate('/')}
@@ -132,7 +132,7 @@ export default function LoginPage() {
           <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
             Welcome Back
           </h2>
-          <p className="text-gray-600 dark:text-neutral-400 font-sans">
+          <p className="text-gray-600 dark:text-gray-400 font-sans">
             Sign in to join or create your hackathon team
           </p>
         </div>
@@ -147,7 +147,7 @@ export default function LoginPage() {
           <div>
             <label
               htmlFor="email"
-              className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-1"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
             >
               Email
             </label>
@@ -158,7 +158,7 @@ export default function LoginPage() {
               onChange={(e) => setEmail(e.target.value)}
               placeholder="your@email.com"
               disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 dark:border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 disabled:bg-gray-100 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed"
+              className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
               required
             />
           </div>
@@ -167,7 +167,7 @@ export default function LoginPage() {
             <div className="flex items-center justify-between mb-1">
               <label
                 htmlFor="password"
-                className="block text-sm font-medium text-gray-700 dark:text-neutral-300"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-300"
               >
                 Password
               </label>
@@ -185,7 +185,7 @@ export default function LoginPage() {
               onChange={(e) => setPassword(e.target.value)}
               placeholder="••••••••"
               disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 dark:border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 disabled:bg-gray-100 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed"
+              className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
               required
             />
           </div>
@@ -193,23 +193,25 @@ export default function LoginPage() {
           <button
             type="submit"
             disabled={isEmailLoading}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-900 disabled:bg-gray-400 dark:disabled:bg-neutral-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
+            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
           >
             {isEmailLoading ? 'Signing in...' : 'Sign in with Email'}
           </button>
         </form>
 
         <div className="my-6 flex items-center">
-          <div className="flex-1 border-t border-gray-300 dark:border-neutral-600"></div>
-          <span className="px-4 text-sm text-gray-500 dark:text-neutral-400">OR</span>
-          <div className="flex-1 border-t border-gray-300 dark:border-neutral-600"></div>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
+          <span className="px-4 text-sm text-gray-500 dark:text-gray-400">
+            OR
+          </span>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
         </div>
 
         <button
           onClick={handleGithubLogin}
           disabled={isGithubLoading}
           type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-neutral-800 border border-gray-300 dark:border-neutral-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-neutral-900 disabled:bg-gray-100 dark:disabled:bg-neutral-800 disabled:cursor-not-allowed transition-colors cursor-pointer"
+          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-colors cursor-pointer"
         >
           <GithubOutlined className="text-xl" />
           <span>
@@ -218,7 +220,7 @@ export default function LoginPage() {
         </button>
 
         <div className="mt-6 text-center">
-          <p className="text-gray-600 dark:text-neutral-400 text-sm">
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
             Don't have an account?{' '}
             <a
               href="/auth/signup"
@@ -230,7 +232,7 @@ export default function LoginPage() {
         </div>
 
         <div className="mt-6 text-center">
-          <p className="text-gray-500 dark:text-neutral-500 text-xs">
+          <p className="text-gray-500 dark:text-gray-500 text-xs">
             By signing in, you agree to our Terms of Service and Privacy Policy
           </p>
         </div>
diff --git a/apps/hackathon/src/app/auth/reset-password/page.tsx b/apps/hackathon/src/app/auth/reset-password/page.tsx
index 11a882d..905917b 100644
--- a/apps/hackathon/src/app/auth/reset-password/page.tsx
+++ b/apps/hackathon/src/app/auth/reset-password/page.tsx
@@ -10,17 +10,17 @@ export default function ResetPasswordPage() {
   const [isLoading, setIsLoading] = useState(false);
   const [isValidToken, setIsValidToken] = useState(false);
 
-  useEffect(() => {
-    // Check if we have a valid session (from the reset link)
-    supabase.auth.getSession().then(({ data: { session } }) => {
-      if (session) {
-        setIsValidToken(true);
-      } else {
-        toast.error('Invalid or expired reset link');
-        setTimeout(() => navigate('/auth/forgot-password'), 2000);
-      }
-    });
-  }, [navigate]);
+  // useEffect(() => {
+  //   // Check if we have a valid session (from the reset link)
+  //   supabase.auth.getSession().then(({ data: { session } }) => {
+  //     if (session) {
+  //       setIsValidToken(true);
+  //     } else {
+  //       toast.error('Invalid or expired reset link');
+  //       setTimeout(() => navigate('/auth/forgot-password'), 2000);
+  //     }
+  //   });
+  // }, [navigate]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -59,32 +59,36 @@ export default function ResetPasswordPage() {
     }
   };
 
-  if (!isValidToken) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50">
-        <div className="text-center">
-          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-          <p className="text-gray-600">Verifying reset link...</p>
-        </div>
-      </div>
-    );
-  }
+  // if (!isValidToken) {
+  //   return (
+  //     <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
+  //       <div className="text-center">
+  //         <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
+  //         <p className="text-gray-600 dark:text-gray-400">
+  //           Verifying reset link...
+  //         </p>
+  //       </div>
+  //     </div>
+  //   );
+  // }
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
         <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
             Set New Password
           </h2>
-          <p className="text-gray-600">Enter your new password below</p>
+          <p className="text-gray-600 dark:text-gray-400">
+            Enter your new password below
+          </p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
             <label
               htmlFor="password"
-              className="block text-sm font-medium text-gray-700 mb-1"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
             >
               New Password
             </label>
@@ -95,7 +99,7 @@ export default function ResetPasswordPage() {
               onChange={(e) => setPassword(e.target.value)}
               placeholder="••••••••"
               disabled={isLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
               required
               minLength={6}
             />
@@ -104,7 +108,7 @@ export default function ResetPasswordPage() {
           <div>
             <label
               htmlFor="confirmPassword"
-              className="block text-sm font-medium text-gray-700 mb-1"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
             >
               Confirm New Password
             </label>
@@ -115,7 +119,7 @@ export default function ResetPasswordPage() {
               onChange={(e) => setConfirmPassword(e.target.value)}
               placeholder="••••••••"
               disabled={isLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+              className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
               required
               minLength={6}
             />
diff --git a/apps/hackathon/src/app/auth/signup/page.tsx b/apps/hackathon/src/app/auth/signup/page.tsx
index 0b4bdc2..4fcee88 100644
--- a/apps/hackathon/src/app/auth/signup/page.tsx
+++ b/apps/hackathon/src/app/auth/signup/page.tsx
@@ -138,8 +138,8 @@ export default function SignupPage() {
   };
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-neutral-950 p-4">
-      <div className="bg-white dark:bg-neutral-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-neutral-700">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
         <div className="flex items-center justify-between mb-6">
           <button
             onClick={() => navigate('/')}
@@ -155,7 +155,9 @@ export default function SignupPage() {
           <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
             Create Account
           </h2>
-          <p className="text-gray-600 dark:text-neutral-400">Join the hackathon community</p>
+          <p className="text-gray-600 dark:text-gray-400">
+            Join the hackathon community
+          </p>
         </div>
 
         {error && (
@@ -168,7 +170,7 @@ export default function SignupPage() {
           <div>
             <label
               htmlFor="fullname"
-              className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-1"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
             >
               Full Name
             </label>
@@ -179,7 +181,7 @@ export default function SignupPage() {
               onChange={(e) => setFullname(e.target.value)}
               placeholder="John Doe"
               disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 dark:border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 disabled:bg-gray-100 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed"
+              className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
               required
             />
           </div>
@@ -187,7 +189,7 @@ export default function SignupPage() {
           <div>
             <label
               htmlFor="email"
-              className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-1"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
             >
               Email
             </label>
@@ -198,7 +200,7 @@ export default function SignupPage() {
               onChange={(e) => setEmail(e.target.value)}
               placeholder="your@email.com"
               disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 dark:border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 disabled:bg-gray-100 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed"
+              className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
               required
             />
           </div>
@@ -206,7 +208,7 @@ export default function SignupPage() {
           <div>
             <label
               htmlFor="password"
-              className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-1"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
             >
               Password
             </label>
@@ -217,7 +219,7 @@ export default function SignupPage() {
               onChange={(e) => setPassword(e.target.value)}
               placeholder="••••••••"
               disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 dark:border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 disabled:bg-gray-100 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed"
+              className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
               required
             />
           </div>
@@ -225,7 +227,7 @@ export default function SignupPage() {
           <div>
             <label
               htmlFor="confirmPassword"
-              className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-1"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
             >
               Confirm Password
             </label>
@@ -236,7 +238,7 @@ export default function SignupPage() {
               onChange={(e) => setConfirmPassword(e.target.value)}
               placeholder="••••••••"
               disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 dark:border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 disabled:bg-gray-100 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed"
+              className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
               required
             />
           </div>
@@ -244,23 +246,25 @@ export default function SignupPage() {
           <button
             type="submit"
             disabled={isEmailLoading}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-900 disabled:bg-gray-400 dark:disabled:bg-neutral-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
+            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
           >
             {isEmailLoading ? 'Creating account...' : 'Create Account'}
           </button>
         </form>
 
         <div className="my-6 flex items-center">
-          <div className="flex-1 border-t border-gray-300 dark:border-neutral-600"></div>
-          <span className="px-4 text-sm text-gray-500 dark:text-neutral-400">OR</span>
-          <div className="flex-1 border-t border-gray-300 dark:border-neutral-600"></div>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
+          <span className="px-4 text-sm text-gray-500 dark:text-gray-400">
+            OR
+          </span>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
         </div>
 
         <button
           onClick={handleGithubLogin}
           disabled={isGithubLoading}
           type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-neutral-800 border border-gray-300 dark:border-neutral-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-neutral-900 disabled:bg-gray-100 dark:disabled:bg-neutral-800 disabled:cursor-not-allowed transition-colors cursor-pointer"
+          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-colors cursor-pointer"
         >
           <GithubOutlined className="text-xl" />
           <span>
@@ -269,7 +273,7 @@ export default function SignupPage() {
         </button>
 
         <div className="mt-6 text-center">
-          <p className="text-gray-600 dark:text-neutral-400 text-sm">
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
             Already have an account?{' '}
             <a
               href="/auth/login"
@@ -281,7 +285,7 @@ export default function SignupPage() {
         </div>
 
         <div className="mt-6 text-center">
-          <p className="text-gray-500 dark:text-neutral-500 text-xs">
+          <p className="text-gray-500 dark:text-gray-500 text-xs">
             By signing up, you agree to our Terms of Service and Privacy Policy
           </p>
         </div>