diff --git a/index.html b/index.html
index 9dc56fe..6597670 100644
--- a/index.html
+++ b/index.html
@@ -8,12 +8,22 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
     <link href="rcon.css" rel="stylesheet">
+    <style>
+      /* Mystical purple primary override for Bootstrap 5.3 */
+      [data-bs-theme="dark"] {
+        --bs-primary: #8b5cf6;
+        --bs-primary-rgb: 139, 92, 246;
+        --bs-primary-text-emphasis: #b794f4;
+        --bs-primary-bg-subtle: rgba(139, 92, 246, 0.15);
+        --bs-primary-border-subtle: rgba(139, 92, 246, 0.3);
+      }
+    </style>
   </head>
   <body data-bs-theme="dark">
 
     <!-- Server info header: single-line navbar, no hamburger -->
     <nav class="navbar navbar-dark bg-primary" id="server-header" style="display:none">
-      <div class="container flex-nowrap">
+      <div class="container-fluid flex-nowrap">
         <a class="navbar-brand me-3" href="#" id="header-hostname"></a>
         <span class="navbar-text me-2 small" title="Uptime" id="header-uptime"></span>
         <span class="navbar-text me-2 small" title="Map Name" id="header-map"></span>
@@ -26,7 +36,7 @@
 
     <!-- Main layout: hidden until connected -->
     <div id="app-connected" style="display:none">
-      <div class="container">
+      <div class="container-fluid">
         <div class="row">
           <div class="col-md-2">
             <ul class="nav flex-column nav-sidebar" id="sidebar-nav"></ul>
@@ -40,7 +50,7 @@
     </div>
 
     <!-- Connect page: shown when not connected -->
-    <div id="app-connect" class="container"></div>
+    <div id="app-connect" class="container-fluid"></div>
 
     <!-- Bootstrap 5 JS (vanilla, no jQuery needed) -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
diff --git a/rcon.css b/rcon.css
index 9e7ea5a..5b80e70 100644
--- a/rcon.css
+++ b/rcon.css
@@ -3,7 +3,7 @@
 :root {
   --rcon-bg: #252830;
   --rcon-text: #cfd2da;
-  --rcon-accent: #1ca8dd;
+  --rcon-accent: #a78bfa;
   --rcon-card-bg: #434857;
   /* Override BS5 dark theme body background */
   --bs-body-bg: #252830;
@@ -41,7 +41,7 @@ a:hover { color: #fff; text-decoration: none; }
 .nav-sidebar .nav-link:hover,
 .nav-sidebar .nav-link.active {
   color: #fff;
-  background-color: #428bca;
+  background-color: #8b5cf6;
 }
 
 /* Fade utility */
@@ -78,7 +78,7 @@ a:hover { color: #fff; text-decoration: none; }
   background: rgba(255, 255, 255, 0.2);
   color: #fff;
   border-color: var(--rcon-accent);
-  box-shadow: 0 0 0 0.2rem rgba(28, 168, 221, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
 }
 
 /* Cards — override BS dark-theme bg to our darker shade */
