diff --git a/src/assets/design-system.css b/src/assets/design-system.css
index f167d6e..8bea78f 100644
--- a/src/assets/design-system.css
+++ b/src/assets/design-system.css
@@ -52,7 +52,7 @@
   --color-info-600: #2563eb;
   --color-info-700: #1e40af;
 
-  /* Border Radius */
+  /* Border Radius (scale: 2, 4, 6, 8, 12) */
   --radius-xs: 2px;
   --radius-sm: 4px;
   --radius-md: 6px;
@@ -119,7 +119,7 @@
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;
@@ -178,7 +178,7 @@
 .form-input {
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-md);
   transition: all var(--transition-base);
 }
@@ -192,7 +192,7 @@
 /* Card */
 .card {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   border: 1px solid var(--color-gray-200);
   overflow: hidden;
   transition: all var(--transition-base);
@@ -364,7 +364,7 @@
   align-items: center;
   padding: var(--space-12);
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   text-align: center;
   gap: var(--space-4);
 }
diff --git a/src/components/ConfirmModal.vue b/src/components/ConfirmModal.vue
index 7e9737f..a218a9c 100644
--- a/src/components/ConfirmModal.vue
+++ b/src/components/ConfirmModal.vue
@@ -95,7 +95,7 @@ const confirmButtonClass = computed(() => {
 
 .confirm-modal {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   box-shadow: var(--shadow-xl);
   width: 420px;
   max-width: 90vw;
@@ -162,7 +162,7 @@ const confirmButtonClass = computed(() => {
   padding: var(--space-2) var(--space-3);
   background: var(--color-warning-50);
   color: var(--color-warning-700);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
 }
 
@@ -179,7 +179,7 @@ const confirmButtonClass = computed(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;
diff --git a/src/components/ContainerTerminal.vue b/src/components/ContainerTerminal.vue
index 3e5c19c..df7e4ff 100644
--- a/src/components/ContainerTerminal.vue
+++ b/src/components/ContainerTerminal.vue
@@ -275,7 +275,7 @@ defineExpose({
   height: 100%;
   min-height: 400px;
   background: #1a1b26;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
diff --git a/src/components/DeploymentCard.vue b/src/components/DeploymentCard.vue
index afb9dc3..f65edaf 100644
--- a/src/components/DeploymentCard.vue
+++ b/src/components/DeploymentCard.vue
@@ -50,7 +50,7 @@ defineEmits<{
 <style scoped>
 .deployment-card {
   background: white;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   overflow: hidden;
   display: flex;
   flex-direction: column;
diff --git a/src/components/DeploymentTrafficStats.vue b/src/components/DeploymentTrafficStats.vue
index 0e54773..5cdc830 100644
--- a/src/components/DeploymentTrafficStats.vue
+++ b/src/components/DeploymentTrafficStats.vue
@@ -166,7 +166,7 @@ onMounted(() => {
 <style scoped>
 .deployment-traffic {
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   padding: 1rem;
 }
@@ -204,7 +204,7 @@ onMounted(() => {
 .time-select {
   padding: 0.375rem 0.5rem;
   border: 1px solid #e5e7eb;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   font-size: 0.75rem;
   color: #374151;
   background: white;
@@ -258,7 +258,7 @@ onMounted(() => {
 .status-distribution {
   display: flex;
   height: 8px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
   background: #f3f4f6;
 }
@@ -345,7 +345,7 @@ onMounted(() => {
   align-items: center;
   padding: 0.375rem 0.5rem;
   background: #f9fafb;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .path-name {
@@ -383,7 +383,7 @@ onMounted(() => {
   padding: 0.5rem;
   font-size: 0.875rem;
   font-weight: 500;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   border: none;
   cursor: pointer;
   transition: all 0.2s;
diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index aecf004..ea8c873 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -954,7 +954,7 @@ onMounted(() => {
 
 .modal-container {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   box-shadow: var(--shadow-xl);
   max-width: 90vw;
   animation: slideIn 0.2s ease;
@@ -1018,7 +1018,7 @@ onMounted(() => {
   width: 100%;
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-md);
 }
 
@@ -1033,7 +1033,7 @@ onMounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;
@@ -1081,7 +1081,7 @@ onMounted(() => {
 .view-mode-toggle {
   display: flex;
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   overflow: hidden;
   margin-left: var(--space-2);
 }
@@ -1126,7 +1126,7 @@ onMounted(() => {
   align-items: center;
   padding: var(--space-3);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   transition: all var(--transition-base);
   position: relative;
diff --git a/src/components/LogViewer.vue b/src/components/LogViewer.vue
index 3f19ba1..a65026d 100644
--- a/src/components/LogViewer.vue
+++ b/src/components/LogViewer.vue
@@ -475,7 +475,7 @@ onUnmounted(() => {
 
 .terminal-container :deep(.xterm-viewport::-webkit-scrollbar-thumb) {
   background: #2a2e3d;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .terminal-container :deep(.xterm-viewport::-webkit-scrollbar-thumb:hover) {
diff --git a/src/components/NewDeploymentModal.vue b/src/components/NewDeploymentModal.vue
index a50fc64..2cc10c8 100644
--- a/src/components/NewDeploymentModal.vue
+++ b/src/components/NewDeploymentModal.vue
@@ -2265,7 +2265,7 @@ const handleClose = () => {
 .section-card {
   background: white;
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
@@ -2297,7 +2297,7 @@ const handleClose = () => {
 .section-icon {
   width: 36px;
   height: 36px;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-50));
   color: var(--color-primary-600);
   display: flex;
@@ -2374,7 +2374,7 @@ const handleClose = () => {
   width: 100%;
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-md);
   color: var(--color-gray-900);
   background: white;
@@ -2428,7 +2428,7 @@ const handleClose = () => {
   gap: var(--space-2);
   padding: var(--space-2) var(--space-3);
   background: linear-gradient(135deg, var(--color-primary-50), var(--color-info-50));
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-family: var(--font-mono);
   font-size: var(--text-sm);
 }
@@ -2540,7 +2540,7 @@ const handleClose = () => {
 .template-icon {
   width: 36px;
   height: 36px;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   background: var(--color-gray-100);
   display: flex;
   align-items: center;
@@ -2618,7 +2618,7 @@ const handleClose = () => {
   display: flex;
   flex-direction: column;
   background: var(--color-gray-900);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   overflow: hidden;
 }
 
@@ -2872,7 +2872,7 @@ const handleClose = () => {
 .review-card {
   background: white;
   border: 1px solid var(--color-gray-100);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   overflow: hidden;
 }
 
@@ -2994,7 +2994,7 @@ const handleClose = () => {
   background: var(--color-gray-900);
   color: var(--color-gray-300);
   padding: var(--space-3);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-family: var(--font-mono);
   font-size: var(--text-xs);
   line-height: 1.5;
@@ -3022,7 +3022,7 @@ const handleClose = () => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-sm);
   cursor: pointer;
@@ -3156,7 +3156,7 @@ const handleClose = () => {
 .mode-card-icon {
   width: 48px;
   height: 48px;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3255,7 +3255,7 @@ const handleClose = () => {
   padding: var(--space-3);
   background: white;
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   text-align: left;
   transition: all 0.2s ease;
@@ -3274,7 +3274,7 @@ const handleClose = () => {
 .db-option-icon {
   width: 40px;
   height: 40px;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3388,7 +3388,7 @@ const handleClose = () => {
   padding: var(--space-4);
   background: white;
   border: 2px solid var(--color-gray-200);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   cursor: pointer;
   text-align: left;
   transition: all 0.2s ease;
@@ -3406,7 +3406,7 @@ const handleClose = () => {
 .mode-icon {
   width: 36px;
   height: 36px;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   background: var(--color-gray-100);
   color: var(--color-gray-500);
   display: flex;
@@ -3508,7 +3508,7 @@ const handleClose = () => {
   background: var(--color-primary-50);
   color: var(--color-primary-600);
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   cursor: pointer;
@@ -3532,7 +3532,7 @@ const handleClose = () => {
   padding: var(--space-3);
   background: white;
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   text-align: left;
   transition: all 0.2s ease;
@@ -3551,7 +3551,7 @@ const handleClose = () => {
 .container-icon {
   width: 36px;
   height: 36px;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   background: var(--color-gray-100);
   color: var(--color-gray-500);
   display: flex;
@@ -3632,7 +3632,7 @@ const handleClose = () => {
   background: var(--color-primary-500);
   color: white;
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   cursor: pointer;
@@ -3698,7 +3698,7 @@ const handleClose = () => {
   background: var(--color-gray-900);
   color: var(--color-gray-100);
   padding: var(--space-3);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-xs);
   font-family: var(--font-mono);
   overflow-x: auto;
@@ -3737,7 +3737,7 @@ const handleClose = () => {
   justify-content: center;
   background: var(--color-gray-100);
   color: var(--color-gray-600);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   flex-shrink: 0;
   font-size: var(--text-sm);
 }
@@ -3763,7 +3763,7 @@ const handleClose = () => {
   gap: var(--space-2);
   padding: var(--space-3);
   background: var(--color-info-50);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   margin-top: auto;
 }
 
@@ -3798,7 +3798,7 @@ const handleClose = () => {
   gap: var(--space-2);
   padding: var(--space-3);
   background: var(--color-success-50);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   margin-top: auto;
 }
 
@@ -3843,7 +3843,7 @@ const handleClose = () => {
   gap: var(--space-3);
   padding: var(--space-4);
   background: var(--color-gray-50);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   border: 1px solid var(--color-gray-200);
 }
 
@@ -3862,7 +3862,7 @@ const handleClose = () => {
 .registry-credentials .form-field input {
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--color-gray-300);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
 }
 
@@ -3900,7 +3900,7 @@ const handleClose = () => {
   width: 100%;
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--color-gray-300);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
 }
 
@@ -3938,7 +3938,7 @@ const handleClose = () => {
   width: 100%;
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--color-gray-300);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
   background: white;
   cursor: pointer;
@@ -3976,7 +3976,7 @@ const handleClose = () => {
 .collapsible-section {
   background: white;
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
@@ -4069,7 +4069,7 @@ const handleClose = () => {
   padding: var(--space-4);
   background: white;
   border: 2px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   transition: all 0.2s ease;
 }
 
diff --git a/src/components/OperationModal.vue b/src/components/OperationModal.vue
index 0808095..3c13429 100644
--- a/src/components/OperationModal.vue
+++ b/src/components/OperationModal.vue
@@ -165,7 +165,7 @@ const handleClose = () => {
   padding: var(--space-5);
   background: linear-gradient(135deg, var(--color-gray-50), white);
   border: 1px solid var(--color-gray-100);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   margin-bottom: var(--space-6);
 }
 
@@ -220,7 +220,7 @@ const handleClose = () => {
 
 .output-section {
   margin-top: var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -229,7 +229,7 @@ const handleClose = () => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-3) var(--space-5);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;
diff --git a/src/components/SecurityHealthCard.vue b/src/components/SecurityHealthCard.vue
index c56654b..dc7a91c 100644
--- a/src/components/SecurityHealthCard.vue
+++ b/src/components/SecurityHealthCard.vue
@@ -228,7 +228,7 @@ onMounted(() => {
 <style scoped>
 .health-card {
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   padding: 1.25rem;
 }
@@ -314,7 +314,7 @@ onMounted(() => {
 .check-category {
   padding: 1rem;
   background: #f9fafb;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
 }
 
 .category-header {
@@ -346,7 +346,7 @@ onMounted(() => {
   padding: 0.125rem 0.375rem;
   background: #fee2e2;
   color: #dc2626;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 0.625rem;
   font-weight: 600;
   text-transform: uppercase;
@@ -356,7 +356,7 @@ onMounted(() => {
   font-size: 0.75rem;
   font-weight: 600;
   padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .category-status.passed {
@@ -395,7 +395,7 @@ onMounted(() => {
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 0.75rem;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   font-size: 0.8125rem;
 }
 
@@ -433,7 +433,7 @@ onMounted(() => {
   align-items: flex-start;
   gap: 0.5rem;
   padding: 0.625rem 0.875rem;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   font-size: 0.8125rem;
   line-height: 1.4;
 }
@@ -479,7 +479,7 @@ onMounted(() => {
   margin: 0.75rem 0 0 0;
   padding: 1rem;
   background: #f9fafb;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   font-size: 0.75rem;
   overflow-x: auto;
   color: #374151;
@@ -492,7 +492,7 @@ onMounted(() => {
   padding: 0.625rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   border: none;
   cursor: pointer;
   transition: all 0.2s;
diff --git a/src/components/ToastNotifications.vue b/src/components/ToastNotifications.vue
index e92590f..71b87af 100644
--- a/src/components/ToastNotifications.vue
+++ b/src/components/ToastNotifications.vue
@@ -59,7 +59,7 @@ const getIcon = (type: string) => {
   gap: 0.75rem;
   padding: 1rem;
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   box-shadow:
     0 10px 40px rgba(0, 0, 0, 0.15),
     0 2px 10px rgba(0, 0, 0, 0.1);
@@ -132,7 +132,7 @@ const getIcon = (type: string) => {
   color: #9ca3af;
   cursor: pointer;
   padding: 0.25rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   transition: all 0.2s;
 }
 
diff --git a/src/components/TrafficDashboard.vue b/src/components/TrafficDashboard.vue
index 2b0d4c4..11d38f2 100644
--- a/src/components/TrafficDashboard.vue
+++ b/src/components/TrafficDashboard.vue
@@ -6,161 +6,425 @@
     </div>
 
     <div v-else-if="stats" class="traffic-content">
-      <!-- Quick Insights Bar -->
-      <div class="insights-bar">
-        <div class="time-range">
-          <select v-model="timeRange" class="time-select" @change="fetchData">
-            <option value="1h">Last hour</option>
-            <option value="6h">Last 6 hours</option>
-            <option value="24h">Last 24 hours</option>
-            <option value="7d">Last 7 days</option>
+      <!-- Header with tabs and controls -->
+      <div class="dashboard-header">
+        <div class="tabs">
+          <button
+            v-for="tab in subTabs"
+            :key="tab.id"
+            class="tab"
+            :class="{ active: activeSubTab === tab.id }"
+            @click="activeSubTab = tab.id"
+          >
+            <i :class="tab.icon" />
+            {{ tab.label }}
+            <span v-if="tab.id === 'performance' && performanceAlerts.length" class="tab-badge">
+              {{ performanceAlerts.length }}
+            </span>
+          </button>
+        </div>
+        <div class="header-actions">
+          <select v-model="timeRange" class="select-compact" @change="fetchData">
+            <option value="1h">1h</option>
+            <option value="6h">6h</option>
+            <option value="24h">24h</option>
+            <option value="7d">7d</option>
           </select>
-          <button class="btn-refresh" :disabled="loading" @click="fetchData">
+          <button class="btn-icon" :disabled="loading" @click="fetchData" title="Refresh">
             <i class="pi pi-refresh" :class="{ 'pi-spin': loading }" />
           </button>
         </div>
-        <div class="insights-summary">
-          <span class="insight-item" :class="overallHealthClass">
-            <i :class="overallHealthIcon" />
-            {{ overallHealthText }}
-          </span>
-          <span v-if="hasAnomalies" class="insight-item warning">
-            <i class="pi pi-exclamation-triangle" />
-            {{ anomalyCount }} anomalies detected
-          </span>
+      </div>
+
+      <!-- Intelligent Insights Bar -->
+      <div v-if="insights.length > 0 || recommendations.length > 0" class="insights-bar">
+        <div class="insights-list">
+          <div v-for="insight in insights" :key="insight.id" class="insight-chip" :class="insight.type">
+            <i :class="insight.icon" />
+            <span>{{ insight.text }}</span>
+          </div>
+        </div>
+        <div v-if="recommendations.length > 0" class="recommendations">
+          <button
+            v-for="rec in recommendations.slice(0, 2)"
+            :key="rec.id"
+            class="recommendation-btn"
+            :class="rec.severity"
+            @click="handleRecommendation(rec)"
+          >
+            <i :class="rec.icon" />
+            {{ rec.action }}
+          </button>
         </div>
       </div>
 
-      <!-- Deployment Performance Cards -->
-      <div v-if="deploymentInsights.length > 0" class="deployments-section">
-        <h3>Deployment Performance</h3>
-        <div class="deployment-cards">
-          <div v-for="dep in deploymentInsights" :key="dep.name" class="deployment-card" :class="dep.healthClass">
-            <div class="dep-header">
-              <span class="dep-name">{{ dep.name }}</span>
-              <span class="dep-status" :class="dep.healthClass">{{ dep.healthLabel }}</span>
+      <!-- Overview Tab -->
+      <div v-show="activeSubTab === 'overview'" class="tab-content">
+        <!-- Stats Grid -->
+        <div class="stats-grid">
+          <div class="stat-card">
+            <div class="stat-header">
+              <span class="stat-label">Requests</span>
+              <span v-if="requestsTrend !== 0" class="trend" :class="requestsTrend > 0 ? 'up' : 'down'">
+                <i :class="requestsTrend > 0 ? 'pi pi-arrow-up' : 'pi pi-arrow-down'" />
+                {{ Math.abs(requestsTrend) }}%
+              </span>
             </div>
-            <div class="dep-metrics">
-              <div class="metric">
-                <span class="metric-value">{{ formatNumber(dep.requests) }}</span>
-                <span class="metric-label">requests</span>
-              </div>
-              <div class="metric">
-                <span class="metric-value" :class="{ slow: dep.avgTime > 500 }">
-                  {{ formatTime(dep.avgTime) }}
-                </span>
-                <span class="metric-label">avg response</span>
-              </div>
-              <div class="metric">
-                <span class="metric-value" :class="{ high: dep.errorRate > 5 }"> {{ dep.errorRate.toFixed(1) }}% </span>
-                <span class="metric-label">error rate</span>
-              </div>
+            <span class="stat-value">{{ formatNumber(stats.total_requests) }}</span>
+            <div class="stat-sparkline">
+              <div v-for="(h, idx) in hourlySparkline" :key="idx" class="spark-bar" :style="{ height: h + '%' }" />
+            </div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-header">
+              <span class="stat-label">Data Transfer</span>
             </div>
-            <div class="dep-bar">
-              <div class="bar-segment success" :style="{ width: dep.successPct + '%' }" />
-              <div class="bar-segment redirect" :style="{ width: dep.redirectPct + '%' }" />
-              <div class="bar-segment client-error" :style="{ width: dep.clientErrorPct + '%' }" />
-              <div class="bar-segment server-error" :style="{ width: dep.serverErrorPct + '%' }" />
+            <span class="stat-value">{{ formatBytes(stats.total_bytes) }}</span>
+            <span class="stat-sub"
+              >{{ formatBytes(stats.total_bytes / Math.max(stats.total_requests, 1)) }}/req avg</span
+            >
+          </div>
+          <div class="stat-card">
+            <div class="stat-header">
+              <span class="stat-label">Response Time</span>
+              <span v-if="stats.avg_response_time_ms > 500" class="trend down">slow</span>
+            </div>
+            <span class="stat-value" :class="{ warning: stats.avg_response_time_ms > 500 }">
+              {{ formatTime(stats.avg_response_time_ms) }}
+            </span>
+            <span class="stat-sub">p95: {{ formatTime(estimatedP95) }}</span>
+          </div>
+          <div class="stat-card" :class="{ error: globalErrorRate > 5 }">
+            <div class="stat-header">
+              <span class="stat-label">Error Rate</span>
+              <span v-if="globalErrorRate > 5" class="trend down">high</span>
             </div>
-            <div v-if="dep.insight" class="dep-insight">
-              <i :class="dep.insightIcon" />
-              {{ dep.insight }}
+            <span class="stat-value">{{ globalErrorRate }}%</span>
+            <div class="error-breakdown">
+              <span class="error-item" title="4xx errors">4xx: {{ stats.by_status_group?.["4xx"] || 0 }}</span>
+              <span class="error-item" title="5xx errors">5xx: {{ stats.by_status_group?.["5xx"] || 0 }}</span>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- Performance Alerts -->
-      <div v-if="performanceAlerts.length > 0" class="alerts-section">
-        <h3>Performance Alerts</h3>
-        <div class="alerts-list">
-          <div v-for="alert in performanceAlerts" :key="alert.id" class="alert-item" :class="alert.severity">
-            <i :class="alert.icon" />
-            <div class="alert-content">
-              <span class="alert-title">{{ alert.title }}</span>
-              <span class="alert-desc">{{ alert.description }}</span>
+        <!-- Two column layout -->
+        <div class="two-col">
+          <!-- Deployments -->
+          <div class="panel">
+            <div class="panel-header">
+              <h3>Deployments</h3>
+              <span class="count">{{ knownDeploymentStats.length }}</span>
+            </div>
+            <div class="deployment-list">
+              <div
+                v-for="dep in knownDeploymentStats"
+                :key="dep.name"
+                class="deployment-row"
+                :class="{ warning: dep.error_rate > 5, critical: dep.error_rate > 10 }"
+                @click="navigateToDeploymentLogs(dep.name)"
+              >
+                <div class="dep-main">
+                  <span class="dep-name">{{ dep.name }}</span>
+                  <div class="dep-bar-mini">
+                    <div class="bar-fill success" :style="{ width: getStatusPct(dep, '2xx') + '%' }" />
+                    <div
+                      class="bar-fill error"
+                      :style="{ width: getStatusPct(dep, '4xx') + getStatusPct(dep, '5xx') + '%' }"
+                    />
+                  </div>
+                </div>
+                <div class="dep-stats">
+                  <span class="dep-stat">{{ formatNumber(dep.total_requests) }}</span>
+                  <span class="dep-stat" :class="{ slow: dep.avg_response_time > 500 }">
+                    {{ formatTime(dep.avg_response_time) }}
+                  </span>
+                  <span class="dep-stat" :class="{ high: dep.error_rate > 5 }"> {{ dep.error_rate.toFixed(1) }}% </span>
+                </div>
+                <i class="pi pi-chevron-right" />
+              </div>
             </div>
           </div>
-        </div>
-      </div>
 
-      <!-- Slow Endpoints -->
-      <div v-if="slowEndpoints.length > 0" class="slow-endpoints-section">
-        <h3>Slowest Endpoints</h3>
-        <div class="endpoints-list">
-          <div v-for="ep in slowEndpoints" :key="ep.path" class="endpoint-item">
-            <div class="endpoint-info">
-              <span class="endpoint-path">{{ ep.path }}</span>
-              <span class="endpoint-requests">{{ formatNumber(ep.requests) }} requests</span>
+          <!-- Unknown Domains + Top IPs -->
+          <div class="panel-stack">
+            <div v-if="unknownDomainStats.length > 0" class="panel warning-panel">
+              <div class="panel-header">
+                <h3><i class="pi pi-exclamation-triangle" /> Unknown Domains</h3>
+                <span class="count">{{ unknownDomainStats.length }}</span>
+              </div>
+              <div class="unknown-list">
+                <div
+                  v-for="domain in unknownDomainStats.slice(0, 5)"
+                  :key="domain.name"
+                  class="unknown-row"
+                  @click="navigateToDeploymentLogs(domain.name)"
+                >
+                  <code>{{ domain.name }}</code>
+                  <span>{{ formatNumber(domain.total_requests) }} req</span>
+                </div>
+              </div>
             </div>
-            <div class="endpoint-time" :class="getTimeClass(ep.avgTime)">
-              {{ formatTime(ep.avgTime) }}
+
+            <div class="panel">
+              <div class="panel-header">
+                <h3>Top Sources</h3>
+              </div>
+              <div class="ip-list">
+                <div v-for="ip in topIPs" :key="ip.ip" class="ip-row">
+                  <code>{{ ip.ip }}</code>
+                  <div class="ip-stats">
+                    <span>{{ formatNumber(ip.requests) }}</span>
+                    <span class="muted">{{ formatBytes(ip.bytes) }}</span>
+                  </div>
+                </div>
+              </div>
             </div>
-            <div class="time-bar">
-              <div
-                class="time-fill"
-                :style="{ width: getTimeBarWidth(ep.avgTime) + '%' }"
-                :class="getTimeClass(ep.avgTime)"
-              />
+          </div>
+        </div>
+
+        <!-- Method & Status Distribution -->
+        <div class="distribution-row">
+          <div class="distribution-card">
+            <h4>By Method</h4>
+            <div class="dist-bars">
+              <div v-for="(count, method) in stats.by_method" :key="method" class="dist-item">
+                <span class="dist-label">{{ method }}</span>
+                <div class="dist-bar">
+                  <div class="dist-fill" :style="{ width: getMethodPct(method) + '%' }" />
+                </div>
+                <span class="dist-value">{{ formatNumber(count) }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="distribution-card">
+            <h4>By Status</h4>
+            <div class="status-grid">
+              <div class="status-item success">
+                <span class="status-code">2xx</span>
+                <span class="status-count">{{ formatNumber(stats.by_status_group?.["2xx"] || 0) }}</span>
+              </div>
+              <div class="status-item redirect">
+                <span class="status-code">3xx</span>
+                <span class="status-count">{{ formatNumber(stats.by_status_group?.["3xx"] || 0) }}</span>
+              </div>
+              <div class="status-item client-error">
+                <span class="status-code">4xx</span>
+                <span class="status-count">{{ formatNumber(stats.by_status_group?.["4xx"] || 0) }}</span>
+              </div>
+              <div class="status-item server-error">
+                <span class="status-code">5xx</span>
+                <span class="status-count">{{ formatNumber(stats.by_status_group?.["5xx"] || 0) }}</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- Top Active IPs -->
-      <div v-if="topIPs.length > 0" class="ips-section">
-        <h3>Most Active Sources</h3>
-        <div class="ips-grid">
-          <div v-for="ip in topIPs" :key="ip.ip" class="ip-item">
-            <span class="ip-address">{{ ip.ip }}</span>
-            <span class="ip-count">{{ formatNumber(ip.requests) }} req</span>
-            <span class="ip-data">{{ formatBytes(ip.bytes) }}</span>
-          </div>
+      <!-- Request Logs Tab -->
+      <div v-show="activeSubTab === 'logs'" class="tab-content">
+        <div class="filters-bar">
+          <select v-model="logFilters.deployment" class="select-compact" @change="fetchLogs">
+            <option value="">All domains</option>
+            <option v-for="dep in allDomains" :key="dep" :value="dep">{{ dep }}</option>
+          </select>
+          <select v-model="logFilters.status_group" class="select-compact" @change="fetchLogs">
+            <option value="">All status</option>
+            <option value="2xx">2xx</option>
+            <option value="3xx">3xx</option>
+            <option value="4xx">4xx</option>
+            <option value="5xx">5xx</option>
+          </select>
+          <select v-model="logFilters.method" class="select-compact" @change="fetchLogs">
+            <option value="">All methods</option>
+            <option value="GET">GET</option>
+            <option value="POST">POST</option>
+            <option value="PUT">PUT</option>
+            <option value="DELETE">DELETE</option>
+          </select>
+          <input
+            v-model="logFilters.path"
+            type="text"
+            class="input-compact"
+            placeholder="Filter path..."
+            @keyup.enter="fetchLogs"
+          />
+          <button v-if="hasActiveFilters" class="btn-text" @click="clearLogFilters">Clear</button>
+        </div>
+
+        <div class="logs-table-wrap">
+          <table v-if="logs.length > 0" class="data-table">
+            <thead>
+              <tr>
+                <th class="sortable" @click="toggleSort('created_at')">
+                  Time
+                  <i
+                    v-if="sortField === 'created_at'"
+                    :class="sortDir === 'asc' ? 'pi pi-sort-up' : 'pi pi-sort-down'"
+                  />
+                </th>
+                <th>Domain</th>
+                <th>Method</th>
+                <th>Path</th>
+                <th class="sortable" @click="toggleSort('status_code')">
+                  Status
+                  <i
+                    v-if="sortField === 'status_code'"
+                    :class="sortDir === 'asc' ? 'pi pi-sort-up' : 'pi pi-sort-down'"
+                  />
+                </th>
+                <th>IP</th>
+                <th class="sortable" @click="toggleSort('response_time_ms')">
+                  Time
+                  <i
+                    v-if="sortField === 'response_time_ms'"
+                    :class="sortDir === 'asc' ? 'pi pi-sort-up' : 'pi pi-sort-down'"
+                  />
+                </th>
+                <th>Size</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="log in sortedLogs" :key="log.id" :class="{ 'error-row': log.status_code >= 400 }">
+                <td class="cell-time">{{ formatLogTime(log.created_at) }}</td>
+                <td class="cell-domain">{{ log.deployment_name }}</td>
+                <td>
+                  <span class="method-tag" :class="log.request_method.toLowerCase()">
+                    {{ log.request_method }}
+                  </span>
+                </td>
+                <td class="cell-path" :title="log.request_path">{{ log.request_path }}</td>
+                <td>
+                  <span class="status-tag" :class="getStatusClass(log.status_code)">
+                    {{ log.status_code }}
+                  </span>
+                </td>
+                <td class="cell-ip">
+                  <code>{{ log.source_ip }}</code>
+                </td>
+                <td class="cell-time" :class="getTimeClass(log.response_time_ms)">
+                  {{ formatTime(log.response_time_ms) }}
+                </td>
+                <td class="cell-size">{{ formatBytes(log.bytes_sent) }}</td>
+                <td class="cell-actions">
+                  <button class="btn-icon-sm" title="Filter by this IP" @click.stop="filterByIP(log.source_ip)">
+                    <i class="pi pi-filter" />
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div v-else-if="!logsLoading" class="empty-inline">No logs match your filters</div>
+          <div v-else class="loading-inline"><i class="pi pi-spin pi-spinner" /> Loading...</div>
+        </div>
+
+        <div v-if="logsTotal > logFilters.limit" class="pagination">
+          <button class="btn-sm" :disabled="logFilters.offset === 0" @click="prevPage">Prev</button>
+          <span
+            >{{ logFilters.offset + 1 }}-{{ Math.min(logFilters.offset + logFilters.limit, logsTotal) }} /
+            {{ logsTotal }}</span
+          >
+          <button class="btn-sm" :disabled="logFilters.offset + logFilters.limit >= logsTotal" @click="nextPage">
+            Next
+          </button>
         </div>
       </div>
 
-      <!-- Summary Stats Footer -->
-      <div class="summary-footer">
-        <div class="summary-stat">
-          <span class="summary-value">{{ formatNumber(stats.total_requests) }}</span>
-          <span class="summary-label">Total Requests</span>
+      <!-- Performance Tab -->
+      <div v-show="activeSubTab === 'performance'" class="tab-content">
+        <!-- Alerts -->
+        <div v-if="performanceAlerts.length > 0" class="alerts-panel">
+          <div class="alert-row" v-for="alert in performanceAlerts" :key="alert.id" :class="alert.severity">
+            <i :class="alert.icon" />
+            <div class="alert-text">
+              <strong>{{ alert.title }}</strong>
+              <span>{{ alert.description }}</span>
+            </div>
+            <button v-if="alert.action" class="btn-sm" @click="handleAlertAction(alert)">
+              {{ alert.actionLabel }}
+            </button>
+          </div>
         </div>
-        <div class="summary-stat">
-          <span class="summary-value">{{ formatBytes(stats.total_bytes) }}</span>
-          <span class="summary-label">Data Transferred</span>
+
+        <!-- Slow Endpoints -->
+        <div class="panel">
+          <div class="panel-header">
+            <h3>Slowest Endpoints</h3>
+            <span class="muted">by avg response time</span>
+          </div>
+          <table v-if="slowEndpoints.length > 0" class="data-table compact">
+            <thead>
+              <tr>
+                <th>Deployment</th>
+                <th>Path</th>
+                <th>Requests</th>
+                <th>Avg Time</th>
+                <th>Errors</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="ep in slowEndpoints" :key="`${ep.deployment}-${ep.path}`">
+                <td>
+                  <span class="tag">{{ ep.deployment }}</span>
+                </td>
+                <td class="cell-path">{{ ep.path }}</td>
+                <td>{{ formatNumber(ep.requests) }}</td>
+                <td :class="getTimeClass(ep.avgTime)">{{ formatTime(ep.avgTime) }}</td>
+                <td>{{ ep.errors }}</td>
+                <td class="cell-actions">
+                  <button class="btn-icon-sm" title="View logs" @click="filterByPath(ep.path, ep.deployment)">
+                    <i class="pi pi-external-link" />
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div v-else class="empty-inline">No slow endpoints detected</div>
         </div>
-        <div class="summary-stat">
-          <span class="summary-value">{{ formatTime(stats.avg_response_time_ms) }}</span>
-          <span class="summary-label">Avg Response</span>
+
+        <!-- Hourly Chart -->
+        <div v-if="stats.requests_per_hour?.length > 0" class="panel">
+          <div class="panel-header">
+            <h3>Request Volume (24h)</h3>
+          </div>
+          <div class="hourly-chart">
+            <div
+              v-for="hour in stats.requests_per_hour"
+              :key="hour.hour"
+              class="hour-bar"
+              :style="{ height: getHourlyBarHeight(hour.request_count) + '%' }"
+              :title="`${formatHour(hour.hour)}: ${hour.request_count} requests`"
+              :class="{ highlight: isCurrentHour(hour.hour) }"
+            />
+          </div>
+          <div class="hourly-labels">
+            <span v-for="(hour, idx) in stats.requests_per_hour" :key="idx" v-show="idx % 4 === 0">
+              {{ formatHour(hour.hour) }}
+            </span>
+          </div>
         </div>
-        <div class="summary-stat">
-          <span class="summary-value" :class="{ error: globalErrorRate > 5 }">{{ globalErrorRate }}%</span>
-          <span class="summary-label">Error Rate</span>
+
+        <div v-if="performanceAlerts.length === 0 && slowEndpoints.length === 0" class="empty-state-sm">
+          <i class="pi pi-check-circle" />
+          <span>No performance issues detected</span>
         </div>
       </div>
     </div>
 
     <div v-else class="empty-state">
       <i class="pi pi-chart-line" />
-      <h4>No Traffic Data Yet</h4>
-      <p>Traffic will appear here once requests flow through your deployments.</p>
-      <div class="empty-actions">
-        <select v-model="timeRange" class="time-select">
-          <option value="1h">Last hour</option>
-          <option value="6h">Last 6 hours</option>
-          <option value="24h">Last 24 hours</option>
-          <option value="7d">Last 7 days</option>
-        </select>
-        <button class="btn btn-primary" @click="fetchData">Check for Traffic</button>
-      </div>
+      <p>No traffic data yet</p>
+      <button class="btn-primary" @click="fetchData">Check for Traffic</button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, reactive, computed, onMounted, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { useTrafficStore } from "@/stores/traffic";
+import { useDeploymentsStore } from "@/stores/deployments";
 
 const props = defineProps<{
   deployment?: string;
@@ -168,23 +432,45 @@ const props = defineProps<{
 }>();
 
 const trafficStore = useTrafficStore();
-const { stats, loading } = storeToRefs(trafficStore);
+const deploymentsStore = useDeploymentsStore();
+const { stats, logs, logsTotal, loading } = storeToRefs(trafficStore);
+const { deployments } = storeToRefs(deploymentsStore);
 
 const timeRange = ref("24h");
+const activeSubTab = ref("overview");
+const logsLoading = ref(false);
+const sortField = ref("created_at");
+const sortDir = ref<"asc" | "desc">("desc");
+
+const subTabs = [
+  { id: "overview", label: "Overview", icon: "pi pi-chart-bar" },
+  { id: "logs", label: "Logs", icon: "pi pi-list" },
+  { id: "performance", label: "Performance", icon: "pi pi-bolt" },
+];
+
+const logFilters = reactive({
+  deployment: "",
+  status_group: "",
+  method: "",
+  path: "",
+  source_ip: "",
+  limit: 25,
+  offset: 0,
+});
+
+interface Insight {
+  id: string;
+  type: "info" | "warning" | "success" | "anomaly";
+  icon: string;
+  text: string;
+}
 
-interface DeploymentInsight {
-  name: string;
-  requests: number;
-  avgTime: number;
-  errorRate: number;
-  successPct: number;
-  redirectPct: number;
-  clientErrorPct: number;
-  serverErrorPct: number;
-  healthClass: string;
-  healthLabel: string;
-  insight: string | null;
-  insightIcon: string;
+interface Recommendation {
+  id: string;
+  severity: "warning" | "critical";
+  icon: string;
+  action: string;
+  handler: () => void;
 }
 
 interface PerformanceAlert {
@@ -193,6 +479,8 @@ interface PerformanceAlert {
   icon: string;
   title: string;
   description: string;
+  action?: string;
+  actionLabel?: string;
 }
 
 const globalErrorRate = computed(() => {
@@ -201,91 +489,151 @@ const globalErrorRate = computed(() => {
   return Number(((errors / stats.value.total_requests) * 100).toFixed(1));
 });
 
-const overallHealthClass = computed(() => {
-  const rate = globalErrorRate.value;
-  if (rate > 10) return "critical";
-  if (rate > 5) return "warning";
-  if (rate > 1) return "degraded";
-  return "healthy";
+const requestsTrend = computed(() => {
+  if (!stats.value?.requests_per_hour?.length) return 0;
+  const hours = stats.value.requests_per_hour;
+  if (hours.length < 12) return 0;
+  const recent = hours.slice(-6).reduce((s, h) => s + h.request_count, 0);
+  const earlier = hours.slice(-12, -6).reduce((s, h) => s + h.request_count, 0);
+  if (earlier === 0) return 0;
+  return Math.round(((recent - earlier) / earlier) * 100);
+});
+
+const hourlySparkline = computed(() => {
+  if (!stats.value?.requests_per_hour?.length) return [];
+  const hours = stats.value.requests_per_hour.slice(-12);
+  const max = Math.max(...hours.map((h) => h.request_count), 1);
+  return hours.map((h) => Math.max((h.request_count / max) * 100, 5));
 });
 
-const overallHealthIcon = computed(() => {
-  const cls = overallHealthClass.value;
-  if (cls === "critical") return "pi pi-times-circle";
-  if (cls === "warning") return "pi pi-exclamation-circle";
-  if (cls === "degraded") return "pi pi-minus-circle";
-  return "pi pi-check-circle";
+const estimatedP95 = computed(() => {
+  if (!stats.value) return 0;
+  return stats.value.avg_response_time_ms * 2.5;
 });
 
-const overallHealthText = computed(() => {
-  const cls = overallHealthClass.value;
-  if (cls === "critical") return "Critical issues detected";
-  if (cls === "warning") return "Elevated error rate";
-  if (cls === "degraded") return "Minor issues";
-  return "All systems healthy";
+const insights = computed((): Insight[] => {
+  if (!stats.value) return [];
+  const list: Insight[] = [];
+
+  if (requestsTrend.value > 20) {
+    list.push({
+      id: "traffic-up",
+      type: "info",
+      icon: "pi pi-arrow-up",
+      text: `Traffic up ${requestsTrend.value}% vs previous period`,
+    });
+  } else if (requestsTrend.value < -20) {
+    list.push({
+      id: "traffic-down",
+      type: "warning",
+      icon: "pi pi-arrow-down",
+      text: `Traffic down ${Math.abs(requestsTrend.value)}% vs previous period`,
+    });
+  }
+
+  if (globalErrorRate.value > 10) {
+    list.push({
+      id: "high-errors",
+      type: "anomaly",
+      icon: "pi pi-exclamation-circle",
+      text: `Elevated error rate: ${globalErrorRate.value}%`,
+    });
+  }
+
+  if (stats.value.avg_response_time_ms > 1000) {
+    list.push({
+      id: "slow-response",
+      type: "warning",
+      icon: "pi pi-clock",
+      text: `Slow avg response: ${formatTime(stats.value.avg_response_time_ms)}`,
+    });
+  }
+
+  const topIP = stats.value.top_ips?.[0];
+  if (topIP && topIP.request_count > stats.value.total_requests * 0.5) {
+    list.push({
+      id: "dominant-ip",
+      type: "anomaly",
+      icon: "pi pi-user",
+      text: `${topIP.ip} made ${Math.round((topIP.request_count / stats.value.total_requests) * 100)}% of requests`,
+    });
+  }
+
+  return list.slice(0, 3);
 });
 
-const hasAnomalies = computed(() => performanceAlerts.value.length > 0);
-const anomalyCount = computed(() => performanceAlerts.value.length);
+const recommendations = computed((): Recommendation[] => {
+  if (!stats.value) return [];
+  const list: Recommendation[] = [];
+
+  const topIP = stats.value.top_ips?.[0];
+  if (topIP && topIP.request_count > stats.value.total_requests * 0.7) {
+    list.push({
+      id: "block-ip",
+      severity: "warning",
+      icon: "pi pi-ban",
+      action: `Investigate ${topIP.ip}`,
+      handler: () => filterByIP(topIP.ip),
+    });
+  }
+
+  if (unknownDomainStats.value.length > 3) {
+    list.push({
+      id: "unknown-domains",
+      severity: "warning",
+      icon: "pi pi-question-circle",
+      action: "Review unknown domains",
+      handler: () => (activeSubTab.value = "overview"),
+    });
+  }
+
+  const slowest = stats.value.top_paths?.find((p) => p.avg_time_ms > 2000);
+  if (slowest) {
+    list.push({
+      id: "slow-endpoint",
+      severity: "critical",
+      icon: "pi pi-clock",
+      action: "Investigate slow endpoint",
+      handler: () => {
+        activeSubTab.value = "performance";
+      },
+    });
+  }
+
+  return list;
+});
 
-const deploymentInsights = computed((): DeploymentInsight[] => {
+const knownDeploymentStats = computed(() => {
   if (!stats.value?.deployment_stats) return [];
+  const knownNames = deployments.value.map((d) => d.name);
+  return stats.value.deployment_stats
+    .filter((ds) => knownNames.includes(ds.name))
+    .sort((a, b) => b.total_requests - a.total_requests);
+});
 
+const unknownDomainStats = computed(() => {
+  if (!stats.value?.deployment_stats) return [];
+  const knownNames = deployments.value.map((d) => d.name);
   return stats.value.deployment_stats
-    .map((dep) => {
-      const total = dep.total_requests || 1;
-      const successPct = (dep.status_2xx / total) * 100;
-      const redirectPct = (dep.status_3xx / total) * 100;
-      const clientErrorPct = (dep.status_4xx / total) * 100;
-      const serverErrorPct = (dep.status_5xx / total) * 100;
-
-      let healthClass = "healthy";
-      let healthLabel = "Healthy";
-      if (dep.error_rate > 10) {
-        healthClass = "critical";
-        healthLabel = "Critical";
-      } else if (dep.error_rate > 5) {
-        healthClass = "warning";
-        healthLabel = "Degraded";
-      } else if (dep.avg_response_time > 1000) {
-        healthClass = "slow";
-        healthLabel = "Slow";
-      }
+    .filter((ds) => !knownNames.includes(ds.name))
+    .sort((a, b) => b.total_requests - a.total_requests);
+});
 
-      let insight: string | null = null;
-      let insightIcon = "pi pi-info-circle";
-      if (dep.status_5xx > 0 && dep.status_5xx / total > 0.05) {
-        insight = `${dep.status_5xx} server errors (${((dep.status_5xx / total) * 100).toFixed(1)}%)`;
-        insightIcon = "pi pi-exclamation-triangle";
-      } else if (dep.avg_response_time > 1000) {
-        insight = `Response time above 1s threshold`;
-        insightIcon = "pi pi-clock";
-      } else if (dep.status_4xx > dep.status_2xx * 0.1) {
-        insight = `High client error ratio`;
-        insightIcon = "pi pi-exclamation-circle";
-      }
+const allDomains = computed(() => {
+  return [...knownDeploymentStats.value, ...unknownDomainStats.value].map((d) => d.name);
+});
 
-      return {
-        name: dep.name,
-        requests: dep.total_requests,
-        avgTime: dep.avg_response_time,
-        errorRate: dep.error_rate,
-        successPct,
-        redirectPct,
-        clientErrorPct,
-        serverErrorPct,
-        healthClass,
-        healthLabel,
-        insight,
-        insightIcon,
-      };
-    })
-    .sort((a, b) => b.requests - a.requests);
+const topIPs = computed(() => {
+  if (!stats.value?.top_ips) return [];
+  return stats.value.top_ips.slice(0, 5).map((ip) => ({
+    ip: ip.ip,
+    requests: ip.request_count,
+    bytes: ip.bytes_sent,
+  }));
 });
 
 const performanceAlerts = computed((): PerformanceAlert[] => {
   if (!stats.value) return [];
-
   const alerts: PerformanceAlert[] = [];
 
   if (stats.value.deployment_stats) {
@@ -295,8 +643,10 @@ const performanceAlerts = computed((): PerformanceAlert[] => {
           id: `error-${dep.name}`,
           severity: "critical",
           icon: "pi pi-times-circle",
-          title: `High error rate on ${dep.name}`,
+          title: `High error rate: ${dep.name}`,
           description: `${dep.error_rate.toFixed(1)}% of requests failing`,
+          action: "view",
+          actionLabel: "View",
         });
       }
       if (dep.avg_response_time > 2000) {
@@ -304,8 +654,8 @@ const performanceAlerts = computed((): PerformanceAlert[] => {
           id: `slow-${dep.name}`,
           severity: "warning",
           icon: "pi pi-clock",
-          title: `Slow responses on ${dep.name}`,
-          description: `Average ${formatTime(dep.avg_response_time)} response time`,
+          title: `Slow responses: ${dep.name}`,
+          description: `Avg ${formatTime(dep.avg_response_time)}`,
         });
       }
     });
@@ -318,7 +668,7 @@ const performanceAlerts = computed((): PerformanceAlert[] => {
       severity: "critical",
       icon: "pi pi-server",
       title: "Elevated server errors",
-      description: `${formatNumber(serverErrors)} 5xx errors in the selected period`,
+      description: `${formatNumber(serverErrors)} 5xx errors`,
     });
   }
 
@@ -330,29 +680,55 @@ const slowEndpoints = computed(() => {
   return stats.value.top_paths
     .filter((p) => p.avg_time_ms > 200)
     .sort((a, b) => b.avg_time_ms - a.avg_time_ms)
-    .slice(0, 5)
+    .slice(0, 10)
     .map((p) => ({
       path: p.path,
+      deployment: p.deployment,
       requests: p.request_count,
       avgTime: p.avg_time_ms,
+      errors: p.error_count,
     }));
 });
 
-const maxEndpointTime = computed(() => {
-  if (!slowEndpoints.value.length) return 1000;
-  return Math.max(...slowEndpoints.value.map((e) => e.avgTime), 1000);
+const maxHourlyRequests = computed(() => {
+  if (!stats.value?.requests_per_hour?.length) return 1;
+  return Math.max(...stats.value.requests_per_hour.map((h) => h.request_count), 1);
 });
 
-const topIPs = computed(() => {
-  if (!stats.value?.top_ips) return [];
-  return stats.value.top_ips.slice(0, 6).map((ip) => ({
-    ip: ip.ip,
-    requests: ip.request_count,
-    bytes: ip.bytes_sent,
-  }));
+const hasActiveFilters = computed(() => {
+  return (
+    logFilters.deployment || logFilters.status_group || logFilters.method || logFilters.path || logFilters.source_ip
+  );
+});
+
+const sortedLogs = computed(() => {
+  if (!logs.value.length) return [];
+  const sorted = [...logs.value];
+  sorted.sort((a, b) => {
+    let aVal: any, bVal: any;
+    switch (sortField.value) {
+      case "created_at":
+        aVal = new Date(a.created_at).getTime();
+        bVal = new Date(b.created_at).getTime();
+        break;
+      case "status_code":
+        aVal = a.status_code;
+        bVal = b.status_code;
+        break;
+      case "response_time_ms":
+        aVal = a.response_time_ms;
+        bVal = b.response_time_ms;
+        break;
+      default:
+        return 0;
+    }
+    return sortDir.value === "asc" ? aVal - bVal : bVal - aVal;
+  });
+  return sorted;
 });
 
 const fetchData = async () => {
+  await deploymentsStore.fetchDeployments();
   if (props.deployment) {
     await trafficStore.fetchDeploymentStats(props.deployment, timeRange.value);
   } else {
@@ -360,6 +736,144 @@ const fetchData = async () => {
   }
 };
 
+const fetchLogs = async () => {
+  logsLoading.value = true;
+  const startTime = getStartTime(timeRange.value);
+  await trafficStore.fetchLogs({
+    deployment: logFilters.deployment || undefined,
+    status_group: logFilters.status_group || undefined,
+    method: logFilters.method || undefined,
+    path: logFilters.path || undefined,
+    source_ip: logFilters.source_ip || undefined,
+    start_time: startTime,
+    limit: logFilters.limit,
+    offset: logFilters.offset,
+  });
+  logsLoading.value = false;
+};
+
+const getStartTime = (range: string): string => {
+  const now = new Date();
+  switch (range) {
+    case "1h":
+      now.setHours(now.getHours() - 1);
+      break;
+    case "6h":
+      now.setHours(now.getHours() - 6);
+      break;
+    case "24h":
+      now.setHours(now.getHours() - 24);
+      break;
+    case "7d":
+      now.setDate(now.getDate() - 7);
+      break;
+  }
+  return now.toISOString();
+};
+
+const navigateToDeploymentLogs = (name: string) => {
+  logFilters.deployment = name;
+  logFilters.offset = 0;
+  activeSubTab.value = "logs";
+  fetchLogs();
+};
+
+const filterByIP = (ip: string) => {
+  logFilters.source_ip = ip;
+  logFilters.offset = 0;
+  activeSubTab.value = "logs";
+  fetchLogs();
+};
+
+const filterByPath = (path: string, deployment: string) => {
+  logFilters.path = path;
+  logFilters.deployment = deployment;
+  logFilters.offset = 0;
+  activeSubTab.value = "logs";
+  fetchLogs();
+};
+
+const clearLogFilters = () => {
+  logFilters.deployment = "";
+  logFilters.status_group = "";
+  logFilters.method = "";
+  logFilters.path = "";
+  logFilters.source_ip = "";
+  logFilters.offset = 0;
+  fetchLogs();
+};
+
+const toggleSort = (field: string) => {
+  if (sortField.value === field) {
+    sortDir.value = sortDir.value === "asc" ? "desc" : "asc";
+  } else {
+    sortField.value = field;
+    sortDir.value = "desc";
+  }
+};
+
+const prevPage = () => {
+  logFilters.offset = Math.max(0, logFilters.offset - logFilters.limit);
+  fetchLogs();
+};
+
+const nextPage = () => {
+  logFilters.offset += logFilters.limit;
+  fetchLogs();
+};
+
+const handleRecommendation = (rec: Recommendation) => rec.handler();
+
+const handleAlertAction = (alert: PerformanceAlert) => {
+  if (alert.action === "view") {
+    const depName = alert.id.replace("error-", "").replace("slow-", "");
+    navigateToDeploymentLogs(depName);
+  }
+};
+
+const getStatusPct = (dep: any, group: string) => {
+  const total = dep.total_requests || 1;
+  switch (group) {
+    case "2xx":
+      return (dep.status_2xx / total) * 100;
+    case "3xx":
+      return (dep.status_3xx / total) * 100;
+    case "4xx":
+      return (dep.status_4xx / total) * 100;
+    case "5xx":
+      return (dep.status_5xx / total) * 100;
+    default:
+      return 0;
+  }
+};
+
+const getMethodPct = (method: string) => {
+  if (!stats.value?.by_method) return 0;
+  const total = Object.values(stats.value.by_method).reduce((s, v) => s + v, 0);
+  return total ? ((stats.value.by_method[method] || 0) / total) * 100 : 0;
+};
+
+const getStatusClass = (code: number) => {
+  if (code >= 500) return "s5xx";
+  if (code >= 400) return "s4xx";
+  if (code >= 300) return "s3xx";
+  return "s2xx";
+};
+
+const getTimeClass = (ms: number) => {
+  if (ms > 1000) return "critical";
+  if (ms > 500) return "slow";
+  if (ms > 200) return "moderate";
+  return "fast";
+};
+
+const getHourlyBarHeight = (count: number) => Math.max((count / maxHourlyRequests.value) * 100, 2);
+
+const isCurrentHour = (hourStr: string) => {
+  const hour = new Date(hourStr).getHours();
+  return hour === new Date().getHours();
+};
+
 const formatNumber = (num: number): string => {
   if (!num) return "0";
   if (num >= 1000000) return (num / 1000000).toFixed(1) + "M";
@@ -368,34 +882,41 @@ const formatNumber = (num: number): string => {
 };
 
 const formatBytes = (bytes: number): string => {
-  if (!bytes) return "0 B";
-  if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(1) + " GB";
-  if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + " MB";
-  if (bytes >= 1024) return (bytes / 1024).toFixed(1) + " KB";
-  return bytes + " B";
+  if (!bytes) return "0B";
+  if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(1) + "GB";
+  if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + "MB";
+  if (bytes >= 1024) return (bytes / 1024).toFixed(1) + "KB";
+  return bytes + "B";
 };
 
 const formatTime = (ms: number): string => {
   if (!ms) return "0ms";
-  if (ms >= 1000) return (ms / 1000).toFixed(2) + "s";
+  if (ms >= 1000) return (ms / 1000).toFixed(1) + "s";
   return Math.round(ms) + "ms";
 };
 
-const getTimeClass = (ms: number): string => {
-  if (ms > 1000) return "critical";
-  if (ms > 500) return "slow";
-  if (ms > 200) return "moderate";
-  return "fast";
+const formatLogTime = (dateString: string) => {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "now";
+  if (mins < 60) return `${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h`;
+  return date.toLocaleDateString([], { month: "short", day: "numeric" });
 };
 
-const getTimeBarWidth = (ms: number): number => {
-  return Math.min((ms / maxEndpointTime.value) * 100, 100);
+const formatHour = (hourStr: string): string => {
+  return new Date(hourStr).toLocaleTimeString([], { hour: "2-digit", hour12: false });
 };
 
+watch(activeSubTab, (tab) => {
+  if (tab === "logs" && logs.value.length === 0) fetchLogs();
+});
+
 onMounted(() => {
-  if (props.autoFetch) {
-    fetchData();
-  }
+  if (props.autoFetch) fetchData();
 });
 </script>
 
@@ -403,7 +924,8 @@ onMounted(() => {
 .traffic-dashboard {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 0.75rem;
+  font-size: 0.8125rem;
 }
 
 .loading-state,
@@ -411,502 +933,944 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  padding: 3rem;
-  background: white;
-  border-radius: 12px;
-  border: 1px solid #e5e7eb;
-  text-align: center;
+  gap: 0.5rem;
+  padding: 2rem;
+  color: #6b7280;
 }
 
 .empty-state i {
-  font-size: 2.5rem;
-  color: #d1d5db;
-}
-
-.empty-state h4 {
-  margin: 0;
-  font-size: 1rem;
-  color: #374151;
+  font-size: 2rem;
+  opacity: 0.5;
 }
 
-.empty-state p {
-  margin: 0;
-  font-size: 0.875rem;
-  color: #6b7280;
+.traffic-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
-.empty-actions {
+/* Header */
+.dashboard-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
+  padding: 0.375rem;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: var(--radius-sm);
 }
 
-.traffic-content {
+.tabs {
   display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
+  gap: 2px;
 }
 
-/* Insights Bar */
-.insights-bar {
+.tab {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 1rem;
-  background: white;
-  border-radius: 10px;
-  border: 1px solid #e5e7eb;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #6b7280;
+  cursor: pointer;
+}
+
+.tab:hover {
+  background: #f3f4f6;
+}
+.tab.active {
+  background: #3b82f6;
+  color: #fff;
+}
+.tab i {
+  font-size: 0.75rem;
+}
+.tab-badge {
+  background: #ef4444;
+  color: #fff;
+  font-size: 0.625rem;
+  padding: 0 0.375rem;
+  border-radius: 9999px;
+  margin-left: 0.25rem;
 }
 
-.time-range {
+.header-actions {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
 }
 
-.time-select {
-  padding: 0.375rem 0.75rem;
+.select-compact {
+  padding: 0.25rem 0.5rem;
   border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  font-size: 0.8125rem;
-  color: #374151;
-  background: white;
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  background: #fff;
 }
 
-.btn-refresh {
-  padding: 0.375rem;
+.input-compact {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  min-width: 120px;
+}
+
+.btn-icon {
+  padding: 0.25rem;
   border: none;
   background: transparent;
   color: #6b7280;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
-
-.btn-refresh:hover {
+.btn-icon:hover {
   background: #f3f4f6;
 }
 
-.insights-summary {
+/* Insights Bar */
+.insights-bar {
   display: flex;
+  justify-content: space-between;
   align-items: center;
+  padding: 0.5rem 0.75rem;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius-sm);
   gap: 1rem;
 }
 
-.insight-item {
+.insights-list {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.insight-chip {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-  font-size: 0.8125rem;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.6875rem;
   font-weight: 500;
 }
 
-.insight-item.healthy {
+.insight-chip.info {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+.insight-chip.warning {
+  background: #fef3c7;
+  color: #b45309;
+}
+.insight-chip.success {
+  background: #d1fae5;
   color: #059669;
 }
+.insight-chip.anomaly {
+  background: #fce7f3;
+  color: #be185d;
+}
+.insight-chip i {
+  font-size: 0.625rem;
+}
 
-.insight-item.degraded {
-  color: #d97706;
+.recommendations {
+  display: flex;
+  gap: 0.375rem;
 }
 
-.insight-item.warning {
-  color: #ea580c;
+.recommendation-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  cursor: pointer;
 }
 
-.insight-item.critical {
+.recommendation-btn.warning {
+  background: #fef3c7;
+  color: #b45309;
+}
+.recommendation-btn.critical {
+  background: #fee2e2;
   color: #dc2626;
 }
+.recommendation-btn:hover {
+  filter: brightness(0.95);
+}
 
-/* Sections */
-h3 {
-  margin: 0 0 0.75rem 0;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: #6b7280;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+/* Tab Content */
+.tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
-/* Deployment Cards */
-.deployment-cards {
+/* Stats Grid */
+.stats-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1rem;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
 }
 
-.deployment-card {
-  padding: 1rem;
-  background: white;
-  border-radius: 10px;
+.stat-card {
+  padding: 0.75rem;
+  background: #fff;
   border: 1px solid #e5e7eb;
-  border-left: 3px solid #22c55e;
+  border-radius: var(--radius-sm);
 }
 
-.deployment-card.warning {
-  border-left-color: #f59e0b;
+.stat-card.error {
+  border-color: #fca5a5;
+  background: #fef2f2;
 }
 
-.deployment-card.critical {
-  border-left-color: #ef4444;
+.stat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.25rem;
 }
 
-.deployment-card.slow {
-  border-left-color: #8b5cf6;
+.stat-label {
+  font-size: 0.6875rem;
+  color: #6b7280;
+  text-transform: uppercase;
 }
 
-.dep-header {
+.trend {
+  font-size: 0.625rem;
+  font-weight: 600;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 0.75rem;
+  gap: 2px;
+}
+.trend.up {
+  color: #059669;
+}
+.trend.down {
+  color: #dc2626;
+}
+.trend i {
+  font-size: 0.5rem;
 }
 
-.dep-name {
-  font-weight: 600;
+.stat-value {
+  font-size: 1.25rem;
+  font-weight: 700;
   color: #1f2937;
-  font-size: 0.9375rem;
+}
+.stat-value.warning {
+  color: #b45309;
+}
+.stat-card.error .stat-value {
+  color: #dc2626;
 }
 
-.dep-status {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  padding: 0.125rem 0.5rem;
-  border-radius: 9999px;
-  text-transform: uppercase;
+.stat-sub {
+  font-size: 0.625rem;
+  color: #9ca3af;
 }
 
-.dep-status.healthy {
-  background: #d1fae5;
-  color: #059669;
+.stat-sparkline {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 20px;
+  margin-top: 0.375rem;
 }
 
-.dep-status.warning {
-  background: #fef3c7;
-  color: #d97706;
+.spark-bar {
+  flex: 1;
+  background: #3b82f6;
+  border-radius: 1px;
+  opacity: 0.6;
 }
 
-.dep-status.critical {
-  background: #fee2e2;
-  color: #dc2626;
+.error-breakdown {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
 }
 
-.dep-status.slow {
-  background: #ede9fe;
-  color: #7c3aed;
+.error-item {
+  font-size: 0.625rem;
+  color: #6b7280;
 }
 
-.dep-metrics {
-  display: flex;
-  gap: 1.5rem;
-  margin-bottom: 0.75rem;
+/* Two Column Layout */
+.two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
 }
 
-.metric {
+.panel-stack {
   display: flex;
   flex-direction: column;
+  gap: 0.75rem;
 }
 
-.metric-value {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: #1f2937;
+/* Panel */
+.panel {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
 }
 
-.metric-value.slow {
-  color: #7c3aed;
+.warning-panel {
+  border-color: #fcd34d;
+  background: #fffbeb;
 }
 
-.metric-value.high {
-  color: #dc2626;
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.warning-panel .panel-header {
+  border-color: #fcd34d;
 }
 
-.metric-label {
+.panel-header h3 {
+  margin: 0;
   font-size: 0.6875rem;
+  font-weight: 600;
+  color: #374151;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.panel-header h3 i {
+  color: #f59e0b;
+}
+
+.count {
+  font-size: 0.625rem;
+  background: #e5e7eb;
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
   color: #6b7280;
 }
 
-.dep-bar {
+/* Deployment List */
+.deployment-list {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.deployment-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid #f3f4f6;
+  cursor: pointer;
+}
+
+.deployment-row:hover {
+  background: #f9fafb;
+}
+.deployment-row:last-child {
+  border-bottom: none;
+}
+.deployment-row.warning {
+  border-left: 2px solid #f59e0b;
+}
+.deployment-row.critical {
+  border-left: 2px solid #ef4444;
+}
+
+.dep-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.dep-name {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #1f2937;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dep-bar-mini {
   display: flex;
-  height: 4px;
-  border-radius: 2px;
+  height: 3px;
+  background: #e5e7eb;
+  border-radius: 1px;
+  margin-top: 0.25rem;
   overflow: hidden;
-  background: #f3f4f6;
-  margin-bottom: 0.5rem;
 }
 
-.bar-segment {
+.bar-fill {
   height: 100%;
 }
-
-.bar-segment.success {
+.bar-fill.success {
   background: #22c55e;
 }
+.bar-fill.error {
+  background: #ef4444;
+}
 
-.bar-segment.redirect {
-  background: #3b82f6;
+.dep-stats {
+  display: flex;
+  gap: 0.75rem;
 }
 
-.bar-segment.client-error {
-  background: #f59e0b;
+.dep-stat {
+  font-size: 0.6875rem;
+  color: #6b7280;
+  white-space: nowrap;
 }
 
-.bar-segment.server-error {
-  background: #ef4444;
+.dep-stat.slow {
+  color: #b45309;
+}
+.dep-stat.high {
+  color: #dc2626;
+}
+
+.deployment-row i {
+  color: #d1d5db;
+  font-size: 0.625rem;
+}
+
+/* Unknown List */
+.unknown-list {
+  max-height: 120px;
+  overflow-y: auto;
 }
 
-.dep-insight {
+.unknown-row {
   display: flex;
-  align-items: center;
-  gap: 0.375rem;
+  justify-content: space-between;
+  padding: 0.375rem 0.75rem;
+  border-bottom: 1px solid #fcd34d40;
+  cursor: pointer;
+}
+
+.unknown-row:hover {
+  background: #fefce8;
+}
+.unknown-row code {
   font-size: 0.75rem;
-  color: #6b7280;
-  padding-top: 0.5rem;
-  border-top: 1px solid #f3f4f6;
+  color: #92400e;
+}
+.unknown-row span {
+  font-size: 0.6875rem;
+  color: #b45309;
 }
 
-.dep-insight i {
-  color: #d97706;
+/* IP List */
+.ip-list {
+  padding: 0.25rem 0;
 }
 
-/* Alerts */
-.alerts-list {
+.ip-row {
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.375rem 0.75rem;
+}
+
+.ip-row code {
+  font-size: 0.75rem;
+  color: #1f2937;
 }
 
-.alert-item {
+.ip-stats {
   display: flex;
-  align-items: flex-start;
   gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  background: #fef2f2;
+  font-size: 0.6875rem;
 }
 
-.alert-item.warning {
-  background: #fffbeb;
+.muted {
+  color: #9ca3af;
 }
 
-.alert-item.warning i {
-  color: #d97706;
+/* Distribution */
+.distribution-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
 }
 
-.alert-item.critical i {
-  color: #dc2626;
+.distribution-card {
+  padding: 0.75rem;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: var(--radius-sm);
 }
 
-.alert-content {
+.distribution-card h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+}
+
+.dist-bars {
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
+  gap: 0.375rem;
 }
 
-.alert-title {
-  font-size: 0.875rem;
+.dist-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dist-label {
+  font-size: 0.6875rem;
+  color: #374151;
+  width: 50px;
+}
+
+.dist-bar {
+  flex: 1;
+  height: 6px;
+  background: #e5e7eb;
+  border-radius: var(--radius-xs);
+}
+
+.dist-fill {
+  height: 100%;
+  background: #3b82f6;
+  border-radius: var(--radius-xs);
+}
+
+.dist-value {
+  font-size: 0.6875rem;
+  color: #6b7280;
+  width: 40px;
+  text-align: right;
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.375rem;
+}
+
+.status-item {
+  text-align: center;
+  padding: 0.5rem;
+  border-radius: var(--radius-sm);
+}
+
+.status-item.success {
+  background: #d1fae5;
+}
+.status-item.redirect {
+  background: #dbeafe;
+}
+.status-item.client-error {
+  background: #fef3c7;
+}
+.status-item.server-error {
+  background: #fee2e2;
+}
+
+.status-code {
+  font-size: 0.625rem;
   font-weight: 600;
+  display: block;
+}
+.status-item.success .status-code {
+  color: #059669;
+}
+.status-item.redirect .status-code {
+  color: #1d4ed8;
+}
+.status-item.client-error .status-code {
+  color: #b45309;
+}
+.status-item.server-error .status-code {
+  color: #dc2626;
+}
+
+.status-count {
+  font-size: 0.875rem;
+  font-weight: 700;
   color: #1f2937;
 }
 
-.alert-desc {
-  font-size: 0.75rem;
+/* Filters Bar */
+.filters-bar {
+  display: flex;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.btn-text {
+  background: none;
+  border: none;
   color: #6b7280;
+  font-size: 0.75rem;
+  cursor: pointer;
+  padding: 0.25rem;
+}
+.btn-text:hover {
+  color: #374151;
 }
 
-/* Slow Endpoints */
-.endpoints-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+/* Data Table */
+.logs-table-wrap {
+  overflow-x: auto;
 }
 
-.endpoint-item {
-  display: grid;
-  grid-template-columns: 1fr auto 100px;
-  gap: 1rem;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  background: white;
-  border-radius: 8px;
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: #fff;
   border: 1px solid #e5e7eb;
+  border-radius: var(--radius-sm);
 }
 
-.endpoint-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  min-width: 0;
+.data-table.compact td,
+.data-table.compact th {
+  padding: 0.375rem 0.5rem;
 }
 
-.endpoint-path {
-  font-family: ui-monospace, monospace;
-  font-size: 0.8125rem;
-  color: #1f2937;
+.data-table th {
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: #9ca3af;
+  text-transform: uppercase;
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+  white-space: nowrap;
+}
+
+.data-table th.sortable {
+  cursor: pointer;
+}
+.data-table th.sortable:hover {
+  color: #374151;
+}
+.data-table th i {
+  font-size: 0.5rem;
+  margin-left: 0.25rem;
+}
+
+.data-table td {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  border-bottom: 1px solid #f3f4f6;
+  vertical-align: middle;
+}
+
+.data-table tbody tr:hover {
+  background: #f9fafb;
+}
+.data-table tbody tr.error-row {
+  background: #fef2f2;
+}
+
+.cell-time {
+  color: #9ca3af;
   white-space: nowrap;
+  font-size: 0.6875rem;
+}
+.cell-time.fast {
+  color: #059669;
+}
+.cell-time.moderate {
+  color: #b45309;
+}
+.cell-time.slow {
+  color: #ea580c;
+}
+.cell-time.critical {
+  color: #dc2626;
+}
+
+.cell-domain {
+  max-width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #6b7280;
 }
 
-.endpoint-requests {
+.cell-path {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, monospace;
   font-size: 0.6875rem;
-  color: #6b7280;
 }
 
-.endpoint-time {
+.cell-ip code {
+  background: #f3f4f6;
+  padding: 0.125rem 0.25rem;
+  border-radius: var(--radius-xs);
+  font-size: 0.6875rem;
+}
+
+.cell-size {
+  color: #9ca3af;
+  font-size: 0.6875rem;
+  white-space: nowrap;
+}
+
+.cell-actions {
+  text-align: right;
+}
+
+.btn-icon-sm {
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  color: #9ca3af;
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+}
+.btn-icon-sm:hover {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.method-tag {
+  display: inline-block;
+  padding: 0.125rem 0.25rem;
+  border-radius: var(--radius-xs);
+  font-size: 0.5625rem;
   font-weight: 600;
-  font-size: 0.875rem;
 }
 
-.endpoint-time.fast {
+.method-tag.get {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+.method-tag.post {
+  background: #d1fae5;
   color: #059669;
 }
-
-.endpoint-time.moderate {
-  color: #d97706;
+.method-tag.put {
+  background: #fef3c7;
+  color: #b45309;
+}
+.method-tag.delete {
+  background: #fee2e2;
+  color: #dc2626;
+}
+.method-tag.patch {
+  background: #ede9fe;
+  color: #7c3aed;
 }
 
-.endpoint-time.slow {
-  color: #ea580c;
+.status-tag {
+  display: inline-block;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-xs);
+  font-size: 0.6875rem;
+  font-weight: 600;
 }
 
-.endpoint-time.critical {
+.status-tag.s2xx {
+  background: #d1fae5;
+  color: #059669;
+}
+.status-tag.s3xx {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+.status-tag.s4xx {
+  background: #fef3c7;
+  color: #b45309;
+}
+.status-tag.s5xx {
+  background: #fee2e2;
   color: #dc2626;
 }
 
-.time-bar {
-  height: 6px;
+.tag {
+  display: inline-block;
+  padding: 0.125rem 0.375rem;
   background: #f3f4f6;
-  border-radius: 3px;
-  overflow: hidden;
+  border-radius: var(--radius-xs);
+  font-size: 0.625rem;
+  color: #6b7280;
 }
 
-.time-fill {
-  height: 100%;
-  border-radius: 3px;
+.empty-inline,
+.loading-inline {
+  padding: 1.5rem;
+  text-align: center;
+  color: #9ca3af;
+  font-size: 0.75rem;
 }
 
-.time-fill.fast {
-  background: #22c55e;
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  font-size: 0.75rem;
+  color: #6b7280;
 }
 
-.time-fill.moderate {
-  background: #f59e0b;
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  border-radius: var(--radius-sm);
+  font-size: 0.6875rem;
+  cursor: pointer;
 }
-
-.time-fill.slow {
-  background: #ea580c;
+.btn-sm:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.btn-sm:hover:not(:disabled) {
+  background: #f9fafb;
 }
 
-.time-fill.critical {
-  background: #ef4444;
+/* Alerts Panel */
+.alerts-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
 }
 
-/* Top IPs */
-.ips-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+.alert-row {
+  display: flex;
+  align-items: center;
   gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-sm);
+  background: #fef2f2;
+}
+
+.alert-row.warning {
+  background: #fffbeb;
+}
+.alert-row.critical {
+  background: #fef2f2;
+}
+.alert-row.warning i {
+  color: #d97706;
+}
+.alert-row.critical i {
+  color: #dc2626;
 }
 
-.ip-item {
+.alert-text {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.75rem;
-  background: white;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
+  gap: 0.125rem;
 }
 
-.ip-address {
-  font-family: ui-monospace, monospace;
-  font-size: 0.8125rem;
+.alert-text strong {
+  font-size: 0.75rem;
   color: #1f2937;
 }
-
-.ip-count,
-.ip-data {
+.alert-text span {
   font-size: 0.6875rem;
   color: #6b7280;
 }
 
-/* Summary Footer */
-.summary-footer {
+/* Hourly Chart */
+.hourly-chart {
   display: flex;
-  justify-content: space-around;
-  padding: 1rem;
-  background: #f9fafb;
-  border-radius: 10px;
-  border: 1px solid #e5e7eb;
+  align-items: flex-end;
+  gap: 2px;
+  height: 60px;
+  padding: 0.5rem 0.75rem;
 }
 
-.summary-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
+.hour-bar {
+  flex: 1;
+  background: #3b82f6;
+  border-radius: 1px 1px 0 0;
+  min-height: 2px;
+  opacity: 0.7;
 }
 
-.summary-value {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #1f2937;
+.hour-bar.highlight {
+  background: #1d4ed8;
+  opacity: 1;
 }
 
-.summary-value.error {
-  color: #dc2626;
+.hourly-labels {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0.75rem 0.5rem;
+  font-size: 0.5625rem;
+  color: #9ca3af;
 }
 
-.summary-label {
-  font-size: 0.6875rem;
+.empty-state-sm {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1.5rem;
   color: #6b7280;
-  text-transform: uppercase;
+  font-size: 0.75rem;
 }
 
-/* Buttons */
-.btn {
-  padding: 0.5rem 1rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  border-radius: 6px;
-  border: none;
-  cursor: pointer;
+.empty-state-sm i {
+  color: #22c55e;
 }
 
 .btn-primary {
+  padding: 0.5rem 1rem;
   background: #3b82f6;
-  color: white;
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
+  cursor: pointer;
 }
-
 .btn-primary:hover {
   background: #2563eb;
 }
 
 @media (max-width: 768px) {
-  .insights-bar {
-    flex-direction: column;
-    gap: 0.75rem;
-    align-items: flex-start;
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
-
-  .deployment-cards {
+  .two-col {
     grid-template-columns: 1fr;
   }
-
-  .endpoint-item {
+  .distribution-row {
     grid-template-columns: 1fr;
-    gap: 0.5rem;
   }
-
-  .summary-footer {
-    flex-wrap: wrap;
-    gap: 1rem;
+  .filters-bar {
+    flex-direction: column;
+    align-items: stretch;
   }
-
-  .summary-stat {
-    flex: 1 1 40%;
+  .insights-bar {
+    flex-direction: column;
+    gap: 0.5rem;
   }
 }
 </style>
diff --git a/src/components/base/BaseModal.vue b/src/components/base/BaseModal.vue
index 488d983..f6b5c2b 100644
--- a/src/components/base/BaseModal.vue
+++ b/src/components/base/BaseModal.vue
@@ -193,7 +193,7 @@ const handleOverlayClick = () => {
 .header-icon {
   width: 44px;
   height: 44px;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -265,7 +265,7 @@ const handleOverlayClick = () => {
   color: var(--color-gray-400);
   cursor: pointer;
   padding: var(--space-2);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   transition: all var(--transition-base);
   flex-shrink: 0;
   margin: calc(var(--space-1) * -1);
diff --git a/src/components/database/BackupRestorePanel.vue b/src/components/database/BackupRestorePanel.vue
index f95745d..bc6a2ab 100644
--- a/src/components/database/BackupRestorePanel.vue
+++ b/src/components/database/BackupRestorePanel.vue
@@ -157,7 +157,7 @@ defineProps<{
 .panel-section {
   background: white;
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   margin-bottom: var(--space-4);
   overflow: hidden;
 }
@@ -219,7 +219,7 @@ defineProps<{
   justify-content: center;
   padding: var(--space-8);
   border: 2px dashed var(--color-gray-300);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   color: var(--color-gray-400);
 }
 
@@ -256,7 +256,7 @@ defineProps<{
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-sm);
   cursor: pointer;
diff --git a/src/components/database/DataExportModal.vue b/src/components/database/DataExportModal.vue
index 110200c..014cd71 100644
--- a/src/components/database/DataExportModal.vue
+++ b/src/components/database/DataExportModal.vue
@@ -220,7 +220,7 @@ async function startExport() {
 
 .modal-container {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   box-shadow: var(--shadow-xl);
   width: 500px;
   max-width: 90vw;
@@ -268,7 +268,7 @@ async function startExport() {
 .export-info {
   background: var(--color-gray-50);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   padding: var(--space-3);
   margin-bottom: var(--space-4);
 }
@@ -325,7 +325,7 @@ code.info-value {
   gap: var(--space-3);
   padding: var(--space-3);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   transition: all var(--transition-base);
 }
@@ -413,7 +413,7 @@ code.info-value {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-sm);
   cursor: pointer;
diff --git a/src/components/database/DatabaseDetails.vue b/src/components/database/DatabaseDetails.vue
index 8113618..921b6e5 100644
--- a/src/components/database/DatabaseDetails.vue
+++ b/src/components/database/DatabaseDetails.vue
@@ -396,7 +396,7 @@ const filteredAllDatabases = computed(() => {
   gap: 1px;
   background: var(--color-gray-200);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -424,7 +424,7 @@ const filteredAllDatabases = computed(() => {
 .props-list {
   background: white;
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
 }
 
 .prop-row {
@@ -460,7 +460,7 @@ const filteredAllDatabases = computed(() => {
   padding: var(--space-1) var(--space-3);
   background: var(--color-primary-500);
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   color: white;
   font-size: var(--text-xs);
   font-weight: var(--font-medium);
@@ -542,7 +542,7 @@ const filteredAllDatabases = computed(() => {
   padding: var(--space-2);
   padding-left: calc(var(--space-2) + 20px);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
 }
 
@@ -556,7 +556,7 @@ const filteredAllDatabases = computed(() => {
   overflow-y: auto;
   background: white;
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
 }
 
 .users-table table {
diff --git a/src/components/database/DatabaseHeader.vue b/src/components/database/DatabaseHeader.vue
index f3a48d1..d0d5776 100644
--- a/src/components/database/DatabaseHeader.vue
+++ b/src/components/database/DatabaseHeader.vue
@@ -127,7 +127,7 @@ defineEmits<{
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-sm);
   cursor: pointer;
diff --git a/src/components/database/DatabaseSidebar.vue b/src/components/database/DatabaseSidebar.vue
index adbe7c3..08da2b6 100644
--- a/src/components/database/DatabaseSidebar.vue
+++ b/src/components/database/DatabaseSidebar.vue
@@ -199,7 +199,7 @@ function clearSearch() {
   padding-left: calc(var(--space-2) + 20px);
   padding-right: var(--space-6);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
 }
 
@@ -383,7 +383,7 @@ function clearSearch() {
   padding: var(--space-2);
   background: var(--color-gray-50);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-xs);
   font-weight: var(--font-medium);
   color: var(--color-gray-700);
diff --git a/src/components/database/QueryHistory.vue b/src/components/database/QueryHistory.vue
index 9e83ec4..6576c14 100644
--- a/src/components/database/QueryHistory.vue
+++ b/src/components/database/QueryHistory.vue
@@ -189,7 +189,7 @@ onMounted(() => {
   flex-direction: column;
   height: 100%;
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   overflow: hidden;
 }
 
@@ -242,7 +242,7 @@ onMounted(() => {
   padding: var(--space-2) var(--space-3);
   padding-left: calc(var(--space-3) + 18px);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
 }
 
@@ -267,7 +267,7 @@ onMounted(() => {
   padding: var(--space-2) var(--space-4);
   background: none;
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--color-gray-600);
@@ -320,7 +320,7 @@ onMounted(() => {
   margin-bottom: var(--space-2);
   background: var(--color-gray-50);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   transition: all var(--transition-base);
 }
@@ -455,7 +455,7 @@ onMounted(() => {
 
 .modal-container {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   box-shadow: var(--shadow-xl);
   width: 400px;
   max-width: 90vw;
@@ -529,7 +529,7 @@ onMounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-sm);
   cursor: pointer;
diff --git a/src/components/database/QueryResults.vue b/src/components/database/QueryResults.vue
index 7930e96..1ee117e 100644
--- a/src/components/database/QueryResults.vue
+++ b/src/components/database/QueryResults.vue
@@ -161,7 +161,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
 }
@@ -186,7 +186,7 @@ onUnmounted(() => {
   color: var(--color-danger-700);
   font-size: var(--text-sm);
   border: 1px solid var(--color-danger-200);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   margin: var(--space-4);
 }
 
@@ -246,7 +246,7 @@ onUnmounted(() => {
   margin-top: var(--space-1);
   background: white;
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   box-shadow: var(--shadow-lg);
   min-width: 160px;
   z-index: var(--z-dropdown);
@@ -316,7 +316,7 @@ onUnmounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-sm);
   cursor: pointer;
diff --git a/src/components/database/SqlEditor.vue b/src/components/database/SqlEditor.vue
index f438900..97e1eac 100644
--- a/src/components/database/SqlEditor.vue
+++ b/src/components/database/SqlEditor.vue
@@ -127,7 +127,7 @@ function clearEditor() {
 <style scoped>
 .sql-editor {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
 }
@@ -206,7 +206,7 @@ function clearEditor() {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-sm);
   cursor: pointer;
diff --git a/src/components/database/TableDataGrid.vue b/src/components/database/TableDataGrid.vue
index c6cf422..4687623 100644
--- a/src/components/database/TableDataGrid.vue
+++ b/src/components/database/TableDataGrid.vue
@@ -125,7 +125,7 @@ function formatCell(value: any): string {
   flex-direction: column;
   height: 100%;
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   overflow: hidden;
 }
 
@@ -268,7 +268,7 @@ function formatCell(value: any): string {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-sm);
   cursor: pointer;
diff --git a/src/components/database/TableList.vue b/src/components/database/TableList.vue
index 881abe8..8d67555 100644
--- a/src/components/database/TableList.vue
+++ b/src/components/database/TableList.vue
@@ -146,7 +146,7 @@ function formatNumber(num: number): string {
   flex-direction: column;
   height: 100%;
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   overflow: hidden;
 }
 
@@ -179,7 +179,7 @@ function formatNumber(num: number): string {
   padding: var(--space-2) var(--space-3);
   padding-left: calc(var(--space-3) + 18px);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
 }
 
diff --git a/src/components/database/TableSchemaView.vue b/src/components/database/TableSchemaView.vue
index d273eb1..b74d77b 100644
--- a/src/components/database/TableSchemaView.vue
+++ b/src/components/database/TableSchemaView.vue
@@ -237,7 +237,7 @@ onMounted(() => {
   margin: var(--space-4);
   background: white;
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   overflow: hidden;
 }
 
@@ -371,7 +371,7 @@ onMounted(() => {
 .index-item {
   padding: var(--space-3);
   background: var(--color-gray-50);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
 }
 
 .index-header {
@@ -425,7 +425,7 @@ onMounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-sm);
   cursor: pointer;
diff --git a/src/components/plugins/PluginWidget.vue b/src/components/plugins/PluginWidget.vue
index 85e66da..48da290 100644
--- a/src/components/plugins/PluginWidget.vue
+++ b/src/components/plugins/PluginWidget.vue
@@ -63,7 +63,7 @@ const formatCapability = (cap: string) => {
 <style scoped>
 .plugin-widget {
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   overflow: hidden;
   transition: all 0.3s ease;
@@ -111,7 +111,7 @@ const formatCapability = (cap: string) => {
   color: #9ca3af;
   background: #f3f4f6;
   padding: 0.125rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .widget-body {
@@ -155,7 +155,7 @@ const formatCapability = (cap: string) => {
   padding: 0.375rem 0.75rem;
   background: #f3f4f6;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   font-size: 0.75rem;
   color: #4b5563;
   cursor: pointer;
diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
index 408d8ad..f055839 100644
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@@ -415,7 +415,7 @@ onMounted(() => {
 
 .sidebar::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.2);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
 }
 
 .logo {
@@ -437,7 +437,7 @@ onMounted(() => {
   gap: 0.5rem;
   padding: 0.5rem;
   background: rgba(255, 255, 255, 0.05);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 0.8125rem;
   cursor: pointer;
   transition: background 0.2s;
@@ -579,13 +579,13 @@ onMounted(() => {
 .resource-bar {
   height: 4px;
   background: rgba(255, 255, 255, 0.1);
-  border-radius: 2px;
+  border-radius: var(--radius-xs);
   overflow: hidden;
 }
 
 .resource-fill {
   height: 100%;
-  border-radius: 2px;
+  border-radius: var(--radius-xs);
   transition: width 0.3s ease;
 }
 
@@ -628,7 +628,7 @@ onMounted(() => {
   padding: 0.5rem;
   background: rgba(239, 68, 68, 0.1);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   color: #f87171;
   cursor: pointer;
   transition: all 0.2s;
@@ -650,7 +650,7 @@ onMounted(() => {
   padding: 0.5rem;
   background: rgba(255, 255, 255, 0.05);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   color: #94a3b8;
   cursor: pointer;
   transition: all 0.2s;
@@ -728,7 +728,7 @@ onMounted(() => {
   align-items: center;
   gap: 0.375rem;
   padding: 0.375rem 0.75rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 0.75rem;
   font-weight: 500;
 }
@@ -752,7 +752,7 @@ onMounted(() => {
   height: 36px;
   background: #f1f5f9;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   color: #64748b;
   cursor: pointer;
   transition: all 0.2s;
diff --git a/src/services/api.ts b/src/services/api.ts
index a875188..436aa9d 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -678,6 +678,7 @@ export interface TrafficFilter {
 
 export interface PathStats {
   path: string;
+  deployment: string;
   request_count: number;
   avg_time_ms: number;
   error_count: number;
diff --git a/src/views/CertificatesView.vue b/src/views/CertificatesView.vue
index d308c0e..5810a62 100644
--- a/src/views/CertificatesView.vue
+++ b/src/views/CertificatesView.vue
@@ -336,7 +336,7 @@ onMounted(() => {
   align-items: center;
   gap: 0.5rem;
   padding: 0.625rem 1.25rem;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-weight: 500;
   font-size: 0.875rem;
   cursor: pointer;
@@ -395,7 +395,7 @@ onMounted(() => {
   background: #fee2e2;
   color: #dc2626;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   cursor: pointer;
   transition: all 0.2s;
 }
@@ -425,7 +425,7 @@ onMounted(() => {
 
 .modal-container {
   background: white;
-  border-radius: 16px;
+  border-radius: var(--radius-sm);
   width: 100%;
   max-width: 480px;
   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
@@ -459,7 +459,7 @@ onMounted(() => {
   color: #9ca3af;
   cursor: pointer;
   padding: 0.5rem;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   transition: all 0.2s;
 }
 
@@ -492,7 +492,7 @@ onMounted(() => {
   width: 100%;
   padding: 0.75rem 1rem;
   border: 1px solid #d1d5db;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.875rem;
   transition: all 0.2s;
 }
@@ -584,7 +584,7 @@ onMounted(() => {
 
 .cert-card {
   background: white;
-  border-radius: 16px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   overflow: hidden;
   transition: all 0.3s ease;
@@ -692,14 +692,14 @@ onMounted(() => {
   gap: 1rem;
   padding: 1.25rem;
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
 }
 
 .summary-icon {
   width: 48px;
   height: 48px;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/views/ContainersView.vue b/src/views/ContainersView.vue
index d7bb9c3..bfa4c18 100644
--- a/src/views/ContainersView.vue
+++ b/src/views/ContainersView.vue
@@ -353,7 +353,7 @@ onMounted(() => {
   gap: 0.25rem;
   background: var(--color-gray-100);
   padding: 0.25rem;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
 }
 
 .filter-btn {
@@ -531,7 +531,7 @@ onMounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;
diff --git a/src/views/DatabaseManagerView.vue b/src/views/DatabaseManagerView.vue
index 61c3ffa..815fc93 100644
--- a/src/views/DatabaseManagerView.vue
+++ b/src/views/DatabaseManagerView.vue
@@ -862,7 +862,7 @@ onMounted(() => {
   padding: var(--space-2) var(--space-4);
   background: none;
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--color-gray-600);
@@ -920,7 +920,7 @@ onMounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-sm);
   cursor: pointer;
@@ -973,7 +973,7 @@ onMounted(() => {
 
 .modal-container {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   box-shadow: var(--shadow-xl);
   width: 400px;
   max-width: 90vw;
@@ -1054,7 +1054,7 @@ onMounted(() => {
   width: 100%;
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
 }
 
diff --git a/src/views/DatabasesView.vue b/src/views/DatabasesView.vue
index b2a4c1e..96837f8 100644
--- a/src/views/DatabasesView.vue
+++ b/src/views/DatabasesView.vue
@@ -611,7 +611,7 @@ onMounted(() => {
 
 .modal-container {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   box-shadow: var(--shadow-xl);
   width: 500px;
   max-width: 90vw;
@@ -680,7 +680,7 @@ onMounted(() => {
   width: 100%;
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
 }
 
@@ -721,7 +721,7 @@ onMounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-sm);
   cursor: pointer;
diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue
index 676a7e1..5d6fb58 100644
--- a/src/views/DeploymentDetailView.vue
+++ b/src/views/DeploymentDetailView.vue
@@ -2151,7 +2151,7 @@ onUnmounted(() => {
   align-items: flex-start;
   background: white;
   padding: var(--space-4) var(--space-5);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   border: 1px solid var(--color-gray-200);
 }
 
@@ -2217,7 +2217,7 @@ onUnmounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;
@@ -2290,7 +2290,7 @@ onUnmounted(() => {
   align-items: center;
   padding: var(--space-12);
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   text-align: center;
   gap: var(--space-4);
 }
@@ -2306,7 +2306,7 @@ onUnmounted(() => {
   gap: var(--space-1);
   background: var(--color-gray-100);
   padding: var(--space-1);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
 }
 
 .tab-btn {
@@ -2335,7 +2335,7 @@ onUnmounted(() => {
 
 .tab-content {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   border: 1px solid var(--color-gray-200);
   min-height: 500px;
 }
@@ -2353,7 +2353,7 @@ onUnmounted(() => {
 
 .info-card {
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -2503,7 +2503,7 @@ onUnmounted(() => {
 
 .service-item {
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   padding: var(--space-3);
 }
 
@@ -2654,7 +2654,7 @@ onUnmounted(() => {
 .form-select {
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-md);
   background: white;
 }
@@ -2678,7 +2678,7 @@ onUnmounted(() => {
 
 .terminal-container {
   background: var(--color-gray-950);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   height: 500px;
   overflow: hidden;
 }
@@ -2733,7 +2733,7 @@ onUnmounted(() => {
 
 .env-table {
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -2810,7 +2810,7 @@ onUnmounted(() => {
   padding: var(--space-2) var(--space-4);
   border: none;
   background: transparent;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--color-gray-500);
@@ -2860,7 +2860,7 @@ onUnmounted(() => {
 }
 
 .config-editor {
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   overflow: hidden;
   border: 1px solid var(--color-gray-200);
 }
@@ -2984,7 +2984,7 @@ onUnmounted(() => {
   width: 100%;
   padding: var(--space-3);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
   transition: all var(--transition-base);
 }
@@ -3025,7 +3025,7 @@ onUnmounted(() => {
   padding: 0;
   background: var(--color-gray-100);
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   color: var(--color-gray-600);
   cursor: pointer;
   transition: all var(--transition-base);
@@ -3123,7 +3123,7 @@ onUnmounted(() => {
 
 .delete-options {
   background: var(--color-gray-50);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   padding: var(--space-4);
   margin-bottom: var(--space-4);
 }
@@ -3182,7 +3182,7 @@ onUnmounted(() => {
   padding: var(--space-3);
   background: var(--color-danger-50);
   color: var(--color-danger-700);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
 }
@@ -3251,7 +3251,7 @@ onUnmounted(() => {
   gap: var(--space-2);
   padding: var(--space-2) var(--space-3);
   background: var(--color-gray-50);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
 }
 
@@ -3296,7 +3296,7 @@ onUnmounted(() => {
   padding: var(--space-3);
   background: var(--color-warning-50);
   border: 1px solid var(--color-warning-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   color: var(--color-warning-800);
   font-size: var(--text-sm);
   margin-bottom: var(--space-3);
@@ -3314,7 +3314,7 @@ onUnmounted(() => {
   padding: var(--space-3);
   background: var(--color-info-50);
   border: 1px solid var(--color-info-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   color: var(--color-info-800);
   font-size: var(--text-sm);
 }
@@ -3411,7 +3411,7 @@ onUnmounted(() => {
   text-align: center;
   padding: var(--space-8);
   background: var(--color-gray-50);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   color: var(--color-gray-500);
 }
 
@@ -3446,7 +3446,7 @@ onUnmounted(() => {
   padding: var(--space-4);
   background: white;
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   transition: all var(--transition-base);
 }
 
@@ -3523,7 +3523,7 @@ onUnmounted(() => {
 .action-icon {
   width: 32px;
   height: 32px;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   background: var(--color-primary-100);
   color: var(--color-primary-600);
   display: flex;
@@ -3563,7 +3563,7 @@ onUnmounted(() => {
 
 .action-output {
   background: var(--color-gray-900);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   overflow: hidden;
 }
 
@@ -3640,7 +3640,7 @@ onUnmounted(() => {
   gap: 0.875rem;
   padding: 1rem 1.25rem;
   background: white;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
 }
 
@@ -3658,7 +3658,7 @@ onUnmounted(() => {
 .summary-icon {
   width: 42px;
   height: 42px;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3712,7 +3712,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: space-between;
   background: white;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   padding: 0.75rem 1rem;
 }
@@ -3744,7 +3744,7 @@ onUnmounted(() => {
   color: #9ca3af;
   padding: 0.125rem 0.5rem;
   background: #f3f4f6;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .enable-bar-status.active {
@@ -3760,7 +3760,7 @@ onUnmounted(() => {
 
 .security-section {
   background: white;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   overflow: hidden;
 }
@@ -3809,7 +3809,7 @@ onUnmounted(() => {
   align-items: center;
   gap: 0.25rem;
   padding: 0.375rem 0.75rem;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   transition: all 0.2s;
 }
 
@@ -3850,7 +3850,7 @@ onUnmounted(() => {
   padding: 0.25rem 0.5rem;
   background: #f3f4f6;
   border: 1px solid #e5e7eb;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 0.75rem;
   color: #374151;
   cursor: pointer;
@@ -3885,7 +3885,7 @@ onUnmounted(() => {
   text-align: center;
   color: #9ca3af;
   background: #f9fafb;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   border: 1px dashed #e5e7eb;
 }
 
@@ -3937,7 +3937,7 @@ onUnmounted(() => {
   align-items: center;
   padding: 0.625rem 0.875rem;
   background: #f9fafb;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   border: 1px solid #e5e7eb;
   transition: all 0.2s;
 }
@@ -3993,7 +3993,7 @@ onUnmounted(() => {
 .burst-badge {
   font-size: 0.6875rem;
   padding: 0.125rem 0.375rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .rate-badge {
@@ -4034,7 +4034,7 @@ onUnmounted(() => {
   align-items: center;
   background: white;
   border: 1px solid #d1d5db;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   overflow: hidden;
 }
 
@@ -4116,7 +4116,7 @@ onUnmounted(() => {
 
 .events-table {
   border: 1px solid #e5e7eb;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -4185,7 +4185,7 @@ onUnmounted(() => {
 .severity-badge {
   display: inline-block;
   padding: 0.125rem 0.375rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 0.625rem;
   font-weight: 600;
   text-transform: uppercase;
diff --git a/src/views/DeploymentsView.vue b/src/views/DeploymentsView.vue
index a27dae0..953e12f 100644
--- a/src/views/DeploymentsView.vue
+++ b/src/views/DeploymentsView.vue
@@ -885,7 +885,7 @@ onMounted(() => {
   gap: var(--space-2);
   padding: var(--space-3);
   background: var(--color-primary-50);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   margin-bottom: var(--space-4);
   color: var(--color-primary-600);
 }
@@ -930,7 +930,7 @@ onMounted(() => {
   gap: var(--space-2);
   padding: var(--space-2) var(--space-3);
   background: var(--color-warning-50);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   color: var(--color-warning-700);
   text-decoration: none;
   transition: background 0.15s;
@@ -1026,7 +1026,7 @@ onMounted(() => {
   color: var(--color-gray-600);
   font-size: var(--text-xs);
   font-weight: 500;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
 }
 
 .info-pill.database {
@@ -1066,7 +1066,7 @@ onMounted(() => {
   gap: var(--space-2);
   padding: var(--space-2) var(--space-3);
   background: var(--color-gray-50);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   margin-bottom: var(--space-3);
   color: var(--color-gray-600);
 }
@@ -1188,7 +1188,7 @@ onMounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;
diff --git a/src/views/DockerPortsView.vue b/src/views/DockerPortsView.vue
index 6c81ac0..eb44a71 100644
--- a/src/views/DockerPortsView.vue
+++ b/src/views/DockerPortsView.vue
@@ -275,7 +275,7 @@ onMounted(() => {
   padding: 0.25rem 0.5rem;
   background: var(--color-primary-50);
   color: var(--color-primary-700);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   text-decoration: none;
@@ -330,7 +330,7 @@ onMounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index dee6bc3..9c92e1b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -502,7 +502,7 @@ onMounted(() => {
   align-items: center;
   gap: 0.375rem;
   padding: 0.5rem 0.875rem;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
@@ -548,7 +548,7 @@ onMounted(() => {
 
 .stat-card {
   background: white;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   padding: 1rem 1.25rem;
   display: flex;
   justify-content: space-between;
@@ -584,7 +584,7 @@ onMounted(() => {
 .stat-icon {
   width: 40px;
   height: 40px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -631,7 +631,7 @@ onMounted(() => {
 
 .panel {
   background: white;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   overflow: hidden;
 }
@@ -700,7 +700,7 @@ onMounted(() => {
   width: 48px;
   height: 48px;
   background: #f3f4f6;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -785,7 +785,7 @@ onMounted(() => {
 .status-badge {
   display: inline-block;
   padding: 0.125rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 0.6875rem;
   font-weight: 500;
   text-transform: capitalize;
@@ -834,7 +834,7 @@ onMounted(() => {
   padding: 1rem;
   background: #f9fafb;
   border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   transition: all 0.2s;
   text-align: center;
@@ -853,7 +853,7 @@ onMounted(() => {
 .action-icon {
   width: 36px;
   height: 36px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -909,7 +909,7 @@ onMounted(() => {
   font-size: 0.6875rem;
   font-weight: 600;
   padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .health-indicator.healthy {
@@ -956,13 +956,13 @@ onMounted(() => {
 .resource-bar {
   height: 6px;
   background: #f3f4f6;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
 .resource-fill {
   height: 100%;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   transition: width 0.3s;
 }
 
@@ -990,7 +990,7 @@ onMounted(() => {
   gap: 0.625rem;
   padding: 0.625rem;
   background: #f9fafb;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
 }
 
 .docker-item i {
@@ -1052,7 +1052,7 @@ onMounted(() => {
   font-size: 0.6875rem;
   background: #f3f4f6;
   padding: 0.125rem 0.375rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   color: #374151;
   font-family: "SF Mono", "Fira Code", monospace;
 }
diff --git a/src/views/ImagesView.vue b/src/views/ImagesView.vue
index 8077c88..1b050ba 100644
--- a/src/views/ImagesView.vue
+++ b/src/views/ImagesView.vue
@@ -516,7 +516,7 @@ onMounted(() => {
   gap: var(--space-6);
   background: white;
   padding: var(--space-4) var(--space-6);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   border: 1px solid var(--color-gray-200);
 }
 
@@ -620,7 +620,7 @@ onMounted(() => {
 
 .image-card {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   border: 1px solid var(--color-gray-200);
   overflow: hidden;
   transition: all var(--transition-base);
@@ -652,7 +652,7 @@ onMounted(() => {
   width: 40px;
   height: 40px;
   background: var(--color-info-50);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -730,7 +730,7 @@ onMounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;
@@ -803,7 +803,7 @@ onMounted(() => {
   gap: var(--space-3);
   padding: var(--space-3);
   background: var(--color-gray-50);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   border: 1px solid var(--color-gray-200);
 }
 
@@ -904,7 +904,7 @@ select.form-input {
   width: 100%;
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--color-gray-300);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
   background: white;
   cursor: pointer;
diff --git a/src/views/InfrastructureView.vue b/src/views/InfrastructureView.vue
index 3f9928f..efa246a 100644
--- a/src/views/InfrastructureView.vue
+++ b/src/views/InfrastructureView.vue
@@ -320,7 +320,7 @@ onMounted(() => {
   align-items: center;
   background: white;
   padding: 1.25rem;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
 }
 
@@ -342,7 +342,7 @@ onMounted(() => {
   background: transparent;
   border: none;
   color: #6b7280;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   transition: all 0.2s;
 }
@@ -365,7 +365,7 @@ onMounted(() => {
   justify-content: center;
   padding: 4rem;
   background: white;
-  border-radius: 16px;
+  border-radius: var(--radius-sm);
   text-align: center;
   gap: 1rem;
 }
@@ -414,7 +414,7 @@ onMounted(() => {
 .detail-item code {
   background: #f3f4f6;
   padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-family: "SF Mono", "Fira Code", monospace;
   font-size: 0.75rem;
   color: #374151;
@@ -422,7 +422,7 @@ onMounted(() => {
 
 .health-badge {
   padding: 0.125rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 0.75rem;
   font-weight: 500;
 }
@@ -449,7 +449,7 @@ onMounted(() => {
   padding: 0.5rem 0.75rem;
   font-size: 0.8125rem;
   font-weight: 500;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   border: none;
   cursor: pointer;
   transition: all 0.2s;
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index ddcd78d..3a5d8d5 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -144,7 +144,7 @@ const handleLogin = async () => {
   width: 100%;
   max-width: 420px;
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
   padding: 2.5rem;
 }
@@ -198,7 +198,7 @@ const handleLogin = async () => {
   width: 100%;
   padding: 0.75rem 2.75rem 0.75rem 2.5rem;
   border: 1px solid var(--color-gray-300);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-md);
   transition: all var(--transition-base);
 }
@@ -249,7 +249,7 @@ const handleLogin = async () => {
   background: var(--color-primary-500);
   color: white;
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-md);
   font-weight: var(--font-semibold);
   cursor: pointer;
diff --git a/src/views/MarketplaceView.vue b/src/views/MarketplaceView.vue
index dd8bf8f..5726d44 100644
--- a/src/views/MarketplaceView.vue
+++ b/src/views/MarketplaceView.vue
@@ -288,7 +288,7 @@ const filteredApps = computed(() => {
 .search-input {
   padding: var(--space-2) var(--space-3) var(--space-2) 2.25rem;
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-md);
   width: 280px;
 }
@@ -311,7 +311,7 @@ const filteredApps = computed(() => {
   padding: 0.375rem var(--space-3);
   border: 1px solid var(--color-gray-200);
   background: white;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-base);
   color: var(--color-gray-500);
   cursor: pointer;
@@ -331,7 +331,7 @@ const filteredApps = computed(() => {
 
 .marketplace-banner {
   background: linear-gradient(135deg, var(--color-primary-500) 0%, #8b5cf6 100%);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   padding: var(--space-8);
   display: flex;
   justify-content: space-between;
@@ -368,7 +368,7 @@ const filteredApps = computed(() => {
 
 .app-card {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   border: 1px solid var(--color-gray-200);
   overflow: hidden;
   transition: all var(--transition-base);
@@ -393,7 +393,7 @@ const filteredApps = computed(() => {
 .app-icon {
   width: 52px;
   height: 52px;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -520,7 +520,7 @@ const filteredApps = computed(() => {
   align-items: center;
   gap: 0.375rem;
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-base);
   cursor: pointer;
@@ -560,7 +560,7 @@ const filteredApps = computed(() => {
   align-items: center;
   padding: var(--space-12);
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   text-align: center;
   gap: var(--space-4);
 }
diff --git a/src/views/NetworksView.vue b/src/views/NetworksView.vue
index 0e92da8..bdb6f4c 100644
--- a/src/views/NetworksView.vue
+++ b/src/views/NetworksView.vue
@@ -413,7 +413,7 @@ onMounted(() => {
   align-items: center;
   gap: 0.5rem;
   padding: 0.625rem 1.25rem;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-weight: 500;
   font-size: 0.875rem;
   cursor: pointer;
@@ -477,7 +477,7 @@ onMounted(() => {
   border: none;
   color: #9ca3af;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   transition: all 0.2s;
 }
 
@@ -497,7 +497,7 @@ onMounted(() => {
   border: none;
   color: #9ca3af;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   transition: all 0.2s;
 }
 
@@ -556,7 +556,7 @@ onMounted(() => {
 
 .network-card {
   background: white;
-  border-radius: 16px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   overflow: hidden;
   transition: all 0.3s ease;
@@ -626,7 +626,7 @@ onMounted(() => {
 
 .containers-section {
   background: #f9fafb;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   padding: 1rem;
 }
 
@@ -662,7 +662,7 @@ onMounted(() => {
   align-items: center;
   padding: 0.5rem;
   background: white;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
 }
 
@@ -708,7 +708,7 @@ onMounted(() => {
 
 .modal-container {
   background: white;
-  border-radius: 16px;
+  border-radius: var(--radius-sm);
   width: 100%;
   max-width: 500px;
   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
@@ -746,7 +746,7 @@ onMounted(() => {
   color: #9ca3af;
   cursor: pointer;
   padding: 0.5rem;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   transition: all 0.2s;
 }
 
@@ -790,7 +790,7 @@ onMounted(() => {
   width: 100%;
   padding: 0.75rem;
   border: 1px solid #d1d5db;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.875rem;
   transition: all 0.2s;
 }
diff --git a/src/views/PluginsView.vue b/src/views/PluginsView.vue
index 7b0d121..12e5d87 100644
--- a/src/views/PluginsView.vue
+++ b/src/views/PluginsView.vue
@@ -234,7 +234,7 @@ onMounted(() => {
   align-items: center;
   gap: 0.5rem;
   padding: 0.625rem 1.25rem;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-weight: 500;
   font-size: 0.875rem;
   cursor: pointer;
@@ -297,7 +297,7 @@ onMounted(() => {
   border: none;
   color: #9ca3af;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   transition: all 0.2s;
 }
 
@@ -326,7 +326,7 @@ onMounted(() => {
   width: 32px;
   height: 32px;
   background: #eff6ff;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -372,7 +372,7 @@ onMounted(() => {
 
 .plugin-card {
   background: white;
-  border-radius: 16px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   overflow: hidden;
   transition: all 0.3s ease;
@@ -394,7 +394,7 @@ onMounted(() => {
   width: 48px;
   height: 48px;
   background: #eff6ff;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -522,7 +522,7 @@ onMounted(() => {
 
 .api-method {
   padding: 0.125rem 0.375rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-weight: 600;
   font-size: 0.625rem;
 }
@@ -578,7 +578,7 @@ onMounted(() => {
 
 .modal-container {
   background: white;
-  border-radius: 16px;
+  border-radius: var(--radius-sm);
   width: 100%;
   max-width: 500px;
   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
@@ -612,7 +612,7 @@ onMounted(() => {
   color: #9ca3af;
   cursor: pointer;
   padding: 0.5rem;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
 }
 
 .close-btn:hover {
@@ -636,7 +636,7 @@ onMounted(() => {
 .hint code {
   background: #f3f4f6;
   padding: 0.125rem 0.375rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-family: monospace;
 }
 
diff --git a/src/views/SecurityView.vue b/src/views/SecurityView.vue
index 1834995..5f6b83e 100644
--- a/src/views/SecurityView.vue
+++ b/src/views/SecurityView.vue
@@ -955,7 +955,7 @@ onMounted(() => {
   align-items: center;
   background: white;
   padding: 0.5rem;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
 }
 
@@ -971,7 +971,7 @@ onMounted(() => {
   padding: 0.625rem 1rem;
   background: transparent;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.875rem;
   font-weight: 500;
   color: #6b7280;
@@ -1000,7 +1000,7 @@ onMounted(() => {
   justify-content: center;
   padding: 4rem;
   background: white;
-  border-radius: 16px;
+  border-radius: var(--radius-sm);
   text-align: center;
   gap: 1rem;
 }
@@ -1027,7 +1027,7 @@ onMounted(() => {
   gap: 1rem;
   padding: 1rem;
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
 }
 
@@ -1045,7 +1045,7 @@ onMounted(() => {
 .stat-card {
   background: white;
   padding: 1rem;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   display: flex;
   flex-direction: column;
@@ -1082,7 +1082,7 @@ onMounted(() => {
 .filter-input {
   padding: 0.5rem 0.75rem;
   border: 1px solid #d1d5db;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.875rem;
   background: white;
 }
@@ -1097,7 +1097,7 @@ onMounted(() => {
 
 .events-table-container {
   background: white;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   overflow: hidden;
 }
@@ -1136,7 +1136,7 @@ onMounted(() => {
 .ip-cell code {
   background: #f3f4f6;
   padding: 0.125rem 0.375rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 0.75rem;
 }
 
@@ -1150,7 +1150,7 @@ onMounted(() => {
 .severity-badge {
   display: inline-block;
   padding: 0.125rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 0.6875rem;
   font-weight: 600;
   text-transform: capitalize;
@@ -1233,7 +1233,7 @@ onMounted(() => {
 .blocked-list,
 .routes-list {
   background: white;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
 }
 
@@ -1270,7 +1270,7 @@ onMounted(() => {
   font-size: 0.875rem;
   background: #f3f4f6;
   padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .blocked-reason {
@@ -1290,7 +1290,7 @@ onMounted(() => {
   background: #dbeafe;
   color: #1d4ed8;
   padding: 0.125rem 0.375rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 0.625rem;
   font-weight: 600;
 }
@@ -1368,7 +1368,7 @@ onMounted(() => {
 
 .presets-section {
   background: white;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   padding: 1rem;
 }
@@ -1393,7 +1393,7 @@ onMounted(() => {
   padding: 0.5rem 1rem;
   background: #f3f4f6;
   border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.8125rem;
   color: #374151;
   cursor: pointer;
@@ -1415,7 +1415,7 @@ onMounted(() => {
   padding: 0.625rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   border: none;
   cursor: pointer;
   transition: all 0.2s;
@@ -1498,7 +1498,7 @@ onMounted(() => {
 
 .modal-dialog {
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   width: 100%;
   max-width: 480px;
   max-height: 90vh;
@@ -1551,7 +1551,7 @@ onMounted(() => {
   width: 100%;
   padding: 0.5rem 0.75rem;
   border: 1px solid #d1d5db;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.875rem;
 }
 
@@ -1576,7 +1576,7 @@ onMounted(() => {
 
 .confirm-modal {
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   padding: 1.5rem;
   max-width: 400px;
   width: 90%;
@@ -1636,7 +1636,7 @@ onMounted(() => {
 
 .settings-card {
   background: white;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   padding: 1.25rem;
 }
@@ -1680,7 +1680,7 @@ onMounted(() => {
 .requirement-value {
   background: #f3f4f6;
   padding: 0.125rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   color: #374151;
   font-family: "SF Mono", "Fira Code", monospace;
 }
@@ -1729,7 +1729,7 @@ onMounted(() => {
   gap: 0.75rem;
   margin-top: 1rem;
   padding: 0.875rem 1rem;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.8125rem;
   line-height: 1.5;
 }
@@ -1770,7 +1770,7 @@ onMounted(() => {
 
 .dashboard-stat-card {
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   padding: 1.25rem;
   display: flex;
@@ -1781,7 +1781,7 @@ onMounted(() => {
 .stat-icon {
   width: 48px;
   height: 48px;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1842,7 +1842,7 @@ onMounted(() => {
 
 .dashboard-card {
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   padding: 1.25rem;
 }
@@ -1904,13 +1904,13 @@ onMounted(() => {
 .severity-bar-track {
   height: 8px;
   background: #f3f4f6;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
 .severity-bar-fill {
   height: 100%;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   transition: width 0.3s ease;
 }
 
@@ -1965,7 +1965,7 @@ onMounted(() => {
   width: 100%;
   max-width: 40px;
   background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 100%);
-  border-radius: 4px 4px 0 0;
+  border-radius: var(--radius-sm) 4px 0 0;
   min-height: 4px;
   margin-top: auto;
   transition: height 0.3s ease;
@@ -1991,7 +1991,7 @@ onMounted(() => {
   gap: 0.75rem;
   padding: 0.75rem;
   background: #f9fafb;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
 }
 
 .top-rank {
@@ -2040,7 +2040,7 @@ onMounted(() => {
   font-size: 0.625rem;
   font-weight: 600;
   padding: 0.125rem 0.375rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .top-badge.critical {
@@ -2077,7 +2077,7 @@ onMounted(() => {
   gap: 0.75rem;
   padding: 0.75rem 1rem;
   background: #fef2f2;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   border-left: 3px solid #dc2626;
 }
 
@@ -2097,7 +2097,7 @@ onMounted(() => {
   font-size: 0.75rem;
   background: #fecaca;
   padding: 0.125rem 0.375rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   color: #991b1b;
 }
 
diff --git a/src/views/ServicesView.vue b/src/views/ServicesView.vue
index 94cd454..bea4490 100644
--- a/src/views/ServicesView.vue
+++ b/src/views/ServicesView.vue
@@ -180,7 +180,7 @@ onMounted(() => {
   color: var(--color-gray-600);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   transition: all 0.15s;
 }
@@ -347,7 +347,7 @@ onMounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 66a3238..6a43e3e 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -1192,7 +1192,7 @@ onMounted(() => {
   align-items: center;
   background: white;
   padding: 0.5rem;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
 }
 
@@ -1208,7 +1208,7 @@ onMounted(() => {
   padding: 0.625rem 1rem;
   background: transparent;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.875rem;
   font-weight: 500;
   color: #6b7280;
@@ -1235,7 +1235,7 @@ onMounted(() => {
   background: transparent;
   border: none;
   color: #6b7280;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   transition: all 0.2s;
 }
@@ -1257,7 +1257,7 @@ onMounted(() => {
   justify-content: center;
   padding: 4rem;
   background: white;
-  border-radius: 16px;
+  border-radius: var(--radius-sm);
   text-align: center;
   gap: 1rem;
 }
@@ -1286,7 +1286,7 @@ onMounted(() => {
 
 .settings-card {
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   overflow: hidden;
 }
@@ -1318,7 +1318,7 @@ onMounted(() => {
   padding: 0.25rem 0.5rem;
   background: #f3f4f6;
   color: #6b7280;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   text-transform: uppercase;
   letter-spacing: 0.025em;
 }
@@ -1368,7 +1368,7 @@ onMounted(() => {
 .info-item code {
   background: #f3f4f6;
   padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-family: "SF Mono", "Fira Code", monospace;
   font-size: 0.75rem;
   color: #374151;
@@ -1407,7 +1407,7 @@ onMounted(() => {
   padding: 0.625rem 0.75rem;
   background: #f9fafb;
   border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.8125rem;
   font-weight: 500;
   color: #374151;
@@ -1457,7 +1457,7 @@ onMounted(() => {
 .config-item code {
   background: #f3f4f6;
   padding: 0.375rem 0.5rem;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   font-family: "SF Mono", "Fira Code", monospace;
   font-size: 0.8125rem;
   color: #374151;
@@ -1472,7 +1472,7 @@ onMounted(() => {
 .origins-list code {
   background: #f3f4f6;
   padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-family: "SF Mono", "Fira Code", monospace;
   font-size: 0.75rem;
   color: #374151;
@@ -1484,7 +1484,7 @@ onMounted(() => {
   gap: 0.625rem;
   padding: 0.875rem;
   background: #eff6ff;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   margin-bottom: 1rem;
 }
 
@@ -1504,7 +1504,7 @@ onMounted(() => {
 .config-note code {
   background: #dbeafe;
   padding: 0.125rem 0.375rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-family: "SF Mono", "Fira Code", monospace;
   font-size: 0.75rem;
 }
@@ -1513,7 +1513,7 @@ onMounted(() => {
   background: #1f2937;
   color: #d1d5db;
   padding: 1rem;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-family: "SF Mono", "Fira Code", monospace;
   font-size: 0.75rem;
   line-height: 1.6;
@@ -1551,7 +1551,7 @@ onMounted(() => {
 .form-input {
   padding: 0.5rem 0.75rem;
   border: 1px solid #d1d5db;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.875rem;
   color: #374151;
   background: white;
@@ -1573,7 +1573,7 @@ onMounted(() => {
 .form-select {
   padding: 0.5rem 2rem 0.5rem 0.75rem;
   border: 1px solid #d1d5db;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.875rem;
   color: #374151;
   background: white
@@ -1669,7 +1669,7 @@ onMounted(() => {
   padding: 0.625rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   border: none;
   cursor: pointer;
   transition: all 0.2s;
@@ -1786,7 +1786,7 @@ onMounted(() => {
   padding: 1rem;
   background: #f9fafb;
   border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
 }
 
 .credential-info {
@@ -1867,7 +1867,7 @@ onMounted(() => {
 .add-credential-form {
   background: #f9fafb;
   border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   padding: 1.25rem;
   margin-bottom: 1.5rem;
 }
@@ -1897,7 +1897,7 @@ onMounted(() => {
   width: 100%;
   padding: 0.5rem 0.75rem;
   border: 1px solid #d1d5db;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   font-size: 0.875rem;
   transition:
     border-color 0.2s,
@@ -1969,7 +1969,7 @@ onMounted(() => {
 
 .confirm-modal {
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   padding: 1.5rem;
   max-width: 400px;
   width: 90%;
diff --git a/src/views/SystemPortsView.vue b/src/views/SystemPortsView.vue
index 16c6c67..249afdb 100644
--- a/src/views/SystemPortsView.vue
+++ b/src/views/SystemPortsView.vue
@@ -304,7 +304,7 @@ onMounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;
@@ -353,7 +353,7 @@ onMounted(() => {
 
 .modal-container {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   box-shadow: var(--shadow-xl);
   max-width: 500px;
   width: 90%;
@@ -410,7 +410,7 @@ onMounted(() => {
 
 .process-details {
   background: var(--color-gray-50);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   padding: var(--space-4);
   margin-bottom: var(--space-4);
 }
@@ -446,7 +446,7 @@ onMounted(() => {
   padding: var(--space-3);
   background: var(--color-warning-50);
   border: 1px solid var(--color-warning-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   color: var(--color-warning-800);
   font-size: var(--text-sm);
 }
diff --git a/src/views/TemplatesView.vue b/src/views/TemplatesView.vue
index 76d80d1..1a13b43 100644
--- a/src/views/TemplatesView.vue
+++ b/src/views/TemplatesView.vue
@@ -318,7 +318,7 @@ onUnmounted(() => {
   gap: 0.5rem;
   background: white;
   border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   padding: 0.5rem 0.75rem;
   min-width: 240px;
 }
@@ -346,7 +346,7 @@ onUnmounted(() => {
   gap: 0.25rem;
   background: white;
   border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   padding: 0.25rem;
 }
 
@@ -354,7 +354,7 @@ onUnmounted(() => {
   padding: 0.375rem 0.75rem;
   border: none;
   background: transparent;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   font-size: 0.8125rem;
   font-weight: 500;
   color: #6b7280;
@@ -378,7 +378,7 @@ onUnmounted(() => {
   align-items: center;
   gap: 0.375rem;
   padding: 0.5rem 0.875rem;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
@@ -411,7 +411,7 @@ onUnmounted(() => {
   padding: 4rem 2rem;
   text-align: center;
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
 }
 
@@ -425,7 +425,7 @@ onUnmounted(() => {
   width: 64px;
   height: 64px;
   background: #f3f4f6;
-  border-radius: 16px;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -459,7 +459,7 @@ onUnmounted(() => {
 .template-card {
   background: white;
   border: 1px solid #e5e7eb;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
   cursor: pointer;
   transition: all 0.2s;
@@ -488,7 +488,7 @@ onUnmounted(() => {
   width: 48px;
   height: 48px;
   background: #f3f4f6;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -515,7 +515,7 @@ onUnmounted(() => {
   color: #6b7280;
   background: #f3f4f6;
   padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .template-body {
@@ -556,7 +556,7 @@ onUnmounted(() => {
   padding: 0.625rem;
   background: #f3f4f6;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.8125rem;
   font-weight: 500;
   color: #374151;
@@ -607,7 +607,7 @@ onUnmounted(() => {
   height: 28px;
   border: none;
   background: transparent;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -627,7 +627,7 @@ onUnmounted(() => {
   right: 0;
   background: white;
   border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   min-width: 140px;
   z-index: 100;
@@ -670,7 +670,7 @@ onUnmounted(() => {
 
 .modal-content {
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   max-width: 700px;
   width: 100%;
   max-height: 90vh;
@@ -696,7 +696,7 @@ onUnmounted(() => {
   width: 56px;
   height: 56px;
   background: #f3f4f6;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -727,7 +727,7 @@ onUnmounted(() => {
   height: 32px;
   border: none;
   background: #f3f4f6;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -760,7 +760,7 @@ onUnmounted(() => {
   margin-bottom: 1rem;
   background: #f3f4f6;
   padding: 0.25rem;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
 }
 
 .tab-btn {
@@ -768,7 +768,7 @@ onUnmounted(() => {
   padding: 0.5rem 0.75rem;
   border: none;
   background: transparent;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   font-size: 0.8125rem;
   font-weight: 500;
   color: #6b7280;
@@ -788,7 +788,7 @@ onUnmounted(() => {
 
 .code-block {
   background: #1f2937;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   padding: 1rem;
   overflow-x: auto;
 }
diff --git a/src/views/VolumesView.vue b/src/views/VolumesView.vue
index 358854b..a67f4ee 100644
--- a/src/views/VolumesView.vue
+++ b/src/views/VolumesView.vue
@@ -465,7 +465,7 @@ onMounted(() => {
   gap: var(--space-6);
   background: white;
   padding: var(--space-4) var(--space-6);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   border: 1px solid var(--color-gray-200);
 }
 
@@ -545,7 +545,7 @@ onMounted(() => {
 
 .volume-card {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   border: 1px solid var(--color-gray-200);
   overflow: hidden;
   transition: all var(--transition-base);
@@ -581,7 +581,7 @@ onMounted(() => {
   width: 44px;
   height: 44px;
   background: var(--color-info-50);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -753,7 +753,7 @@ onMounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;