diff --git a/README.md b/README.md
index 49bed63..e061067 100644
--- a/README.md
+++ b/README.md
@@ -61,7 +61,9 @@ docker compose up -d
 
 ### Open the Interface
 
-After starting, open **http://localhost:5050** in your browser. The username and password is admin:admin 
+After starting, open **http://localhost:5050** in your browser. The username and password is <b>admin</b>:<b>admin</b> 
+
+The credentials can be change in the ADMIN_USERNAME & ADMIN_PASSWORD variables in config.py
 
 ---
 
diff --git a/static/js/core/login.js b/static/js/core/login.js
new file mode 100644
index 0000000..4547de0
--- /dev/null
+++ b/static/js/core/login.js
@@ -0,0 +1,34 @@
+/**
+ * Handles the visual transition and submission lock for the authorization terminal.
+ * @param {Event} event - The click event from the submission button.
+ */
+function login(event) {
+    const btn = event.currentTarget;
+    const form = btn.closest('form');
+
+    // Validate form requirements before triggering visual effects
+    if (!form.checkValidity()) {
+        return; // Allow the browser to handle native "required" field alerts
+    }
+
+    // 1. Visual Feedback: Transition to "Processing" state
+    btn.style.color = "#ff4d4d";
+    btn.style.borderColor = "#ff4d4d";
+    btn.style.textShadow = "0 0 10px #ff4d4d";
+    btn.style.transform = "scale(0.95)";
+    
+    // Update button text to reflect terminal status
+    const btnText = btn.querySelector('.btn-text');
+    if (btnText) {
+        btnText.innerText = "AUTHORIZING...";
+    }
+
+    // 2. Security Lock: Prevent redundant requests (Double-click spam)
+    // A 10ms delay ensures the browser successfully dispatches the POST request 
+    // before the UI element becomes non-interactive.
+    setTimeout(() => {
+        btn.style.pointerEvents = "none";
+        btn.style.opacity = "0.7";
+        btn.style.cursor = "not-allowed";
+    }, 10);
+}
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
index 6662aa9..8c47d67 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>iNTERCEPT // Restricted Access</title>
+    <script src="{{ url_for('static', filename='js/core/login.js') }}"></script>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
     <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}" />
   </head>
@@ -48,7 +49,7 @@
             <input type="text" name="username" placeholder="OPERATOR ID" class="form-input" required autofocus autocomplete="off" />
             <input type="password" name="password" placeholder="ENCRYPTION KEY" class="form-input" required />
 
-            <button type="submit" class="landing-enter-btn">
+            <button type="submit" class="landing-enter-btn"  onclick="login(event)">
               <span class="btn-text">INITIALIZE SESSION</span>
             </button>
           </form>