diff --git a/web/index.html b/web/index.html
index 9fedc5f..1b981fa 100644
--- a/web/index.html
+++ b/web/index.html
@@ -9,8 +9,53 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 </head>
 <body>
-    <!-- Header -->
-    <header class="header">
+    <!-- Login Page -->
+    <div class="login-page" id="loginPage">
+        <div class="login-container">
+            <div class="login-header">
+                <div class="login-logo">
+                    <i class="fas fa-envelope"></i>
+                </div>
+                <h1>Mailing List Manager</h1>
+                <p>Sign in to manage your mailing lists</p>
+            </div>
+            <form class="login-form" id="loginForm">
+                <!-- Login Error Message -->
+                <div class="login-error" id="loginError" style="display: none;">
+                    <i class="fas fa-exclamation-circle"></i>
+                    <span id="loginErrorMessage">Invalid username or password</span>
+                </div>
+                
+                <div class="form-group">
+                    <label for="username">
+                        <i class="fas fa-user"></i>
+                        Username
+                    </label>
+                    <input type="text" id="username" placeholder="Enter your username" required autocomplete="username">
+                </div>
+                <div class="form-group">
+                    <label for="password">
+                        <i class="fas fa-lock"></i>
+                        Password
+                    </label>
+                    <input type="password" id="password" placeholder="Enter your password" required autocomplete="current-password">
+                </div>
+                <button type="submit" class="btn btn-primary btn-block" id="loginBtn">
+                    <span>Sign In</span>
+                    <i class="fas fa-arrow-right"></i>
+                </button>
+            </form>
+            <div class="login-footer">
+                <p class="text-muted text-sm">
+                    <i class="fas fa-shield-alt"></i>
+                    Secure authentication required
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Header (shown after login) -->
+    <header class="header" id="mainHeader" style="display: none;">
         <div class="container">
             <div class="header-content">
                 <h1 class="logo">
@@ -18,12 +63,7 @@
                     Mailing List Manager
                 </h1>
                 <div class="auth-section">
-                    <div class="auth-controls" id="authControls">
-                        <input type="text" id="username" placeholder="Username" class="token-input">
-                        <input type="password" id="password" placeholder="Password" class="token-input">
-                        <button class="btn btn-primary" id="loginBtn">Login</button>
-                    </div>
-                    <div class="user-info" id="userInfo" style="display: none;">
+                    <div class="user-info" id="userInfo">
                         <div class="user-details">
                             <span class="user-name" id="currentUsername">User</span>
                             <span class="user-role" id="currentUserRole">role</span>
