From a894054621eb354b8f237a11ba18982b90202071 Mon Sep 17 00:00:00 2001
From: Aysel <aysel_omer@icloud.com>
Date: Fri, 13 Mar 2026 21:04:46 -0400
Subject: [PATCH 1/3] completed static onboarding page

---
 apps/frontend/app/login/page.tsx  |  46 ++++++++++++
 apps/frontend/app/signup/page.tsx | 121 ++++++++++++++++++++++++++++++
 2 files changed, 167 insertions(+)
 create mode 100644 apps/frontend/app/login/page.tsx
 create mode 100644 apps/frontend/app/signup/page.tsx

diff --git a/apps/frontend/app/login/page.tsx b/apps/frontend/app/login/page.tsx
new file mode 100644
index 0000000..8a2b125
--- /dev/null
+++ b/apps/frontend/app/login/page.tsx
@@ -0,0 +1,46 @@
+// apps/frontend/app/login/page.tsx
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-white p-4">
+      <div className="w-full max-w-md border border-black rounded-lg p-8 space-y-6">
+        <h1 className="text-4xl text-center mb-8">Login</h1>
+        
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">Email</label>
+            <input type="email" className="w-full p-2 border border-black rounded-sm" />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium mb-1">Password</label>
+            <input type="password" className="w-full p-2 border border-black rounded-sm" />
+            <div className="text-right mt-1">
+              <button className="text-xs hover:underline">Forgot Password?</button>
+            </div>
+          </div>
+        </div>
+
+        <button className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors text-lg">
+          Login
+        </button>
+
+        <div className="relative border-t border-gray-400 my-8">
+          <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-2"></span>
+        </div>
+
+        <div className="space-y-3">
+          <button className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors">
+            Login with Github
+          </button>
+          <button className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors">
+            Login with Google
+          </button>
+        </div>
+
+        <p className="text-center text-sm mt-4">
+          Dont have an account? <a href="/signup" className="hover:underline font-semibold">Register</a>
+        </p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/frontend/app/signup/page.tsx b/apps/frontend/app/signup/page.tsx
new file mode 100644
index 0000000..f32c05f
--- /dev/null
+++ b/apps/frontend/app/signup/page.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+export default function SignupPage() {
+  const [isSignedUp, setIsSignedUp] = useState(false);
+
+  // --- Onboarding View (Matches Figma) ---
+  if (isSignedUp) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-white p-4">
+        <div className="w-full max-w-lg border border-black rounded-lg p-8 relative">
+          {/* Back Arrow to return to Register */}
+          <button 
+            onClick={() => setIsSignedUp(false)} 
+            className="absolute top-8 left-8 text-xl"
+          >
+            ←
+          </button>
+
+          <div className="text-center mb-8">
+            <h1 className="text-3xl font-medium">Welcome to CS+SG</h1>
+            <p className="text-sm">Set up your basic profile</p>
+          </div>
+
+          <div className="flex gap-8 mb-6">
+            {/* Avatar Section */}
+            <div className="relative">
+              <div className="w-32 h-32 rounded-full border border-black flex items-center justify-center overflow-hidden">
+                <div className="relative w-full h-full">
+                  <div className="absolute inset-0 border-t border-black rotate-45 origin-center scale-150"></div>
+                  <div className="absolute inset-0 border-t border-black -rotate-45 origin-center scale-150"></div>
+                </div>
+              </div>
+              <button className="absolute bottom-0 right-0 bg-white border border-black rounded-full p-1 w-8 h-8 flex items-center justify-center">
+                ✎
+              </button>
+            </div>
+
+            {/* Identity Fields */}
+            <div className="flex-1 space-y-4">
+              <div>
+                <label className="block text-sm mb-1">First Name</label>
+                <input type="text" className="w-full border border-black p-2 rounded-sm" />
+              </div>
+              <div>
+                <label className="block text-sm mb-1">Last Name</label>
+                <input type="text" className="w-full border border-black p-2 rounded-sm" />
+              </div>
+              <div>
+                <label className="block text-sm mb-1">Pronouns</label>
+                <select className="w-full border border-black p-2 rounded-sm bg-white">
+                  <option value=""></option>
+                  <option value="he-him">He/Him</option>
+                  <option value="she-her">She/Her</option>
+                  <option value="they-them">They/Them</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          {/* Links Section */}
+          <div className="space-y-2">
+            <label className="block text-sm">Links</label>
+            <div className="flex gap-2">
+              <input type="text" className="flex-1 border border-black p-2 rounded-sm" />
+              <button className="border border-black px-4 py-2 hover:bg-gray-100 transition-colors">
+                Add
+              </button>
+            </div>
+            <div className="space-y-1">
+               <div className="flex items-center gap-2 border-b border-gray-400 py-2">
+                 <span className="text-sm cursor-pointer hover:text-red-500">✕</span>
+               </div>
+               <div className="flex items-center gap-2 border-b border-gray-400 py-2">
+                 <span className="text-sm cursor-pointer hover:text-red-500">✕</span>
+               </div>
+            </div>
+          </div>
+
+          <button className="w-full mt-8 text-center font-medium hover:underline">
+            Done
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // --- Register View ---
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-white p-4">
+      <div className="w-full max-w-md border border-black rounded-lg p-8 space-y-6">
+        <h1 className="text-4xl text-center mb-8">Register</h1>
+        
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">Email</label>
+            <input type="email" className="w-full p-2 border border-black rounded-sm" />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium mb-1">Password</label>
+            <input type="password" className="w-full p-2 border border-black rounded-sm" />
+          </div>
+        </div>
+
+        <button 
+          onClick={() => setIsSignedUp(true)}
+          className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors text-lg"
+        >
+          Register
+        </button>
+
+        <p className="text-center text-sm mt-4">
+          Have an account? <Link href="/login" className="hover:underline font-semibold">Login</Link>
+        </p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

From df17524e9c5a9613d9a2e429f235b359565a0dee Mon Sep 17 00:00:00 2001
From: Aysel <aysel_omer@icloud.com>
Date: Sun, 15 Mar 2026 02:28:45 -0400
Subject: [PATCH 2/3] onboarding and signup components, login placeholders,
 linting

---
 apps/frontend/app/components/Onboarding.tsx |  67 +++++++++++
 apps/frontend/app/components/SignUpForm.tsx |  31 +++++
 apps/frontend/app/forgot-password/page.tsx  |  12 ++
 apps/frontend/app/login/page.tsx            |  67 ++++++-----
 apps/frontend/app/signup/page.tsx           | 119 ++------------------
 5 files changed, 155 insertions(+), 141 deletions(-)
 create mode 100644 apps/frontend/app/components/Onboarding.tsx
 create mode 100644 apps/frontend/app/components/SignUpForm.tsx
 create mode 100644 apps/frontend/app/forgot-password/page.tsx

diff --git a/apps/frontend/app/components/Onboarding.tsx b/apps/frontend/app/components/Onboarding.tsx
new file mode 100644
index 0000000..865743a
--- /dev/null
+++ b/apps/frontend/app/components/Onboarding.tsx
@@ -0,0 +1,67 @@
+export default function Onboarding({ onBack }: { onBack: () => void }) {
+  return (
+    <div className="relative w-full max-w-lg rounded-lg border border-black p-8">
+      <button onClick={onBack} className="absolute left-8 top-8 text-xl">
+        ←
+      </button>
+
+      <div className="mb-8 text-center">
+        <h1 className="text-3xl font-medium">Welcome to CS+SG</h1>
+        <p className="text-sm">Set up your basic profile</p>
+      </div>
+
+      {/* Avatar and Identity Fields */}
+      <div className="mb-6 flex gap-8">
+        <div className="relative">
+          <div className="flex h-32 w-32 items-center justify-center overflow-hidden rounded-full border border-black">
+            <div className="relative h-full w-full">
+              <div className="absolute inset-0 origin-center rotate-45 scale-150 border-t border-black"></div>
+              <div className="absolute inset-0 origin-center -rotate-45 scale-150 border-t border-black"></div>
+            </div>
+          </div>
+          <button className="absolute bottom-0 right-0 flex h-8 w-8 items-center justify-center rounded-full border border-black bg-white p-1">
+            ✎
+          </button>
+        </div>
+
+        <div className="flex-1 space-y-4">
+          <div>
+            <label className="mb-1 block text-sm">First Name</label>
+            <input type="text" className="w-full rounded-sm border border-black p-2" />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm">Last Name</label>
+            <input type="text" className="w-full rounded-sm border border-black p-2" />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm">Pronouns</label>
+            <select className="w-full rounded-sm border border-black bg-white p-2">
+              <option value=""></option>
+              <option value="he-him">He/Him</option>
+              <option value="she-her">She/Her</option>
+              <option value="they-them">They/Them</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {/* Links Section */}
+      <div className="space-y-2">
+        <label className="block text-sm">Links</label>
+        <div className="flex gap-2">
+          <input type="text" className="flex-1 rounded-sm border border-black p-2" />
+          <button className="border border-black px-4 py-2 transition-colors hover:bg-gray-100">
+            Add
+          </button>
+        </div>
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 border-b border-gray-400 py-2">
+            <span className="cursor-pointer text-sm hover:text-red-500">✕</span>
+          </div>
+        </div>
+      </div>
+
+      <button className="mt-8 w-full text-center font-medium hover:underline">Done</button>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/components/SignUpForm.tsx b/apps/frontend/app/components/SignUpForm.tsx
new file mode 100644
index 0000000..39b73b2
--- /dev/null
+++ b/apps/frontend/app/components/SignUpForm.tsx
@@ -0,0 +1,31 @@
+import Link from "next/link";
+
+export default function SignupForm({ onSignupSuccess }: { onSignupSuccess: () => void }) {
+  return (
+    <div className="w-full max-w-md space-y-6 rounded-lg border border-black p-8">
+      <h1 className="mb-8 text-center text-4xl">Register</h1>
+      <div className="space-y-4">
+        <div>
+          <label className="mb-1 block text-sm font-medium">Email</label>
+          <input type="email" className="w-full rounded-sm border border-black p-2" />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium">Password</label>
+          <input type="password" className="w-full rounded-sm border border-black p-2" />
+        </div>
+      </div>
+      <button
+        onClick={onSignupSuccess}
+        className="w-full rounded bg-gray-200 py-3 text-lg transition-colors hover:bg-gray-300"
+      >
+        Register
+      </button>
+      <p className="mt-4 text-center text-sm">
+        Have an account?{" "}
+        <Link href="/login" className="font-semibold hover:underline">
+          Login
+        </Link>
+      </p>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/forgot-password/page.tsx b/apps/frontend/app/forgot-password/page.tsx
new file mode 100644
index 0000000..468f9e1
--- /dev/null
+++ b/apps/frontend/app/forgot-password/page.tsx
@@ -0,0 +1,12 @@
+export default function ForgotPasswordPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-white p-4 text-black">
+      <div className="w-full max-w-md rounded-lg border border-black p-8 text-center">
+        <h1 className="mb-4 text-2xl">Forgot Password</h1>
+        <p className="mb-6">Enter your email to reset your password.</p>
+        <input type="email" className="mb-4 w-full border border-black p-2" placeholder="Email" />
+        <button className="w-full rounded bg-gray-200 py-2">Send Reset Link</button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/login/page.tsx b/apps/frontend/app/login/page.tsx
index 8a2b125..d5d12a9 100644
--- a/apps/frontend/app/login/page.tsx
+++ b/apps/frontend/app/login/page.tsx
@@ -1,46 +1,53 @@
-// apps/frontend/app/login/page.tsx
+"use client";
+import Link from "next/link";
+
 export default function LoginPage() {
+  const handleLogin = () => console.log("Standard login triggered");
+  const handleGithubLogin = () => console.log("Github OAuth triggered");
+  const handleGoogleLogin = () => console.log("Google OAuth triggered");
+
   return (
     <div className="flex min-h-screen items-center justify-center bg-white p-4">
-      <div className="w-full max-w-md border border-black rounded-lg p-8 space-y-6">
-        <h1 className="text-4xl text-center mb-8">Login</h1>
-        
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium mb-1">Email</label>
-            <input type="email" className="w-full p-2 border border-black rounded-sm" />
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-1">Password</label>
-            <input type="password" className="w-full p-2 border border-black rounded-sm" />
-            <div className="text-right mt-1">
-              <button className="text-xs hover:underline">Forgot Password?</button>
-            </div>
-          </div>
-        </div>
-
-        <button className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors text-lg">
+      <div className="w-full max-w-md space-y-6 rounded-lg border border-black p-8">
+        <h1 className="mb-8 text-center text-4xl">Login</h1>
+        {/* ... Email/Password inputs ... */}
+        <button
+          onClick={handleLogin}
+          className="w-full rounded bg-gray-200 py-3 text-lg hover:bg-gray-300"
+        >
           Login
         </button>
-
-        <div className="relative border-t border-gray-400 my-8">
-          <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-2"></span>
+        <div className="text-right">
+          <Link
+            href="/forgot-password"
+            title="Forgot Password?"
+            className="text-xs hover:underline"
+          >
+            Forgot Password?
+          </Link>
         </div>
-
+        {/* ... Divider ... */}
         <div className="space-y-3">
-          <button className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors">
+          <button
+            onClick={handleGithubLogin}
+            className="w-full rounded bg-gray-200 py-3 hover:bg-gray-300"
+          >
             Login with Github
           </button>
-          <button className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors">
+          <button
+            onClick={handleGoogleLogin}
+            className="w-full rounded bg-gray-200 py-3 hover:bg-gray-300"
+          >
             Login with Google
           </button>
         </div>
-
-        <p className="text-center text-sm mt-4">
-          Dont have an account? <a href="/signup" className="hover:underline font-semibold">Register</a>
+        <p className="mt-4 text-center text-sm">
+          Don&apos;t have an account?{" "}
+          <Link href="/signup" className="font-semibold hover:underline">
+            Register
+          </Link>
         </p>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/frontend/app/signup/page.tsx b/apps/frontend/app/signup/page.tsx
index f32c05f..8ef5de4 100644
--- a/apps/frontend/app/signup/page.tsx
+++ b/apps/frontend/app/signup/page.tsx
@@ -1,121 +1,18 @@
 "use client";
-
 import { useState } from "react";
-import Link from "next/link";
+import SignUpForm from "../components/SignUpForm";
+import Onboarding from "../components/Onboarding";
 
 export default function SignupPage() {
   const [isSignedUp, setIsSignedUp] = useState(false);
 
-  // --- Onboarding View (Matches Figma) ---
-  if (isSignedUp) {
-    return (
-      <div className="flex min-h-screen items-center justify-center bg-white p-4">
-        <div className="w-full max-w-lg border border-black rounded-lg p-8 relative">
-          {/* Back Arrow to return to Register */}
-          <button 
-            onClick={() => setIsSignedUp(false)} 
-            className="absolute top-8 left-8 text-xl"
-          >
-            ←
-          </button>
-
-          <div className="text-center mb-8">
-            <h1 className="text-3xl font-medium">Welcome to CS+SG</h1>
-            <p className="text-sm">Set up your basic profile</p>
-          </div>
-
-          <div className="flex gap-8 mb-6">
-            {/* Avatar Section */}
-            <div className="relative">
-              <div className="w-32 h-32 rounded-full border border-black flex items-center justify-center overflow-hidden">
-                <div className="relative w-full h-full">
-                  <div className="absolute inset-0 border-t border-black rotate-45 origin-center scale-150"></div>
-                  <div className="absolute inset-0 border-t border-black -rotate-45 origin-center scale-150"></div>
-                </div>
-              </div>
-              <button className="absolute bottom-0 right-0 bg-white border border-black rounded-full p-1 w-8 h-8 flex items-center justify-center">
-                ✎
-              </button>
-            </div>
-
-            {/* Identity Fields */}
-            <div className="flex-1 space-y-4">
-              <div>
-                <label className="block text-sm mb-1">First Name</label>
-                <input type="text" className="w-full border border-black p-2 rounded-sm" />
-              </div>
-              <div>
-                <label className="block text-sm mb-1">Last Name</label>
-                <input type="text" className="w-full border border-black p-2 rounded-sm" />
-              </div>
-              <div>
-                <label className="block text-sm mb-1">Pronouns</label>
-                <select className="w-full border border-black p-2 rounded-sm bg-white">
-                  <option value=""></option>
-                  <option value="he-him">He/Him</option>
-                  <option value="she-her">She/Her</option>
-                  <option value="they-them">They/Them</option>
-                </select>
-              </div>
-            </div>
-          </div>
-
-          {/* Links Section */}
-          <div className="space-y-2">
-            <label className="block text-sm">Links</label>
-            <div className="flex gap-2">
-              <input type="text" className="flex-1 border border-black p-2 rounded-sm" />
-              <button className="border border-black px-4 py-2 hover:bg-gray-100 transition-colors">
-                Add
-              </button>
-            </div>
-            <div className="space-y-1">
-               <div className="flex items-center gap-2 border-b border-gray-400 py-2">
-                 <span className="text-sm cursor-pointer hover:text-red-500">✕</span>
-               </div>
-               <div className="flex items-center gap-2 border-b border-gray-400 py-2">
-                 <span className="text-sm cursor-pointer hover:text-red-500">✕</span>
-               </div>
-            </div>
-          </div>
-
-          <button className="w-full mt-8 text-center font-medium hover:underline">
-            Done
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  // --- Register View ---
   return (
     <div className="flex min-h-screen items-center justify-center bg-white p-4">
-      <div className="w-full max-w-md border border-black rounded-lg p-8 space-y-6">
-        <h1 className="text-4xl text-center mb-8">Register</h1>
-        
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium mb-1">Email</label>
-            <input type="email" className="w-full p-2 border border-black rounded-sm" />
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-1">Password</label>
-            <input type="password" className="w-full p-2 border border-black rounded-sm" />
-          </div>
-        </div>
-
-        <button 
-          onClick={() => setIsSignedUp(true)}
-          className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors text-lg"
-        >
-          Register
-        </button>
-
-        <p className="text-center text-sm mt-4">
-          Have an account? <Link href="/login" className="hover:underline font-semibold">Login</Link>
-        </p>
-      </div>
+      {isSignedUp ? (
+        <Onboarding onBack={() => setIsSignedUp(false)} />
+      ) : (
+        <SignUpForm onSignupSuccess={() => setIsSignedUp(true)} />
+      )}
     </div>
   );
-}
\ No newline at end of file
+}

From 02a5538251ca6d0e3cc560609742ed6b1a6249cb Mon Sep 17 00:00:00 2001
From: pmoharana-cmd <pmoharana032474@gmail.com>
Date: Mon, 16 Mar 2026 03:37:13 +0000
Subject: [PATCH 3/3] Fix login styling and add email/password fields

---
 apps/frontend/app/components/SignUpForm.tsx | 24 +++++---
 apps/frontend/app/login/page.tsx            | 65 ++++++++++++++++-----
 apps/frontend/app/signup/page.tsx           |  2 +-
 3 files changed, 68 insertions(+), 23 deletions(-)

diff --git a/apps/frontend/app/components/SignUpForm.tsx b/apps/frontend/app/components/SignUpForm.tsx
index 39b73b2..342757c 100644
--- a/apps/frontend/app/components/SignUpForm.tsx
+++ b/apps/frontend/app/components/SignUpForm.tsx
@@ -2,27 +2,33 @@ import Link from "next/link";
 
 export default function SignupForm({ onSignupSuccess }: { onSignupSuccess: () => void }) {
   return (
-    <div className="w-full max-w-md space-y-6 rounded-lg border border-black p-8">
-      <h1 className="mb-8 text-center text-4xl">Register</h1>
+    <div className="w-full max-w-md space-y-6 rounded-lg border border-slate-300 bg-white p-8 text-slate-900 shadow-lg">
+      <h1 className="mb-8 text-center text-4xl font-semibold text-slate-900">Register</h1>
       <div className="space-y-4">
         <div>
-          <label className="mb-1 block text-sm font-medium">Email</label>
-          <input type="email" className="w-full rounded-sm border border-black p-2" />
+          <label className="mb-1 block text-sm font-medium text-slate-800">Email</label>
+          <input
+            type="email"
+            className="w-full rounded-sm border border-slate-300 bg-white p-2 text-slate-900 placeholder:text-slate-400"
+          />
         </div>
         <div>
-          <label className="mb-1 block text-sm font-medium">Password</label>
-          <input type="password" className="w-full rounded-sm border border-black p-2" />
+          <label className="mb-1 block text-sm font-medium text-slate-800">Password</label>
+          <input
+            type="password"
+            className="w-full rounded-sm border border-slate-300 bg-white p-2 text-slate-900 placeholder:text-slate-400"
+          />
         </div>
       </div>
       <button
         onClick={onSignupSuccess}
-        className="w-full rounded bg-gray-200 py-3 text-lg transition-colors hover:bg-gray-300"
+        className="w-full rounded bg-slate-200 py-3 text-lg font-medium text-slate-900 transition-colors hover:bg-slate-300"
       >
         Register
       </button>
-      <p className="mt-4 text-center text-sm">
+      <p className="mt-4 text-center text-sm text-slate-700">
         Have an account?{" "}
-        <Link href="/login" className="font-semibold hover:underline">
+        <Link href="/login" className="font-semibold text-slate-900 hover:underline">
           Login
         </Link>
       </p>
diff --git a/apps/frontend/app/login/page.tsx b/apps/frontend/app/login/page.tsx
index d5d12a9..1d19a5d 100644
--- a/apps/frontend/app/login/page.tsx
+++ b/apps/frontend/app/login/page.tsx
@@ -1,19 +1,58 @@
 "use client";
+import { useState } from "react";
 import Link from "next/link";
 
 export default function LoginPage() {
-  const handleLogin = () => console.log("Standard login triggered");
-  const handleGithubLogin = () => console.log("Github OAuth triggered");
-  const handleGoogleLogin = () => console.log("Google OAuth triggered");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const logLoginAttempt = (method: "standard" | "github" | "google") => {
+    console.log("Login attempt", {
+      method,
+      email,
+      password,
+    });
+  };
+
+  const handleLogin = () => logLoginAttempt("standard");
+  const handleGithubLogin = () => logLoginAttempt("github");
+  const handleGoogleLogin = () => logLoginAttempt("google");
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white p-4">
-      <div className="w-full max-w-md space-y-6 rounded-lg border border-black p-8">
-        <h1 className="mb-8 text-center text-4xl">Login</h1>
-        {/* ... Email/Password inputs ... */}
+    <div className="flex min-h-screen items-center justify-center bg-white p-4 text-slate-900">
+      <div className="w-full max-w-md space-y-6 rounded-lg border border-slate-300 bg-white p-8 shadow-lg">
+        <h1 className="mb-8 text-center text-4xl font-semibold text-slate-900">Login</h1>
+        <div className="space-y-4">
+          <div>
+            <label htmlFor="email" className="mb-1 block text-sm font-medium text-slate-800">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+              className="w-full rounded border border-slate-300 bg-white px-3 py-2 text-slate-900 placeholder:text-slate-400"
+              placeholder="you@example.com"
+            />
+          </div>
+          <div>
+            <label htmlFor="password" className="mb-1 block text-sm font-medium text-slate-800">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+              className="w-full rounded border border-slate-300 bg-white px-3 py-2 text-slate-900 placeholder:text-slate-400"
+              placeholder="Enter your password"
+            />
+          </div>
+        </div>
         <button
           onClick={handleLogin}
-          className="w-full rounded bg-gray-200 py-3 text-lg hover:bg-gray-300"
+          className="w-full rounded bg-slate-200 py-3 text-lg font-medium text-slate-900 transition hover:bg-slate-300"
         >
           Login
         </button>
@@ -21,7 +60,7 @@ export default function LoginPage() {
           <Link
             href="/forgot-password"
             title="Forgot Password?"
-            className="text-xs hover:underline"
+            className="text-xs text-slate-700 hover:text-slate-900 hover:underline"
           >
             Forgot Password?
           </Link>
@@ -30,20 +69,20 @@ export default function LoginPage() {
         <div className="space-y-3">
           <button
             onClick={handleGithubLogin}
-            className="w-full rounded bg-gray-200 py-3 hover:bg-gray-300"
+            className="w-full rounded bg-slate-200 py-3 font-medium text-slate-900 transition hover:bg-slate-300"
           >
             Login with Github
           </button>
           <button
             onClick={handleGoogleLogin}
-            className="w-full rounded bg-gray-200 py-3 hover:bg-gray-300"
+            className="w-full rounded bg-slate-200 py-3 font-medium text-slate-900 transition hover:bg-slate-300"
           >
             Login with Google
           </button>
         </div>
-        <p className="mt-4 text-center text-sm">
+        <p className="mt-4 text-center text-sm text-slate-700">
           Don&apos;t have an account?{" "}
-          <Link href="/signup" className="font-semibold hover:underline">
+          <Link href="/signup" className="font-semibold text-slate-900 hover:underline">
             Register
           </Link>
         </p>
diff --git a/apps/frontend/app/signup/page.tsx b/apps/frontend/app/signup/page.tsx
index 8ef5de4..52497d4 100644
--- a/apps/frontend/app/signup/page.tsx
+++ b/apps/frontend/app/signup/page.tsx
@@ -7,7 +7,7 @@ export default function SignupPage() {
   const [isSignedUp, setIsSignedUp] = useState(false);
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white p-4">
+    <div className="flex min-h-screen items-center justify-center bg-white p-4 text-slate-900">
       {isSignedUp ? (
         <Onboarding onBack={() => setIsSignedUp(false)} />
       ) : (