diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..cddd67c
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ContactForm from '@/components/form/ContactForm';
+import { LogIn } from 'lucide-react';
+
+export default function LoginPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'Login', id: '/login' },
+    { name: 'Register', id: '/register' },
+  ];
+
+  const handleSubmit = (email: string) => {
+    console.log('Login email:', email);
+    // Handle login logic here
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarLayoutFloatingOverlay
+        navItems={navItems}
+        brandName="Webild"
+        button={{
+          text: 'Create Account',
+          href: '/register',
+        }}
+      />
+      <div className="min-h-screen flex items-center justify-center py-12 px-4">
+        <div className="w-full max-w-md">
+          <ContactForm
+            title="Welcome Back"
+            description="Sign in to your account to access your dashboard and orders"
+            tag="Login"
+            tagIcon={LogIn}
+            inputPlaceholder="Enter your email address"
+            buttonText="Sign In"
+            termsText="Don't have an account? Create one to get started."
+            onSubmit={handleSubmit}
+            centered
+            useInvertedBackground={false}
+          />
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file