diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 6c90297..dab45a6 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -1,5 +1,5 @@
 <script>
-    // Add any interactivity if needed.
+    import { page } from '$app/stores';
 </script>
 
 <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top custom-navbar">
@@ -29,7 +29,7 @@
             </ul>
             <ul class="navbar-nav">
                 <li class="nav-item">
-                    <a class="nav-link nav-full-height {window.location.pathname === '/login' ? 'active' : ''}" href="/login">Login</a>
+                    <a class="nav-link nav-full-height {$page.url.pathname === '/login' ? 'active' : ''}" href="/login">Login</a>
                 </li>
             </ul>
         </div>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
new file mode 100644
index 0000000..c4b1055
--- /dev/null
+++ b/src/routes/login/+page.svelte
@@ -0,0 +1,103 @@
+<script>
+    import { goto } from '$app/navigation';
+    
+    let username = '';
+    let password = '';
+    let error = '';
+    let isLoading = false;
+
+    async function handleLogin() {
+        if (!username || !password) {
+            error = 'Please enter both username and password';
+            return;
+        }
+
+        isLoading = true;
+        error = '';
+        
+        // Simulate login request
+        try {
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            // Replace with actual login logic
+            // await yourAuthFunction(username, password);
+            goto('/'); // Redirect after successful login
+        } catch (err) {
+            error = 'Invalid credentials';
+        } finally {
+            isLoading = false;
+        }
+    }
+</script>
+
+<div class="login-container">
+    <div class="login-card">
+        <h2 class="mb-4">Login</h2>
+        
+        {#if error}
+            <div class="alert alert-danger">{error}</div>
+        {/if}
+
+        <form on:submit|preventDefault={handleLogin}>
+            <div class="mb-3">
+                <label for="username" class="form-label">Username</label>
+                <input 
+                    type="text" 
+                    class="form-control" 
+                    id="username" 
+                    bind:value={username}
+                    required
+                />
+            </div>
+            <div class="mb-3">
+                <label for="password" class="form-label">Password</label>
+                <input 
+                    type="password" 
+                    class="form-control" 
+                    id="password" 
+                    bind:value={password}
+                    required
+                />
+            </div>
+            <button 
+                type="submit" 
+                class="btn btn-primary w-100"
+                disabled={isLoading}
+            >
+                {#if isLoading}
+                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                    Logging in...
+                {:else}
+                    Login
+                {/if}
+            </button>
+        </form>
+    </div>
+</div>
+
+<style>
+    .login-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: calc(100vh - 44px); /* Account for navbar height */
+        padding: 2rem;
+        background-color: #f8f9fa;
+    }
+
+    .login-card {
+        width: 100%;
+        max-width: 400px;
+        padding: 2rem;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .form-control {
+        padding: 0.75rem;
+    }
+
+    .btn {
+        padding: 0.75rem;
+    }
+</style>
\ No newline at end of file