spelech · spelech · Aug 22, 2026 · Aug 22, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ For summary details and quick references, see [README.md](README.md).
 
 | Version | Release Date | Summary of Key Changes |
 | :--- | :--- | :--- |
+| **`v4.30.0`** | 2026-08-22 | feat(ui): comprehensive aesthetic UI overhaul implementing stark monochrome mode, vibrant neon green/orange dark mode accents, cyan/blue light mode accents, and mobile responsive flex refactoring for toolbar dropdowns and stat grids |
 | **`v4.29.0`** | 2026-08-22 | Security fixes: resolved CodeQL alerts for log forging, path injection, cleartext sensitive info storage, and missing X-Frame-Options headers. |
 | **`v4.28.0`** | 2026-08-22 | chore(repo): large repository health sweep refactoring backend, frontend, auth, secrets, CI, and rewriting all documentation guides |
 | **`v4.27.2`** | 2026-08-22 | refactor(reqs): normalize requirement taxonomy IDs across all C#, Vitest, and Playwright test suites to eliminate `REQ-` prefixes and strictly enforce standard category codes (`AUTH-`, `UI-`, `DB-`, `GUARD-`) |

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # MCP Router Gateway & Semantic Proxy
 
-![Version](https://img.shields.io/badge/version-v4.29.0-orange?style=for-the-badge)
+![Version](https://img.shields.io/badge/version-v4.30.0-orange?style=for-the-badge)
 ![.NET 10.0](https://img.shields.io/badge/.NET-10.0-512BD4?style=for-the-badge&logo=dotnet&logoColor=white)
 ![MCP Spec](https://img.shields.io/badge/MCP%20Spec-2026--07--28-0052CC?style=for-the-badge)
 ![Tests](https://img.shields.io/badge/tests-620%20passing-2ea44f?style=for-the-badge)
@@ -207,6 +207,7 @@ For complete release history and version logs, see [**CHANGELOG.md**](CHANGELOG.
 
 | Version | Release Date | Summary of Key Changes |
 | :--- | :--- | :--- |
+| **`v4.30.0`** | 2026-08-22 | feat(ui): comprehensive aesthetic UI overhaul implementing stark monochrome mode, vibrant neon green/orange dark mode accents, cyan/blue light mode accents, and mobile responsive flex refactoring for toolbar dropdowns and stat grids |
 | **`v4.29.0`** | 2026-08-22 | Security fixes: resolved CodeQL alerts. |
 | **`v4.28.0`** | 2026-08-22 | chore(repo): large repository health sweep refactoring backend, frontend, auth, secrets, CI, and rewriting all documentation guides |
 | **`v4.27.2`** | 2026-08-22 | refactor(reqs): normalize requirement taxonomy IDs across all C#, Vitest, and Playwright test suites to eliminate `REQ-` prefixes and strictly enforce standard category codes (`AUTH-`, `UI-`, `DB-`, `GUARD-`) |
@@ -226,6 +227,7 @@ Our core modules maintain high code coverage and automated CI quality gates on p
 
 | Module | Line Coverage | Branch Coverage | Status |
 | :--- | :--- | :--- | :--- |
+| **`v4.30.0`** | 2026-08-22 | feat(ui): comprehensive aesthetic UI overhaul implementing stark monochrome mode, vibrant neon green/orange dark mode accents, cyan/blue light mode accents, and mobile responsive flex refactoring for toolbar dropdowns and stat grids |
 | **Core Session** | 92.4% | 88.1% | 🟢 Passing |
 | **Routing Engine** | 89.7% | 85.3% | 🟢 Passing |
 | **Controllers** | 94.2% | 91.0% | 🟢 Passing |

diff --git a/frontend/src/components/servers/StatsCard.tsx b/frontend/src/components/servers/StatsCard.tsx
@@ -11,21 +11,21 @@ export const StatsCard: React.FC = () => {
 
   return (
     <div className="stats-grid">
-      <div className="stat-card">
+      <div className="stat-box">
         <span className="stat-label">Total Servers</span>
-        <span className="stat-value" id="stat-total-servers">{total}</span>
+        <span className="stat-number" id="stat-total-servers">{total}</span>
       </div>
-      <div className="stat-card">
+      <div className="stat-box">
         <span className="stat-label">Connected</span>
-        <span className="stat-value text-success" id="stat-connected-servers">{connected}</span>
+        <span className="stat-number text-success" id="stat-connected-servers">{connected}</span>
       </div>
-      <div className="stat-card">
+      <div className="stat-box">
         <span className="stat-label">Failed / Error</span>
-        <span className="stat-value text-danger" id="stat-failed-servers">{failed}</span>
+        <span className="stat-number text-danger" id="stat-failed-servers">{failed}</span>
       </div>
-      <div className="stat-card">
+      <div className="stat-box">
         <span className="stat-label">Disabled</span>
-        <span className="stat-value text-muted" id="stat-disabled-servers">{disabled}</span>
+        <span className="stat-number text-muted" id="stat-disabled-servers">{disabled}</span>
       </div>
     </div>
   );

diff --git a/frontend/src/shared/stores/useUserStore.ts b/frontend/src/shared/stores/useUserStore.ts
@@ -12,7 +12,7 @@ export interface UserStore {
 
 export const useUserStore = create<UserStore>((set) => ({
   user: null,
-  version: '4.29.0', // fallback default
+  version: '4.30.0', // fallback default
   isLoadingUser: false,
   loadUser: async () => {
     set({ isLoadingUser: true });

diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css
@@ -94,6 +94,7 @@
     background: var(--primary);
     border-color: var(--primary);
     box-shadow: 0 0 10px var(--primary-glow);
+    color: var(--btn-primary-text);
 }
 .btn-primary:hover {
     background: rgb(var(--primary-rgb) / 0.85);
@@ -128,6 +129,8 @@
     font-size: var(--font-size-md);
     cursor: pointer;
     padding: 6px;
+    min-width: 44px;
+    min-height: 44px;
     border-radius: var(--radius-sm);
     transition: all var(--transition-fast);
     display: inline-flex;

diff --git a/frontend/src/styles/dashboard.css b/frontend/src/styles/dashboard.css
@@ -1,15 +1,15 @@
 /* System Stats Grid */
 .stats-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(4, 1fr);
     gap: 15px;
 }
 
 .stat-box {
     background: var(--bg-input);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-lg);
-    padding: var(--space-5);
+    padding: var(--space-3);
     text-align: center;
     display: flex;
     flex-direction: column;
@@ -175,11 +175,11 @@
 /* Tables styling */
 .table-container {
     overflow-x: auto;
-    width: 100%;
+
 }
 
 table {
-    width: 100%;
+
     border-collapse: collapse;
     font-size: var(--font-size-sm);
     text-align: left;
@@ -222,3 +222,91 @@ tr:last-child td {
     font-size: var(--font-size-2xl);
     color: var(--primary);
 }
+
+/* Server Controls Toolbar */
+.server-controls-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-4);
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--space-5);
+    background: var(--bg-card);
+    padding: var(--space-4);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+}
+
+.search-box {
+    position: relative;
+    flex: 1;
+    min-width: 250px;
+    display: flex;
+    align-items: center;
+}
+
+.search-icon {
+    position: absolute;
+    left: 12px;
+    color: var(--text-muted);
+}
+
+.search-box input {
+
+    padding: 10px 36px;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-color);
+    background: var(--bg-input);
+    color: var(--text-main);
+    font-size: var(--font-size-md);
+    min-height: 44px; /* WCAG Touch Target AAA */
+}
+
+.search-box input:focus {
+    border-color: var(--primary);
+    outline: none;
+    box-shadow: 0 0 0 2px rgb(var(--primary-rgb) / 0.2);
+}
+
+.btn-clear-search {
+    position: absolute;
+    right: 8px;
+    min-width: 28px;
+    min-height: 28px;
+}
+
+.toolbar-actions { 
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-4);
+}
+
+.select-group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.select-group label {
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+    font-weight: var(--font-weight-medium);
+}
+
+.select-group select {
+    padding: 8px 12px;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-color);
+    background: var(--bg-input);
+    color: var(--text-main);
+    font-size: var(--font-size-sm);
+    min-height: 44px; /* WCAG Touch Target AAA */
+    cursor: pointer;
+}
+
+.select-group select:focus {
+    border-color: var(--primary);
+    outline: none;
+}
diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
@@ -21,6 +21,7 @@ body {
 
 /* Background shapes */
 .background-decor {
+    pointer-events: none;
     position: absolute;
     top: 0;
     left: 0;
@@ -31,6 +32,8 @@ body {
 }
 
 .circle {
+    max-width: 100vw;
+    max-height: 100vh;
     position: absolute;
     border-radius: var(--radius-full);
     filter: blur(120px);
@@ -39,22 +42,24 @@ body {
 }
 
 [data-theme="light"] .circle {
+    max-width: 100vw;
+    max-height: 100vh;
     opacity: 0.05;
 }
 
 .circle-1 {
     top: -10%;
     right: 10%;
-    width: 500px;
-    height: 500px;
+    width: 50vmin;
+    height: 50vmin;
     background: var(--primary);
 }
 
 .circle-2 {
     bottom: -10%;
     left: -5%;
-    width: 600px;
-    height: 600px;
+    width: 60vmin;
+    height: 60vmin;
     background: var(--secondary);
 }
 

diff --git a/frontend/src/styles/responsive.css b/frontend/src/styles/responsive.css
@@ -247,4 +247,42 @@
         width: 100%;
         justify-content: center;
     }
+
+    /* Server Controls Toolbar (Mobile) */
+    .server-controls-toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .search-box {
+        width: 100%;
+        min-width: 100%;
+    }
+
+    .toolbar-actions {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--space-3);
+    }
+
+    .toolbar-actions .btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .select-group {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 2px;
+    }
+
+    .select-group select {
+        width: 100%;
+    }
+
+    /* Stats Grid (Mobile) */
+    .stats-grid {
+        grid-template-columns: 1fr 1fr;
+    }
 }
diff --git a/frontend/src/styles/toasts.css b/frontend/src/styles/toasts.css
@@ -1,7 +1,7 @@
 /* Toast Container */
 #toast-container {
     position: fixed;
-    top: var(--space-5);
+    bottom: var(--space-5);
     right: var(--space-5);
     z-index: var(--z-toast);
     display: flex;
@@ -70,6 +70,8 @@
 }
 
 .toast-close {
+    min-width: 44px;
+    min-height: 44px;
     background: transparent;
     border: none;
     color: var(--text-muted);