diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index c5b5d291e..35bea435a 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,7 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="" />
+    <list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/loginSystem/templates/loginSystem/login.html" beforeDir="false" afterPath="$PROJECT_DIR$/loginSystem/templates/loginSystem/login.html" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -125,4 +128,15 @@
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="3" />
   </component>
+  <component name="XDebuggerManager">
+    <breakpoint-manager>
+      <breakpoints>
+        <line-breakpoint enabled="true" suspend="THREAD" type="python-line">
+          <url>file://$PROJECT_DIR$/install/install.py</url>
+          <line>2048</line>
+          <option name="timeStamp" value="1" />
+        </line-breakpoint>
+      </breakpoints>
+    </breakpoint-manager>
+  </component>
 </project>
\ No newline at end of file
diff --git a/loginSystem/templates/loginSystem/login.html b/loginSystem/templates/loginSystem/login.html
index e5930a5d9..14d373aff 100644
--- a/loginSystem/templates/loginSystem/login.html
+++ b/loginSystem/templates/loginSystem/login.html
@@ -202,17 +202,7 @@
     <!-- Components theme -->
 
     <!-- JS Core -->
-
-    <script type="text/javascript" src="{% static 'baseTemplate/assets/js-core/jquery-core.min.js' %}"></script>
-
-    <script type="text/javascript">
-        $(window).load(function () {
-            setTimeout(function () {
-                $('#loading').fadeOut(400, "linear");
-            }, 300);
-        });
-    </script>
-
+    <!-- jQuery moved to bottom of page to load before other scripts -->
     <!-- JS Ends -->
 
     <style type="text/css">
@@ -383,10 +373,46 @@
         </div>
     </div>
 </div>
+<!-- Ensure jQuery is loaded first -->
+<script type="text/javascript" src="{% static 'baseTemplate/assets/js-core/jquery-core.min.js' %}"></script>
+<!-- Then Angular -->
 <script src="https://code.angularjs.org/1.6.5/angular.min.js"></script>
 <script src="https://code.angularjs.org/1.6.5/angular-route.min.js"></script>
+<!-- Then our custom scripts that depend on jQuery and Angular -->
 <script src="{% static 'loginSystem/login-system.js' %}"></script>
-<script src="{% static 'loginSystem/webauthn.js' %}"></script>
+<!-- Optional: WebAuthn script (handle 403 gracefully) -->
+<script>
+    // Try to load webauthn.js, but don't fail if it's not available
+    (function() {
+        var script = document.createElement('script');
+        script.src = '{% static "loginSystem/webauthn.js" %}';
+        script.onerror = function() {
+            console.warn('WebAuthn script not available, continuing without it');
+        };
+        document.head.appendChild(script);
+    })();
+</script>
+<!-- Loading animation (requires jQuery) -->
+<script type="text/javascript">
+    // Ensure jQuery is loaded before using it
+    if (typeof jQuery !== 'undefined') {
+        jQuery(window).on('load', function () {
+            setTimeout(function () {
+                jQuery('#loading').fadeOut(400, "linear");
+            }, 300);
+        });
+    } else {
+        // Fallback if jQuery isn't loaded
+        window.addEventListener('load', function() {
+            setTimeout(function () {
+                var loadingEl = document.getElementById('loading');
+                if (loadingEl) {
+                    loadingEl.style.display = 'none';
+                }
+            }, 300);
+        });
+    }
+</script>
 <script>
 // Initialize WebAuthn login functionality
 document.addEventListener('DOMContentLoaded', function() {
diff --git a/static/loginSystem/webauthn.js b/static/loginSystem/webauthn.js
new file mode 100644
index 000000000..b9f61d49c
--- /dev/null
+++ b/static/loginSystem/webauthn.js
@@ -0,0 +1,45 @@
+/**
+ * CyberPanel WebAuthn/Passkey Authentication Module
+ * Handles passwordless authentication using WebAuthn API
+ */
+
+(function() {
+    'use strict';
+
+    // Check if WebAuthn is supported
+    const isSupported = function() {
+        return !!(navigator.credentials && navigator.credentials.create && navigator.credentials.get);
+    };
+
+    // Initialize the module
+    const init = function() {
+        if (!isSupported()) {
+            console.log('WebAuthn is not supported in this browser');
+            return false;
+        }
+
+        console.log('WebAuthn support detected');
+        return true;
+    };
+
+    // Start passwordless login flow
+    const startPasswordlessLogin = function() {
+        console.log('Passwordless login not yet implemented');
+        // TODO: Implement WebAuthn authentication flow
+        alert('Passkey authentication will be available in a future update');
+    };
+
+    // Export functions to global scope
+    window.cyberPanelWebAuthn = {
+        isSupported: isSupported,
+        init: init,
+        startPasswordlessLogin: startPasswordlessLogin
+    };
+
+    // Initialize on load
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();
\ No newline at end of file