diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..360a2be
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+
+export default function LoginPage() {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) {
+    return null;
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="large"
+      background="none"
+      cardStyle="glass-depth"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Map", id: "/map" },
+            { name: "History", id: "/history" },
+            { name: "Profile", id: "/profile" },
+          ]}
+          brandName="ParkSpot"
+          bottomLeftText="Secure Login"
+          bottomRightText="support@parkspot.app"
+        />
+      </div>
+
+      <main className="min-h-screen bg-background text-foreground flex flex-col items-center justify-center p-4">
+        <div className="w-full max-w-md">
+          <h1 className="text-4xl font-bold mb-2 text-center">Welcome Back</h1>
+          <p className="text-lg text-foreground/60 text-center mb-8">Sign in to your ParkSpot account</p>
+          
+          <div className="w-full bg-card rounded-lg border border-accent p-8 space-y-6">
+            <div>
+              <label className="block text-sm font-medium mb-2">Email Address</label>
+              <input
+                type="email"
+                placeholder="your@email.com"
+                className="w-full px-4 py-2 bg-background border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-2">Password</label>
+              <input
+                type="password"
+                placeholder="••••••••"
+                className="w-full px-4 py-2 bg-background border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+              />
+            </div>
+
+            <div className="flex items-center justify-between text-sm">
+              <label className="flex items-center">
+                <input type="checkbox" className="mr-2" />
+                <span>Remember me</span>
+              </label>
+              <a href="#" className="text-primary-cta hover:underline">Forgot password?</a>
+            </div>
+
+            <button className="w-full bg-primary-cta text-primary-cta-text py-2 rounded-lg font-semibold hover:opacity-90 transition">
+              Sign In
+            </button>
+
+            <div className="text-center text-sm text-foreground/60">
+              Don't have an account? <a href="#" className="text-primary-cta hover:underline">Sign up here</a>
+            </div>
+          </div>
+
+          <div className="mt-8 p-4 bg-card rounded-lg border border-accent text-center text-sm text-foreground/60">
+            <p className="mb-2">Login & Registration Features:</p>
+            <ul className="text-left space-y-1">
+              <li>• Secure authentication system</li>
+              <li>• Email verification</li>
+              <li>• Password reset functionality</li>
+              <li>• Two-factor authentication</li>
+              <li>• Session management</li>
+              <li>• Profile synchronization</li>
+            </ul>
+          </div>
+        </div>
+      </main>
+
+      <div id="contact" data-section="contact">
+        <FooterLogoReveal
+          logoText="ParkSpot"
+          leftLink={{
+            text: "Privacy Policy",            href: "/privacy"
+          }}
+          rightLink={{
+            text: "Terms of Service",            href: "/terms"
+          }}
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}