diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 2bca0e2..e19b349 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -79,6 +79,16 @@ const App = () => {
                     </ErrorBoundary>
                   }
                 />
+                <Route
+                  path="/signup"
+                  element={
+                    <ErrorBoundary>
+                      <PageTransition>
+                        <SignUp />
+                      </PageTransition>
+                    </ErrorBoundary>
+                  }
+                />
                 <Route
                   path="/verify-email"
                   element={
@@ -327,7 +337,7 @@ const App = () => {
               style: {
                 fontSize: "13px",
               },
-            }}
+            }} 
           />
           </div>
         </ErrorBoundary>
diff --git a/frontend/src/pages/Auth/Login.jsx b/frontend/src/pages/Auth/Login.jsx
index e58db9e..811ff5f 100644
--- a/frontend/src/pages/Auth/Login.jsx
+++ b/frontend/src/pages/Auth/Login.jsx
@@ -55,12 +55,96 @@ const Login = ({ setCurrentPage, onLoginSuccess }) => {
   };
 
   return (
-    <div className="w-full">
-      {/* Header */}
-      <div className="mb-8">
-        <div className="flex items-center gap-2 mb-3">
-          <img src="/PrepPilot-Logo.png" alt="PrepPilot Logo" className="w-8 h-8 object-contain" />
-          <span className="font-semibold text-gray-300">PrepPilot</span>
+    <div className="min-h-screen w-full flex items-center justify-center p-4 sm:p-8 bg-[#0B0F19] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#1a1a2e] via-[#0B0F19] to-[#05080f]">
+      <div className="w-full max-w-[500px] rounded-2xl p-6 sm:p-10 shadow-2xl border border-white/5 relative overflow-hidden bg-[#111827]">
+        {/* Subtle background glow effect for SaaS look */}
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-32 bg-gradient-to-b from-violet-500/10 to-transparent pointer-events-none" />
+        
+        <div className="relative z-10">
+          {/* Header */}
+          <div className="mb-8 text-center sm:text-left">
+            <div className="flex items-center justify-center sm:justify-start gap-2 mb-4">
+              <img src="/PrepPilot-Logo.png" alt="PrepPilot Logo" className="w-8 h-8 object-contain" />
+              <span className="font-semibold text-gray-200">PrepPilot</span>
+            </div>
+            <h2 className="text-2xl sm:text-3xl font-bold text-white mb-2 tracking-tight">
+              Welcome Back
+            </h2>
+            <p className="text-sm text-gray-400">Sign in to continue your interview preparation journey</p>
+          </div>
+
+          <form onSubmit={handleLogin} className="space-y-5">
+            <div className="w-full">
+              <Input
+                value={email}
+                onChange={({ target }) => setEmail(target.value)}
+                label="Email Address"
+                placeholder="your@email.com"
+                type="text"
+                autoFocus
+              />
+            </div>
+
+            <div className="w-full">
+              <Input
+                value={password}
+                onChange={({ target }) => setPassword(target.value)}
+                label="Password"
+                placeholder="Min 8 characters"
+                type="password"
+              />
+            </div>
+
+            {/* Remember Me */}
+            <div className="flex items-center gap-2 mt-2">
+              <input
+                id="rememberMe"
+                type="checkbox"
+                checked={rememberMe}
+                onChange={(e) => setRememberMe(e.target.checked)}
+                className="cursor-pointer w-4 h-4 rounded border-gray-600 bg-white"
+              />
+              <label htmlFor="rememberMe" className="text-sm text-gray-400 cursor-pointer hover:text-gray-300 transition-colors">
+                Remember Me
+              </label>
+            </div>
+
+            {error && (
+              <div id="login-error" role="alert" aria-live="polite" className="p-3 mt-4 bg-red-500/10 border border-red-500/30 rounded-lg">
+                <p className="text-red-400 text-sm font-medium">{error}</p>
+              </div>
+            )}
+
+            <Button
+              type="submit"
+              loading={loading}
+              loadingText="Signing in..."
+              icon={<LuArrowRight className="group-hover:translate-x-1 transition-transform" />}
+              className="mt-6 w-full flex justify-center py-2.5 text-sm font-semibold shadow-lg shadow-violet-500/20 bg-gradient-to-r from-violet-600 to-blue-600 hover:from-violet-500 hover:to-blue-500 text-white rounded-lg transition-all"
+            >
+              Sign In
+            </Button>
+
+            <div className="mt-8 pt-6 border-t border-white/10">
+              <p className="text-sm text-gray-400 text-center">
+                Don't have an account?{" "}
+                <button
+                  type="button"
+                  className="font-semibold text-transparent bg-gradient-to-r from-violet-400 to-blue-400 bg-clip-text hover:opacity-80 transition-opacity cursor-pointer ml-1"
+                  onClick={() => {
+                    if (setCurrentPage) {
+                      setCurrentPage("signup");
+                    } else {
+                      navigate("/signup");
+                    }
+                    setError(null);
+                  }}
+                >
+                  Create account
+                </button>
+              </p>
+            </div>
+          </form>
         </div>
         <h2 className="text-3xl font-bold bg-gradient-to-r from-violet-300 to-blue-300 bg-clip-text text-transparent mb-2">
           Welcome Back
diff --git a/frontend/src/pages/Auth/SignUp.jsx b/frontend/src/pages/Auth/SignUp.jsx
index bd3da4e..7834f4a 100644
--- a/frontend/src/pages/Auth/SignUp.jsx
+++ b/frontend/src/pages/Auth/SignUp.jsx
@@ -105,18 +105,23 @@ const SignUp = ({ setCurrentPage }) => {
   };
 
   return (
-    <div className="w-full">
-      {/* Header */}
-      <div className="mb-8">
-        <div className="flex items-center gap-2 mb-3">
-          <img src="/PrepPilot-Logo.png" alt="PrepPilot Logo" className="w-8 h-8 object-contain" />
-          <span className="font-semibold text-gray-300">PrepPilot</span>
-        </div>
-        <h2 className="text-3xl font-bold bg-gradient-to-r from-violet-300 to-blue-300 bg-clip-text text-transparent mb-2">
-          Create Account
-        </h2>
-        <p className="text-sm text-gray-400">Join thousands preparing smarter for their dream jobs</p>
-      </div>
+    <div className="min-h-screen w-full flex items-center justify-center p-4 sm:p-8 bg-[#0B0F19] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#1a1a2e] via-[#0B0F19] to-[#05080f]">
+      <div className="w-full max-w-[500px] rounded-2xl p-6 sm:p-10 shadow-2xl border border-white/5 relative overflow-hidden bg-[#111827]">
+        {/* Subtle background glow effect for SaaS look */}
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-32 bg-gradient-to-b from-violet-500/10 to-transparent pointer-events-none" />
+        
+        <div className="relative z-10">
+          {/* Header */}
+          <div className="mb-8 text-center sm:text-left">
+            <div className="flex items-center justify-center sm:justify-start gap-2 mb-4">
+              <img src="/PrepPilot-Logo.png" alt="PrepPilot Logo" className="w-8 h-8 object-contain" />
+              <span className="font-semibold text-gray-200">PrepPilot</span>
+            </div>
+            <h2 className="text-2xl sm:text-3xl font-bold text-white mb-2 tracking-tight">
+              Create Account
+            </h2>
+            <p className="text-sm text-gray-400">Join thousands preparing smarter for their dream jobs</p>
+          </div>
 
       {successMessage ? (
         /* Success state */
@@ -141,13 +146,20 @@ const SignUp = ({ setCurrentPage }) => {
             </div>
           )}
 
-          <div className="pt-4 border-t border-white/10">
+          <div className="pt-6 mt-8 border-t border-white/10">
             <p className="text-sm text-gray-400 text-center">
               Already verified?{" "}
               <button
                 type="button"
-                className="font-semibold text-transparent bg-gradient-to-r from-violet-400 to-blue-400 bg-clip-text hover:opacity-80 transition-opacity cursor-pointer"
-                onClick={() => { setCurrentPage("login"); setSuccessMessage(""); }}
+                className="font-semibold text-transparent bg-gradient-to-r from-violet-400 to-blue-400 bg-clip-text hover:opacity-80 transition-opacity cursor-pointer ml-1"
+                onClick={() => {
+                  if (setCurrentPage) {
+                    setCurrentPage("login");
+                  } else {
+                    navigate("/login");
+                  }
+                  setSuccessMessage("");
+                }}
               >
                 Sign in
               </button>
@@ -249,18 +261,25 @@ const SignUp = ({ setCurrentPage }) => {
             loading={loading}
             loadingText="Creating account..."
             icon={<LuArrowRight className="group-hover:translate-x-1 transition-transform" />}
-            className="mt-6"
+            className="mt-6 w-full flex justify-center py-2.5 text-sm font-semibold shadow-lg shadow-violet-500/20 bg-gradient-to-r from-violet-600 to-blue-600 hover:from-violet-500 hover:to-blue-500 text-white rounded-lg transition-all"
           >
             Create Account
           </Button>
 
-          <div className="mt-6 pt-4 border-t border-white/10">
+          <div className="mt-8 pt-6 border-t border-white/10">
             <p className="text-sm text-gray-400 text-center">
               Already have an account?{" "}
               <button
                 type="button"
-                className="font-semibold text-transparent bg-gradient-to-r from-violet-400 to-blue-400 bg-clip-text hover:opacity-80 transition-opacity cursor-pointer"
-                onClick={() => { setCurrentPage("login"); setError(null); }}
+                className="font-semibold text-transparent bg-gradient-to-r from-violet-400 to-blue-400 bg-clip-text hover:opacity-80 transition-opacity cursor-pointer ml-1"
+                onClick={() => {
+                  if (setCurrentPage) {
+                    setCurrentPage("login");
+                  } else {
+                    navigate("/login");
+                  }
+                  setError(null);
+                }}
               >
                 Sign in
               </button>
@@ -268,6 +287,8 @@ const SignUp = ({ setCurrentPage }) => {
           </div>
         </form>
       )}
+        </div>
+      </div>
     </div>
   );
 };