feat: unify login UI across all apps to match hackathon design

- Dimentorin: replaced anime-themed login with clean dark-mode design,
  removed Google login, uses shared useLogin hook
- Backoffice: replaced custom hook login with unified design, clean
  admin-only layout (no signup link)
- QR Campaign: added dark mode support to match hackathon style

All login pages now share consistent:
- Dark/light mode support
- Email + password fields with show/hide toggle
- GitHub OAuth button
- Error handling UI
- Same Tailwind class patterns

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/backoffice/src/app/(public)/auth/login/page.tsx

@@ -1,55 +1,110 @@
-import { FC, ReactElement } from 'react';
+import { useState } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { useLogin } from '@imphnen-frontend-service/service';
-import { useLogin } from './_hooks/use-login';
+import { useNavigate } from 'react-router';
-import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
 
-export const Components: FC = (): ReactElement => {
+export default function LoginPage() {
-  const { form, onSubmit, isLoading } = useLogin();
+  const navigate = useNavigate();
+  const loginMutation = useLogin();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleEmailLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    if (!email || !password) {
+      setError('Please enter both email and password');
+      return;
+    }
+    try {
+      await loginMutation.mutateAsync({ email, password });
+      toast.success('Login successful!');
+      navigate('/');
+    } catch (err) {
+      setError((err as Error).message || 'Login failed');
+    }
+  };
 
   return (
-    <div className="flex justify-center items-center min-h-screen">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-      <div className="bg-white border border-primary-200 shadow-lg p-[60px] text-center flex flex-col justify-items-stretch gap-8 rounded-2xl">
+      <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">
-        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+        <div className="text-center mb-8">
-        <h1 className="text-primary-500 text-p1 font-semibold">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-          Welcome to IMPHNEN Backoffice
+            Welcome Back
-        </h1>
+          </h2>
-        <form onSubmit={onSubmit} className="flex flex-col gap-8">
+          <p className="text-gray-600 dark:text-gray-400 font-sans">
-          <ControlledInputField
+            Sign in to IMPHNEN Backoffice
-            control={form.control}
+          </p>
-            label="Email"
+        </div>
-            placeholder="Masukkan Email"
+
-            type="email"
+        {error && (
-            name="email"
+          <div className="mb-6 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-            size="lg"
+            <p className="text-red-600 dark:text-red-400 text-sm">{error}</p>
-            className="w-full"
+          </div>
-            disabled={isLoading}
+        )}
-          />
+
-          <ControlledInputField
+        <form onSubmit={handleEmailLogin} className="space-y-4">
-            control={form.control}
+          <div>
-            label="Password"
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-            placeholder="Masukkan Password"
+              Email
-            type="password"
+            </label>
-            name="password"
+            <input
-            size="lg"
+              id="email"
-            className="w-full"
+              type="email"
-            disabled={isLoading}
+              value={email}
-          />
+              onChange={(e) => setEmail(e.target.value)}
-          <Button
+              placeholder="your@email.com"
-            disabled={
+              disabled={loginMutation.isPending}
-              isLoading ||
+              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"
-              form.formState.isValidating ||
+              required
-              !form.formState.isValid
+            />
-            }
+          </div>
+
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Password
+              </label>
+            </div>
+            <div className="relative">
+              <input
+                id="password"
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="••••••••"
+                disabled={loginMutation.isPending}
+                className="w-full px-4 py-2.5 pr-12 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
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+              >
+                <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
+              </button>
+            </div>
+          </div>
+
+          <button
             type="submit"
-            size="md"
+            disabled={loginMutation.isPending}
-            className="w-full"
+            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"
           >
-            {isLoading ? 'Loading...' : 'Login'}
+            {loginMutation.isPending ? 'Signing in...' : 'Sign in'}
-          </Button>
+          </button>
         </form>
+
+        <div className="mt-6 text-center">
+          <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>
       </div>
     </div>
   );
-};
+}
-
-export default Components;

apps/dimentorin/src/app/auth/login/page.tsx

@@ -1,99 +1,191 @@
-import { FC, ReactElement } from 'react';
+import { useState, useEffect } from 'react';
-import { ControlledInputField, LoginBanner } from '@imphnen-frontend-service/ui/organisms';
+import {
-import { Button } from '@imphnen-frontend-service/ui/atoms';
+  useGitHubAuth,
-import { useLogin } from '../../_hooks/use-login';
+  useLogin,
-import { useGoogleLogin } from '../../_hooks/use-google-login';
+} from '@imphnen-frontend-service/service';
-import { ArrowLeftOutlined } from '@ant-design/icons';
+import { GithubOutlined } from '@ant-design/icons';
+import { useNavigate, Link } from 'react-router';
+import { toast } from 'sonner';
+import { Icon } from '@iconify/react';
 
-export const Components: FC = (): ReactElement => {
+export default function LoginPage() {
-  const { form, onSubmit, isLoading } = useLogin();
+  const navigate = useNavigate();
-  const { handleGoogleLogin } = useGoogleLogin();
+  const { signInWithGitHub } = useGitHubAuth();
+  const loginMutation = useLogin();
+  const [isGithubLoading, setIsGithubLoading] = useState(false);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [showPassword, setShowPassword] = useState(false);
+
+  useEffect(() => {
+    const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
+    const urlParams = new URLSearchParams(globalThis.location.search);
+    const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
+    const type = hashParams.get('type') || urlParams.get('type');
+    if (accessToken) {
+      if (type === 'recovery' || type === 'magiclink' || !type) {
+        toast.info('Redirecting to password reset...');
+        navigate('/auth/reset-password?access_token=' + accessToken);
+      }
+    }
+  }, [navigate]);
+
+  const handleEmailLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    if (!email || !password) {
+      setError('Please enter both email and password');
+      return;
+    }
+    try {
+      await loginMutation.mutateAsync({ email, password });
+      toast.success('Login successful!');
+      navigate('/dashboard');
+    } catch (err) {
+      setError((err as Error).message || 'Login failed');
+    }
+  };
+
+  const handleGithubLogin = async () => {
+    try {
+      setIsGithubLoading(true);
+      const result = await signInWithGitHub();
+      if (result?.url) {
+        globalThis.location.href = result.url;
+      } else {
+        setIsGithubLoading(false);
+        setError('Failed to get GitHub OAuth URL');
+      }
+    } catch (err) {
+      setError((err as Error).message || 'GitHub login failed');
+      setIsGithubLoading(false);
+    }
+  };
 
   return (
-    <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-      <div className="bg-white xl:min-w-[1120px] xl:min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+      <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">
-        <LoginBanner />
+        <div className="flex items-center justify-between mb-6">
-        <div className="xl:border-2 xl:border-primary-500/50 md:w-[596px] rounded-lg md:py-[70px] md:px-[96px] flex justify-center">
+          <button
-          <div className="md:w-[404px]">
+            onClick={() => navigate('/')}
-            <h2 className="text-4xl font-semibold text-primary-500 text-center mb-2">
+            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"
-              Hallo Minna-san
+          >
-            </h2>
+            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
-            <h5 className="text-xl font-medium text-primary-500 text-center mb-5">
+            Back to Homepage
-              Welcome to Dimentorin by IMPHNEN
+          </button>
-            </h5>
+        </div>
-            <form onSubmit={onSubmit} className="flex flex-col gap-2">
-              <ControlledInputField
-                control={form.control}
-                label="Email"
-                size="lg"
-                className="w-full mb-2"
-                placeholder="Masukkan email-mu, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)"
-                name={'email'}
-              />
-              <ControlledInputField
-                control={form.control}
-                label="Password"
-                className="w-full"
-                size="lg"
-                type="password"
-                placeholder="Masukkan password rahasiamu!"
-                name={'password'}
-              />
-              <div className="flex justify-end my-5">
-                <a href="/auth/forgot" className="text-primary-500 font-medium">
-                  Lupa Password ?
-                </a>
-              </div>
-              <Button className="w-full" type='submit' disabled={(!form.formState.isValid || isLoading)}>Enter Isekai</Button>
-            </form>
 
-            <div className="flex my-3 gap-3 justify-center">
+        <div className="text-center mb-8">
-              <h5>Belum Punya akun ?</h5>
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-              <a href="/auth/register" className="text-primary-500 font-medium">
+            Welcome Back
-                Daftar Disini
+          </h2>
-              </a>
+          <p className="text-gray-600 dark:text-gray-400 font-sans">
-            </div>
+            Sign in to the mentoring platform
-            <div className='text-center w-full mb-1'>
+          </p>
-              <a href="/auth/register-mentor" className="text-primary-500 font-medium">
+        </div>
-                Daftar Sebagai Mentor
+
-              </a>
+        {error && (
-            </div>
+          <div className="mb-6 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-            <div className="flex items-center w-full">
+            <p className="text-red-600 dark:text-red-400 text-sm">{error}</p>
-              <div className="flex-grow border-t border-blue-400 opacity-50"></div>
-              <span className="px-3 text-blue-400">Or</span>
-              <div className="flex-grow border-t border-blue-400 opacity-50"></div>
-            </div>
-            <Button
-              className="w-full my-3 text-gray-500 gap-2"
-              variant="secondary"
-              onClick={handleGoogleLogin}
-            >
-              <p>Log In With Google</p>
-              <img
-                src="/image/33978ce5bed2da9bf9d73acad802182a.webp"
-                alt="Google Icon"
-                width={24}
-              />
-            </Button>
-            <Button
-              className='xl:hidden w-full gap-3'
-              variant='secondary'
-            >
-              <ArrowLeftOutlined />
-              Kembali Ke Homepage
-            </Button>
-            <Button
-              className='xl:hidden w-full gap-3'
-              variant='secondary'
-            >
-              <ArrowLeftOutlined />
-              Kembali Ke Homepage
-            </Button>
           </div>
+        )}
+
+        <form onSubmit={handleEmailLogin} className="space-y-4">
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="your@email.com"
+              disabled={loginMutation.isPending}
+              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>
+
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Password
+              </label>
+              <Link to="/auth/forgot-password" className="text-sm text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300">
+                Forgot password?
+              </Link>
+            </div>
+            <div className="relative">
+              <input
+                id="password"
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="••••••••"
+                disabled={loginMutation.isPending}
+                className="w-full px-4 py-2.5 pr-12 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
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+              >
+                <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
+              </button>
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loginMutation.isPending}
+            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"
+          >
+            {loginMutation.isPending ? '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-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-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>{isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}</span>
+        </button>
+
+        <p className="mt-3 text-xs text-center text-gray-500 dark:text-gray-500 font-sans">
+          Make sure your GitHub email is{' '}
+          <a href="https://github.com/settings/emails" target="_blank" rel="noopener noreferrer" className="text-primary-600 dark:text-primary-400 hover:underline">
+            set to public
+          </a>{' '}
+          for GitHub sign in to work.
+        </p>
+
+        <div className="mt-6 text-center">
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
+            Don't have an account?{' '}
+            <Link to="/auth/signup" className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold">
+              Sign up
+            </Link>
+          </p>
+        </div>
+
+        <div className="mt-6 text-center">
+          <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>
       </div>
     </div>
   );
-};
+}
-
-export default Components;

apps/qrcampaign/src/app/auth/login/page.tsx

@@ -24,20 +24,11 @@ export default function LoginPage() {
   }, [isAuthenticated, navigate]);
 
   useEffect(() => {
-    const hashParams = new URLSearchParams(
+    const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
-      globalThis.location.hash.substring(1)
-    );
     const urlParams = new URLSearchParams(globalThis.location.search);
-
+    const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
-    const accessToken =
-      hashParams.get('access_token') || urlParams.get('access_token');
     const type = hashParams.get('type') || urlParams.get('type');
-
     if (accessToken) {
-      console.log(
-        '[Login] Detected access_token, redirecting to reset-password page'
-      );
-
       if (type === 'recovery' || type === 'magiclink' || !type) {
         toast.info('Redirecting to password reset...');
         navigate('/auth/reset-password?access_token=' + accessToken);
@@ -48,16 +39,13 @@ export default function LoginPage() {
   const handleEmailLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
-
     if (!email || !password) {
       setError('Please enter both email and password');
       return;
     }
-
     setIsSubmitting(true);
     try {
       const success = await login(email, password);
-
       if (success) {
         toast.success('Login successful!');
         navigate('/');
@@ -65,7 +53,6 @@ export default function LoginPage() {
         setError('Login failed. Please check your credentials.');
       }
     } catch (err) {
-      console.error('[Login] Email login failed:', err);
       setError('Login failed. Please try again.');
     } finally {
       setIsSubmitting(false);
@@ -77,30 +64,26 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
+      <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">
             Welcome Back
           </h2>
-          <p className="text-gray-600">Sign in to continue to IMPHNEN</p>
+          <p className="text-gray-600 dark:text-gray-400 font-sans">
+            Sign in to QR Campaign Manager
+          </p>
         </div>
 
         {error && (
-          <div className="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg">
+          <div className="mb-6 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-            <p className="text-red-600 text-sm">{error}</p>
+            <p className="text-red-600 dark:text-red-400 text-sm">{error}</p>
           </div>
         )}
 
-        <form onSubmit={handleEmailLogin} className="space-y-4 mb-6">
+        <form onSubmit={handleEmailLogin} className="space-y-4">
           <div>
-            <label
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-              htmlFor="email"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
               Email
             </label>
             <input
@@ -108,25 +91,19 @@ export default function LoginPage() {
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
-              placeholder="yourname@example.com"
+              placeholder="your@email.com"
               disabled={isSubmitting}
-              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 bg-white text-gray-900 placeholder:text-gray-400 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 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>
 
           <div>
             <div className="flex items-center justify-between mb-1">
-              <label
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                htmlFor="password"
-                className="block text-sm font-medium text-gray-700"
-              >
                 Password
               </label>
-              <Link
+              <Link to="/auth/forgot-password" className="text-sm text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300">
-                to="/auth/forgot-password"
-                className="text-sm text-primary-600 hover:text-primary-700 font-medium"
-              >
                 Forgot password?
               </Link>
             </div>
@@ -138,18 +115,15 @@ export default function LoginPage() {
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="••••••••"
                 disabled={isSubmitting}
-                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 bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed pr-10"
+                className="w-full px-4 py-2.5 pr-12 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
               />
               <button
                 type="button"
                 onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
               >
-                <Icon
+                <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
-                  icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'}
-                  className="text-xl"
-                />
               </button>
             </div>
           </div>
@@ -157,62 +131,47 @@ export default function LoginPage() {
           <button
             type="submit"
             disabled={isSubmitting}
-            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 disabled:bg-gray-400 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"
           >
-            {isSubmitting ? 'Signing in...' : 'Sign in'}
+            {isSubmitting ? 'Signing in...' : 'Sign in with Email'}
           </button>
         </form>
 
-        <div className="relative my-6">
+        <div className="my-6 flex items-center">
-          <div className="absolute inset-0 flex items-center">
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
-            <div className="w-full border-t border-gray-300"></div>
+          <span className="px-4 text-sm text-gray-500 dark:text-gray-400">OR</span>
-          </div>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
-          <div className="relative flex justify-center text-sm">
-            <span className="px-2 bg-white text-gray-500">
-              Or continue with
-            </span>
-          </div>
         </div>
 
         <button
           onClick={handleGithubLogin}
           disabled={isGithubLoading}
           type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 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>
+          <span>{isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}</span>
-            {isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}
-          </span>
         </button>
 
-        <p className="mt-3 text-xs text-center text-gray-500">
+        <p className="mt-3 text-xs text-center text-gray-500 dark:text-gray-500 font-sans">
           Make sure your GitHub email is{' '}
-          <a
+          <a href="https://github.com/settings/emails" target="_blank" rel="noopener noreferrer" className="text-primary-600 dark:text-primary-400 hover:underline">
-            href="https://github.com/settings/emails"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary-600 hover:underline"
-          >
             set to public
           </a>{' '}
           for GitHub sign in to work.
         </p>
 
         <div className="mt-6 text-center">
-          <p className="text-gray-600 text-sm">
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
             Don't have an account?{' '}
-            <Link
+            <Link to="/auth/signup" className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold">
-              to="/auth/signup"
-              className="text-primary-600 hover:text-primary-700 font-semibold"
-            >
               Sign up
             </Link>
           </p>
         </div>
 
         <div className="mt-6 text-center">
-          <p className="text-gray-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>