diff --git a/login.php b/login.php
new file mode 100644
index 0000000..114418b
--- /dev/null
+++ b/login.php
@@ -0,0 +1,108 @@
+<?php
+session_start();
+
+// If already logged in, redirect to dashboard
+if (isset($_SESSION['role'])) {
+    header('Location: index.php');
+    exit();
+}
+
+include 'partials/header.php';
+?>
+
+<div class="container-fluid login-container">
+    <div class="card shadow-lg login-card p-4">
+        <div class="card-body">
+            <div class="text-center mb-4">
+                <i class="bi-building fs-1" style="color: var(--primary-color);"></i>
+                <h1 class="h3 mb-3 fw-bold">Providencia ERP</h1>
+                <p class="text-muted">Please sign in to continue</p>
+            </div>
+            
+            <div id="error-message" class="alert alert-danger" style="display: none;"></div>
+
+            <form id="login-form">
+                <div class="form-floating mb-3">
+                    <input type="email" class="form-control" id="email" name="email" placeholder="name@example.com" required>
+                    <label for="email">Email address</label>
+                </div>
+                <div class="form-floating mb-3">
+                    <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
+                    <label for="password">Password</label>
+                </div>
+
+                <div class="d-grid">
+                     <button class="btn btn-primary btn-lg" type="submit" id="submit-btn">
+                        <span id="btn-text">Sign in</span>
+                        <span id="btn-spinner" class="spinner-border spinner-border-sm" style="display: none;" role="status" aria-hidden="true"></span>
+                     </button>
+                </div>
+            </form>
+            <div class="mt-3 text-center">
+                <small class="text-muted">Hint: Try one of these emails with the password 'password':<br>
+                accountant@example.com<br>
+                secretary@example.com<br>
+                headteacher@example.com
+                </small>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.getElementById('login-form').addEventListener('submit', async function(e) {
+    e.preventDefault();
+    
+    const email = document.getElementById('email').value;
+    const password = document.getElementById('password').value;
+    const errorDiv = document.getElementById('error-message');
+    const submitBtn = document.getElementById('submit-btn');
+    const btnText = document.getElementById('btn-text');
+    const btnSpinner = document.getElementById('btn-spinner');
+    
+    // Hide error message
+    errorDiv.style.display = 'none';
+    
+    // Disable button and show spinner
+    submitBtn.disabled = true;
+    btnText.style.display = 'none';
+    btnSpinner.style.display = 'inline-block';
+
+    try {
+        const response = await fetch('api/login.php', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ email, password })
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result.success) {
+            // Successful login
+            window.location.href = 'index.php';
+        } else {
+            // Login failed
+            errorDiv.textContent = result.message || 'Invalid email or password.';
+            errorDiv.style.display = 'block';
+            
+            // Re-enable button
+            submitBtn.disabled = false;
+            btnText.style.display = 'inline';
+            btnSpinner.style.display = 'none';
+        }
+    } catch (error) {
+        console.error('Login error:', error);
+        errorDiv.textContent = 'Failed to connect to the server. Please try again.';
+        errorDiv.style.display = 'block';
+        
+        // Re-enable button
+        submitBtn.disabled = false;
+        btnText.style.display = 'inline';
+        btnSpinner.style.display = 'none';
+    }
+});
+</script>
+
+<?php include 'partials/footer.php'; ?>
\ No newline at end of file