diff --git a/templates/login.html b/templates/login.html
index 7e6a791..ce22f57 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,159 +1,22 @@
 {% extends 'base.html' %}
 {% block content %}
-<!-- Cyberpunk Theme Background with Lasers, Strobe Lights and Disco Balls -->
-<style>
-  body {
-    background: #000;
-    color: #0ff;
-    font-family: 'Courier New', monospace;
-    overflow: hidden;
-    position: relative;
-    height: 100vh;
-  }
 
-  /* Laser effects */
-  .laser {
-    position: absolute;
-    width: 2px;
-    height: 100%;
-    background: linear-gradient(to bottom, #ff00ff, #00ffff);
-    box-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
-    animation: laser 0.5s infinite alternate;
-  }
-
-  @keyframes laser {
-    from { opacity: 0.3; }
-    to { opacity: 1; }
-  }
-
-  /* Strobe effect */
-  .strobe {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
-    opacity: 0;
-    pointer-events: none;
-    z-index: 1000;
-  }
-
-  @keyframes strobe {
-    0% { opacity: 0; }
-    5% { opacity: 0.8; }
-    10% { opacity: 0; }
-  }
-
-  /* Disco ball effect */
-  .disco-ball {
-    position: absolute;
-    width: 200px;
-    height: 200px;
-    border-radius: 50%;
-    background: radial-gradient(circle, #ff00ff, #00ffff);
-    box-shadow: 0 0 30px #ff00ff, 0 0 60px #00ffff;
-    animation: spin 10s linear infinite;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  @keyframes spin {
-    from { transform: translate(-50%, -50%) rotate(0deg); }
-    to { transform: translate(-50%, -50%) rotate(360deg); }
-  }
-
-  /* Scanline effect */
-  .scanline {
-    position: absolute;
-    width: 100%;
-    height: 2px;
-    background: rgba(0, 255, 255, 0.3);
-    animation: scan 8s linear infinite;
-    z-index: 999;
-  }
-
-  @keyframes scan {
-    0% { top: 0; }
-    100% { top: 100%; }
-  }
-
-  /* Neon text effects */
-  .neon-text {
-    text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff;
-  }
-
-  .login-container {
-    position: relative;
-    z-index: 10;
-    background: rgba(0, 0, 0, 0.8);
-    border: 1px solid #0ff;
-    box-shadow: 0 0 15px #0ff;
-    border-radius: 10px;
-    padding: 2rem;
-    margin-top: 5rem;
-  }
-
-  .login-input {
-    background: rgba(0, 20, 30, 0.7);
-    border: 1px solid #0ff;
-    color: #0ff;
-    box-shadow: 0 0 5px #0ff;
-  }
-
-  .login-input:focus {
-    outline: none;
-    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
-  }
-
-  .login-button {
-    background: linear-gradient(45deg, #0ff, #f0f);
-    border: none;
-    color: #000;
-    font-weight: bold;
-    box-shadow: 0 0 10px #0ff, 0 0 20px #f0f;
-  }
-
-  .login-button:hover {
-    box-shadow: 0 0 15px #0ff, 0 0 30px #f0f;
-  }
-</style>
-
-<!-- Laser effects -->
-<div class="laser" style="left: 10%;"></div>
-<div class="laser" style="left: 20%;"></div>
-<div class="laser" style="left: 30%;"></div>
-<div class="laser" style="left: 40%;"></div>
-<div class="laser" style="left: 50%;"></div>
-<div class="laser" style="left: 60%;"></div>
-<div class="laser" style="left: 70%;"></div>
-<div class="laser" style="left: 80%;"></div>
-<div class="laser" style="left: 90%;"></div>
-
-<!-- Strobe light effect -->
-<div id="strobe" class="strobe"></div>
-
-<!-- Disco ball -->
-<div class="disco-ball"></div>
-
-<!-- Scanline effect -->
-<div class="scanline"></div>
-
-<div class="login-container max-w-md mx-auto">
-  <h1 class="text-2xl font-bold mb-4 neon-text">SECURE ACCESS TERMINAL</h1>
-  <form id="login-form" class="space-y-3">
+<div class="flex  justify-center  py-8">
+  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-xl shadow-lg">
+    <h1 class="text-2xl font-bold text-center text-gray-800">Secure Access</h1>
+    <form id="login-form" class="space-y-4">
     <div>
-      <label class="block text-sm mb-1 neon-text">USER IDENTIFICATION</label>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
       <input id="email" type="email" required class="w-full border rounded-lg p-2 login-input" />
     </div>
     <div>
-      <label class="block text-sm mb-1 neon-text">SECURITY CODE</label>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
       <input id="password" type="password" required class="w-full border rounded-lg p-2 login-input" />
     </div>
-    <button type="submit" class="w-full py-2 rounded-lg login-button">INITIATE AUTHENTICATION</button>
+    <button type="submit" class="w-full bg-blue-500 text-blue-100 py-2 rounded-lg login-button">Sign In</button>
     <p id="error" class="text-sm text-red-600 mt-2 hidden"></p>
   </form>
+  </div>
 </div>
 
 <!-- Firebase App (the core Firebase SDK) -->
@@ -163,25 +26,20 @@
 <script src="https://www.gstatic.com/firebasejs/12.4.0/firebase-auth-compat.js"></script>
 
 <script>
-  // Strobe light effect
-  const strobe = document.getElementById('strobe');
-  setInterval(() => {
-    strobe.style.animation = 'none';
-    setTimeout(() => {
-      strobe.style.animation = 'strobe 0.1s';
-    }, 10);
-  }, 500);
-
+  // Initialize Firebase configuration from template
   window.FIREBASE_CONFIG = {{ firebase_config|tojson }};
-
+  
+  // Initialize Firebase app and auth
   const app = firebase.initializeApp(window.FIREBASE_CONFIG || {});
-  const auth = firebase.auth()
+  const auth = firebase.auth();
 
+  // Get form and input elements
   const form = document.getElementById('login-form');
   const email = document.getElementById('email');
   const password = document.getElementById('password');
   const err = document.getElementById('error');
 
+  // Handle form submission
   form.addEventListener('submit', async (e) => {
     e.preventDefault();
     err.classList.add('hidden');