diff --git a/package.json b/package.json
index bbd0ea1a..8c6fb017 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "js-yaml": "^4.1.1",
     "lucide-react": "^0.575.0",
     "nanoid": "^5.1.6",
-    "next": "16.1.6",
+    "next": "16.1.7",
     "next-auth": "5.0.0-beta.30",
     "next-themes": "^0.4.6",
     "node-cron": "^4.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index da29b5f4..721a786f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -79,11 +79,11 @@ importers:
         specifier: ^5.1.6
         version: 5.1.6
       next:
-        specifier: 16.1.6
-        version: 16.1.6(@babel/core@7.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 16.1.7
+        version: 16.1.7(@babel/core@7.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       next-auth:
         specifier: 5.0.0-beta.30
-        version: 5.0.0-beta.30(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(nodemailer@8.0.1)(react@19.2.3)
+        version: 5.0.0-beta.30(next@16.1.7(@babel/core@7.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(nodemailer@8.0.1)(react@19.2.3)
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -422,12 +422,18 @@ packages:
   '@emnapi/core@1.8.1':
     resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
 
-  '@emnapi/runtime@1.8.1':
-    resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
+  '@emnapi/core@1.9.1':
+    resolution: {integrity: sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==}
+
+  '@emnapi/runtime@1.9.1':
+    resolution: {integrity: sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==}
 
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
+  '@emnapi/wasi-threads@1.2.0':
+    resolution: {integrity: sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==}
+
   '@eslint-community/eslint-utils@4.9.1':
     resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -508,8 +514,8 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@img/colour@1.0.0':
-    resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
+  '@img/colour@1.1.0':
+    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
     engines: {node: '>=18'}
 
   '@img/sharp-darwin-arm64@0.34.5':
@@ -739,56 +745,56 @@ packages:
   '@next/bundle-analyzer@16.2.1':
     resolution: {integrity: sha512-fbj2WE6dnCyG8CvQnrBfpHyxdOIyZ4aEHJY0bSqAmamRiIXDqunFQPDvuSOPo24mJE9zQHw7TY6d+sGrXO98TQ==}
 
-  '@next/env@16.1.6':
-    resolution: {integrity: sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==}
+  '@next/env@16.1.7':
+    resolution: {integrity: sha512-rJJbIdJB/RQr2F1nylZr/PJzamvNNhfr3brdKP6s/GW850jbtR70QlSfFselvIBbcPUOlQwBakexjFzqLzF6pg==}
 
   '@next/eslint-plugin-next@16.1.6':
     resolution: {integrity: sha512-/Qq3PTagA6+nYVfryAtQ7/9FEr/6YVyvOtl6rZnGsbReGLf0jZU6gkpr1FuChAQpvV46a78p4cmHOVP8mbfSMQ==}
 
-  '@next/swc-darwin-arm64@16.1.6':
-    resolution: {integrity: sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==}
+  '@next/swc-darwin-arm64@16.1.7':
+    resolution: {integrity: sha512-b2wWIE8sABdyafc4IM8r5Y/dS6kD80JRtOGrUiKTsACFQfWWgUQ2NwoUX1yjFMXVsAwcQeNpnucF2ZrujsBBPg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@16.1.6':
-    resolution: {integrity: sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==}
+  '@next/swc-darwin-x64@16.1.7':
+    resolution: {integrity: sha512-zcnVaaZulS1WL0Ss38R5Q6D2gz7MtBu8GZLPfK+73D/hp4GFMrC2sudLky1QibfV7h6RJBJs/gOFvYP0X7UVlQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@16.1.6':
-    resolution: {integrity: sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==}
+  '@next/swc-linux-arm64-gnu@16.1.7':
+    resolution: {integrity: sha512-2ant89Lux/Q3VyC8vNVg7uBaFVP9SwoK2jJOOR0L8TQnX8CAYnh4uctAScy2Hwj2dgjVHqHLORQZJ2wH6VxhSQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@16.1.6':
-    resolution: {integrity: sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==}
+  '@next/swc-linux-arm64-musl@16.1.7':
+    resolution: {integrity: sha512-uufcze7LYv0FQg9GnNeZ3/whYfo+1Q3HnQpm16o6Uyi0OVzLlk2ZWoY7j07KADZFY8qwDbsmFnMQP3p3+Ftprw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@16.1.6':
-    resolution: {integrity: sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==}
+  '@next/swc-linux-x64-gnu@16.1.7':
+    resolution: {integrity: sha512-KWVf2gxYvHtvuT+c4MBOGxuse5TD7DsMFYSxVxRBnOzok/xryNeQSjXgxSv9QpIVlaGzEn/pIuI6Koosx8CGWA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@16.1.6':
-    resolution: {integrity: sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==}
+  '@next/swc-linux-x64-musl@16.1.7':
+    resolution: {integrity: sha512-HguhaGwsGr1YAGs68uRKc4aGWxLET+NevJskOcCAwXbwj0fYX0RgZW2gsOCzr9S11CSQPIkxmoSbuVaBp4Z3dA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@16.1.6':
-    resolution: {integrity: sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==}
+  '@next/swc-win32-arm64-msvc@16.1.7':
+    resolution: {integrity: sha512-S0n3KrDJokKTeFyM/vGGGR8+pCmXYrjNTk2ZozOL1C/JFdfUIL9O1ATaJOl5r2POe56iRChbsszrjMAdWSv7kQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@16.1.6':
-    resolution: {integrity: sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==}
+  '@next/swc-win32-x64-msvc@16.1.7':
+    resolution: {integrity: sha512-mwgtg8CNZGYm06LeEd+bNnOUfwOyNem/rOiP14Lsz+AnUY92Zq/LXwtebtUiaeVkhbroRCQ0c8GlR4UT1U+0yg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -2242,8 +2248,8 @@ packages:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
 
-  baseline-browser-mapping@2.10.0:
-    resolution: {integrity: sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==}
+  baseline-browser-mapping@2.10.10:
+    resolution: {integrity: sha512-sUoJ3IMxx4AyRqO4MLeHlnGDkyXRoUG0/AI9fjK+vS72ekpV0yWVY7O0BVjmBcRtkNcsAO2QDZ4tdKKGoI6YaQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
@@ -2307,8 +2313,8 @@ packages:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
 
-  caniuse-lite@1.0.30001774:
-    resolution: {integrity: sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==}
+  caniuse-lite@1.0.30001781:
+    resolution: {integrity: sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw==}
 
   chai@6.2.2:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
@@ -2991,8 +2997,8 @@ packages:
     resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
     engines: {node: '>=16'}
 
-  flatted@3.4.1:
-    resolution: {integrity: sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==}
+  flatted@3.4.2:
+    resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
 
   for-each@0.3.5:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
@@ -3824,8 +3830,8 @@ packages:
       react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
-  next@16.1.6:
-    resolution: {integrity: sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==}
+  next@16.1.7:
+    resolution: {integrity: sha512-WM0L7WrSvKwoLegLYr6V+mz+RIofqQgVAfHhMp9a88ms0cFX8iX9ew+snpWlSBwpkURJOUdvCEt3uLl3NNzvWg==}
     engines: {node: '>=20.9.0'}
     hasBin: true
     peerDependencies:
@@ -5391,7 +5397,13 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.8.1':
+  '@emnapi/core@1.9.1':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.0
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.9.1':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -5401,6 +5413,11 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/wasi-threads@1.2.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@eslint-community/eslint-utils@4.9.1(eslint@9.39.3(jiti@2.6.1))':
     dependencies:
       eslint: 9.39.3(jiti@2.6.1)
@@ -5484,7 +5501,7 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@img/colour@1.0.0':
+  '@img/colour@1.1.0':
     optional: true
 
   '@img/sharp-darwin-arm64@0.34.5':
@@ -5569,7 +5586,7 @@ snapshots:
 
   '@img/sharp-wasm32@0.34.5':
     dependencies:
-      '@emnapi/runtime': 1.8.1
+      '@emnapi/runtime': 1.9.1
     optional: true
 
   '@img/sharp-win32-arm64@0.34.5':
@@ -5686,14 +5703,14 @@ snapshots:
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
       '@emnapi/core': 1.8.1
-      '@emnapi/runtime': 1.8.1
+      '@emnapi/runtime': 1.9.1
       '@tybys/wasm-util': 0.10.1
     optional: true
 
   '@napi-rs/wasm-runtime@1.1.1':
     dependencies:
-      '@emnapi/core': 1.8.1
-      '@emnapi/runtime': 1.8.1
+      '@emnapi/core': 1.9.1
+      '@emnapi/runtime': 1.9.1
       '@tybys/wasm-util': 0.10.1
     optional: true
 
@@ -5704,34 +5721,34 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@next/env@16.1.6': {}
+  '@next/env@16.1.7': {}
 
   '@next/eslint-plugin-next@16.1.6':
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/swc-darwin-arm64@16.1.6':
+  '@next/swc-darwin-arm64@16.1.7':
     optional: true
 
-  '@next/swc-darwin-x64@16.1.6':
+  '@next/swc-darwin-x64@16.1.7':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@16.1.6':
+  '@next/swc-linux-arm64-gnu@16.1.7':
     optional: true
 
-  '@next/swc-linux-arm64-musl@16.1.6':
+  '@next/swc-linux-arm64-musl@16.1.7':
     optional: true
 
-  '@next/swc-linux-x64-gnu@16.1.6':
+  '@next/swc-linux-x64-gnu@16.1.7':
     optional: true
 
-  '@next/swc-linux-x64-musl@16.1.6':
+  '@next/swc-linux-x64-musl@16.1.7':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@16.1.6':
+  '@next/swc-win32-arm64-msvc@16.1.7':
     optional: true
 
-  '@next/swc-win32-x64-msvc@16.1.6':
+  '@next/swc-win32-x64-msvc@16.1.7':
     optional: true
 
   '@noble/ciphers@1.3.0': {}
@@ -6736,7 +6753,7 @@ snapshots:
       '@alloc/quick-lru': 5.2.0
       '@tailwindcss/node': 4.2.1
       '@tailwindcss/oxide': 4.2.1
-      postcss: 8.5.6
+      postcss: 8.5.8
       tailwindcss: 4.2.1
 
   '@tanstack/query-core@5.90.20': {}
@@ -7222,7 +7239,7 @@ snapshots:
 
   balanced-match@4.0.4: {}
 
-  baseline-browser-mapping@2.10.0: {}
+  baseline-browser-mapping@2.10.10: {}
 
   bcryptjs@3.0.3: {}
 
@@ -7255,8 +7272,8 @@ snapshots:
 
   browserslist@4.28.1:
     dependencies:
-      baseline-browser-mapping: 2.10.0
-      caniuse-lite: 1.0.30001774
+      baseline-browser-mapping: 2.10.10
+      caniuse-lite: 1.0.30001781
       electron-to-chromium: 1.5.302
       node-releases: 2.0.27
       update-browserslist-db: 1.2.3(browserslist@4.28.1)
@@ -7303,7 +7320,7 @@ snapshots:
 
   camelcase@5.3.1: {}
 
-  caniuse-lite@1.0.30001774: {}
+  caniuse-lite@1.0.30001781: {}
 
   chai@6.2.2: {}
 
@@ -8121,10 +8138,10 @@ snapshots:
 
   flat-cache@4.0.1:
     dependencies:
-      flatted: 3.4.1
+      flatted: 3.4.2
       keyv: 4.5.4
 
-  flatted@3.4.1: {}
+  flatted@3.4.2: {}
 
   for-each@0.3.5:
     dependencies:
@@ -8818,10 +8835,10 @@ snapshots:
 
   negotiator@1.0.0: {}
 
-  next-auth@5.0.0-beta.30(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(nodemailer@8.0.1)(react@19.2.3):
+  next-auth@5.0.0-beta.30(next@16.1.7(@babel/core@7.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(nodemailer@8.0.1)(react@19.2.3):
     dependencies:
       '@auth/core': 0.41.0(nodemailer@8.0.1)
-      next: 16.1.6(@babel/core@7.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      next: 16.1.7(@babel/core@7.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react: 19.2.3
     optionalDependencies:
       nodemailer: 8.0.1
@@ -8831,25 +8848,25 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  next@16.1.7(@babel/core@7.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      '@next/env': 16.1.6
+      '@next/env': 16.1.7
       '@swc/helpers': 0.5.15
-      baseline-browser-mapping: 2.10.0
-      caniuse-lite: 1.0.30001774
+      baseline-browser-mapping: 2.10.10
+      caniuse-lite: 1.0.30001781
       postcss: 8.4.31
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
       styled-jsx: 5.1.6(@babel/core@7.29.0)(react@19.2.3)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 16.1.6
-      '@next/swc-darwin-x64': 16.1.6
-      '@next/swc-linux-arm64-gnu': 16.1.6
-      '@next/swc-linux-arm64-musl': 16.1.6
-      '@next/swc-linux-x64-gnu': 16.1.6
-      '@next/swc-linux-x64-musl': 16.1.6
-      '@next/swc-win32-arm64-msvc': 16.1.6
-      '@next/swc-win32-x64-msvc': 16.1.6
+      '@next/swc-darwin-arm64': 16.1.7
+      '@next/swc-darwin-x64': 16.1.7
+      '@next/swc-linux-arm64-gnu': 16.1.7
+      '@next/swc-linux-arm64-musl': 16.1.7
+      '@next/swc-linux-x64-gnu': 16.1.7
+      '@next/swc-linux-x64-musl': 16.1.7
+      '@next/swc-win32-arm64-msvc': 16.1.7
+      '@next/swc-win32-x64-msvc': 16.1.7
       sharp: 0.34.5
     transitivePeerDependencies:
       - '@babel/core'
@@ -9627,7 +9644,7 @@ snapshots:
 
   sharp@0.34.5:
     dependencies:
-      '@img/colour': 1.0.0
+      '@img/colour': 1.1.0
       detect-libc: 2.1.2
       semver: 7.7.4
     optionalDependencies:
diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
index 525a0612..25a35d9a 100644
--- a/src/app/(auth)/layout.tsx
+++ b/src/app/(auth)/layout.tsx
@@ -7,11 +7,11 @@ export default function AuthLayout({
     <div className="flex min-h-screen items-center justify-center bg-muted/30 p-4">
       <div className="w-full max-w-md space-y-8">
         <div className="flex flex-col items-center gap-1 text-center">
-          <h1 className="text-2xl tracking-tight">
+          <h1 className="text-2xl tracking-tight text-balance">
             <span className="font-bold">Vector</span>
             <span className="font-light">Flow</span>
           </h1>
-          <p className="text-sm text-muted-foreground">Visual pipeline builder for Vector</p>
+          <p className="text-sm text-muted-foreground text-pretty">Visual pipeline builder for Vector</p>
         </div>
         {children}
       </div>
diff --git a/src/app/(dashboard)/alerts/_components/alert-history-section.tsx b/src/app/(dashboard)/alerts/_components/alert-history-section.tsx
index 86c81112..f08b1950 100644
--- a/src/app/(dashboard)/alerts/_components/alert-history-section.tsx
+++ b/src/app/(dashboard)/alerts/_components/alert-history-section.tsx
@@ -136,7 +136,7 @@ export function AlertHistorySection({ environmentId }: { environmentId: string }
                       {event.status === "firing" ? "Firing" : "Resolved"}
                     </StatusBadge>
                   </TableCell>
-                  <TableCell className="font-mono">
+                  <TableCell className="font-mono tabular-nums">
                     {typeof event.value === "number"
                       ? event.value.toFixed(2)
                       : event.value}
diff --git a/src/app/(dashboard)/analytics/page.tsx b/src/app/(dashboard)/analytics/page.tsx
index cdba9df8..d140c59e 100644
--- a/src/app/(dashboard)/analytics/page.tsx
+++ b/src/app/(dashboard)/analytics/page.tsx
@@ -442,7 +442,7 @@ export default function AnalyticsPage() {
                         <div className="h-2 w-16 rounded-full bg-muted overflow-hidden">
                           <div
                             className={cn(
-                              "h-full rounded-full transition-all",
+                              "h-full rounded-full transition-[width] duration-300",
                               p.eventsReduced > 50
                                 ? "bg-green-500"
                                 : p.eventsReduced > 10
@@ -452,7 +452,7 @@ export default function AnalyticsPage() {
                             style={{ width: `${Math.max(0, Math.min(100, p.eventsReduced))}%` }}
                           />
                         </div>
-                        <span className="font-mono text-sm w-14 text-right">
+                        <span className="font-mono text-sm tabular-nums w-14 text-right">
                           {p.eventsReduced.toFixed(1)}%
                         </span>
                       </div>
@@ -462,7 +462,7 @@ export default function AnalyticsPage() {
                         <div className="h-2 w-16 rounded-full bg-muted overflow-hidden">
                           <div
                             className={cn(
-                              "h-full rounded-full transition-all",
+                              "h-full rounded-full transition-[width] duration-300",
                               p.reduction >= 50
                                 ? "bg-green-500"
                                 : p.reduction >= 20
@@ -472,7 +472,7 @@ export default function AnalyticsPage() {
                             style={{ width: `${Math.max(0, Math.min(100, p.reduction))}%` }}
                           />
                         </div>
-                        <span className="font-mono text-sm w-14 text-right">
+                        <span className="font-mono text-sm tabular-nums w-14 text-right">
                           {p.reduction.toFixed(1)}%
                         </span>
                       </div>
diff --git a/src/app/(dashboard)/environments/[id]/page.tsx b/src/app/(dashboard)/environments/[id]/page.tsx
index a30ee13d..88a88e6e 100644
--- a/src/app/(dashboard)/environments/[id]/page.tsx
+++ b/src/app/(dashboard)/environments/[id]/page.tsx
@@ -363,7 +363,7 @@ export default function EnvironmentDetailPage({
                         {node.name}
                       </Link>
                     </TableCell>
-                    <TableCell className="font-mono text-sm">
+                    <TableCell className="font-mono text-sm tabular-nums">
                       {node.host}:{node.apiPort}
                     </TableCell>
                     <TableCell>
@@ -419,7 +419,7 @@ export default function EnvironmentDetailPage({
               )}
               {env.hasEnrollmentToken && !enrollmentToken && (
                 <div className="flex items-center gap-2 rounded-md border p-3">
-                  <span className="font-mono text-sm">{env.enrollmentTokenHint}</span>
+                  <span className="font-mono text-sm tabular-nums">{env.enrollmentTokenHint}</span>
                   <Badge variant="secondary" className="ml-auto">Active</Badge>
                 </div>
               )}
diff --git a/src/app/(dashboard)/fleet/[nodeId]/page.tsx b/src/app/(dashboard)/fleet/[nodeId]/page.tsx
index e9e575b4..02c6befc 100644
--- a/src/app/(dashboard)/fleet/[nodeId]/page.tsx
+++ b/src/app/(dashboard)/fleet/[nodeId]/page.tsx
@@ -543,32 +543,32 @@ export default function NodeDetailPage() {
                               {pipelineStatusLabel(ps.status)}
                             </StatusBadge>
                           </TableCell>
-                          <TableCell className="text-right font-mono text-sm">
+                          <TableCell className="text-right font-mono text-sm tabular-nums">
                             <div>{formatCount(ps.eventsIn)}</div>
                             {rates && <div className="text-xs text-muted-foreground">{formatRate(rates.eventsInRate)}</div>}
                           </TableCell>
-                          <TableCell className="text-right font-mono text-sm">
+                          <TableCell className="text-right font-mono text-sm tabular-nums">
                             <div>{formatCount(ps.eventsOut)}</div>
                             {rates && <div className="text-xs text-muted-foreground">{formatRate(rates.eventsOutRate)}</div>}
                           </TableCell>
-                          <TableCell className="text-right font-mono text-sm">
+                          <TableCell className="text-right font-mono text-sm tabular-nums">
                             <div>{formatCount(ps.errorsTotal)}</div>
                             {rates && rates.errorsRate > 0 && <div className="text-xs text-red-500">{formatRate(rates.errorsRate)}</div>}
                           </TableCell>
-                          <TableCell className="text-right font-mono text-sm">
+                          <TableCell className="text-right font-mono text-sm tabular-nums">
                             <div>{formatBytes(ps.bytesIn)}</div>
                             {rates && <div className="text-xs text-muted-foreground">{formatBytesRate(rates.bytesInRate)}</div>}
                           </TableCell>
-                          <TableCell className="text-right font-mono text-sm">
+                          <TableCell className="text-right font-mono text-sm tabular-nums">
                             <div>{formatBytes(ps.bytesOut)}</div>
                             {rates && <div className="text-xs text-muted-foreground">{formatBytesRate(rates.bytesOutRate)}</div>}
                           </TableCell>
-                          <TableCell className="text-right font-mono text-sm">
+                          <TableCell className="text-right font-mono text-sm tabular-nums">
                             {rates?.latencyMeanMs != null
                               ? formatLatency(rates.latencyMeanMs)
                               : "—"}
                           </TableCell>
-                          <TableCell className="text-right font-mono text-sm">
+                          <TableCell className="text-right font-mono text-sm tabular-nums">
                             {formatUptime(ps.uptimeSeconds)}
                           </TableCell>
                         </TableRow>
diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index ccca406b..720849ac 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -117,8 +117,8 @@ export default function DashboardLayout({
             <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-muted">
               <ShieldAlert className="h-8 w-8 text-muted-foreground" />
             </div>
-            <h1 className="text-2xl font-semibold">No Team Assigned</h1>
-            <p className="text-muted-foreground">
+            <h1 className="text-2xl font-semibold text-balance">No Team Assigned</h1>
+            <p className="text-muted-foreground text-pretty">
               Your account is active but you haven&apos;t been assigned to a team yet. Contact your administrator to get access.
             </p>
             {(userName || userEmail) && (
diff --git a/src/app/(dashboard)/page.tsx b/src/app/(dashboard)/page.tsx
index 33219af5..c3cb2263 100644
--- a/src/app/(dashboard)/page.tsx
+++ b/src/app/(dashboard)/page.tsx
@@ -178,7 +178,7 @@ export default function DashboardPage() {
                     panels: view.panels as string[],
                   });
                 }}
-                className="cursor-pointer rounded p-0.5 transition-colors hover:bg-muted"
+                className="relative cursor-pointer rounded p-1 transition-colors hover:bg-muted before:absolute before:-inset-1 before:content-['']"
                 aria-label="Edit view"
                 title="Edit view"
               >
@@ -192,7 +192,7 @@ export default function DashboardPage() {
                     deleteMutation.mutate({ environmentId: selectedEnvironmentId!, id: view.id });
                   }
                 }}
-                className="cursor-pointer rounded p-0.5 transition-colors hover:bg-muted text-destructive"
+                className="relative cursor-pointer rounded p-1 transition-colors hover:bg-muted text-destructive before:absolute before:-inset-1 before:content-['']"
                 aria-label="Delete view"
                 title="Delete view"
               >
@@ -237,7 +237,7 @@ export default function DashboardPage() {
                   <p className="text-sm font-medium text-muted-foreground">Total Nodes</p>
                   <Server className="h-4 w-4 text-muted-foreground" />
                 </div>
-                <p className="mt-1 text-2xl font-bold">{stats.data?.nodes ?? 0}</p>
+                <p className="mt-1 text-2xl font-bold tabular-nums">{stats.data?.nodes ?? 0}</p>
               </CardContent>
             </Card>
 
@@ -272,7 +272,7 @@ export default function DashboardPage() {
                   <p className="text-sm font-medium text-muted-foreground">Pipelines</p>
                   <GitBranch className="h-4 w-4 text-muted-foreground" />
                 </div>
-                <p className="mt-1 text-2xl font-bold">{stats.data?.pipelines ?? 0}</p>
+                <p className="mt-1 text-2xl font-bold tabular-nums">{stats.data?.pipelines ?? 0}</p>
               </CardContent>
             </Card>
 
@@ -309,14 +309,14 @@ export default function DashboardPage() {
                 {stats.data?.reduction?.percent != null ? (
                   <>
                     <p className={cn(
-                      "mt-1 text-2xl font-bold",
+                      "mt-1 text-2xl font-bold tabular-nums",
                       stats.data.reduction.percent > 50 ? "text-green-600 dark:text-green-400" :
                       stats.data.reduction.percent > 10 ? "text-amber-600 dark:text-amber-400" :
                       "text-muted-foreground"
                     )}>
                       {stats.data.reduction.percent.toFixed(0)}%
                     </p>
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-xs text-muted-foreground tabular-nums">
                       {formatEventsRate(stats.data.reduction.eventsIn / 3600)} → {formatEventsRate(stats.data.reduction.eventsOut / 3600)}
                     </p>
                   </>
diff --git a/src/app/(dashboard)/settings/_components/backup-settings.tsx b/src/app/(dashboard)/settings/_components/backup-settings.tsx
index 07e48114..98e1295c 100644
--- a/src/app/(dashboard)/settings/_components/backup-settings.tsx
+++ b/src/app/(dashboard)/settings/_components/backup-settings.tsx
@@ -297,10 +297,10 @@ export function BackupSettings() {
               <TableBody>
                 {backupsQuery.data.map((backup) => (
                   <TableRow key={backup.filename}>
-                    <TableCell>
+                    <TableCell className="tabular-nums">
                       {new Date(backup.timestamp).toLocaleString()}
                     </TableCell>
-                    <TableCell>{formatBytes(backup.sizeBytes)}</TableCell>
+                    <TableCell className="tabular-nums">{formatBytes(backup.sizeBytes)}</TableCell>
                     <TableCell>
                       <Badge variant="secondary">{backup.version}</Badge>
                     </TableCell>
diff --git a/src/app/globals.css b/src/app/globals.css
index 6b9e2173..fa3002d8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -199,4 +199,15 @@
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
+}
+
+@keyframes status-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  50% {
+    box-shadow: 0 0 0 4px transparent;
+    opacity: 0.7;
+  }
 }
\ No newline at end of file
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 6c086bb3..4d263c6f 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -7,8 +7,8 @@ export default function NotFound() {
     <div className="flex min-h-screen flex-col items-center justify-center gap-4 text-center">
       <FileQuestion className="h-16 w-16 text-muted-foreground/50" />
       <div>
-        <h1 className="text-2xl font-bold">Page Not Found</h1>
-        <p className="mt-1 text-muted-foreground">
+        <h1 className="text-2xl font-bold text-balance">Page Not Found</h1>
+        <p className="mt-1 text-muted-foreground text-pretty">
           The page you&apos;re looking for doesn&apos;t exist or has been moved.
         </p>
       </div>
diff --git a/src/components/dashboard/custom-view.tsx b/src/components/dashboard/custom-view.tsx
index afd343c5..8946f1c5 100644
--- a/src/components/dashboard/custom-view.tsx
+++ b/src/components/dashboard/custom-view.tsx
@@ -361,7 +361,7 @@ export function CustomView({ view }: CustomViewProps) {
                 <>
                   <p
                     className={cn(
-                      "mt-1 text-2xl font-bold",
+                      "mt-1 text-2xl font-bold tabular-nums",
                       stats.data.reduction.percent > 50
                         ? "text-green-600 dark:text-green-400"
                         : stats.data.reduction.percent > 10
diff --git a/src/components/empty-state.tsx b/src/components/empty-state.tsx
index abd92d4f..e1a9fee5 100644
--- a/src/components/empty-state.tsx
+++ b/src/components/empty-state.tsx
@@ -26,9 +26,9 @@ export function EmptyState({
       )}
     >
       {Icon && <Icon className="h-10 w-10 text-muted-foreground mb-3" />}
-      <p className="text-muted-foreground">{title}</p>
+      <p className="text-muted-foreground text-balance">{title}</p>
       {description && (
-        <p className="mt-2 text-xs text-muted-foreground">{description}</p>
+        <p className="mt-2 text-xs text-muted-foreground text-pretty">{description}</p>
       )}
       {action && (
         <Button asChild className="mt-4" variant="outline">
diff --git a/src/components/fleet/event-log.tsx b/src/components/fleet/event-log.tsx
index 660b58a8..6f9ca542 100644
--- a/src/components/fleet/event-log.tsx
+++ b/src/components/fleet/event-log.tsx
@@ -51,7 +51,7 @@ export function EventLog({ nodeId, range }: EventLogProps) {
             style={{ backgroundColor: statusColor(event.toStatus) }}
           />
           {/* Timestamp */}
-          <span className="w-12 shrink-0 font-mono text-xs text-muted-foreground">
+          <span className="w-12 shrink-0 font-mono text-xs tabular-nums text-muted-foreground">
             {formatTime(event.timestamp)}
           </span>
           {/* Transition */}
diff --git a/src/components/fleet/node-logs.tsx b/src/components/fleet/node-logs.tsx
index 3f217c1d..607fe574 100644
--- a/src/components/fleet/node-logs.tsx
+++ b/src/components/fleet/node-logs.tsx
@@ -203,7 +203,7 @@ export function NodeLogs({ nodeId, pipelines }: NodeLogsProps) {
         )}
         {filteredItems.map((log) => (
           <div key={log.id} className="whitespace-pre-wrap leading-5">
-            <span className="text-gray-600">{formatTimeWithSeconds(log.timestamp)}</span>
+            <span className="text-gray-600 tabular-nums">{formatTimeWithSeconds(log.timestamp)}</span>
             {"  "}
             <span className={`${LEVEL_COLORS[log.level as LogLevel]} inline-block w-12`}>
               {log.level}
diff --git a/src/components/fleet/node-metrics-charts.tsx b/src/components/fleet/node-metrics-charts.tsx
index 38943ed8..851d0db5 100644
--- a/src/components/fleet/node-metrics-charts.tsx
+++ b/src/components/fleet/node-metrics-charts.tsx
@@ -171,17 +171,17 @@ export function NodeMetricsCharts({ nodeId }: NodeMetricsChartsProps) {
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4 text-sm text-muted-foreground">
           <span>
-            CPU: <span className="font-mono text-foreground">{formatPercent(latest.cpuPercent)}</span>
+            CPU: <span className="font-mono tabular-nums text-foreground">{formatPercent(latest.cpuPercent)}</span>
           </span>
           <span>
-            Memory: <span className="font-mono text-foreground">{formatBytes(latest.memUsed)}</span>
+            Memory: <span className="font-mono tabular-nums text-foreground">{formatBytes(latest.memUsed)}</span>
             <span className="text-xs"> / {formatBytes(latest.memTotal)}</span>
           </span>
           <span>
-            Disk: <span className="font-mono text-foreground">{formatPercent(latest.fsPercent)}</span>
+            Disk: <span className="font-mono tabular-nums text-foreground">{formatPercent(latest.fsPercent)}</span>
           </span>
           <span>
-            Load: <span className="font-mono text-foreground">{latest.loadAvg1.toFixed(2)}</span>
+            Load: <span className="font-mono tabular-nums text-foreground">{latest.loadAvg1.toFixed(2)}</span>
           </span>
         </div>
         <Select
@@ -227,7 +227,7 @@ export function NodeMetricsCharts({ nodeId }: NodeMetricsChartsProps) {
                       formatter={(value, name) => (
                         <div className="flex w-full items-center justify-between gap-2">
                           <span className="text-muted-foreground">{cpuChartConfig[name as keyof typeof cpuChartConfig]?.label ?? name}</span>
-                          <span className="font-mono font-medium text-foreground">{formatPercent(Number(value) ?? 0)}</span>
+                          <span className="font-mono font-medium tabular-nums text-foreground">{formatPercent(Number(value) ?? 0)}</span>
                         </div>
                       )}
                     />
@@ -271,7 +271,7 @@ export function NodeMetricsCharts({ nodeId }: NodeMetricsChartsProps) {
                       formatter={(value, name) => (
                         <div className="flex w-full items-center justify-between gap-2">
                           <span className="text-muted-foreground">{memoryChartConfig[name as keyof typeof memoryChartConfig]?.label ?? name}</span>
-                          <span className="font-mono font-medium text-foreground">{formatPercent(Number(value) ?? 0)}</span>
+                          <span className="font-mono font-medium tabular-nums text-foreground">{formatPercent(Number(value) ?? 0)}</span>
                         </div>
                       )}
                     />
@@ -314,7 +314,7 @@ export function NodeMetricsCharts({ nodeId }: NodeMetricsChartsProps) {
                       formatter={(value, name) => (
                         <div className="flex w-full items-center justify-between gap-2">
                           <span className="text-muted-foreground">{diskChartConfig[name as keyof typeof diskChartConfig]?.label ?? name}</span>
-                          <span className="font-mono font-medium text-foreground">{formatBytesRate(Number(value) ?? 0)}</span>
+                          <span className="font-mono font-medium tabular-nums text-foreground">{formatBytesRate(Number(value) ?? 0)}</span>
                         </div>
                       )}
                     />
@@ -365,7 +365,7 @@ export function NodeMetricsCharts({ nodeId }: NodeMetricsChartsProps) {
                       formatter={(value, name) => (
                         <div className="flex w-full items-center justify-between gap-2">
                           <span className="text-muted-foreground">{networkChartConfig[name as keyof typeof networkChartConfig]?.label ?? name}</span>
-                          <span className="font-mono font-medium text-foreground">{formatBytesRate(Number(value) ?? 0)}</span>
+                          <span className="font-mono font-medium tabular-nums text-foreground">{formatBytesRate(Number(value) ?? 0)}</span>
                         </div>
                       )}
                     />
diff --git a/src/components/fleet/uptime-cards.tsx b/src/components/fleet/uptime-cards.tsx
index e84c893d..d04652a3 100644
--- a/src/components/fleet/uptime-cards.tsx
+++ b/src/components/fleet/uptime-cards.tsx
@@ -48,10 +48,10 @@ function UptimeCard({
           </div>
         ) : (
           <div>
-            <p className={`text-2xl font-bold ${uptimeColor(data.uptimePercent)}`}>
+            <p className={`text-2xl font-bold tabular-nums ${uptimeColor(data.uptimePercent)}`}>
               {data.uptimePercent.toFixed(2)}%
             </p>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-xs text-muted-foreground tabular-nums">
               {data.incidents} incident{data.incidents !== 1 ? "s" : ""}
             </p>
           </div>
diff --git a/src/components/flow/metric-edge.tsx b/src/components/flow/metric-edge.tsx
index b997676c..d549fd60 100644
--- a/src/components/flow/metric-edge.tsx
+++ b/src/components/flow/metric-edge.tsx
@@ -15,7 +15,7 @@ export function MetricEdge({ data, ...props }: EdgeProps) {
           x={labelX - 40}
           y={labelY - 12}
         >
-          <div className="flex items-center justify-center rounded bg-muted px-2 py-0.5 text-xs font-mono text-muted-foreground">
+          <div className="flex items-center justify-center rounded bg-muted px-2 py-0.5 text-xs font-mono tabular-nums text-muted-foreground">
             {throughput > 1000
               ? `${(throughput / 1000).toFixed(1)}k/s`
               : `${throughput}/s`}
diff --git a/src/components/flow/sink-node.tsx b/src/components/flow/sink-node.tsx
index b3e60500..dda25908 100644
--- a/src/components/flow/sink-node.tsx
+++ b/src/components/flow/sink-node.tsx
@@ -38,7 +38,7 @@ function SinkNodeComponent({ data, selected }: NodeProps<SinkNodeType>) {
   return (
     <div
       className={cn(
-        "w-56 rounded-lg border bg-card shadow-sm transition-shadow",
+        "w-56 rounded-lg border bg-card shadow-sm transition-shadow overflow-hidden",
         selected && !isShared && "ring-2 ring-node-sink shadow-md",
         selected && isShared && "ring-2 ring-purple-400 shadow-md",
         isShared && !selected && "border-purple-400/50 shadow-[0_0_8px_rgba(167,139,250,0.15)]",
@@ -53,7 +53,7 @@ function SinkNodeComponent({ data, selected }: NodeProps<SinkNodeType>) {
       />
 
       {/* Header bar */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-node-sink px-3 py-2 text-node-sink-foreground">
+      <div className="flex items-center gap-2 bg-node-sink px-3 py-2 text-node-sink-foreground">
         {/* eslint-disable-next-line react-hooks/static-components */}
         <Icon className="h-4 w-4 shrink-0" />
         <span className="truncate text-sm font-medium">
@@ -66,7 +66,7 @@ function SinkNodeComponent({ data, selected }: NodeProps<SinkNodeType>) {
         {displayName && <p className="truncate text-xs font-medium text-foreground">{displayName}</p>}
 
         {metrics && (
-          <p className="truncate text-xs font-mono text-purple-400">
+          <p className="truncate text-xs font-mono tabular-nums text-purple-400">
             {formatRate(metrics.eventsPerSec)} ev/s{"  "}{formatBytesRate(metrics.bytesPerSec)}
             {metrics.latencyMs != null && metrics.latencyMs > 0 && (
               <>{"  "}{formatLatency(metrics.latencyMs)}</>
diff --git a/src/components/flow/source-node.tsx b/src/components/flow/source-node.tsx
index 75b97faa..aace1230 100644
--- a/src/components/flow/source-node.tsx
+++ b/src/components/flow/source-node.tsx
@@ -39,7 +39,7 @@ function SourceNodeComponent({ data, selected }: NodeProps<SourceNodeType>) {
   return (
     <div
       className={cn(
-        "w-56 rounded-lg border bg-card shadow-sm transition-shadow",
+        "w-56 rounded-lg border bg-card shadow-sm transition-shadow overflow-hidden",
         selected && !isSystemLocked && !isShared && "ring-2 ring-node-source shadow-md",
         selected && isShared && "ring-2 ring-purple-400 shadow-md",
         isShared && !selected && "border-purple-400/50 shadow-[0_0_8px_rgba(167,139,250,0.15)]",
@@ -48,7 +48,7 @@ function SourceNodeComponent({ data, selected }: NodeProps<SourceNodeType>) {
       )}
     >
       {/* Header bar */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-node-source px-3 py-2 text-node-source-foreground">
+      <div className="flex items-center gap-2 bg-node-source px-3 py-2 text-node-source-foreground">
         {/* eslint-disable-next-line react-hooks/static-components */}
         <Icon className="h-4 w-4 shrink-0" />
         <span className="truncate text-sm font-medium">
@@ -64,7 +64,7 @@ function SourceNodeComponent({ data, selected }: NodeProps<SourceNodeType>) {
         {displayName && <p className="truncate text-xs font-medium text-foreground">{displayName}</p>}
 
         {metrics && (
-          <p className="truncate text-xs font-mono text-emerald-400">
+          <p className="truncate text-xs font-mono tabular-nums text-emerald-400">
             {formatRate(metrics.eventsPerSec)} ev/s{"  "}{formatBytesRate(metrics.bytesPerSec)}
             {metrics.latencyMs != null && metrics.latencyMs > 0 && (
               <>{"  "}{formatLatency(metrics.latencyMs)}</>
diff --git a/src/components/flow/transform-node.tsx b/src/components/flow/transform-node.tsx
index 2cc45996..fe75f9c7 100644
--- a/src/components/flow/transform-node.tsx
+++ b/src/components/flow/transform-node.tsx
@@ -41,7 +41,7 @@ function TransformNodeComponent({
   return (
     <div
       className={cn(
-        "w-56 rounded-lg border bg-card shadow-sm transition-shadow",
+        "w-56 rounded-lg border bg-card shadow-sm transition-shadow overflow-hidden",
         selected && !isShared && "ring-2 ring-node-transform shadow-md",
         selected && isShared && "ring-2 ring-purple-400 shadow-md",
         isShared && !selected && "border-purple-400/50 shadow-[0_0_8px_rgba(167,139,250,0.15)]",
@@ -56,7 +56,7 @@ function TransformNodeComponent({
       />
 
       {/* Header bar */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-node-transform px-3 py-2 text-node-transform-foreground">
+      <div className="flex items-center gap-2 bg-node-transform px-3 py-2 text-node-transform-foreground">
         {/* eslint-disable-next-line react-hooks/static-components */}
         <Icon className="h-4 w-4 shrink-0" />
         <span className="truncate text-sm font-medium">
@@ -71,12 +71,12 @@ function TransformNodeComponent({
         {metrics && (
           <>
             {metrics.eventsInPerSec != null ? (
-              <div className="flex justify-between text-xs font-mono text-blue-400">
+              <div className="flex justify-between text-xs font-mono tabular-nums text-blue-400">
                 <span>{formatRate(metrics.eventsInPerSec)} ev/s in</span>
                 <span>{formatRate(metrics.eventsPerSec)} ev/s out</span>
               </div>
             ) : (
-              <p className="truncate text-xs font-mono text-blue-400">
+              <p className="truncate text-xs font-mono tabular-nums text-blue-400">
                 {formatRate(metrics.eventsPerSec)} ev/s{"  "}{formatBytesRate(metrics.bytesPerSec)}
               </p>
             )}
diff --git a/src/components/metrics/component-chart.tsx b/src/components/metrics/component-chart.tsx
index 575e5502..30d7c235 100644
--- a/src/components/metrics/component-chart.tsx
+++ b/src/components/metrics/component-chart.tsx
@@ -94,7 +94,7 @@ export function MetricsChart({ rows, dataKey, height = 200 }: MetricsChartProps)
               formatter={(value, name) => (
                 <div className="flex w-full items-center justify-between gap-2">
                   <span className="text-muted-foreground">{chartConfig[name as keyof typeof chartConfig]?.label ?? name}</span>
-                  <span className="font-mono font-medium text-foreground">{formatter(Number(value) ?? 0)}</span>
+                  <span className="font-mono font-medium tabular-nums text-foreground">{formatter(Number(value) ?? 0)}</span>
                 </div>
               )}
             />
diff --git a/src/components/metrics/summary-cards.tsx b/src/components/metrics/summary-cards.tsx
index f97f15af..e3a5700d 100644
--- a/src/components/metrics/summary-cards.tsx
+++ b/src/components/metrics/summary-cards.tsx
@@ -51,31 +51,31 @@ export function SummaryCards({ rows }: SummaryCardsProps) {
       <Card>
         <CardContent className="pt-4">
           <p className="text-xs text-muted-foreground">Events In</p>
-          <p className="text-2xl font-bold">{formatRate(eventsInRate)}</p>
+          <p className="text-2xl font-bold tabular-nums">{formatRate(eventsInRate)}</p>
         </CardContent>
       </Card>
       <Card>
         <CardContent className="pt-4">
           <p className="text-xs text-muted-foreground">Events Out</p>
-          <p className="text-2xl font-bold">{formatRate(eventsOutRate)}</p>
+          <p className="text-2xl font-bold tabular-nums">{formatRate(eventsOutRate)}</p>
         </CardContent>
       </Card>
       <Card>
         <CardContent className="pt-4">
           <p className="text-xs text-muted-foreground">Data In</p>
-          <p className="text-2xl font-bold">{formatBytes(bytesInRate)}</p>
+          <p className="text-2xl font-bold tabular-nums">{formatBytes(bytesInRate)}</p>
         </CardContent>
       </Card>
       <Card>
         <CardContent className="pt-4">
           <p className="text-xs text-muted-foreground">Errors</p>
-          <p className="text-2xl font-bold">{formatCount(errorsTotal)}</p>
+          <p className="text-2xl font-bold tabular-nums">{formatCount(errorsTotal)}</p>
         </CardContent>
       </Card>
       <Card>
         <CardContent className="pt-4">
           <p className="text-xs text-muted-foreground">Discarded</p>
-          <p className="text-2xl font-bold">{formatCount(discardedTotal)}</p>
+          <p className="text-2xl font-bold tabular-nums">{formatCount(discardedTotal)}</p>
         </CardContent>
       </Card>
     </div>
diff --git a/src/components/page-header.tsx b/src/components/page-header.tsx
index 0f3e8414..472ebaef 100644
--- a/src/components/page-header.tsx
+++ b/src/components/page-header.tsx
@@ -11,9 +11,9 @@ export function PageHeader({ title, description, actions, className }: PageHeade
   return (
     <div className={cn("flex items-start justify-between gap-4 mb-6", className)}>
       <div className="space-y-1">
-        <h1 className="text-lg font-semibold tracking-tight">{title}</h1>
+        <h1 className="text-lg font-semibold tracking-tight text-balance">{title}</h1>
         {description && (
-          <p className="text-sm text-muted-foreground">{description}</p>
+          <p className="text-sm text-muted-foreground text-pretty">{description}</p>
         )}
       </div>
       {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
diff --git a/src/components/pipeline/metrics-chart.tsx b/src/components/pipeline/metrics-chart.tsx
index 24f653f6..543a7e77 100644
--- a/src/components/pipeline/metrics-chart.tsx
+++ b/src/components/pipeline/metrics-chart.tsx
@@ -92,7 +92,7 @@ export function PipelineMetricsChart({ pipelineId, hours = 24 }: PipelineMetrics
                   formatter={(value, name) => (
                     <div className="flex w-full items-center justify-between gap-2">
                       <span className="text-muted-foreground">{eventsChartConfig[name as keyof typeof eventsChartConfig]?.label ?? name}</span>
-                      <span className="font-mono font-medium text-foreground">{formatEventsRate(Number(value) ?? 0)}</span>
+                      <span className="font-mono font-medium tabular-nums text-foreground">{formatEventsRate(Number(value) ?? 0)}</span>
                     </div>
                   )}
                 />
@@ -138,7 +138,7 @@ export function PipelineMetricsChart({ pipelineId, hours = 24 }: PipelineMetrics
                   formatter={(value, name) => (
                     <div className="flex w-full items-center justify-between gap-2">
                       <span className="text-muted-foreground">{bytesChartConfig[name as keyof typeof bytesChartConfig]?.label ?? name}</span>
-                      <span className="font-mono font-medium text-foreground">{formatBytesRate(Number(value) ?? 0)}</span>
+                      <span className="font-mono font-medium tabular-nums text-foreground">{formatBytesRate(Number(value) ?? 0)}</span>
                     </div>
                   )}
                 />
@@ -184,7 +184,7 @@ export function PipelineMetricsChart({ pipelineId, hours = 24 }: PipelineMetrics
                   formatter={(value, name) => (
                     <div className="flex w-full items-center justify-between gap-2">
                       <span className="text-muted-foreground">{latencyChartConfig[name as keyof typeof latencyChartConfig]?.label ?? name}</span>
-                      <span className="font-mono font-medium text-foreground">{formatLatency(Number(value) ?? 0)}</span>
+                      <span className="font-mono font-medium tabular-nums text-foreground">{formatLatency(Number(value) ?? 0)}</span>
                     </div>
                   )}
                 />
diff --git a/src/components/pipeline/pipeline-logs.tsx b/src/components/pipeline/pipeline-logs.tsx
index ae215715..7fa30b72 100644
--- a/src/components/pipeline/pipeline-logs.tsx
+++ b/src/components/pipeline/pipeline-logs.tsx
@@ -173,7 +173,7 @@ export function PipelineLogs({ pipelineId, nodeId }: PipelineLogsProps) {
         )}
         {filteredItems.map((log) => (
           <div key={log.id} className="whitespace-pre-wrap leading-5">
-            <span className="text-gray-600">{formatTimeWithSeconds(log.timestamp)}</span>
+            <span className="text-gray-600 tabular-nums">{formatTimeWithSeconds(log.timestamp)}</span>
             {"  "}
             <span className={`${LEVEL_COLORS[log.level as LogLevel]} inline-block w-12`}>
               {log.level}
diff --git a/src/components/pipeline/version-history-dialog.tsx b/src/components/pipeline/version-history-dialog.tsx
index 97a44221..132a727b 100644
--- a/src/components/pipeline/version-history-dialog.tsx
+++ b/src/components/pipeline/version-history-dialog.tsx
@@ -177,7 +177,7 @@ export function VersionHistoryDialog({
                           </span>
                         </TableCell>
                         <TableCell>
-                          <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                          <div className="flex items-center gap-1.5 text-sm text-muted-foreground tabular-nums">
                             <Clock className="h-3 w-3" />
                             {formatDate(version.createdAt)}
                           </div>
diff --git a/src/components/query-error.tsx b/src/components/query-error.tsx
index 93d225eb..5aa13c39 100644
--- a/src/components/query-error.tsx
+++ b/src/components/query-error.tsx
@@ -13,7 +13,7 @@ export function QueryError({
   return (
     <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12 text-center">
       <AlertTriangle className="h-10 w-10 text-destructive mb-3" />
-      <p className="text-muted-foreground">{message}</p>
+      <p className="text-muted-foreground text-balance">{message}</p>
       {onRetry && (
         <Button variant="outline" className="mt-4" onClick={onRetry}>
           Try again
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
index 74b391a0..9b77c3ca 100644
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@@ -14,8 +14,8 @@ export function ThemeToggle() {
       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
       aria-label="Toggle theme"
     >
-      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <Sun className="h-5 w-5 rotate-0 scale-100 transition-[transform,opacity] dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-[transform,opacity] dark:rotate-0 dark:scale-100" />
     </Button>
   );
 }
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index 1ac15704..8f1f4d05 100644
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -32,7 +32,7 @@ function AvatarImage({
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
+      className={cn("aspect-square size-full outline outline-1 outline-black/5 dark:outline-white/10 rounded-full", className)}
       {...props}
     />
   )
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index b5ea4abd..1132c9ac 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { Slot } from "radix-ui"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow,transform] duration-150 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive active:scale-[0.96]",
   {
     variants: {
       variant: {
@@ -18,7 +18,7 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+        link: "text-primary underline-offset-4 hover:underline active:!scale-100",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index b1198f32..c28df1b0 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6",
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-[0_1px_2px_0_rgba(0,0,0,0.03),0_1px_3px_0_rgba(0,0,0,0.04)] dark:shadow-[0_1px_2px_0_rgba(0,0,0,0.2),0_1px_3px_0_rgba(0,0,0,0.15)]",
         className
       )}
       {...props}
@@ -32,7 +32,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
+      className={cn("leading-none font-semibold text-balance", className)}
       {...props}
     />
   )
@@ -42,7 +42,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-muted-foreground text-sm text-pretty", className)}
       {...props}
     />
   )
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index eb2a601f..f951f0aa 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -125,7 +125,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn("text-lg leading-none font-semibold text-balance", className)}
       {...props}
     />
   )
@@ -138,7 +138,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-muted-foreground text-sm text-pretty", className)}
       {...props}
     />
   )
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 7a1487b0..4073fb7e 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -291,7 +291,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-[background-color] ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
         "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
@@ -474,7 +474,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding,background-color,color] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/src/components/ui/status-dot.tsx b/src/components/ui/status-dot.tsx
index 68baa126..75bd2d34 100644
--- a/src/components/ui/status-dot.tsx
+++ b/src/components/ui/status-dot.tsx
@@ -10,15 +10,29 @@ const dotStyles: Record<StatusVariant, string> = {
   info: "bg-status-info",
 };
 
+const pulseStyles: Record<StatusVariant, string> = {
+  healthy: "shadow-[0_0_0_0_var(--status-healthy)] animate-[status-pulse_2s_ease-in-out_infinite]",
+  degraded: "shadow-[0_0_0_0_var(--status-degraded)] animate-[status-pulse_2s_ease-in-out_infinite]",
+  error: "shadow-[0_0_0_0_var(--status-error)] animate-[status-pulse_1.5s_ease-in-out_infinite]",
+  neutral: "",
+  info: "",
+};
+
 interface StatusDotProps {
   variant: StatusVariant;
+  pulse?: boolean;
   className?: string;
 }
 
-export function StatusDot({ variant, className }: StatusDotProps) {
+export function StatusDot({ variant, pulse = false, className }: StatusDotProps) {
   return (
     <span
-      className={cn("inline-block h-2 w-2 shrink-0 rounded-full", dotStyles[variant], className)}
+      className={cn(
+        "inline-block h-2 w-2 shrink-0 rounded-full",
+        dotStyles[variant],
+        pulse && pulseStyles[variant],
+        className,
+      )}
       aria-hidden="true"
     />
   );
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index 80dd45b2..63390206 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -17,7 +17,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-[color,background-color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
         className
       )}
       {...props}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 7f73dcda..6aef0830 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -64,7 +64,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow] group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
         "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
         "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
diff --git a/src/components/update-banner.tsx b/src/components/update-banner.tsx
index 041e16d2..2f1b19da 100644
--- a/src/components/update-banner.tsx
+++ b/src/components/update-banner.tsx
@@ -47,7 +47,7 @@ export function UpdateBanner() {
       <Button
         variant="ghost"
         size="icon"
-        className="h-6 w-6 shrink-0 text-status-info-foreground transition-colors hover:bg-status-info/30 focus-visible:ring-ring"
+        className="relative h-6 w-6 shrink-0 text-status-info-foreground transition-colors hover:bg-status-info/30 focus-visible:ring-ring before:absolute before:-inset-2 before:content-['']"
         onClick={() => setDismissed(true)}
         aria-label="Dismiss update notification"
       >