diff --git a/src/components/DeploymentTrafficStats.vue b/src/components/DeploymentTrafficStats.vue
new file mode 100644
index 0000000..0e54773
--- /dev/null
+++ b/src/components/DeploymentTrafficStats.vue
@@ -0,0 +1,411 @@
+<template>
+  <div class="deployment-traffic">
+    <div class="traffic-header">
+      <div class="traffic-title">
+        <i class="pi pi-chart-line" />
+        <h4>Traffic Stats</h4>
+      </div>
+      <div class="traffic-controls">
+        <select v-model="timeRange" class="time-select" @change="fetchData">
+          <option value="1h">Last 1 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-icon btn-sm" :disabled="loading" @click="fetchData">
+          <i class="pi pi-refresh" :class="{ 'pi-spin': loading }" />
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading && !stats" class="loading-state">
+      <i class="pi pi-spin pi-spinner" />
+      <span>Loading traffic stats...</span>
+    </div>
+
+    <div v-else-if="stats" class="traffic-content">
+      <div class="stats-row">
+        <div class="stat-item">
+          <span class="stat-value">{{ formatNumber(stats.total_requests) }}</span>
+          <span class="stat-label">Requests</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value">{{ formatTime(stats.avg_response_time_ms) }}</span>
+          <span class="stat-label">Avg Response</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value">{{ formatBytes(stats.total_bytes) }}</span>
+          <span class="stat-label">Total Bytes</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value" :class="{ error: errorRate > 5 }">{{ errorRate }}%</span>
+          <span class="stat-label">Error Rate</span>
+        </div>
+      </div>
+
+      <div class="status-distribution">
+        <div
+          v-for="(count, status) in stats.by_status_group"
+          :key="status"
+          class="status-bar"
+          :class="getStatusClass(status)"
+          :style="{ width: getStatusWidth(count) + '%' }"
+          :title="`${status}: ${count} requests`"
+        />
+      </div>
+      <div class="status-legend">
+        <span v-for="(count, status) in stats.by_status_group" :key="status" class="legend-item">
+          <span class="legend-dot" :class="getStatusClass(status)" />
+          {{ status }}: {{ formatNumber(count) }}
+        </span>
+      </div>
+
+      <div v-if="stats.top_paths?.length > 0" class="top-paths">
+        <h5>Top Paths</h5>
+        <div class="paths-list">
+          <div v-for="path in stats.top_paths.slice(0, 5)" :key="path.path" class="path-item">
+            <span class="path-name">{{ path.path }}</span>
+            <div class="path-stats">
+              <span class="path-count">{{ formatNumber(path.request_count) }}</span>
+              <span class="path-time">{{ formatTime(path.avg_time_ms) }}</span>
+              <span v-if="path.error_count > 0" class="path-errors">{{ path.error_count }} errors</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="empty-state">
+      <span>No traffic data for this deployment</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from "vue";
+import { useTrafficStore } from "@/stores/traffic";
+import type { TrafficStats } from "@/services/api";
+
+const props = defineProps<{
+  deployment: string;
+  autoFetch?: boolean;
+}>();
+
+const trafficStore = useTrafficStore();
+const stats = ref<TrafficStats | null>(null);
+const loading = ref(false);
+const timeRange = ref("24h");
+
+const errorRate = computed(() => {
+  if (!stats.value || stats.value.total_requests === 0) return 0;
+  const errors = (stats.value.by_status_group?.["4xx"] || 0) + (stats.value.by_status_group?.["5xx"] || 0);
+  return Number(((errors / stats.value.total_requests) * 100).toFixed(1));
+});
+
+const fetchData = async () => {
+  loading.value = true;
+  try {
+    const result = await trafficStore.fetchDeploymentStats(props.deployment, timeRange.value);
+    stats.value = result.stats;
+  } catch {
+    stats.value = null;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const formatNumber = (num: number): string => {
+  if (num >= 1000000) return (num / 1000000).toFixed(1) + "M";
+  if (num >= 1000) return (num / 1000).toFixed(1) + "K";
+  return num?.toString() || "0";
+};
+
+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";
+};
+
+const formatTime = (ms: number): string => {
+  if (!ms) return "0ms";
+  if (ms >= 1000) return (ms / 1000).toFixed(2) + "s";
+  return Math.round(ms) + "ms";
+};
+
+const getStatusClass = (status: string): string => {
+  if (status.startsWith("2")) return "status-2xx";
+  if (status.startsWith("3")) return "status-3xx";
+  if (status.startsWith("4")) return "status-4xx";
+  if (status.startsWith("5")) return "status-5xx";
+  return "status-other";
+};
+
+const getStatusWidth = (count: number): number => {
+  if (!stats.value || stats.value.total_requests === 0) return 0;
+  return Math.max((count / stats.value.total_requests) * 100, 2);
+};
+
+watch(
+  () => props.deployment,
+  () => {
+    if (props.deployment) {
+      fetchData();
+    }
+  },
+);
+
+onMounted(() => {
+  if (props.autoFetch && props.deployment) {
+    fetchData();
+  }
+});
+</script>
+
+<style scoped>
+.deployment-traffic {
+  background: white;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  padding: 1rem;
+}
+
+.traffic-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.traffic-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.traffic-title i {
+  color: #3b82f6;
+}
+
+.traffic-title h4 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.traffic-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.time-select {
+  padding: 0.375rem 0.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  color: #374151;
+  background: white;
+  cursor: pointer;
+}
+
+.loading-state,
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2rem;
+  color: #9ca3af;
+  font-size: 0.8125rem;
+}
+
+.traffic-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.stats-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.75rem;
+}
+
+.stat-item {
+  text-align: center;
+}
+
+.stat-value {
+  display: block;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.stat-value.error {
+  color: #dc2626;
+}
+
+.stat-label {
+  font-size: 0.6875rem;
+  color: #6b7280;
+  text-transform: uppercase;
+}
+
+.status-distribution {
+  display: flex;
+  height: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #f3f4f6;
+}
+
+.status-bar {
+  height: 100%;
+  transition: width 0.3s ease;
+}
+
+.status-bar.status-2xx {
+  background: #22c55e;
+}
+
+.status-bar.status-3xx {
+  background: #3b82f6;
+}
+
+.status-bar.status-4xx {
+  background: #f59e0b;
+}
+
+.status-bar.status-5xx {
+  background: #ef4444;
+}
+
+.status-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.6875rem;
+  color: #6b7280;
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.legend-dot.status-2xx {
+  background: #22c55e;
+}
+
+.legend-dot.status-3xx {
+  background: #3b82f6;
+}
+
+.legend-dot.status-4xx {
+  background: #f59e0b;
+}
+
+.legend-dot.status-5xx {
+  background: #ef4444;
+}
+
+.top-paths {
+  margin-top: 0.5rem;
+}
+
+.top-paths h5 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #374151;
+  text-transform: uppercase;
+}
+
+.paths-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.path-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.375rem 0.5rem;
+  background: #f9fafb;
+  border-radius: 4px;
+}
+
+.path-name {
+  font-size: 0.75rem;
+  font-family: ui-monospace, monospace;
+  color: #374151;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.path-stats {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.path-count,
+.path-time {
+  font-size: 0.6875rem;
+  color: #6b7280;
+}
+
+.path-errors {
+  font-size: 0.6875rem;
+  color: #dc2626;
+  font-weight: 500;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-sm {
+  padding: 0.25rem;
+}
+
+.btn-icon {
+  background: transparent;
+  color: #6b7280;
+}
+
+.btn-icon:hover:not(:disabled) {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+@media (max-width: 640px) {
+  .stats-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/src/components/LogViewer.vue b/src/components/LogViewer.vue
index aeefd1f..3f19ba1 100644
--- a/src/components/LogViewer.vue
+++ b/src/components/LogViewer.vue
@@ -322,7 +322,6 @@ onUnmounted(() => {
   flex-direction: column;
   height: 100%;
   background: var(--color-gray-950);
-  border-radius: var(--radius-md);
   overflow: hidden;
   position: relative;
 }
diff --git a/src/components/LogsModal.vue b/src/components/LogsModal.vue
index 955c32a..99788e9 100644
--- a/src/components/LogsModal.vue
+++ b/src/components/LogsModal.vue
@@ -1,5 +1,13 @@
 <template>
-  <BaseModal :visible="visible" :title="title" :subtitle="subtitle" icon="pi pi-file" size="lg" @close="emit('close')">
+  <BaseModal
+    :visible="visible"
+    :title="title"
+    :subtitle="subtitle"
+    icon="pi pi-file"
+    size="lg"
+    no-padding
+    @close="emit('close')"
+  >
     <div class="logs-modal-content">
       <LogViewer
         :logs="logs"
@@ -38,5 +46,6 @@ const emit = defineEmits(["close", "refresh"]);
 <style scoped>
 .logs-modal-content {
   height: 500px;
+  overflow: hidden;
 }
 </style>
diff --git a/src/components/OperationModal.vue b/src/components/OperationModal.vue
index 0609f71..0808095 100644
--- a/src/components/OperationModal.vue
+++ b/src/components/OperationModal.vue
@@ -220,6 +220,8 @@ const handleClose = () => {
 
 .output-section {
   margin-top: var(--space-4);
+  border-radius: var(--radius-md);
+  overflow: hidden;
 }
 
 .btn {
diff --git a/src/components/SecurityHealthCard.vue b/src/components/SecurityHealthCard.vue
index 32c4d1b..c56654b 100644
--- a/src/components/SecurityHealthCard.vue
+++ b/src/components/SecurityHealthCard.vue
@@ -21,16 +21,36 @@
 
     <div v-else-if="health" class="health-content">
       <div v-if="Object.keys(health.checks).length > 0" class="health-checks">
-        <h5>Configuration Checks</h5>
-        <div class="checks-grid">
-          <div
-            v-for="(passed, checkName) in health.checks"
-            :key="checkName"
-            class="check-item"
-            :class="{ passed, failed: !passed }"
-          >
-            <i :class="passed ? 'pi pi-check-circle' : 'pi pi-times-circle'" />
-            <span>{{ formatCheckName(String(checkName)) }}</span>
+        <div v-for="category in categorizedChecks" :key="category.id" class="check-category">
+          <div class="category-header">
+            <div class="category-title">
+              <i :class="category.icon" />
+              <h5>{{ category.label }}</h5>
+              <span v-if="category.id === 'connectivity'" class="critical-badge">Critical</span>
+            </div>
+            <span class="category-status" :class="getCategoryStatus(category)">
+              {{ getCategoryPassedCount(category) }}/{{ category.checks.length }}
+            </span>
+          </div>
+          <div class="checks-grid">
+            <div
+              v-for="checkName in category.checks"
+              :key="checkName"
+              class="check-item"
+              :class="{ passed: health.checks[checkName], failed: health.checks[checkName] === false }"
+              :title="getCheckDescription(checkName)"
+            >
+              <i
+                :class="
+                  health.checks[checkName]
+                    ? 'pi pi-check-circle'
+                    : health.checks[checkName] === false
+                      ? 'pi pi-times-circle'
+                      : 'pi pi-minus-circle'
+                "
+              />
+              <span>{{ formatCheckName(checkName) }}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -71,10 +91,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 import { useSecurityStore } from "@/stores/security";
 
+interface CheckCategory {
+  id: string;
+  label: string;
+  icon: string;
+  checks: string[];
+}
+
 const props = defineProps<{
   autoFetch?: boolean;
 }>();
@@ -83,6 +110,54 @@ const securityStore = useSecurityStore();
 const { health } = storeToRefs(securityStore);
 const loading = ref(false);
 
+const checkCategories: CheckCategory[] = [
+  {
+    id: "connectivity",
+    label: "Connectivity",
+    icon: "pi pi-wifi",
+    checks: ["nginx_can_reach_agent"],
+  },
+  {
+    id: "configuration",
+    label: "Configuration",
+    icon: "pi pi-cog",
+    checks: [
+      "security_lua_ip_injected",
+      "traffic_lua_ip_injected",
+      "traffic_lua_exists",
+      "nginx_conf_has_traffic_module",
+      "nginx_conf_has_global_traffic_logging",
+    ],
+  },
+  {
+    id: "deployments",
+    label: "Deployments",
+    icon: "pi pi-server",
+    checks: ["vhosts_have_security_hook"],
+  },
+];
+
+const checkDescriptions: Record<string, string> = {
+  nginx_can_reach_agent: "Verifies nginx container can reach the agent API for logging",
+  security_lua_ip_injected: "Checks if security.lua has the agent IP properly configured",
+  traffic_lua_ip_injected: "Checks if traffic.lua has the agent IP properly configured",
+  traffic_lua_exists: "Verifies traffic.lua exists in nginx container",
+  nginx_conf_has_traffic_module: "Checks if nginx.conf loads the traffic Lua module",
+  nginx_conf_has_global_traffic_logging: "Checks if global traffic logging is enabled",
+  vhosts_have_security_hook: "Verifies deployments with security enabled have the security hook",
+};
+
+const categorizedChecks = computed(() => {
+  if (!health.value?.checks) return [];
+
+  return checkCategories
+    .map((category) => ({
+      ...category,
+      checks: category.checks.filter((check) => check in health.value!.checks),
+    }))
+    .filter((category) => category.checks.length > 0);
+});
+
 const fetchHealth = async () => {
   loading.value = true;
   await securityStore.fetchHealth();
@@ -126,6 +201,23 @@ const formatCheckName = (name: string): string => {
     .join(" ");
 };
 
+const getCheckDescription = (name: string): string => {
+  return checkDescriptions[name] || formatCheckName(name);
+};
+
+const getCategoryPassedCount = (category: CheckCategory): number => {
+  if (!health.value?.checks) return 0;
+  return category.checks.filter((check) => health.value!.checks[check] === true).length;
+};
+
+const getCategoryStatus = (category: CheckCategory): string => {
+  const passed = getCategoryPassedCount(category);
+  const total = category.checks.length;
+  if (passed === total) return "passed";
+  if (passed === 0) return "failed";
+  return "partial";
+};
+
 onMounted(() => {
   if (props.autoFetch) {
     fetchHealth();
@@ -213,7 +305,75 @@ onMounted(() => {
   gap: 1.25rem;
 }
 
-.health-checks h5,
+.health-checks {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.check-category {
+  padding: 1rem;
+  background: #f9fafb;
+  border-radius: 8px;
+}
+
+.category-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.category-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.category-title i {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.category-title h5 {
+  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #374151;
+}
+
+.critical-badge {
+  padding: 0.125rem 0.375rem;
+  background: #fee2e2;
+  color: #dc2626;
+  border-radius: 4px;
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.category-status {
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+
+.category-status.passed {
+  background: #d1fae5;
+  color: #059669;
+}
+
+.category-status.partial {
+  background: #fef3c7;
+  color: #d97706;
+}
+
+.category-status.failed {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
 .health-issues h5,
 .health-recommendations h5 {
   margin: 0 0 0.75rem 0;
diff --git a/src/components/TrafficDashboard.vue b/src/components/TrafficDashboard.vue
new file mode 100644
index 0000000..2b0d4c4
--- /dev/null
+++ b/src/components/TrafficDashboard.vue
@@ -0,0 +1,912 @@
+<template>
+  <div class="traffic-dashboard">
+    <div v-if="loading && !stats" class="loading-state">
+      <i class="pi pi-spin pi-spinner" />
+      <span>Analyzing traffic patterns...</span>
+    </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>
+          </select>
+          <button class="btn-refresh" :disabled="loading" @click="fetchData">
+            <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>
+      </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>
+            </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>
+            </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 + '%' }" />
+            </div>
+            <div v-if="dep.insight" class="dep-insight">
+              <i :class="dep.insightIcon" />
+              {{ dep.insight }}
+            </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>
+            </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>
+            </div>
+            <div class="endpoint-time" :class="getTimeClass(ep.avgTime)">
+              {{ formatTime(ep.avgTime) }}
+            </div>
+            <div class="time-bar">
+              <div
+                class="time-fill"
+                :style="{ width: getTimeBarWidth(ep.avgTime) + '%' }"
+                :class="getTimeClass(ep.avgTime)"
+              />
+            </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>
+        </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>
+        </div>
+        <div class="summary-stat">
+          <span class="summary-value">{{ formatBytes(stats.total_bytes) }}</span>
+          <span class="summary-label">Data Transferred</span>
+        </div>
+        <div class="summary-stat">
+          <span class="summary-value">{{ formatTime(stats.avg_response_time_ms) }}</span>
+          <span class="summary-label">Avg Response</span>
+        </div>
+        <div class="summary-stat">
+          <span class="summary-value" :class="{ error: globalErrorRate > 5 }">{{ globalErrorRate }}%</span>
+          <span class="summary-label">Error Rate</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>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { useTrafficStore } from "@/stores/traffic";
+
+const props = defineProps<{
+  deployment?: string;
+  autoFetch?: boolean;
+}>();
+
+const trafficStore = useTrafficStore();
+const { stats, loading } = storeToRefs(trafficStore);
+
+const timeRange = ref("24h");
+
+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 PerformanceAlert {
+  id: string;
+  severity: string;
+  icon: string;
+  title: string;
+  description: string;
+}
+
+const globalErrorRate = computed(() => {
+  if (!stats.value || stats.value.total_requests === 0) return 0;
+  const errors = (stats.value.by_status_group?.["4xx"] || 0) + (stats.value.by_status_group?.["5xx"] || 0);
+  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 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 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 hasAnomalies = computed(() => performanceAlerts.value.length > 0);
+const anomalyCount = computed(() => performanceAlerts.value.length);
+
+const deploymentInsights = computed((): DeploymentInsight[] => {
+  if (!stats.value?.deployment_stats) return [];
+
+  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";
+      }
+
+      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";
+      }
+
+      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 performanceAlerts = computed((): PerformanceAlert[] => {
+  if (!stats.value) return [];
+
+  const alerts: PerformanceAlert[] = [];
+
+  if (stats.value.deployment_stats) {
+    stats.value.deployment_stats.forEach((dep) => {
+      if (dep.error_rate > 10) {
+        alerts.push({
+          id: `error-${dep.name}`,
+          severity: "critical",
+          icon: "pi pi-times-circle",
+          title: `High error rate on ${dep.name}`,
+          description: `${dep.error_rate.toFixed(1)}% of requests failing`,
+        });
+      }
+      if (dep.avg_response_time > 2000) {
+        alerts.push({
+          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`,
+        });
+      }
+    });
+  }
+
+  const serverErrors = stats.value.by_status_group?.["5xx"] || 0;
+  if (serverErrors > 100) {
+    alerts.push({
+      id: "5xx-high",
+      severity: "critical",
+      icon: "pi pi-server",
+      title: "Elevated server errors",
+      description: `${formatNumber(serverErrors)} 5xx errors in the selected period`,
+    });
+  }
+
+  return alerts.slice(0, 5);
+});
+
+const slowEndpoints = computed(() => {
+  if (!stats.value?.top_paths) return [];
+  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)
+    .map((p) => ({
+      path: p.path,
+      requests: p.request_count,
+      avgTime: p.avg_time_ms,
+    }));
+});
+
+const maxEndpointTime = computed(() => {
+  if (!slowEndpoints.value.length) return 1000;
+  return Math.max(...slowEndpoints.value.map((e) => e.avgTime), 1000);
+});
+
+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 fetchData = async () => {
+  if (props.deployment) {
+    await trafficStore.fetchDeploymentStats(props.deployment, timeRange.value);
+  } else {
+    await trafficStore.fetchStats({ since: timeRange.value });
+  }
+};
+
+const formatNumber = (num: number): string => {
+  if (!num) return "0";
+  if (num >= 1000000) return (num / 1000000).toFixed(1) + "M";
+  if (num >= 1000) return (num / 1000).toFixed(1) + "K";
+  return num.toString();
+};
+
+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";
+};
+
+const formatTime = (ms: number): string => {
+  if (!ms) return "0ms";
+  if (ms >= 1000) return (ms / 1000).toFixed(2) + "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 getTimeBarWidth = (ms: number): number => {
+  return Math.min((ms / maxEndpointTime.value) * 100, 100);
+};
+
+onMounted(() => {
+  if (props.autoFetch) {
+    fetchData();
+  }
+});
+</script>
+
+<style scoped>
+.traffic-dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.loading-state,
+.empty-state {
+  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;
+}
+
+.empty-state i {
+  font-size: 2.5rem;
+  color: #d1d5db;
+}
+
+.empty-state h4 {
+  margin: 0;
+  font-size: 1rem;
+  color: #374151;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.empty-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.traffic-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+/* Insights Bar */
+.insights-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #e5e7eb;
+}
+
+.time-range {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.time-select {
+  padding: 0.375rem 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  color: #374151;
+  background: white;
+}
+
+.btn-refresh {
+  padding: 0.375rem;
+  border: none;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.btn-refresh:hover {
+  background: #f3f4f6;
+}
+
+.insights-summary {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.insight-item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.insight-item.healthy {
+  color: #059669;
+}
+
+.insight-item.degraded {
+  color: #d97706;
+}
+
+.insight-item.warning {
+  color: #ea580c;
+}
+
+.insight-item.critical {
+  color: #dc2626;
+}
+
+/* Sections */
+h3 {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Deployment Cards */
+.deployment-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+}
+
+.deployment-card {
+  padding: 1rem;
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #e5e7eb;
+  border-left: 3px solid #22c55e;
+}
+
+.deployment-card.warning {
+  border-left-color: #f59e0b;
+}
+
+.deployment-card.critical {
+  border-left-color: #ef4444;
+}
+
+.deployment-card.slow {
+  border-left-color: #8b5cf6;
+}
+
+.dep-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.dep-name {
+  font-weight: 600;
+  color: #1f2937;
+  font-size: 0.9375rem;
+}
+
+.dep-status {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  text-transform: uppercase;
+}
+
+.dep-status.healthy {
+  background: #d1fae5;
+  color: #059669;
+}
+
+.dep-status.warning {
+  background: #fef3c7;
+  color: #d97706;
+}
+
+.dep-status.critical {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.dep-status.slow {
+  background: #ede9fe;
+  color: #7c3aed;
+}
+
+.dep-metrics {
+  display: flex;
+  gap: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.metric {
+  display: flex;
+  flex-direction: column;
+}
+
+.metric-value {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.metric-value.slow {
+  color: #7c3aed;
+}
+
+.metric-value.high {
+  color: #dc2626;
+}
+
+.metric-label {
+  font-size: 0.6875rem;
+  color: #6b7280;
+}
+
+.dep-bar {
+  display: flex;
+  height: 4px;
+  border-radius: 2px;
+  overflow: hidden;
+  background: #f3f4f6;
+  margin-bottom: 0.5rem;
+}
+
+.bar-segment {
+  height: 100%;
+}
+
+.bar-segment.success {
+  background: #22c55e;
+}
+
+.bar-segment.redirect {
+  background: #3b82f6;
+}
+
+.bar-segment.client-error {
+  background: #f59e0b;
+}
+
+.bar-segment.server-error {
+  background: #ef4444;
+}
+
+.dep-insight {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+  padding-top: 0.5rem;
+  border-top: 1px solid #f3f4f6;
+}
+
+.dep-insight i {
+  color: #d97706;
+}
+
+/* Alerts */
+.alerts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.alert-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  background: #fef2f2;
+}
+
+.alert-item.warning {
+  background: #fffbeb;
+}
+
+.alert-item.warning i {
+  color: #d97706;
+}
+
+.alert-item.critical i {
+  color: #dc2626;
+}
+
+.alert-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.alert-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.alert-desc {
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+/* Slow Endpoints */
+.endpoints-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.endpoint-item {
+  display: grid;
+  grid-template-columns: 1fr auto 100px;
+  gap: 1rem;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+}
+
+.endpoint-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.endpoint-path {
+  font-family: ui-monospace, monospace;
+  font-size: 0.8125rem;
+  color: #1f2937;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.endpoint-requests {
+  font-size: 0.6875rem;
+  color: #6b7280;
+}
+
+.endpoint-time {
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.endpoint-time.fast {
+  color: #059669;
+}
+
+.endpoint-time.moderate {
+  color: #d97706;
+}
+
+.endpoint-time.slow {
+  color: #ea580c;
+}
+
+.endpoint-time.critical {
+  color: #dc2626;
+}
+
+.time-bar {
+  height: 6px;
+  background: #f3f4f6;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.time-fill {
+  height: 100%;
+  border-radius: 3px;
+}
+
+.time-fill.fast {
+  background: #22c55e;
+}
+
+.time-fill.moderate {
+  background: #f59e0b;
+}
+
+.time-fill.slow {
+  background: #ea580c;
+}
+
+.time-fill.critical {
+  background: #ef4444;
+}
+
+/* Top IPs */
+.ips-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 0.5rem;
+}
+
+.ip-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.75rem;
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+}
+
+.ip-address {
+  font-family: ui-monospace, monospace;
+  font-size: 0.8125rem;
+  color: #1f2937;
+}
+
+.ip-count,
+.ip-data {
+  font-size: 0.6875rem;
+  color: #6b7280;
+}
+
+/* Summary Footer */
+.summary-footer {
+  display: flex;
+  justify-content: space-around;
+  padding: 1rem;
+  background: #f9fafb;
+  border-radius: 10px;
+  border: 1px solid #e5e7eb;
+}
+
+.summary-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.summary-value {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.summary-value.error {
+  color: #dc2626;
+}
+
+.summary-label {
+  font-size: 0.6875rem;
+  color: #6b7280;
+  text-transform: uppercase;
+}
+
+/* Buttons */
+.btn {
+  padding: 0.5rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #2563eb;
+}
+
+@media (max-width: 768px) {
+  .insights-bar {
+    flex-direction: column;
+    gap: 0.75rem;
+    align-items: flex-start;
+  }
+
+  .deployment-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .endpoint-item {
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+  }
+
+  .summary-footer {
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .summary-stat {
+    flex: 1 1 40%;
+  }
+}
+</style>
diff --git a/src/components/base/BaseModal.vue b/src/components/base/BaseModal.vue
index 3148f8b..488d983 100644
--- a/src/components/base/BaseModal.vue
+++ b/src/components/base/BaseModal.vue
@@ -2,7 +2,7 @@
   <Teleport to="body">
     <Transition name="modal">
       <div v-if="visible" class="modal-overlay" @click.self="handleOverlayClick">
-        <div class="modal-container" :class="[sizeClass, { 'modal-fullscreen': fullscreen }]">
+        <div class="modal-container" :class="[sizeClass, { 'modal-fullscreen': fullscreen, 'no-radius': noPadding }]">
           <div class="modal-header" :class="{ 'header-accent': accentHeader }">
             <div class="header-content">
               <slot name="header">
@@ -24,7 +24,7 @@
             </button>
           </div>
 
-          <div class="modal-body">
+          <div class="modal-body" :class="{ 'no-padding': noPadding }">
             <slot />
           </div>
 
@@ -53,6 +53,7 @@ const props = withDefaults(
     closeOnOverlay?: boolean;
     accentHeader?: boolean;
     fullscreen?: boolean;
+    noPadding?: boolean;
   }>(),
   {
     title: "",
@@ -65,6 +66,7 @@ const props = withDefaults(
     closeOnOverlay: true,
     accentHeader: false,
     fullscreen: false,
+    noPadding: false,
   },
 );
 
@@ -111,6 +113,10 @@ const handleOverlayClick = () => {
   overflow: hidden;
 }
 
+.modal-container.no-radius {
+  border-radius: 0;
+}
+
 .modal-sm {
   max-width: 400px;
 }
@@ -281,6 +287,10 @@ const handleOverlayClick = () => {
   overflow-y: auto;
 }
 
+.modal-body.no-padding {
+  padding: 0;
+}
+
 .modal-footer {
   padding: var(--space-4) var(--space-6);
   border-top: 1px solid var(--color-gray-100);
diff --git a/src/components/database/DatabaseDetails.vue b/src/components/database/DatabaseDetails.vue
index 8d54ac3..8113618 100644
--- a/src/components/database/DatabaseDetails.vue
+++ b/src/components/database/DatabaseDetails.vue
@@ -49,6 +49,60 @@
       </div>
     </template>
 
+    <template v-else-if="showAllDatabases">
+      <div class="databases-view">
+        <div class="users-header">
+          <div class="users-title">
+            <Database :size="16" />
+            <span>All Databases</span>
+            <span class="users-count">{{ allDatabases?.length ?? 0 }}</span>
+          </div>
+          <button class="close-btn" @click="$emit('close-databases-view')">
+            <X :size="14" />
+          </button>
+        </div>
+        <div class="users-search">
+          <Search :size="14" class="search-icon" />
+          <input v-model="dbSearch" type="text" class="search-input" placeholder="Search databases..." />
+        </div>
+        <div class="users-table">
+          <table>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Tables</th>
+                <th>Size</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="db in filteredAllDatabases"
+                :key="db.name"
+                class="clickable-row"
+                @click="$emit('select-database', db.name)"
+              >
+                <td>
+                  <code>{{ db.name }}</code>
+                </td>
+                <td>{{ db.tables ?? "—" }}</td>
+                <td>{{ db.size ?? "—" }}</td>
+                <td class="actions-cell">
+                  <button class="table-action" title="Open" @click.stop="$emit('open-database', db.name)">
+                    <ArrowRight :size="12" />
+                  </button>
+                  <button class="table-action danger" title="Delete" @click.stop="$emit('delete-database', db.name)">
+                    <Trash2 :size="12" />
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div v-if="filteredAllDatabases.length === 0" class="no-results">No databases match your search</div>
+        </div>
+      </div>
+    </template>
+
     <template v-else-if="selectedDatabase">
       <div class="item-header">
         <Database :size="14" class="item-icon database" />
@@ -191,12 +245,15 @@ interface UserInfo {
 }
 
 interface DatabaseInfo {
+  name?: string;
   views?: number;
   routines?: number;
   triggers?: number;
   charset?: string;
   collation?: string;
   engine?: string;
+  size?: string;
+  tables?: number;
 }
 
 interface ServerInfo {
@@ -215,7 +272,9 @@ const props = defineProps<{
   totalTables?: number;
   serverInfo?: ServerInfo;
   showAllUsers?: boolean;
+  showAllDatabases?: boolean;
   allUsers?: UserInfo[];
+  allDatabases?: DatabaseInfo[];
 }>();
 
 defineEmits<{
@@ -225,9 +284,12 @@ defineEmits<{
   "edit-user": [user: UserInfo];
   "delete-user": [user: UserInfo];
   "close-users-view": [];
+  "close-databases-view": [];
+  "select-database": [name: string];
 }>();
 
 const userSearch = ref("");
+const dbSearch = ref("");
 
 const filteredAllUsers = computed(() => {
   if (!props.allUsers) return [];
@@ -237,6 +299,14 @@ const filteredAllUsers = computed(() => {
     (u) => u.name.toLowerCase().includes(term) || (u.host && u.host.toLowerCase().includes(term)),
   );
 });
+
+const filteredAllDatabases = computed(() => {
+  if (!props.allDatabases) return [];
+  const dbs = props.allDatabases.filter((db): db is DatabaseInfo & { name: string } => !!db.name);
+  if (!dbSearch.value) return dbs;
+  const term = dbSearch.value.toLowerCase();
+  return dbs.filter((db) => db.name.toLowerCase().includes(term));
+});
 </script>
 
 <style scoped>
@@ -520,6 +590,16 @@ const filteredAllUsers = computed(() => {
   background: var(--color-gray-50);
 }
 
+.users-table tr.clickable-row {
+  cursor: pointer;
+}
+
+.databases-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .actions-cell {
   width: 60px;
   text-align: right;
diff --git a/src/components/database/DatabaseSidebar.vue b/src/components/database/DatabaseSidebar.vue
index 28e1e49..adbe7c3 100644
--- a/src/components/database/DatabaseSidebar.vue
+++ b/src/components/database/DatabaseSidebar.vue
@@ -18,7 +18,7 @@
         </button>
         <div v-if="sectionsOpen.databases" class="section-content">
           <button
-            v-for="db in filteredDatabases"
+            v-for="db in displayedDatabases"
             :key="db.name"
             class="sidebar-item"
             :class="{ selected: selectedDatabase === db.name }"
@@ -30,6 +30,13 @@
               <Trash2 :size="12" />
             </button>
           </button>
+          <button
+            v-if="filteredDatabases.length > maxDisplayedItems"
+            class="view-all-btn"
+            @click="$emit('view-all-databases')"
+          >
+            View all {{ filteredDatabases.length }} databases
+          </button>
           <div v-if="filteredDatabases.length === 0" class="empty-section">
             {{ searchTerm ? "No matches" : "No databases" }}
           </div>
@@ -59,7 +66,7 @@
               <Trash2 :size="12" />
             </button>
           </button>
-          <button v-if="filteredUsers.length > maxDisplayedUsers" class="view-all-btn" @click="$emit('view-all-users')">
+          <button v-if="filteredUsers.length > maxDisplayedItems" class="view-all-btn" @click="$emit('view-all-users')">
             View all {{ filteredUsers.length }} users
           </button>
           <div v-if="filteredUsers.length === 0" class="empty-section">
@@ -111,6 +118,7 @@ defineEmits<{
   "create-user": [];
   "delete-database": [name: string];
   "delete-user": [user: UserInfo];
+  "view-all-databases": [];
   "view-all-users": [];
 }>();
 
@@ -119,7 +127,7 @@ const sectionsOpen = ref({
   databases: true,
   users: true,
 });
-const maxDisplayedUsers = 15;
+const maxDisplayedItems = 10;
 
 const filteredDatabases = computed(() => {
   if (!searchTerm.value) return props.databases;
@@ -127,6 +135,10 @@ const filteredDatabases = computed(() => {
   return props.databases.filter((db) => db.name.toLowerCase().includes(term));
 });
 
+const displayedDatabases = computed(() => {
+  return filteredDatabases.value.slice(0, maxDisplayedItems);
+});
+
 const filteredUsers = computed(() => {
   if (!searchTerm.value) return props.users;
   const term = searchTerm.value.toLowerCase();
@@ -136,7 +148,7 @@ const filteredUsers = computed(() => {
 });
 
 const displayedUsers = computed(() => {
-  return filteredUsers.value.slice(0, maxDisplayedUsers);
+  return filteredUsers.value.slice(0, maxDisplayedItems);
 });
 
 function toggleSection(section: "databases" | "users") {
diff --git a/src/components/database/ServerOverview.vue b/src/components/database/ServerOverview.vue
index 6a0a8dc..9689ce7 100644
--- a/src/components/database/ServerOverview.vue
+++ b/src/components/database/ServerOverview.vue
@@ -2,16 +2,17 @@
   <div class="server-overview">
     <DatabaseSidebar
       :databases="databases"
-      :users="users"
+      :users="displayedUsers"
       :selected-database="selectedDatabase"
       :selected-user="selectedUser"
       @select-database="handleSelectDatabase"
       @select-user="handleSelectUser"
-      @create-database="$emit('create-database')"
-      @create-user="$emit('create-user')"
-      @delete-database="$emit('delete-database', $event)"
-      @delete-user="$emit('delete-user', $event)"
+      @create-database="emit('create-database')"
+      @create-user="emit('create-user')"
+      @delete-database="emit('delete-database', $event)"
+      @delete-user="emit('delete-user', $event)"
       @view-all-users="showAllUsers = true"
+      @view-all-databases="showAllDatabases = true"
     />
     <DatabaseDetails
       :selected-database="selectedDatabase"
@@ -20,17 +21,21 @@
       :database-size="selectedDbInfo?.size"
       :database-info="selectedDbInfo"
       :database-count="databases.length"
-      :user-count="users.length"
+      :user-count="displayedUsers.length"
       :total-tables="totalTables"
       :server-info="serverInfo"
       :show-all-users="showAllUsers"
+      :show-all-databases="showAllDatabases"
       :all-users="users"
-      @open-database="$emit('open-database', $event)"
-      @export-database="$emit('export-database', $event)"
-      @delete-database="$emit('delete-database', $event)"
-      @edit-user="$emit('edit-user', $event)"
-      @delete-user="$emit('delete-user', $event)"
+      :all-databases="databases"
+      @open-database="emit('open-database', $event)"
+      @export-database="emit('export-database', $event)"
+      @delete-database="emit('delete-database', $event)"
+      @edit-user="emit('edit-user', $event)"
+      @delete-user="emit('delete-user', $event)"
       @close-users-view="showAllUsers = false"
+      @close-databases-view="showAllDatabases = false"
+      @select-database="handleSelectDatabase"
     />
   </div>
 </template>
@@ -65,10 +70,11 @@ interface ServerInfo {
 const props = defineProps<{
   databases: DatabaseInfo[];
   users: UserInfo[];
+  databaseUsers?: UserInfo[];
   serverInfo?: ServerInfo;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
   "create-database": [];
   "create-user": [];
   "open-database": [name: string];
@@ -76,11 +82,13 @@ defineEmits<{
   "delete-database": [name: string];
   "edit-user": [user: UserInfo];
   "delete-user": [user: UserInfo];
+  "select-database": [name: string];
 }>();
 
 const selectedDatabase = ref<string>("");
 const selectedUser = ref<UserInfo | null>(null);
 const showAllUsers = ref(false);
+const showAllDatabases = ref(false);
 
 const selectedDbInfo = computed(() => {
   if (!selectedDatabase.value) return undefined;
@@ -91,10 +99,18 @@ const totalTables = computed(() => {
   return props.databases.reduce((sum, db) => sum + (db.tables || 0), 0);
 });
 
+const displayedUsers = computed(() => {
+  if (selectedDatabase.value && props.databaseUsers) {
+    return props.databaseUsers;
+  }
+  return props.users;
+});
+
 function handleSelectDatabase(name: string) {
   selectedDatabase.value = name;
   selectedUser.value = null;
   showAllUsers.value = false;
+  emit("select-database", name);
 }
 
 function handleSelectUser(user: UserInfo) {
diff --git a/src/services/api.ts b/src/services/api.ts
index 6cd9f8f..a875188 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -408,6 +408,11 @@ export const databasesApi = {
       database,
     }),
   listUsers: (config: DatabaseConnectionConfig) => apiClient.post<{ users: UserInfo[] }>("/databases/users", config),
+  listUsersByDatabase: (config: DatabaseConnectionConfig, database: string) =>
+    apiClient.post<{ users: UserInfo[] }>("/databases/users/by-database", {
+      ...config,
+      database,
+    }),
   createDatabase: (config: DatabaseConnectionConfig, dbName: string) =>
     apiClient.post("/databases/create", { ...config, db_name: dbName }),
   createUser: (config: DatabaseConnectionConfig, username: string, password: string, host?: string) =>
@@ -601,7 +606,14 @@ export const securityApi = {
   getDeploymentSecurity: (name: string) =>
     apiClient.get<{ security: DeploymentSecurityConfig }>(`/deployments/${name}/security`),
   updateDeploymentSecurity: (name: string, config: DeploymentSecurityConfig) =>
-    apiClient.put<{ security: DeploymentSecurityConfig }>(`/deployments/${name}/security`, config),
+    apiClient.put<{
+      security: DeploymentSecurityConfig;
+      hook_status?: {
+        has_hook: boolean;
+        hook_in_locations: boolean;
+        vhost_regenerated: boolean;
+      };
+    }>(`/deployments/${name}/security`, config),
   getDeploymentEvents: (name: string, limit?: number) =>
     apiClient.get<{ events: SecurityEvent[]; total: number; deployment: string }>(
       `/deployments/${name}/security/events`,
@@ -616,8 +628,18 @@ export const securityApi = {
     apiClient.put<{ realtime_capture: boolean; message: string }>("/security/realtime-capture", { enabled }),
 
   getHealth: () => apiClient.get<SecurityHealthCheck>("/security/health"),
+
+  refreshScripts: () => apiClient.post<SecurityRefreshResponse>("/security/refresh"),
 };
 
+export interface SecurityRefreshResponse {
+  success: boolean;
+  agent_ip: string;
+  vhosts_updated: string[];
+  nginx_reloaded: boolean;
+  error?: string;
+}
+
 export interface SecurityHealthCheck {
   status: "healthy" | "degraded" | "broken" | "disabled";
   error?: string;
@@ -626,3 +648,88 @@ export interface SecurityHealthCheck {
   recommendations: string[];
   details?: Record<string, any>;
 }
+
+export interface TrafficLog {
+  id: number;
+  deployment_name: string;
+  request_path: string;
+  request_method: string;
+  status_code: number;
+  source_ip: string;
+  response_time_ms: number;
+  bytes_sent: number;
+  request_length: number;
+  upstream_time_ms?: number;
+  created_at: string;
+}
+
+export interface TrafficFilter {
+  deployment?: string;
+  method?: string;
+  status_code?: number;
+  status_group?: string;
+  source_ip?: string;
+  path?: string;
+  start_time?: string;
+  end_time?: string;
+  limit?: number;
+  offset?: number;
+}
+
+export interface PathStats {
+  path: string;
+  request_count: number;
+  avg_time_ms: number;
+  error_count: number;
+}
+
+export interface IPTrafficStats {
+  ip: string;
+  request_count: number;
+  bytes_sent: number;
+  last_seen: string;
+}
+
+export interface HourlyStats {
+  hour: string;
+  request_count: number;
+}
+
+export interface DeploymentTrafficStats {
+  name: string;
+  total_requests: number;
+  avg_response_time: number;
+  status_2xx: number;
+  status_3xx: number;
+  status_4xx: number;
+  status_5xx: number;
+  error_rate: number;
+}
+
+export interface TrafficStats {
+  total_requests: number;
+  total_bytes: number;
+  avg_response_time_ms: number;
+  by_status_group: Record<string, number>;
+  by_deployment: Record<string, number>;
+  by_method: Record<string, number>;
+  top_paths: PathStats[];
+  top_ips: IPTrafficStats[];
+  requests_per_hour: HourlyStats[];
+  deployment_stats: DeploymentTrafficStats[];
+}
+
+export const trafficApi = {
+  getLogs: (params?: TrafficFilter) =>
+    apiClient.get<{ logs: TrafficLog[]; total: number; limit: number; offset: number }>("/traffic/logs", { params }),
+
+  getStats: (params?: { deployment?: string; since?: string }) =>
+    apiClient.get<{ stats: TrafficStats }>("/traffic/stats", { params }),
+
+  cleanup: (days?: number) => apiClient.post<{ deleted: number }>("/traffic/cleanup", { days }),
+
+  getDeploymentStats: (name: string, since?: string) =>
+    apiClient.get<{ deployment: string; stats: TrafficStats }>(`/deployments/${name}/traffic/stats`, {
+      params: since ? { since } : undefined,
+    }),
+};
diff --git a/src/stores/security.ts b/src/stores/security.ts
index 1fe1d63..5387af5 100644
--- a/src/stores/security.ts
+++ b/src/stores/security.ts
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { securityApi, type SecurityHealthCheck } from "@/services/api";
+import { securityApi, type SecurityHealthCheck, type SecurityRefreshResponse } from "@/services/api";
 import type { SecurityEvent, SecurityStats, BlockedIP, ProtectedRoute } from "@/types";
 
 export const useSecurityStore = defineStore("security", () => {
@@ -172,6 +172,17 @@ export const useSecurityStore = defineStore("security", () => {
     }
   }
 
+  async function refreshScripts(): Promise<SecurityRefreshResponse> {
+    try {
+      const response = await securityApi.refreshScripts();
+      await fetchHealth();
+      return response.data;
+    } catch (e: any) {
+      error.value = e.response?.data?.error || e.message;
+      throw e;
+    }
+  }
+
   return {
     stats,
     events,
@@ -196,5 +207,6 @@ export const useSecurityStore = defineStore("security", () => {
     fetchRealtimeCaptureStatus,
     setRealtimeCapture,
     fetchHealth,
+    refreshScripts,
   };
 });
diff --git a/src/stores/traffic.ts b/src/stores/traffic.ts
new file mode 100644
index 0000000..0606968
--- /dev/null
+++ b/src/stores/traffic.ts
@@ -0,0 +1,86 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { trafficApi, type TrafficLog, type TrafficStats, type TrafficFilter } from "@/services/api";
+
+export const useTrafficStore = defineStore("traffic", () => {
+  const logs = ref<TrafficLog[]>([]);
+  const logsTotal = ref(0);
+  const stats = ref<TrafficStats | null>(null);
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+
+  async function fetchLogs(params?: TrafficFilter) {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await trafficApi.getLogs(params);
+      logs.value = response.data.logs || [];
+      logsTotal.value = response.data.total || 0;
+    } catch (e: any) {
+      error.value = e.response?.data?.error || e.message;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function fetchStats(params?: { deployment?: string; since?: string }) {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await trafficApi.getStats(params);
+      stats.value = response.data.stats;
+    } catch (e: any) {
+      error.value = e.response?.data?.error || e.message;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function fetchDeploymentStats(name: string, since?: string) {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await trafficApi.getDeploymentStats(name, since);
+      stats.value = response.data.stats;
+      return response.data;
+    } catch (e: any) {
+      error.value = e.response?.data?.error || e.message;
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function cleanup(days?: number) {
+    try {
+      const response = await trafficApi.cleanup(days);
+      return response.data;
+    } catch (e: any) {
+      error.value = e.response?.data?.error || e.message;
+      throw e;
+    }
+  }
+
+  function clearLogs() {
+    logs.value = [];
+    logsTotal.value = 0;
+  }
+
+  function clearStats() {
+    stats.value = null;
+  }
+
+  return {
+    logs,
+    logsTotal,
+    stats,
+    loading,
+    error,
+    fetchLogs,
+    fetchStats,
+    fetchDeploymentStats,
+    cleanup,
+    clearLogs,
+    clearStats,
+  };
+});
diff --git a/src/utils/resilientRequest.ts b/src/utils/resilientRequest.ts
new file mode 100644
index 0000000..3ace6da
--- /dev/null
+++ b/src/utils/resilientRequest.ts
@@ -0,0 +1,84 @@
+import type { AxiosError } from "axios";
+
+export interface ResilientRequestOptions {
+  maxRetries?: number;
+  initialDelay?: number;
+  maxDelay?: number;
+  onRetry?: (attempt: number, delay: number) => void;
+  onWaiting?: (isWaiting: boolean) => void;
+}
+
+function isNetworkError(error: AxiosError): boolean {
+  return (
+    !error.response &&
+    (error.code === "ERR_NETWORK" ||
+      error.code === "ECONNREFUSED" ||
+      error.code === "ECONNABORTED" ||
+      error.message?.includes("Network Error"))
+  );
+}
+
+export async function resilientRequest<T>(
+  requestFn: () => Promise<T>,
+  options: ResilientRequestOptions = {},
+): Promise<T> {
+  const { maxRetries = 10, initialDelay = 1000, maxDelay = 5000, onRetry, onWaiting } = options;
+
+  let lastError: Error | null = null;
+
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    try {
+      if (attempt > 0) {
+        onWaiting?.(false);
+      }
+      return await requestFn();
+    } catch (error) {
+      lastError = error as Error;
+      const axiosError = error as AxiosError;
+
+      if (!isNetworkError(axiosError) || attempt >= maxRetries) {
+        onWaiting?.(false);
+        throw error;
+      }
+
+      const delay = Math.min(initialDelay * Math.pow(1.5, attempt), maxDelay);
+      onWaiting?.(true);
+      onRetry?.(attempt + 1, delay);
+
+      await new Promise((resolve) => setTimeout(resolve, delay));
+    }
+  }
+
+  throw lastError;
+}
+
+export async function executeWithServiceRestart<T>(
+  actionFn: () => Promise<T>,
+  verifyFn: () => Promise<unknown>,
+  options: ResilientRequestOptions & { actionTimeout?: number } = {},
+): Promise<{ result: T | null; serviceRestarted: boolean }> {
+  const { actionTimeout = 30000, ...retryOptions } = options;
+
+  let result: T | null = null;
+  let serviceRestarted = false;
+
+  try {
+    const timeoutPromise = new Promise<never>((_, reject) =>
+      setTimeout(() => reject(new Error("Action timeout")), actionTimeout),
+    );
+    result = await Promise.race([actionFn(), timeoutPromise]);
+  } catch (error) {
+    const axiosError = error as AxiosError;
+    if (isNetworkError(axiosError)) {
+      serviceRestarted = true;
+    } else {
+      throw error;
+    }
+  }
+
+  if (serviceRestarted) {
+    await resilientRequest(verifyFn, retryOptions);
+  }
+
+  return { result, serviceRestarted };
+}
diff --git a/src/views/DatabaseManagerView.vue b/src/views/DatabaseManagerView.vue
index 4f4536e..61c3ffa 100644
--- a/src/views/DatabaseManagerView.vue
+++ b/src/views/DatabaseManagerView.vue
@@ -31,6 +31,7 @@
       v-else-if="!selectedDatabase"
       :databases="databases"
       :users="users"
+      :database-users="databaseUsers"
       :server-info="serverInfo"
       @create-database="showCreateDb = true"
       @create-user="showCreateUser = true"
@@ -39,6 +40,7 @@
       @delete-database="confirmDeleteDatabase"
       @edit-user="handleEditUser"
       @delete-user="confirmDeleteUser"
+      @select-database="handleSelectDatabase"
     />
 
     <div v-else class="database-context">
@@ -358,6 +360,7 @@ const databases = ref<
 >([]);
 const tables = ref<TableInfo[]>([]);
 const users = ref<{ name: string; host?: string }[]>([]);
+const databaseUsers = ref<{ name: string; host?: string }[] | undefined>(undefined);
 const serverInfo = ref<{ version?: string; uptime?: string }>({});
 
 const selectedDatabase = ref("");
@@ -656,6 +659,20 @@ function handleEditUser(user: { name: string; host?: string }) {
   notifications.info("Edit User", `Editing privileges for ${user.name} - feature coming soon`);
 }
 
+async function handleSelectDatabase(dbName: string) {
+  if (!dbName) {
+    databaseUsers.value = undefined;
+    return;
+  }
+  try {
+    const config = getConnectionConfig();
+    const res = await databasesApi.listUsersByDatabase(config, dbName);
+    databaseUsers.value = res.data.users || [];
+  } catch {
+    databaseUsers.value = [];
+  }
+}
+
 async function createDatabase() {
   if (!newDbName.value) return;
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a722c50..dee6bc3 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -128,38 +128,38 @@
             <div class="actions-row">
               <button class="quick-action" @click="$router.push('/security')">
                 <div class="action-icon orange">
-                  <i class="pi pi-shield" />
+                  <i class="pi pi-chart-line" />
                 </div>
                 <div class="action-label">
-                  <span class="action-name">Security</span>
-                  <span class="action-hint">Events & IP blocking</span>
+                  <span class="action-name">Monitoring</span>
+                  <span class="action-hint">Traffic & security</span>
                 </div>
               </button>
-              <button class="quick-action" :disabled="stats.stopped === 0" @click="startAllDeployments">
-                <div class="action-icon green">
-                  <i class="pi pi-play" />
+              <button class="quick-action" @click="$router.push('/templates')">
+                <div class="action-icon purple">
+                  <i class="pi pi-th-large" />
                 </div>
                 <div class="action-label">
-                  <span class="action-name">Start All</span>
-                  <span class="action-hint">{{ stats.stopped }} stopped</span>
+                  <span class="action-name">Templates</span>
+                  <span class="action-hint">Browse apps</span>
                 </div>
               </button>
-              <button class="quick-action" :disabled="stats.running === 0" @click="stopAllDeployments">
-                <div class="action-icon red">
-                  <i class="pi pi-stop" />
+              <button class="quick-action" @click="$router.push('/certificates')">
+                <div class="action-icon green">
+                  <i class="pi pi-lock" />
                 </div>
                 <div class="action-label">
-                  <span class="action-name">Stop All</span>
-                  <span class="action-hint">{{ stats.running }} running</span>
+                  <span class="action-name">SSL Certs</span>
+                  <span class="action-hint">Manage certificates</span>
                 </div>
               </button>
-              <button class="quick-action" @click="$router.push('/templates')">
-                <div class="action-icon purple">
-                  <i class="pi pi-th-large" />
+              <button class="quick-action" @click="$router.push('/infrastructure')">
+                <div class="action-icon blue">
+                  <i class="pi pi-server" />
                 </div>
                 <div class="action-label">
-                  <span class="action-name">Templates</span>
-                  <span class="action-hint">Browse apps</span>
+                  <span class="action-name">Infrastructure</span>
+                  <span class="action-hint">Nginx, databases</span>
                 </div>
               </button>
             </div>
@@ -456,36 +456,6 @@ const refreshData = () => {
   });
 };
 
-const startAllDeployments = async () => {
-  notifications.info("Starting", "Starting all stopped deployments...");
-  for (const deployment of deployments.value) {
-    if (deployment.status === "stopped") {
-      try {
-        await deploymentsApi.start(deployment.name);
-      } catch (e) {
-        console.error(`Failed to start ${deployment.name}`);
-      }
-    }
-  }
-  await fetchData();
-  notifications.success("Completed", "All deployments started");
-};
-
-const stopAllDeployments = async () => {
-  notifications.info("Stopping", "Stopping all running deployments...");
-  for (const deployment of deployments.value) {
-    if (deployment.status === "running") {
-      try {
-        await deploymentsApi.stop(deployment.name);
-      } catch (e) {
-        console.error(`Failed to stop ${deployment.name}`);
-      }
-    }
-  }
-  await fetchData();
-  notifications.success("Completed", "All deployments stopped");
-};
-
 const onDeploymentCreated = () => {
   showNewDeployment.value = false;
   fetchData();
diff --git a/src/views/InfrastructureView.vue b/src/views/InfrastructureView.vue
index 900ee06..3f9928f 100644
--- a/src/views/InfrastructureView.vue
+++ b/src/views/InfrastructureView.vue
@@ -97,24 +97,15 @@
       </DeploymentCard>
     </div>
 
-    <!-- Logs Modal -->
-    <div v-if="logsModal.visible" class="modal-overlay" @click.self="closeLogs">
-      <div class="modal-content logs-modal">
-        <div class="modal-header">
-          <h3>Logs: {{ logsModal.serviceName }}</h3>
-          <button class="btn btn-icon" @click="closeLogs">
-            <i class="pi pi-times" />
-          </button>
-        </div>
-        <div class="modal-body">
-          <div v-if="logsModal.loading" class="logs-loading">
-            <i class="pi pi-spin pi-spinner" />
-            <span>Loading logs...</span>
-          </div>
-          <pre v-else class="logs-content">{{ logsModal.content }}</pre>
-        </div>
-      </div>
-    </div>
+    <LogsModal
+      :visible="logsModal.visible"
+      :title="logsModal.serviceName"
+      subtitle="Service logs"
+      :logs="logsModal.content"
+      :loading="logsModal.loading"
+      @close="closeLogs"
+      @refresh="refreshLogs"
+    />
   </div>
 </template>
 
@@ -123,7 +114,9 @@ import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { infrastructureApi, type InfraService } from "@/services/api";
 import { useNotificationsStore } from "@/stores/notifications";
+import { executeWithServiceRestart } from "@/utils/resilientRequest";
 import DeploymentCard from "@/components/DeploymentCard.vue";
+import LogsModal from "@/components/LogsModal.vue";
 
 const router = useRouter();
 const notifications = useNotificationsStore();
@@ -150,6 +143,10 @@ const fetchServices = async () => {
   }
 };
 
+const isCriticalService = (name: string) => {
+  return name.toLowerCase().includes("nginx") || name.toLowerCase().includes("proxy");
+};
+
 const startService = async (name: string) => {
   actionLoading.value = name;
   try {
@@ -166,8 +163,27 @@ const startService = async (name: string) => {
 const stopService = async (name: string) => {
   actionLoading.value = name;
   try {
-    await infrastructureApi.stop(name);
-    notifications.success("Service Stopped", `${name} has been stopped`);
+    if (isCriticalService(name)) {
+      const { serviceRestarted } = await executeWithServiceRestart(
+        () => infrastructureApi.stop(name),
+        () => infrastructureApi.list(),
+        {
+          onWaiting: (waiting) => {
+            if (waiting) {
+              notifications.info("Waiting", `Waiting for API to become available...`);
+            }
+          },
+        },
+      );
+      if (serviceRestarted) {
+        notifications.success("Service Stopped", `${name} has been stopped (reconnected to API)`);
+      } else {
+        notifications.success("Service Stopped", `${name} has been stopped`);
+      }
+    } else {
+      await infrastructureApi.stop(name);
+      notifications.success("Service Stopped", `${name} has been stopped`);
+    }
     await fetchServices();
   } catch (e: any) {
     notifications.error("Error", `Failed to stop ${name}`);
@@ -179,8 +195,27 @@ const stopService = async (name: string) => {
 const restartService = async (name: string) => {
   actionLoading.value = name;
   try {
-    await infrastructureApi.restart(name);
-    notifications.success("Service Restarted", `${name} has been restarted`);
+    if (isCriticalService(name)) {
+      const { serviceRestarted } = await executeWithServiceRestart(
+        () => infrastructureApi.restart(name),
+        () => infrastructureApi.list(),
+        {
+          onWaiting: (waiting) => {
+            if (waiting) {
+              notifications.info("Reconnecting", `Service restarting, waiting for API...`);
+            }
+          },
+        },
+      );
+      if (serviceRestarted) {
+        notifications.success("Service Restarted", `${name} restarted successfully`);
+      } else {
+        notifications.success("Service Restarted", `${name} has been restarted`);
+      }
+    } else {
+      await infrastructureApi.restart(name);
+      notifications.success("Service Restarted", `${name} has been restarted`);
+    }
     await fetchServices();
   } catch (e: any) {
     notifications.error("Error", `Failed to restart ${name}`);
@@ -196,6 +231,11 @@ const showLogs = async (name: string) => {
     content: "",
     loading: true,
   };
+  await fetchLogs(name);
+};
+
+const fetchLogs = async (name: string) => {
+  logsModal.value.loading = true;
   try {
     const response = await infrastructureApi.logs(name, 200);
     logsModal.value.content = response.data.logs || "No logs available";
@@ -206,6 +246,12 @@ const showLogs = async (name: string) => {
   }
 };
 
+const refreshLogs = () => {
+  if (logsModal.value.serviceName) {
+    fetchLogs(logsModal.value.serviceName);
+  }
+};
+
 const closeLogs = () => {
   logsModal.value.visible = false;
 };
@@ -455,78 +501,6 @@ onMounted(() => {
   cursor: not-allowed;
 }
 
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal-content {
-  background: white;
-  border-radius: 16px;
-  max-width: 800px;
-  width: 90%;
-  max-height: 80vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.logs-modal {
-  max-width: 900px;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.modal-header h3 {
-  font-size: 1rem;
-  font-weight: 600;
-  color: #1f2937;
-  margin: 0;
-}
-
-.modal-body {
-  flex: 1;
-  overflow: auto;
-  padding: 1.25rem;
-}
-
-.logs-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  padding: 2rem;
-  color: #6b7280;
-}
-
-.logs-content {
-  background: #1f2937;
-  color: #d1d5db;
-  padding: 1rem;
-  border-radius: 8px;
-  font-family: "SF Mono", "Fira Code", monospace;
-  font-size: 0.75rem;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  margin: 0;
-  max-height: 60vh;
-  overflow: auto;
-}
-
 @media (max-width: 768px) {
   .services-grid {
     grid-template-columns: 1fr;
diff --git a/src/views/SecurityView.vue b/src/views/SecurityView.vue
index 4ff1d32..1834995 100644
--- a/src/views/SecurityView.vue
+++ b/src/views/SecurityView.vue
@@ -214,6 +214,11 @@
         </div>
       </div>
 
+      <!-- Traffic Tab -->
+      <div v-show="activeTab === 'traffic'" class="tab-content">
+        <TrafficDashboard :auto-fetch="true" />
+      </div>
+
       <!-- Events Tab -->
       <div v-show="activeTab === 'events'" class="tab-content">
         <div class="stats-row">
@@ -425,6 +430,13 @@
 
       <!-- Health Tab -->
       <div v-show="activeTab === 'health'" class="tab-content">
+        <div class="health-actions">
+          <button class="btn btn-secondary" :disabled="refreshingScripts" @click="refreshSecurityScripts">
+            <i class="pi pi-sync" :class="{ 'pi-spin': refreshingScripts }" />
+            {{ refreshingScripts ? "Regenerating..." : "Regenerate Security Scripts" }}
+          </button>
+          <span class="health-actions-hint"> Regenerates Lua scripts with current agent IP and reloads nginx </span>
+        </div>
         <SecurityHealthCard :auto-fetch="true" />
       </div>
 
@@ -610,6 +622,7 @@ import { useSecurityStore } from "@/stores/security";
 import { useNotificationsStore } from "@/stores/notifications";
 import type { ProtectedRoute } from "@/types";
 import SecurityHealthCard from "@/components/SecurityHealthCard.vue";
+import TrafficDashboard from "@/components/TrafficDashboard.vue";
 
 const securityStore = useSecurityStore();
 const notifications = useNotificationsStore();
@@ -618,10 +631,11 @@ const loading = ref(false);
 const activeTab = ref("stats");
 
 const tabs = [
-  { id: "stats", label: "Dashboard", icon: "pi pi-chart-bar" },
-  { id: "events", label: "Events", icon: "pi pi-list" },
+  { id: "stats", label: "Overview", icon: "pi pi-chart-bar" },
+  { id: "traffic", label: "Traffic & Performance", icon: "pi pi-chart-line" },
+  { id: "events", label: "Security Events", icon: "pi pi-list" },
   { id: "blocked", label: "Blocked IPs", icon: "pi pi-ban" },
-  { id: "routes", label: "Protected Routes", icon: "pi pi-lock" },
+  { id: "routes", label: "Rate Limits", icon: "pi pi-lock" },
   { id: "health", label: "Health", icon: "pi pi-heart" },
   { id: "settings", label: "Settings", icon: "pi pi-cog" },
 ];
@@ -629,6 +643,7 @@ const tabs = [
 const { stats, events, eventsTotal, blockedIPs, protectedRoutes, securityEnabled, realtimeCapture } =
   storeToRefs(securityStore);
 const togglingRealtimeCapture = ref(false);
+const refreshingScripts = ref(false);
 
 const filters = reactive({
   severity: "",
@@ -719,6 +734,23 @@ const toggleRealtimeCapture = async () => {
   }
 };
 
+const refreshSecurityScripts = async () => {
+  refreshingScripts.value = true;
+  try {
+    const result = await securityStore.refreshScripts();
+    const vhostCount = result.vhosts_updated?.length || 0;
+    notifications.success(
+      "Security Scripts Regenerated",
+      `Agent IP: ${result.agent_ip}, ${vhostCount} vhost(s) updated`,
+    );
+  } catch (e: any) {
+    const errorMsg = e.response?.data?.error || "Failed to refresh security scripts";
+    notifications.error("Failed", errorMsg);
+  } finally {
+    refreshingScripts.value = false;
+  }
+};
+
 const clearFilters = () => {
   filters.severity = "";
   filters.event_type = "";
@@ -989,6 +1021,21 @@ onMounted(() => {
   gap: 1.25rem;
 }
 
+.health-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: white;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+}
+
+.health-actions-hint {
+  font-size: 0.8125rem;
+  color: #6b7280;
+}
+
 .stats-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);