diff --git a/web/package.json b/web/package.json
index 3377da8..1da0eb0 100644
--- a/web/package.json
+++ b/web/package.json
@@ -29,6 +29,7 @@
     "@hookform/error-message": "^2.0.1",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/vite": "^4.0.0",
     "@tanstack/react-query": "^5.62.11",
     "@tanstack/react-query-devtools": "^5.29.2",
     "@tanstack/react-router": "^1.92.13",
@@ -45,7 +46,6 @@
     "formik": "^2.4.6",
     "goober": "^2.1.16",
     "http-proxy-middleware": "^3.0.3",
-    "postcss": "^8.4.49",
     "react": "^19.0.0",
     "react-debounce-input": "^3.3.0",
     "react-dom": "^19.0.0",
@@ -57,7 +57,7 @@
     "react-textarea-autosize": "^8.5.6",
     "stacktracey": "^2.1.8",
     "tailwind-lerp-colors": "1.2.6",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "workbox-window": "^7.3.0",
     "zod": "^3.24.1",
     "zod-formik-adapter": "^1.3.0"
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 8ad9e2f..6e09870 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -36,7 +36,10 @@ importers:
         version: 2.11.8
       '@tailwindcss/forms':
         specifier: ^0.5.9
-        version: 0.5.9(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.9.3(@swc/helpers@0.5.15))(@types/node@22.10.3)(typescript@5.7.2)))
+        version: 0.5.9(tailwindcss@4.0.0)
+      '@tailwindcss/vite':
+        specifier: ^4.0.0
+        version: 4.0.0(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))
       '@tanstack/react-query':
         specifier: ^5.62.11
         version: 5.62.11(react@19.0.0)
@@ -66,7 +69,7 @@ importers:
         version: 8.19.0(eslint@8.57.1)(typescript@5.7.2)
       '@vitejs/plugin-react-swc':
         specifier: ^3.7.2
-        version: 3.7.2(@swc/helpers@0.5.15)(vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1))
+        version: 3.7.2(@swc/helpers@0.5.15)(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.49)
@@ -85,9 +88,6 @@ importers:
       http-proxy-middleware:
         specifier: ^3.0.3
         version: 3.0.3
-      postcss:
-        specifier: ^8.4.49
-        version: 8.4.49
       react:
         specifier: ^19.0.0
         version: 19.0.0
@@ -122,8 +122,8 @@ importers:
         specifier: 1.2.6
         version: 1.2.6(ts-node@10.9.2(@swc/core@1.9.3(@swc/helpers@0.5.15))(@types/node@22.10.3)(typescript@5.7.2))
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17(ts-node@10.9.2(@swc/core@1.9.3(@swc/helpers@0.5.15))(@types/node@22.10.3)(typescript@5.7.2))
+        specifier: ^4.0.0
+        version: 4.0.0
       workbox-window:
         specifier: ^7.3.0
         version: 7.3.0
@@ -169,13 +169,13 @@ importers:
         version: 5.7.2
       vite:
         specifier: ^6.0.6
-        version: 6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1)
+        version: 6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1)
       vite-plugin-pwa:
         specifier: ^0.21.1
-        version: 0.21.1(vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1))(workbox-build@7.0.0)(workbox-window@7.3.0)
+        version: 0.21.1(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))(workbox-build@7.0.0)(workbox-window@7.3.0)
       vite-plugin-svgr:
         specifier: ^4.3.0
-        version: 4.3.0(@rollup/wasm-node@4.29.1)(typescript@5.7.2)(vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1))
+        version: 4.3.0(@rollup/wasm-node@4.31.0)(typescript@5.7.2)(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))
 
 packages:
 
@@ -1128,6 +1128,11 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  '@rollup/wasm-node@4.31.0':
+    resolution: {integrity: sha512-4N3ttsYqUIjCVHXRZ/AMJoaEONWhXFop8h6tOkX+n+PyuYAZFp+QRNRfD+VAn5NmUnLzwwmT4GaKFu5RAQSEvg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
@@ -1285,6 +1290,84 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20'
 
+  '@tailwindcss/node@4.0.0':
+    resolution: {integrity: sha512-tfG2uBvo6j6kDIPmntxwXggCOZAt7SkpAXJ6pTIYirNdk5FBqh/CZZ9BZPpgcl/tNFLs6zc4yghM76sqiELG9g==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.0':
+    resolution: {integrity: sha512-EAhjU0+FIdyGPR+7MbBWubLLPtmOu+p7c2egTTFBRk/n//zYjNvVK0WhcBK5Y7oUB5mo4EjA2mCbY7dcEMWSRw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.0':
+    resolution: {integrity: sha512-hdz4xnSWS11cIp+7ye+3dGHqs0X33z+BXXTtgPOguDWVa+TdXUzwxonklSzf5wlJFuot3dv5eWzhlNai0oYYQg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.0':
+    resolution: {integrity: sha512-+dOUUaXTkPKKhtUI9QtVaYg+MpmLh2CN0dHohiYXaBirEyPMkjaT0zbRgzQlNnQWjCVVXPQluIEb0OMEjSTH+Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.0':
+    resolution: {integrity: sha512-CJhGDhxnrmu4SwyC62fA+wP24MhA/TZlIhRHqg1kRuIHoGoVR2uSSm1qxTxU37tSSZj8Up0q6jsBJCAP4k7rgQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.0':
+    resolution: {integrity: sha512-Wy7Av0xzXfY2ujZBcYy4+7GQm25/J1iHvlQU2CfwdDCuPWfIjYzR6kggz+uVdSJyKV2s64znchBxRE8kV4uXSA==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.0':
+    resolution: {integrity: sha512-srwBo2l6pvM0swBntc1ucuhGsfFOLkqPRFQ3dWARRTfSkL1U9nAsob2MKc/n47Eva/W9pZZgMOuf7rDw8pK1Ew==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.0':
+    resolution: {integrity: sha512-abhusswkduYWuezkBmgo0K0/erGq3M4Se5xP0fhc/0dKs0X/rJUYYCFWntHb3IGh3aVzdQ0SXJs93P76DbUqtw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.0':
+    resolution: {integrity: sha512-hGtRYIUEx377/HlU49+jvVKKwU1MDSKYSMMs0JFO2Wp7LGxk5+0j5+RBk9NFnmp/lbp32yPTgIOO5m1BmDq36A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.0':
+    resolution: {integrity: sha512-7xgQgSAThs0I14VAgmxpJnK6XFSZBxHMGoDXkLyYkEnu+8WRQMbCP93dkCUn2PIv+Q+JulRgc00PJ09uORSLXQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.0':
+    resolution: {integrity: sha512-qEcgTIPcWY5ZE7f6VxQ/JPrSFMcehzVIlZj7sGE3mVd5YWreAT+Fl1vSP8q2pjnWXn0avZG3Iw7a2hJQAm+fTQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.0':
+    resolution: {integrity: sha512-bqT0AY8RXb8GMDy28JtngvqaOSB2YixbLPLvUo6I6lkvvUwA6Eqh2Tj60e2Lh7O/k083f8tYiB0WEK4wmTI7Jg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.0':
+    resolution: {integrity: sha512-W3FjpJgy4VV1JiL7iBYDf2n/WkeDg1Il+0Q7eWnqPyvkPPCo/Mbwc5BiaT7dfBNV6tQKAhVE34rU5xl8pSl50w==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/vite@4.0.0':
+    resolution: {integrity: sha512-4uukMiU9gHui8KMPMdWic5SP1O/tmQ1NFSRNrQWmcop5evAVl/LZ6/LuWL3quEiecp2RBcRWwqJrG+mFXlRlew==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6
+
   '@tanstack/history@1.90.0':
     resolution: {integrity: sha512-riNhDGm+fAwxgZRJ0J/36IZis1UDHsDCNIxfEodbw6BgTWJr0ah+G20V4HT91uBXiCqYFvX3somlfTLhS5yHDA==}
     engines: {node: '>=12'}
@@ -1868,6 +1951,11 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -1919,6 +2007,10 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  enhanced-resolve@5.18.0:
+    resolution: {integrity: sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==}
+    engines: {node: '>=10.13.0'}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -2550,6 +2642,10 @@ packages:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
 
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
+    hasBin: true
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -2623,6 +2719,70 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lightningcss-darwin-arm64@1.29.1:
+    resolution: {integrity: sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.29.1:
+    resolution: {integrity: sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.29.1:
+    resolution: {integrity: sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    resolution: {integrity: sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    resolution: {integrity: sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.29.1:
+    resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    resolution: {integrity: sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.29.1:
+    resolution: {integrity: sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -3304,6 +3464,13 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tailwindcss@4.0.0:
+    resolution: {integrity: sha512-ULRPI3A+e39T7pSaf1xoi58AqqJxVCLg8F/uM5A3FadUbnyDTgltVnXJvdkTjwCOGA6NazqHVcwPJC5h2vRYVQ==}
+
+  tapable@2.2.1:
+    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+    engines: {node: '>=6'}
+
   temp-dir@2.0.0:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
     engines: {node: '>=8'}
@@ -4750,45 +4917,45 @@ snapshots:
     dependencies:
       react: 19.0.0
 
-  '@rollup/plugin-babel@5.3.1(@babel/core@7.26.0)(@rollup/wasm-node@4.29.1)':
+  '@rollup/plugin-babel@5.3.1(@babel/core@7.26.0)(@rollup/wasm-node@4.31.0)':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/helper-module-imports': 7.25.9
-      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.29.1)
-      rollup: '@rollup/wasm-node@4.29.1'
+      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.31.0)
+      rollup: '@rollup/wasm-node@4.31.0'
     transitivePeerDependencies:
       - supports-color
 
-  '@rollup/plugin-node-resolve@11.2.1(@rollup/wasm-node@4.29.1)':
+  '@rollup/plugin-node-resolve@11.2.1(@rollup/wasm-node@4.31.0)':
     dependencies:
-      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.29.1)
+      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.31.0)
       '@types/resolve': 1.17.1
       builtin-modules: 3.3.0
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.10
-      rollup: '@rollup/wasm-node@4.29.1'
+      rollup: '@rollup/wasm-node@4.31.0'
 
-  '@rollup/plugin-replace@2.4.2(@rollup/wasm-node@4.29.1)':
+  '@rollup/plugin-replace@2.4.2(@rollup/wasm-node@4.31.0)':
     dependencies:
-      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.29.1)
+      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.31.0)
       magic-string: 0.25.9
-      rollup: '@rollup/wasm-node@4.29.1'
+      rollup: '@rollup/wasm-node@4.31.0'
 
-  '@rollup/pluginutils@3.1.0(@rollup/wasm-node@4.29.1)':
+  '@rollup/pluginutils@3.1.0(@rollup/wasm-node@4.31.0)':
     dependencies:
       '@types/estree': 0.0.39
       estree-walker: 1.0.1
       picomatch: 2.3.1
-      rollup: '@rollup/wasm-node@4.29.1'
+      rollup: '@rollup/wasm-node@4.31.0'
 
-  '@rollup/pluginutils@5.1.3(@rollup/wasm-node@4.29.1)':
+  '@rollup/pluginutils@5.1.3(@rollup/wasm-node@4.31.0)':
     dependencies:
       '@types/estree': 1.0.6
       estree-walker: 2.0.2
       picomatch: 4.0.2
     optionalDependencies:
-      rollup: '@rollup/wasm-node@4.29.1'
+      rollup: '@rollup/wasm-node@4.31.0'
 
   '@rollup/wasm-node@4.29.1':
     dependencies:
@@ -4796,6 +4963,12 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  '@rollup/wasm-node@4.31.0':
+    dependencies:
+      '@types/estree': 1.0.6
+    optionalDependencies:
+      fsevents: 2.3.3
+
   '@rtsao/scc@1.1.0': {}
 
   '@surma/rollup-plugin-off-main-thread@2.2.3':
@@ -4932,10 +5105,71 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
-  '@tailwindcss/forms@0.5.9(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.9.3(@swc/helpers@0.5.15))(@types/node@22.10.3)(typescript@5.7.2)))':
+  '@tailwindcss/forms@0.5.9(tailwindcss@4.0.0)':
     dependencies:
       mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.9.3(@swc/helpers@0.5.15))(@types/node@22.10.3)(typescript@5.7.2))
+      tailwindcss: 4.0.0
+
+  '@tailwindcss/node@4.0.0':
+    dependencies:
+      enhanced-resolve: 5.18.0
+      jiti: 2.4.2
+      tailwindcss: 4.0.0
+
+  '@tailwindcss/oxide-android-arm64@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.0':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.0
+      '@tailwindcss/oxide-darwin-arm64': 4.0.0
+      '@tailwindcss/oxide-darwin-x64': 4.0.0
+      '@tailwindcss/oxide-freebsd-x64': 4.0.0
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.0
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.0
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.0
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.0
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.0
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.0
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.0
+
+  '@tailwindcss/vite@4.0.0(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))':
+    dependencies:
+      '@tailwindcss/node': 4.0.0
+      '@tailwindcss/oxide': 4.0.0
+      lightningcss: 1.29.1
+      tailwindcss: 4.0.0
+      vite: 6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1)
 
   '@tanstack/history@1.90.0': {}
 
@@ -5132,10 +5366,10 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-react-swc@3.7.2(@swc/helpers@0.5.15)(vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1))':
+  '@vitejs/plugin-react-swc@3.7.2(@swc/helpers@0.5.15)(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))':
     dependencies:
       '@swc/core': 1.9.3(@swc/helpers@0.5.15)
-      vite: 6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1)
+      vite: 6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1)
     transitivePeerDependencies:
       - '@swc/helpers'
 
@@ -5590,6 +5824,8 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  detect-libc@1.0.3: {}
+
   didyoumean@1.2.2: {}
 
   diff@4.0.2: {}
@@ -5636,6 +5872,11 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  enhanced-resolve@5.18.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+
   entities@4.5.0: {}
 
   error-ex@1.3.2:
@@ -6490,6 +6731,8 @@ snapshots:
 
   jiti@1.21.7: {}
 
+  jiti@2.4.2: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@4.1.0:
@@ -6548,6 +6791,51 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lightningcss-darwin-arm64@1.29.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.29.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.29.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    optional: true
+
+  lightningcss@1.29.1:
+    dependencies:
+      detect-libc: 1.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.1
+      lightningcss-darwin-x64: 1.29.1
+      lightningcss-freebsd-x64: 1.29.1
+      lightningcss-linux-arm-gnueabihf: 1.29.1
+      lightningcss-linux-arm64-gnu: 1.29.1
+      lightningcss-linux-arm64-musl: 1.29.1
+      lightningcss-linux-x64-gnu: 1.29.1
+      lightningcss-linux-x64-musl: 1.29.1
+      lightningcss-win32-arm64-msvc: 1.29.1
+      lightningcss-win32-x64-msvc: 1.29.1
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -7015,11 +7303,11 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
-  rollup-plugin-terser@7.0.2(@rollup/wasm-node@4.29.1):
+  rollup-plugin-terser@7.0.2(@rollup/wasm-node@4.31.0):
     dependencies:
       '@babel/code-frame': 7.26.2
       jest-worker: 26.6.2
-      rollup: '@rollup/wasm-node@4.29.1'
+      rollup: '@rollup/wasm-node@4.31.0'
       serialize-javascript: 4.0.0
       terser: 5.37.0
 
@@ -7292,6 +7580,10 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
+  tailwindcss@4.0.0: {}
+
+  tapable@2.2.1: {}
+
   temp-dir@2.0.0: {}
 
   tempy@0.6.0:
@@ -7525,37 +7817,38 @@ snapshots:
 
   v8-compile-cache-lib@3.0.1: {}
 
-  vite-plugin-pwa@0.21.1(vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1))(workbox-build@7.0.0)(workbox-window@7.3.0):
+  vite-plugin-pwa@0.21.1(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))(workbox-build@7.0.0)(workbox-window@7.3.0):
     dependencies:
       debug: 4.4.0
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.10
-      vite: 6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1)
+      vite: 6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1)
       workbox-build: 7.0.0
       workbox-window: 7.3.0
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-svgr@4.3.0(@rollup/wasm-node@4.29.1)(typescript@5.7.2)(vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1)):
+  vite-plugin-svgr@4.3.0(@rollup/wasm-node@4.31.0)(typescript@5.7.2)(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1)):
     dependencies:
-      '@rollup/pluginutils': 5.1.3(@rollup/wasm-node@4.29.1)
+      '@rollup/pluginutils': 5.1.3(@rollup/wasm-node@4.31.0)
       '@svgr/core': 8.1.0(typescript@5.7.2)
       '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.7.2))
-      vite: 6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1)
+      vite: 6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1):
+  vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1):
     dependencies:
       esbuild: 0.24.2
       postcss: 8.4.49
-      rollup: '@rollup/wasm-node@4.29.1'
+      rollup: '@rollup/wasm-node@4.31.0'
     optionalDependencies:
       '@types/node': 22.10.3
       fsevents: 2.3.3
-      jiti: 1.21.7
+      jiti: 2.4.2
+      lightningcss: 1.29.1
       terser: 5.37.0
       yaml: 2.6.1
 
@@ -7648,9 +7941,9 @@ snapshots:
       '@babel/core': 7.26.0
       '@babel/preset-env': 7.26.0(@babel/core@7.26.0)
       '@babel/runtime': 7.26.0
-      '@rollup/plugin-babel': 5.3.1(@babel/core@7.26.0)(@rollup/wasm-node@4.29.1)
-      '@rollup/plugin-node-resolve': 11.2.1(@rollup/wasm-node@4.29.1)
-      '@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.29.1)
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.26.0)(@rollup/wasm-node@4.31.0)
+      '@rollup/plugin-node-resolve': 11.2.1(@rollup/wasm-node@4.31.0)
+      '@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.31.0)
       '@surma/rollup-plugin-off-main-thread': 2.2.3
       ajv: 8.17.1
       common-tags: 1.8.2
@@ -7659,8 +7952,8 @@ snapshots:
       glob: 7.2.3
       lodash: 4.17.21
       pretty-bytes: 5.6.0
-      rollup: '@rollup/wasm-node@4.29.1'
-      rollup-plugin-terser: 7.0.2(@rollup/wasm-node@4.29.1)
+      rollup: '@rollup/wasm-node@4.31.0'
+      rollup-plugin-terser: 7.0.2(@rollup/wasm-node@4.31.0)
       source-map: 0.8.0-beta.0
       stringify-object: 3.3.0
       strip-comments: 2.0.1
diff --git a/web/postcss.config.cjs b/web/postcss.config.cjs
deleted file mode 100644
index 703230e..0000000
--- a/web/postcss.config.cjs
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  plugins: {
-    "tailwindcss/nesting": {},
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
\ No newline at end of file
diff --git a/web/src/components/Checkbox.tsx b/web/src/components/Checkbox.tsx
index bd2e8f6..d2fc359 100644
--- a/web/src/components/Checkbox.tsx
+++ b/web/src/components/Checkbox.tsx
@@ -65,7 +65,7 @@ export const Checkbox = ({
         className={classNames(
           value ? "translate-x-6" : "translate-x-[0.15rem]",
           disabled ? "bg-gray-650 dark:bg-gray-800" : "bg-white",
-          "inline-flex items-center align-center h-4 w-4 transform rounded-full transition ring-0 shadow"
+          "inline-flex items-center align-center h-4 w-4 transform rounded-full transition ring-0 shadow-sm"
         )}
       >
         {value
diff --git a/web/src/components/alerts/ErrorPage.tsx b/web/src/components/alerts/ErrorPage.tsx
index 6021c66..fe8a91e 100644
--- a/web/src/components/alerts/ErrorPage.tsx
+++ b/web/src/components/alerts/ErrorPage.tsx
@@ -38,7 +38,7 @@ export const ErrorPage = ({ error, reset }: ErrorPageProps) => {
 
   return (
     <div className="min-h-screen flex flex-col justify-center py-12 px-2 sm:px-6 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-screen-md md:max-w-screen-lg lg:max-w-screen-xl">
+      <div className="sm:mx-auto sm:w-full sm:max-w-(--breakpoint-md) md:max-w-(--breakpoint-lg) lg:max-w-(--breakpoint-xl)">
         <h1 className="text-3xl font-bold leading-6 text-gray-900 dark:text-gray-200 mt-4 mb-3">
           {pageTitle}
         </h1>
@@ -47,14 +47,14 @@ export const ErrorPage = ({ error, reset }: ErrorPageProps) => {
           {" "}
           <ExternalLink
             href="https://github.com/autobrr/autobrr"
-            className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
+            className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black dark:hover:text-gray-100"
           >
             GitHub page
           </ExternalLink>
           {" or to "}
           <ExternalLink
             href="https://discord.gg/WQ2eUycxyT"
-            className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
+            className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black dark:hover:text-gray-100"
           >
             our official Discord channel
           </ExternalLink>
@@ -87,7 +87,7 @@ export const ErrorPage = ({ error, reset }: ErrorPageProps) => {
           </span>
           <button
             type="button"
-            className="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-red-800 dark:hover:bg-red-900"
+            className="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-hidden focus:ring-red-300 font-medium rounded-lg text-sm px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-red-800 dark:hover:bg-red-900"
             onClick={(event) => {
               event.preventDefault();
               reset();
diff --git a/web/src/components/alerts/NotFound.tsx b/web/src/components/alerts/NotFound.tsx
index e912eaa..bfde09a 100644
--- a/web/src/components/alerts/NotFound.tsx
+++ b/web/src/components/alerts/NotFound.tsx
@@ -28,14 +28,14 @@ export const NotFound = () => {
         {" "}
         <ExternalLink
           href="https://github.com/autobrr/autobrr"
-          className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
+          className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black dark:hover:text-gray-100"
         >
           GitHub page
         </ExternalLink>
         {" or to "}
         <ExternalLink
           href="https://discord.gg/WQ2eUycxyT"
-          className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
+          className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black dark:hover:text-gray-100"
         >
           our official Discord channel
         </ExternalLink>
@@ -47,7 +47,7 @@ export const NotFound = () => {
       <div className="flex justify-center">
         <Link to="/">
           <button
-            className="w-48 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+            className="w-48 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-xs text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
           >
             Back to Dashboard
           </button>
diff --git a/web/src/components/alerts/Warning.tsx b/web/src/components/alerts/Warning.tsx
index 00e0b1f..76c3482 100644
--- a/web/src/components/alerts/Warning.tsx
+++ b/web/src/components/alerts/Warning.tsx
@@ -20,7 +20,7 @@ export const WarningAlert = ({ text, alert, colors, className }: WarningAlertPro
       colors ?? "text-amber-800 bg-amber-100 border border-amber-700 dark:border-none dark:bg-amber-200 dark:text-amber-800"
     )}
     role="alert">
-    <svg aria-hidden="true" className="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor"
+    <svg aria-hidden="true" className="shrink-0 inline w-5 h-5 mr-3" fill="currentColor"
       viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
       <path fillRule="evenodd"
         d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
diff --git a/web/src/components/data-table/Cells.tsx b/web/src/components/data-table/Cells.tsx
index d490bed..b0a23bf 100644
--- a/web/src/components/data-table/Cells.tsx
+++ b/web/src/components/data-table/Cells.tsx
@@ -179,7 +179,7 @@ const RetryActionButton = ({ status }: RetryActionButtonProps) => {
   };
 
   return (
-    <button className="flex items-center px-1.5 py-1 ml-2 rounded transition border-gray-500 bg-gray-250 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600" onClick={replayAction}>
+    <button className="flex items-center px-1.5 py-1 ml-2 rounded-sm transition border-gray-500 bg-gray-250 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600" onClick={replayAction}>
       <span className="mr-1.5">Retry</span>
       {mutation.isPending
         ? <RingResizeSpinner className="text-blue-500 w-4 h-4 iconHeight" aria-hidden="true" />
@@ -299,7 +299,7 @@ export const ReleaseStatusCell = ({ row }: CellContext<Release, unknown>) => (
         key={idx}
         className={classNames(
           StatusCellMap[v.status].colors,
-          "mr-1 inline-flex items-center rounded text-xs cursor-pointer"
+          "mr-1 inline-flex items-center rounded-sm text-xs cursor-pointer"
         )}
       >
         <Tooltip
diff --git a/web/src/components/emptystates/index.tsx b/web/src/components/emptystates/index.tsx
index fd3fd45..092d565 100644
--- a/web/src/components/emptystates/index.tsx
+++ b/web/src/components/emptystates/index.tsx
@@ -28,7 +28,7 @@ export const EmptySimple = ({
         <button
           type="button"
           onClick={buttonAction}
-          className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+          className="inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
         >
           <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
           {buttonText}
@@ -51,7 +51,7 @@ export function EmptyListState({ text, buttonText, buttonOnClick }: EmptyListSta
       {buttonText && buttonOnClick && (
         <button
           type="button"
-          className="relative inline-flex items-center px-4 py-2 mt-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+          className="relative inline-flex items-center px-4 py-2 mt-4 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
           onClick={buttonOnClick}
         >
           {buttonText}
diff --git a/web/src/components/fields/text.tsx b/web/src/components/fields/text.tsx
index e0e0300..d9b4643 100644
--- a/web/src/components/fields/text.tsx
+++ b/web/src/components/fields/text.tsx
@@ -60,19 +60,19 @@ export const KeyField = ({ value }: KeyFieldProps) => {
 
   return (
     <div className="sm:col-span-2 w-full">
-      <div className="flex rounded-md shadow-sm">
-        <div className="relative flex items-stretch flex-grow focus-within:z-10">
+      <div className="flex rounded-md shadow-xs">
+        <div className="relative flex items-stretch grow focus-within:z-10">
           <input
             id="keyfield"
             type={isVisible ? "text" : "password"}
             value={value}
             readOnly={true}
-            className="focus:outline-none dark:focus:border-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 block w-full rounded-none rounded-l-md sm:text-sm border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
+            className="focus:outline-hidden dark:focus:border-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 block w-full rounded-none rounded-l-md sm:text-sm border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
           />
         </div>
         <button
           type="button"
-          className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-700 hover:bg-gray-100  text-sm font-medium text-gray-700 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700  focus:outline-none"
+          className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-700 hover:bg-gray-100  text-sm font-medium text-gray-700 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700  focus:outline-hidden"
           onClick={toggleVisibility}
           title="show"
         >
@@ -80,7 +80,7 @@ export const KeyField = ({ value }: KeyFieldProps) => {
         </button>
         <button
           type="button"
-          className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-700 hover:bg-gray-100  text-sm font-medium rounded-r-md text-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none"
+          className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-700 hover:bg-gray-100  text-sm font-medium rounded-r-md text-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-hidden"
           onClick={handleCopyClick}
           title="Copy to clipboard"
         >
diff --git a/web/src/components/header/Header.tsx b/web/src/components/header/Header.tsx
index 4da2234..4e1f5d2 100644
--- a/web/src/components/header/Header.tsx
+++ b/web/src/components/header/Header.tsx
@@ -51,11 +51,11 @@ export const Header = () => {
   return (
     <Disclosure
       as="nav"
-      className="bg-gradient-to-b from-gray-100 dark:from-gray-925"
+      className="bg-linear-to-b from-gray-100 dark:from-gray-925"
     >
       {({ open }) => (
         <>
-          <div className="max-w-screen-xl mx-auto sm:px-6 lg:px-8">
+          <div className="max-w-(--breakpoint-xl) mx-auto sm:px-6 lg:px-8">
             <div className="border-b border-gray-300 dark:border-gray-775">
               <div className="flex items-center justify-between h-16 px-4 sm:px-0">
                 <LeftNav />
@@ -82,7 +82,7 @@ export const Header = () => {
 
             {data?.html_url && (
               <ExternalLink href={data.html_url}>
-                <div className="flex mt-4 py-2 bg-blue-500 rounded justify-center">
+                <div className="flex mt-4 py-2 bg-blue-500 rounded-sm justify-center">
                   <MegaphoneIcon className="h-6 w-6 text-blue-100" />
                   <span className="text-blue-100 font-medium mx-3">New update available!</span>
                   <span className="inline-flex items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium text-blue-800">{data?.name}</span>
diff --git a/web/src/components/header/LeftNav.tsx b/web/src/components/header/LeftNav.tsx
index d4344c2..8052355 100644
--- a/web/src/components/header/LeftNav.tsx
+++ b/web/src/components/header/LeftNav.tsx
@@ -18,7 +18,7 @@ import Logo from "@app/logo.svg?react";
 
 export const LeftNav = () => (
   <div className="flex items-center">
-    <div className="flex-shrink-0 flex items-center">
+    <div className="shrink-0 flex items-center">
       <Link to="/">
         <Logo className="h-10" />
       </Link>
diff --git a/web/src/components/header/MobileNav.tsx b/web/src/components/header/MobileNav.tsx
index 59c9c5c..c738201 100644
--- a/web/src/components/header/MobileNav.tsx
+++ b/web/src/components/header/MobileNav.tsx
@@ -26,7 +26,7 @@ export const MobileNav = (props: RightNavProps) => (
             return (
               <span className={
                 classNames(
-                  "shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base",
+                  "shadow-xs border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base",
                 isActive
                 ? "underline underline-offset-2 decoration-2 decoration-sky-500 font-bold text-black"
                 : "font-medium"
@@ -43,7 +43,7 @@ export const MobileNav = (props: RightNavProps) => (
           e.preventDefault();
           props.logoutMutation();
         }}
-        className="w-full shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium text-left"
+        className="w-full shadow-xs border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium text-left"
       >
         Logout
       </button>
diff --git a/web/src/components/header/RightNav.tsx b/web/src/components/header/RightNav.tsx
index 57ea3b3..3b31e7a 100644
--- a/web/src/components/header/RightNav.tsx
+++ b/web/src/components/header/RightNav.tsx
@@ -35,7 +35,7 @@ export const RightNav = (props: RightNavProps) => {
         <div className="mt-1 items-center">
           <button
             onClick={toggleTheme}
-            className="p-1 rounded-full focus:outline-none focus:none transition duration-100 ease-out transform hover:bg-gray-200 dark:hover:bg-gray-800 hover:scale-100"
+            className="p-1 rounded-full focus:outline-hidden focus:none transition duration-100 ease-out transform hover:bg-gray-200 dark:hover:bg-gray-800 hover:scale-100"
             title={settings.darkTheme ? "Switch to light mode (currently dark mode)" : "Switch to dark mode (currently light mode)"}
           >
             {settings.darkTheme ? (
@@ -89,7 +89,7 @@ export const RightNav = (props: RightNavProps) => {
               >
                 <MenuItems
                   static
-                  className="origin-top-right absolute right-0 mt-2 w-48 z-10 divide-y divide-gray-100 dark:divide-gray-750 rounded-md shadow-lg bg-white dark:bg-gray-800 border border-gray-250 dark:border-gray-775 focus:outline-none"
+                  className="origin-top-right absolute right-0 mt-2 w-48 z-10 divide-y divide-gray-100 dark:divide-gray-750 rounded-md shadow-lg bg-white dark:bg-gray-800 border border-gray-250 dark:border-gray-775 focus:outline-hidden"
                 >
                   <MenuItem>
                     {({ active }) => (
diff --git a/web/src/components/inputs/common.tsx b/web/src/components/inputs/common.tsx
index 5fda249..e3b4239 100644
--- a/web/src/components/inputs/common.tsx
+++ b/web/src/components/inputs/common.tsx
@@ -42,8 +42,8 @@ export const RequiredField = ({ required }: RequiredFieldProps) => (
 export const SelectInput = (props: InputProps) => (
   <components.Input
     {...props}
-    inputClassName="outline-none border-none shadow-none focus:ring-transparent"
-    className="text-gray-400 dark:text-gray-100"
+    inputClassName="outline-hidden border-none shadow-none focus:ring-transparent"
+    className="text-gray-400! dark:text-gray-100!"
     children={props.children}
   />
 );
@@ -51,7 +51,7 @@ export const SelectInput = (props: InputProps) => (
 export const SelectControl = (props: ControlProps) => (
   <components.Control
     {...props}
-    className="p-1 block w-full !bg-gray-100 dark:!bg-gray-850 border border-gray-300 dark:border-gray-700 dark:hover:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
+    className="p-1 block w-full bg-gray-100! dark:bg-gray-850! border border-gray-300 dark:border-gray-700! dark:hover:border-gray-600 rounded-md shadow-xs focus:outline-hidden focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
     children={props.children}
   />
 );
@@ -59,7 +59,7 @@ export const SelectControl = (props: ControlProps) => (
 export const SelectMenu = (props: MenuProps) => (
   <components.Menu
     {...props}
-    className="dark:bg-gray-800 border border-gray-300 dark:border-gray-700 dark:text-gray-400 rounded-md shadow-sm cursor-pointer"
+    className="dark:bg-gray-800! border border-gray-300 dark:border-gray-700 dark:text-gray-400 rounded-md shadow-xs cursor-pointer"
     children={props.children}
   />
 );
@@ -68,8 +68,8 @@ export const SelectOption = (props: OptionProps) => (
   <components.Option
     {...props}
     className={classNames(
-      "transition dark:hover:bg-gray-900 dark:focus:bg-gray-900",
-      props.isSelected ? "dark:bg-gray-875 dark:text-gray-200" : "dark:bg-gray-800 dark:text-gray-400"
+      "transition dark:hover:bg-gray-900! dark:focus:bg-gray-900!",
+      props.isSelected ? "dark:bg-gray-875! dark:text-gray-200" : "dark:bg-gray-800! dark:text-gray-400"
     )}
     children={props.children}
   />
@@ -78,13 +78,13 @@ export const SelectOption = (props: OptionProps) => (
 export const IndicatorSeparator = (props: IndicatorSeparatorProps) => (
   <components.IndicatorSeparator
     {...props}
-    className="!bg-gray-400 dark:!bg-gray-700"
+    className="bg-gray-400! dark:bg-gray-700!"
   />
 );
 
 export const DropdownIndicator = (props: DropdownIndicatorProps) => (
   <components.DropdownIndicator
     {...props}
-    className="!text-gray-400 dark:!text-gray-300"
+    className="text-gray-400! dark:text-gray-300!"
   />
 );
diff --git a/web/src/components/inputs/input_wide.tsx b/web/src/components/inputs/input_wide.tsx
index b0348a6..3b993ef 100644
--- a/web/src/components/inputs/input_wide.tsx
+++ b/web/src/components/inputs/input_wide.tsx
@@ -85,7 +85,7 @@ export const TextFieldWide = ({
               meta.touched && meta.error
                 ? "border-red-500 focus:ring-red-500 focus:border-red-500"
                 : "border-gray-300 dark:border-gray-700 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500",
-              "block w-full shadow-sm sm:text-sm rounded-md border py-2.5 dark:text-gray-100",
+              "block w-full shadow-xs sm:text-sm rounded-md border py-2.5 dark:text-gray-100",
               disabled ? "bg-gray-200 dark:bg-gray-700" : "bg-gray-100 dark:bg-gray-850 "
             )}
             placeholder={placeholder}
@@ -161,7 +161,7 @@ export const PasswordFieldWide = ({
                   meta.touched && meta.error
                     ? "border-red-500 focus:ring-red-500 focus:border-red-500"
                     : "border-gray-300 dark:border-gray-700 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500",
-                  "block w-full shadow-sm sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100 overflow-hidden pr-8"
+                  "block w-full shadow-xs sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100 overflow-hidden pr-8"
                 )}
                 placeholder={placeholder}
                 required={required}
@@ -232,7 +232,7 @@ export const NumberFieldWide = ({
               meta.touched && meta.error
                 ? "border-red-500 focus:ring-red-500 focus:border-red-500"
                 : "border-gray-300 dark:border-gray-700 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500",
-              "block w-full shadow-sm sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100"
+              "block w-full shadow-xs sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100"
             )}
             onWheel={(event) => {
               if (event.currentTarget === document.activeElement) {
diff --git a/web/src/components/inputs/radio.tsx b/web/src/components/inputs/radio.tsx
index 74505d1..804539e 100644
--- a/web/src/components/inputs/radio.tsx
+++ b/web/src/components/inputs/radio.tsx
@@ -66,7 +66,7 @@ function RadioFieldsetWide({ name, legend, options }: props) {
                             checked
                               ? "border-1 bg-blue-100 dark:bg-blue-900 border-blue-400 dark:border-blue-600 z-10"
                               : "border-gray-200 dark:border-gray-700",
-                            "relative border p-4 flex cursor-pointer focus:outline-none"
+                            "relative border p-4 flex cursor-pointer focus:outline-hidden"
                           )
                         }
                       >
@@ -77,7 +77,7 @@ function RadioFieldsetWide({ name, legend, options }: props) {
                                 checked
                                   ? "bg-blue-600 dark:bg-blue-500 border-transparent"
                                   : "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-300",
-                                "h-6 w-6 mt-1 cursor-pointer rounded-full border flex items-center justify-center flex-shrink-0"
+                                "h-6 w-6 mt-1 cursor-pointer rounded-full border flex items-center justify-center shrink-0"
                               )}
                               aria-hidden="true"
                             />
@@ -91,7 +91,7 @@ function RadioFieldsetWide({ name, legend, options }: props) {
                               >
                                 <div className="flex justify-between">
                                   {setting.label}
-                                  {setting.type && <span className="rounded bg-orange-500 text-orange-900 px-1 ml-2 text-sm">{setting.type}</span>}
+                                  {setting.type && <span className="rounded-sm bg-orange-500 text-orange-900 px-1 ml-2 text-sm">{setting.type}</span>}
                                 </div>
                               </Label>
                               <Description
diff --git a/web/src/components/inputs/select.tsx b/web/src/components/inputs/select.tsx
index 1656713..2229e3e 100644
--- a/web/src/components/inputs/select.tsx
+++ b/web/src/components/inputs/select.tsx
@@ -170,7 +170,7 @@ export function DownloadClientSelect({
                   Client
                 </Label>
                 <div className="mt-1 relative">
-                  <ListboxButton className="block w-full shadow-sm sm:text-sm rounded-md border py-2 pl-3 pr-10 text-left focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
+                  <ListboxButton className="block w-full shadow-xs sm:text-sm rounded-md border py-2 pl-3 pr-10 text-left focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
                     <span className="block truncate">
                       {field.value
                         ? clients.find((c) => c.id === field.value)?.name
@@ -192,7 +192,7 @@ export function DownloadClientSelect({
                   >
                     <ListboxOptions
                       static
-                      className="absolute z-10 mt-1 w-full border border-gray-400 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto focus:outline-none sm:text-sm"
+                      className="absolute z-10 mt-1 w-full border border-gray-400 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto focus:outline-hidden sm:text-sm"
                     >
                       {clients
                         .filter((c) => c.type === action.type)
@@ -300,7 +300,7 @@ export const Select = ({
                   ) : label}
                 </Label>
                 <div className="mt-1 relative">
-                  <ListboxButton className="block w-full relative shadow-sm sm:text-sm text-left rounded-md border pl-3 pr-10 py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
+                  <ListboxButton className="block w-full relative shadow-xs sm:text-sm text-left rounded-md border pl-3 pr-10 py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
                     <span className="block truncate">
                       {field.value
                         ? options.find((c) => c.value === field.value)?.label
@@ -324,7 +324,7 @@ export const Select = ({
                   >
                     <ListboxOptions
                       static
-                      className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100 focus:outline-none sm:text-sm"
+                      className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100 focus:outline-hidden sm:text-sm"
                     >
                       {options.map((opt) => (
                         <ListboxOption
@@ -399,7 +399,7 @@ export const SelectWide = ({
                     {label}
                   </Label>
                   <div className="w-full">
-                    <ListboxButton className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
+                    <ListboxButton className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-xs pl-3 pr-10 py-2 text-left cursor-default focus:outline-hidden focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
                       <span className="block truncate">
                         {field.value
                           ? options.find((c) => c.value === field.value)?.label
@@ -423,7 +423,7 @@ export const SelectWide = ({
                     >
                       <ListboxOptions
                         static
-                        className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+                        className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-hidden sm:text-sm"
                       >
                         {options.map((opt) => (
                           <ListboxOption
@@ -512,7 +512,7 @@ export const AgeSelect = ({
         {({ open }) => (
           <div>
             <div className="mt-0 relative">
-              <ListboxButton className="block w-full relative shadow-sm text-sm text-left rounded-md border pl-3 pr-10 py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-400">
+              <ListboxButton className="block w-full relative shadow-xs text-sm text-left rounded-md border pl-3 pr-10 py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-400">
                 <span className="block truncate text-gray-500 dark:text-white">
                   {duration ? options.find(opt => opt.value === duration)?.label : 'Select...'}
                 </span>
@@ -527,7 +527,7 @@ export const AgeSelect = ({
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <ListboxOptions className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-white focus:outline-none text-sm">
+                <ListboxOptions className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-white focus:outline-hidden text-sm">
                   {options.map((option) => (
                     <ListboxOption
                       key={option.value}
diff --git a/web/src/components/inputs/text.tsx b/web/src/components/inputs/text.tsx
index e86b0ea..7a8e28c 100644
--- a/web/src/components/inputs/text.tsx
+++ b/web/src/components/inputs/text.tsx
@@ -121,7 +121,7 @@ export const TextInput = <TFormValues extends Record<string, unknown>>({
           name={name}
           aria-invalid={hasError}
           className={classNames(
-            "block mt-1 w-full shadow-sm sm:text-sm rounded-md py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100",
+            "block mt-1 w-full shadow-xs sm:text-sm rounded-md py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100",
             hasError
               ? "border-red-500 focus:ring-red-500 focus:border-red-500"
               : "border-gray-300 dark:border-gray-700 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500"
@@ -175,7 +175,7 @@ export const PasswordInput = <TFormValues extends Record<string, unknown>>({
             aria-invalid={hasError}
             type={isVisible ? "text" : "password"}
             className={classNames(
-              "block mt-1 w-full shadow-sm sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100",
+              "block mt-1 w-full shadow-xs sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100",
               hasError
                 ? "border-red-500 focus:ring-red-500 focus:border-red-500"
                 : "border-gray-300 dark:border-gray-700 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500"
diff --git a/web/src/components/modals/index.tsx b/web/src/components/modals/index.tsx
index 3d6dfb0..25a5352 100644
--- a/web/src/components/modals/index.tsx
+++ b/web/src/components/modals/index.tsx
@@ -63,7 +63,7 @@ const ModalLower = ({ isOpen, isLoading, toggle, deleteAction }: ModalLowerProps
       <>
         <button
           type="button"
-          className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+          className="w-full inline-flex justify-center rounded-md border border-transparent shadow-xs px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
           onClick={(e) => {
             e.preventDefault();
             if (isOpen) {
@@ -76,7 +76,7 @@ const ModalLower = ({ isOpen, isLoading, toggle, deleteAction }: ModalLowerProps
         </button>
         <button
           type="button"
-          className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+          className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-xs px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
           onClick={(e) => {
             e.preventDefault();
             toggle();
@@ -183,7 +183,7 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
                 <input
                   type="text"
                   data-autofocus
-                  className="w-96 shadow-sm sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-400 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 dark:text-gray-100"
+                  className="w-96 shadow-xs sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-400 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 dark:text-gray-100"
                   placeholder="Type 'I understand' to enable the button"
                   value={inputValue}
                   onChange={(e) => setInputValue(e.target.value)}
@@ -205,14 +205,14 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
                       disabled={!isInputCorrect}
                       className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 ${
                         isInputCorrect ? "bg-red-600 text-white hover:bg-red-700" : "bg-gray-300"
-                      } text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm`}
+                      } text-base font-medium focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm`}
                       onClick={handleForceRun}
                     >
                       Force Run
                     </button>
                     <button
                       type="button"
-                      className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-xs px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={handleCancel}
                     >
                       Cancel
diff --git a/web/src/components/notifications/Toast.tsx b/web/src/components/notifications/Toast.tsx
index 135a9e4..a58720a 100644
--- a/web/src/components/notifications/Toast.tsx
+++ b/web/src/components/notifications/Toast.tsx
@@ -23,7 +23,7 @@ const Toast: FC<Props> = ({ type, body, t }) => (
   >
     <div className="p-4">
       <div className="flex items-start">
-        <div className="flex-shrink-0">
+        <div className="shrink-0">
           {type === "success" && <CheckCircleIcon className="h-6 w-6 text-green-400" aria-hidden="true" />}
           {type === "error" && <ExclamationCircleIcon className="h-6 w-6 text-red-400" aria-hidden="true" />}
           {type === "warning" && <ExclamationTriangleIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />}
@@ -38,9 +38,9 @@ const Toast: FC<Props> = ({ type, body, t }) => (
           </p>
           <span className="mt-1 text-sm text-gray-500 dark:text-gray-400">{body}</span>
         </div>
-        <div className="ml-4 flex-shrink-0 flex">
+        <div className="ml-4 shrink-0 flex">
           <button
-            className="bg-white dark:bg-gray-700 rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+            className="bg-white dark:bg-gray-700 rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
             onClick={() => {
               toast.dismiss(t?.id);
             }}
diff --git a/web/src/components/panels/index.tsx b/web/src/components/panels/index.tsx
index c025e91..14f2e39 100644
--- a/web/src/components/panels/index.tsx
+++ b/web/src/components/panels/index.tsx
@@ -84,7 +84,7 @@ function SlideOver<DataType extends FormikValues>({
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
-              <div className="w-screen max-w-2xl dark:border-gray-700 border-l">
+              <div className="w-screen max-w-2xl">
 
                 <Formik
                   initialValues={initialValues}
@@ -113,7 +113,7 @@ function SlideOver<DataType extends FormikValues>({
                             <div className="h-7 flex items-center">
                               <button
                                 type="button"
-                                className="bg-white dark:bg-gray-900 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                                className="bg-white dark:bg-gray-900 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
@@ -128,12 +128,12 @@ function SlideOver<DataType extends FormikValues>({
                         ) : null}
                       </div>
 
-                      <div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
+                      <div className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
                         <div className={classNames(type === "CREATE" ? "justify-end" : "justify-between", "space-x-3 flex")}>
                           {type === "UPDATE" && (
                             <button
                               type="button"
-                              className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-white bg-red-100 dark:bg-red-700 hover:bg-red-200 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
+                              className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-white bg-red-100 dark:bg-red-700 hover:bg-red-200 dark:hover:bg-red-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
                               onClick={toggleDeleteModal}
                             >
                               Remove
@@ -154,7 +154,7 @@ function SlideOver<DataType extends FormikValues>({
                                       ? "text-red-500 border-red-500 bg-red-50"
                                       : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:border-rose-700 active:bg-rose-700",
                                   isTesting ? "cursor-not-allowed" : "",
-                                  "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                                  "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-xs text-sm transition ease-in-out duration-150 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                                 )}
                                 disabled={isTesting}
                                 onClick={(e) => {
@@ -195,7 +195,7 @@ function SlideOver<DataType extends FormikValues>({
 
                             <button
                               type="button"
-                              className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                              className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                               onClick={(e) => {
                                 e.preventDefault();
                                 toggle();
@@ -205,7 +205,7 @@ function SlideOver<DataType extends FormikValues>({
                             </button>
                             <button
                               type="button"
-                              className="ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                              className="ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                               onClick={(e) => {
                                 e.preventDefault();
                                 formRef.current?.submitForm();
diff --git a/web/src/forms/filters/FilterAddForm.tsx b/web/src/forms/filters/FilterAddForm.tsx
index 0be1c86..d8c8bd3 100644
--- a/web/src/forms/filters/FilterAddForm.tsx
+++ b/web/src/forms/filters/FilterAddForm.tsx
@@ -59,7 +59,7 @@ export function FilterAddForm({ isOpen, toggle }: AddFormProps) {
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
-              <div className="w-screen max-w-2xl border-l dark:border-gray-700">
+              <div className="w-screen max-w-2xl ">
 
                 <Formik
                   initialValues={{
@@ -88,7 +88,7 @@ export function FilterAddForm({ isOpen, toggle }: AddFormProps) {
                             <div className="h-7 flex items-center">
                               <button
                                 type="button"
-                                className="light:bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                                className="light:bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
@@ -124,7 +124,7 @@ export function FilterAddForm({ isOpen, toggle }: AddFormProps) {
                                     data-1p-ignore
                                     autoComplete="off"
                                     ref={inputRef}
-                                    className="block w-full shadow-sm sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
+                                    className="block w-full shadow-xs sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
                                   />
 
                                   {meta.touched && meta.error &&
@@ -138,18 +138,18 @@ export function FilterAddForm({ isOpen, toggle }: AddFormProps) {
                       </div>
 
                       <div
-                        className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
+                        className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
                         <div className="space-x-3 flex justify-end">
                           <button
                             type="button"
-                            className="bg-white dark:bg-gray-800 py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="bg-white dark:bg-gray-800 py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                             onClick={toggle}
                           >
                             Cancel
                           </button>
                           <button
                             type="submit"
-                            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                           >
                             Create
                           </button>
diff --git a/web/src/forms/settings/APIKeyAddForm.tsx b/web/src/forms/settings/APIKeyAddForm.tsx
index 198477f..68bbe25 100644
--- a/web/src/forms/settings/APIKeyAddForm.tsx
+++ b/web/src/forms/settings/APIKeyAddForm.tsx
@@ -54,7 +54,7 @@ export function APIKeyAddForm({ isOpen, toggle }: AddFormProps) {
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
-              <div className="w-screen max-w-2xl border-l dark:border-gray-700">
+              <div className="w-screen max-w-2xl ">
                 <Formik
                   initialValues={{
                     name: "",
@@ -77,7 +77,7 @@ export function APIKeyAddForm({ isOpen, toggle }: AddFormProps) {
                             <div className="h-7 flex items-center">
                               <button
                                 type="button"
-                                className="light:bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                                className="light:bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
@@ -111,7 +111,7 @@ export function APIKeyAddForm({ isOpen, toggle }: AddFormProps) {
                                     type="text"
                                     data-1p-ignore
                                     autoComplete="off"
-                                    className="block w-full shadow-sm sm:text-sm focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 rounded-md border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
+                                    className="block w-full shadow-xs sm:text-sm focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 rounded-md border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
                                   />
                                   {meta.touched && meta.error && <span className="block mt-2 text-red-500">{meta.error}</span>}
                                 </div>
@@ -122,18 +122,18 @@ export function APIKeyAddForm({ isOpen, toggle }: AddFormProps) {
                       </div>
 
                       <div
-                        className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
+                        className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
                         <div className="space-x-3 flex justify-end">
                           <button
                             type="button"
-                            className="bg-white dark:bg-gray-800 py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="bg-white dark:bg-gray-800 py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                             onClick={toggle}
                           >
                             Cancel
                           </button>
                           <button
                             type="submit"
-                            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                           >
                             Create
                           </button>
diff --git a/web/src/forms/settings/DownloadClientForms.tsx b/web/src/forms/settings/DownloadClientForms.tsx
index fb8aea3..f67818a 100644
--- a/web/src/forms/settings/DownloadClientForms.tsx
+++ b/web/src/forms/settings/DownloadClientForms.tsx
@@ -418,7 +418,7 @@ function FormFieldsRulesBasic() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-5">
 
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Rules</DialogTitle>
         <p className="text-sm text-gray-500 dark:text-gray-400">
           Manage max downloads.
@@ -453,7 +453,7 @@ function FormFieldsRulesArr() {
 
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Download Client
         </DialogTitle>
@@ -476,7 +476,7 @@ function FormFieldsRulesQbit() {
 
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Rules
         </DialogTitle>
@@ -544,7 +544,7 @@ function FormFieldsRulesTransmission() {
 
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Rules
         </DialogTitle>
@@ -616,12 +616,12 @@ function DownloadClientFormButtons({
   };
 
   return (
-    <div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
+    <div className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
       <div className={classNames(type === "CREATE" ? "justify-end" : "justify-between", "space-x-3 flex")}>
         {type === "UPDATE" && (
           <button
             type="button"
-            className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-white bg-red-100 dark:bg-red-700 hover:bg-red-200 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
+            className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-white bg-red-100 dark:bg-red-700 hover:bg-red-200 dark:hover:bg-red-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
             onClick={toggleDeleteModal}
           >
             Remove
@@ -637,7 +637,7 @@ function DownloadClientFormButtons({
                   ? "text-red-500 border-red-500 bg-red-50"
                   : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 bg-white dark:bg-gray-700 hover:bg-gray-50 focus:border-rose-700 active:bg-rose-700",
               isTesting ? "cursor-not-allowed" : "",
-              "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+              "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-xs text-sm transition ease-in-out duration-150 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
             )}
             disabled={isTesting}
             // onClick={() => testClient(values)}
@@ -675,14 +675,14 @@ function DownloadClientFormButtons({
 
           <button
             type="button"
-            className="mr-4 bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+            className="mr-4 bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
             onClick={cancelFn}
           >
             Cancel
           </button>
           <button
             type="submit"
-            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
           >
             {type === "CREATE" ? "Create" : "Save"}
           </button>
@@ -778,7 +778,7 @@ export function DownloadClientAddForm({ isOpen, toggle }: AddFormProps) {
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
-              <div className="w-screen max-w-2xl border-l dark:border-gray-700">
+              <div className="w-screen max-w-2xl ">
                 <Formik
                   initialValues={initialValues}
                   onSubmit={onSubmit}
@@ -802,7 +802,7 @@ export function DownloadClientAddForm({ isOpen, toggle }: AddFormProps) {
                             <div className="h-7 flex items-center">
                               <button
                                 type="button"
-                                className="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                                className="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
@@ -964,7 +964,7 @@ export function DownloadClientUpdateForm({ isOpen, toggle, data: client}: Update
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
-              <div className="w-screen max-w-2xl border-l dark:border-gray-700">
+              <div className="w-screen max-w-2xl ">
                 <Formik
                   initialValues={initialValues}
                   onSubmit={onSubmit}
@@ -989,7 +989,7 @@ export function DownloadClientUpdateForm({ isOpen, toggle, data: client}: Update
                               <div className="h-7 flex items-center">
                                 <button
                                   type="button"
-                                  className="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                                  className="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                                   onClick={toggle}
                                 >
                                   <span className="sr-only">Close panel</span>
diff --git a/web/src/forms/settings/FeedForms.tsx b/web/src/forms/settings/FeedForms.tsx
index 0fb27a6..a0a7434 100644
--- a/web/src/forms/settings/FeedForms.tsx
+++ b/web/src/forms/settings/FeedForms.tsx
@@ -131,7 +131,7 @@ export function FeedUpdateForm({ isOpen, toggle, data}: UpdateFormProps<Feed>) {
         <div>
           <TextFieldWide name="name" label="Name" required={true} />
 
-          <div className="space-y-4 divide-y divide-gray-200 dark:divide-gray-700">
+          <div className="divide-y divide-gray-200 dark:divide-gray-700">
             <div
               className="py-4 flex items-center justify-between space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-4">
               <div>
@@ -161,7 +161,7 @@ export function FeedUpdateForm({ isOpen, toggle, data}: UpdateFormProps<Feed>) {
 function WarningLabel() {
   return (
     <div className="px-4 py-1">
-      <span className="w-full block px-2 py-2 bg-red-300 dark:bg-red-400 text-red-900 dark:text-red-900 text-sm rounded">
+      <span className="w-full block px-2 py-2 bg-red-300 dark:bg-red-400 text-red-900 dark:text-red-900 text-sm rounded-sm">
         <span className="font-semibold">
           Warning: Indexers might ban you for too low interval!
         </span>
diff --git a/web/src/forms/settings/IndexerForms.tsx b/web/src/forms/settings/IndexerForms.tsx
index 15e1d46..ce4a07b 100644
--- a/web/src/forms/settings/IndexerForms.tsx
+++ b/web/src/forms/settings/IndexerForms.tsx
@@ -51,7 +51,7 @@ const IrcSettingFields = (ind: IndexerDefinition, indexer: string) => {
     <>
       {ind && ind.irc && ind.irc.settings && (
         <div className="border-t border-gray-200 dark:border-gray-700 py-5">
-          <div className="px-4 space-y-1">
+          <div className="px-4">
             <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">IRC</DialogTitle>
             <p className="text-sm text-gray-500 dark:text-gray-200">
               Networks and channels are configured automatically in the background.
@@ -101,7 +101,7 @@ const TorznabFeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
       <Fragment>
         {ind && ind.torznab && ind.torznab.settings && (
           <div className="">
-            <div className="px-4 space-y-1">
+            <div className="pt-4 px-4">
               <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Torznab</DialogTitle>
               <p className="text-sm text-gray-500 dark:text-gray-200">
                 Torznab feed
@@ -142,7 +142,7 @@ const NewznabFeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
       <Fragment>
         {ind && ind.newznab && ind.newznab.settings && (
           <div className="">
-            <div className="px-4 space-y-1">
+            <div className="pt-4 px-4">
               <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Newznab</DialogTitle>
               <p className="text-sm text-gray-500 dark:text-gray-200">
                 Newznab feed
@@ -175,7 +175,7 @@ const RSSFeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
       <Fragment>
         {ind && ind.rss && ind.rss.settings && (
           <div className="">
-            <div className="px-4 space-y-1">
+            <div className="pt-4 px-4">
               <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">RSS</DialogTitle>
               <p className="text-sm text-gray-500 dark:text-gray-200">
                 RSS feed
@@ -432,7 +432,7 @@ export function IndexerAddForm({ isOpen, toggle }: AddFormProps) {
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
-              <div className="w-screen max-w-2xl dark:border-gray-700 border-l">
+              <div className="w-screen max-w-2xl">
                 <Formik
                   enableReinitialize={true}
                   initialValues={{
@@ -461,7 +461,7 @@ export function IndexerAddForm({ isOpen, toggle }: AddFormProps) {
                             <div className="h-7 flex items-center">
                               <button
                                 type="button"
-                                className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
@@ -471,8 +471,8 @@ export function IndexerAddForm({ isOpen, toggle }: AddFormProps) {
                           </div>
                         </div>
 
-                        <div className="py-6 space-y-4 divide-y divide-gray-200 dark:divide-gray-700">
-                          <div className="py-4 flex items-center justify-between space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-4">
+                        <div className="divide-y divide-gray-200 dark:divide-gray-700">
+                          <div className="p-4 sm:py-6 flex items-center justify-between sm:grid sm:grid-cols-3 sm:gap-4">
                             <div>
                               <label
                                 htmlFor="identifier"
@@ -566,18 +566,18 @@ export function IndexerAddForm({ isOpen, toggle }: AddFormProps) {
                       </div>
 
                       <div
-                        className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
+                        className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
                         <div className="space-x-3 flex justify-end">
                           <button
                             type="button"
-                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                             onClick={toggle}
                           >
                             Cancel
                           </button>
                           <button
                             type="submit"
-                            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                           >
                             Save
                           </button>
@@ -670,7 +670,7 @@ function TestApiButton({ values, show }: TestApiButtonProps) {
             ? "text-red-500 border-red-500 bg-red-50"
             : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 focus:border-rose-700 active:bg-rose-700",
         isTesting ? "cursor-not-allowed" : "",
-        "mr-2 float-left items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+        "mr-2 float-left items-center px-4 py-2 border font-medium rounded-md shadow-xs text-sm transition ease-in-out duration-150 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
       )}
       disabled={isTesting}
       onClick={testApi}
@@ -832,7 +832,7 @@ export function IndexerUpdateForm({ isOpen, toggle, data: indexer }: UpdateFormP
     >
       {(values) => (
         <div className="py-2 space-y-6 sm:py-0 sm:space-y-0 divide-y divide-gray-200 dark:divide-gray-700">
-          <div className="space-y-1 p-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4">
+          <div className="p-4 sm:grid sm:grid-cols-3 sm:gap-4">
             <label
               htmlFor="name"
               className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2"
@@ -845,7 +845,7 @@ export function IndexerUpdateForm({ isOpen, toggle, data: indexer }: UpdateFormP
                   <input
                     type="text"
                     {...field}
-                    className="block w-full shadow-sm sm:text-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100 rounded-md"
+                    className="block w-full shadow-xs sm:text-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100 rounded-md"
                   />
                   {meta.touched && meta.error && <span>{meta.error}</span>}
                 </div>
diff --git a/web/src/forms/settings/IrcForms.tsx b/web/src/forms/settings/IrcForms.tsx
index 3740f11..104b8f7 100644
--- a/web/src/forms/settings/IrcForms.tsx
+++ b/web/src/forms/settings/IrcForms.tsx
@@ -48,7 +48,7 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
                             meta.touched && meta.error
                               ? "border-red-500 focus:ring-red-500 focus:border-red-500"
                               : "border-gray-300 dark:border-gray-700 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500",
-                            "block w-full shadow-sm sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100"
+                            "block w-full shadow-xs sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100"
                           )}
                         />
                       )}
@@ -66,7 +66,7 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
                             meta.touched && meta.error
                               ? "border-red-500 focus:ring-red-500 focus:border-red-500"
                               : "border-gray-300 dark:border-gray-700 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500",
-                            "block w-full shadow-sm sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100"
+                            "block w-full shadow-xs sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100"
                           )}
                         />
                       )}
@@ -75,7 +75,7 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
 
                   <button
                     type="button"
-                    className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                    className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                     onClick={() => remove(index)}
                   >
                     <span className="sr-only">Remove</span>
@@ -90,7 +90,7 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
           )}
           <button
             type="button"
-            className="border dark:border-gray-600 dark:bg-gray-700 my-4 px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-600 rounded self-center text-center"
+            className="border dark:border-gray-600 dark:bg-gray-700 my-4 px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-600 rounded-sm self-center text-center"
             onClick={() => push({ name: "", password: "" })}
           >
             Add Channel
diff --git a/web/src/forms/settings/ListForms.tsx b/web/src/forms/settings/ListForms.tsx
index e19055c..9ab58ac 100644
--- a/web/src/forms/settings/ListForms.tsx
+++ b/web/src/forms/settings/ListForms.tsx
@@ -120,7 +120,7 @@ export function ListAddForm({ isOpen, toggle }: AddFormProps) {
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
-              <div className="w-screen max-w-2xl dark:border-gray-700 border-l">
+              <div className="w-screen max-w-2xl">
                 <Formik
                   enableReinitialize={true}
                   initialValues={{
@@ -157,7 +157,7 @@ export function ListAddForm({ isOpen, toggle }: AddFormProps) {
                             <div className="h-7 flex items-center">
                               <button
                                 type="button"
-                                className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
@@ -239,7 +239,7 @@ export function ListAddForm({ isOpen, toggle }: AddFormProps) {
 
                         <div className="flex flex-col space-y-4 py-6 sm:py-0 sm:space-y-0">
                           <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-                            <div className="px-4 space-y-1">
+                            <div className="px-4">
                               <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
                                 Filters
                               </DialogTitle>
@@ -254,11 +254,11 @@ export function ListAddForm({ isOpen, toggle }: AddFormProps) {
                         </div>
                       </div>
 
-                      <div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-4 sm:px-6">
+                      <div className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-4 sm:px-6">
                         <div className="space-x-3 flex justify-end">
                           <button
                             type="button"
-                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                             onClick={toggle}
                           >
                             Cancel
@@ -351,7 +351,7 @@ export function ListUpdateForm({ isOpen, toggle, data }: UpdateFormProps<List>)
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
-              <div className="w-screen max-w-2xl dark:border-gray-700 border-l">
+              <div className="w-screen max-w-2xl">
                 <Formik
                   enableReinitialize={true}
                   initialValues={{
@@ -389,7 +389,7 @@ export function ListUpdateForm({ isOpen, toggle, data }: UpdateFormProps<List>)
                             <div className="h-7 flex items-center">
                               <button
                                 type="button"
-                                className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
@@ -413,7 +413,7 @@ export function ListUpdateForm({ isOpen, toggle, data }: UpdateFormProps<List>)
 
                           <div className="flex flex-col space-y-4 py-6 sm:py-0 sm:space-y-0">
                             <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-                              <div className="px-4 space-y-1">
+                              <div className="px-4">
                                 <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
                                   Filters
                                 </DialogTitle>
@@ -433,11 +433,11 @@ export function ListUpdateForm({ isOpen, toggle, data }: UpdateFormProps<List>)
                         </div>
                       </div>
 
-                      <div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-4">
+                      <div className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-4">
                         <div className="space-x-3 flex justify-between">
                           <button
                             type="button"
-                            className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-white bg-red-100 dark:bg-red-700 hover:bg-red-200 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
+                            className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-white bg-red-100 dark:bg-red-700 hover:bg-red-200 dark:hover:bg-red-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
                             onClick={toggleDeleteModal}
                           >
                             Remove
@@ -445,7 +445,7 @@ export function ListUpdateForm({ isOpen, toggle, data }: UpdateFormProps<List>)
                           <div className="flex space-x-3">
                           <button
                             type="button"
-                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                             onClick={toggle}
                           >
                             Cancel
@@ -485,7 +485,7 @@ const SubmitButton = (props: SubmitButtonProps) => {
         //     ? "text-red-500 border-red-500 bg-red-50"
         //     : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:border-rose-700 active:bg-rose-700",
         props.isPending ? "cursor-not-allowed" : "",
-        "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:border-blue-700 active:bg-blue-700"
+        "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-xs text-sm transition ease-in-out duration-150 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:border-blue-700 active:bg-blue-700"
       )}
     >
       {props.isPending ? (
@@ -602,7 +602,7 @@ function ListTypeArr({ listType, clients }: ListTypeFormProps) {
 
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Source
         </DialogTitle>
@@ -643,7 +643,7 @@ function ListTypeTrakt() {
 
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Source list
         </DialogTitle>
@@ -680,7 +680,7 @@ function ListTypeTrakt() {
 function ListTypePlainText() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Source list
         </DialogTitle>
@@ -709,7 +709,7 @@ function ListTypePlainText() {
 function ListTypeSteam() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Source list
         </DialogTitle>
@@ -726,7 +726,7 @@ function ListTypeSteam() {
 function ListTypeMetacritic() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Source list
         </DialogTitle>
@@ -755,7 +755,7 @@ function ListTypeMetacritic() {
 function ListTypeMDBList() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Source list
         </DialogTitle>
@@ -818,7 +818,7 @@ function DownloadClientSelectCustom({ name, clientType, clients }: DownloadClien
                   {/*</Label>*/}
                   <div className="relative">
                     <ListboxButton
-                      className="block w-full shadow-sm sm:text-sm rounded-md border py-2 pl-3 pr-10 text-left focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
+                      className="block w-full shadow-xs sm:text-sm rounded-md border py-2 pl-3 pr-10 text-left focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100">
                     <span className="block truncate">
                       {field.value
                         ? clients.find((c) => c.id === field.value)?.name
@@ -840,7 +840,7 @@ function DownloadClientSelectCustom({ name, clientType, clients }: DownloadClien
                     >
                       <ListboxOptions
                         static
-                        className="absolute z-10 mt-1 w-full border border-gray-400 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto focus:outline-none sm:text-sm"
+                        className="absolute z-10 mt-1 w-full border border-gray-400 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto focus:outline-hidden sm:text-sm"
                       >
                         {clients
                           .filter((c) => c.type === clientType)
diff --git a/web/src/forms/settings/NotificationForms.tsx b/web/src/forms/settings/NotificationForms.tsx
index c262be7..1e664bb 100644
--- a/web/src/forms/settings/NotificationForms.tsx
+++ b/web/src/forms/settings/NotificationForms.tsx
@@ -28,7 +28,7 @@ import { AddFormProps, UpdateFormProps } from "@forms/_shared";
 function FormFieldsDiscord() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Settings
         </DialogTitle>
@@ -57,7 +57,7 @@ function FormFieldsDiscord() {
 function FormFieldsNotifiarr() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Settings
         </DialogTitle>
@@ -78,7 +78,7 @@ function FormFieldsNotifiarr() {
 function FormFieldsLunaSea() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Settings
         </DialogTitle>
@@ -110,7 +110,7 @@ function FormFieldsLunaSea() {
 function FormFieldsTelegram() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Settings
         </DialogTitle>
@@ -160,7 +160,7 @@ function FormFieldsTelegram() {
 function FormFieldsPushover() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Settings
         </DialogTitle>
@@ -199,7 +199,7 @@ function FormFieldsPushover() {
 function FormFieldsGotify() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Settings
         </DialogTitle>
@@ -225,7 +225,7 @@ function FormFieldsGotify() {
 function FormFieldsNtfy() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Settings
         </DialogTitle>
@@ -269,7 +269,7 @@ function FormFieldsNtfy() {
 function FormFieldsShoutrrr() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-      <div className="px-4 space-y-1">
+      <div className="px-4">
         <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
           Settings
         </DialogTitle>
@@ -367,7 +367,7 @@ export function NotificationAddForm({ isOpen, toggle }: AddFormProps) {
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
-              <div className="w-screen max-w-2xl dark:border-gray-700 border-l">
+              <div className="w-screen max-w-2xl">
                 <Formik
                   enableReinitialize={true}
                   initialValues={{
@@ -397,7 +397,7 @@ export function NotificationAddForm({ isOpen, toggle }: AddFormProps) {
                             <div className="h-7 flex items-center">
                               <button
                                 type="button"
-                                className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
@@ -407,7 +407,7 @@ export function NotificationAddForm({ isOpen, toggle }: AddFormProps) {
                           </div>
                         </div>
 
-                        <div className="flex flex-col space-y-4 px-1 py-6 sm:py-0 sm:space-y-0">
+                        <div className="flex flex-col space-y-4 px-1 pt-6 sm:py-0 sm:space-y-0">
                           <TextFieldWide
                             name="name"
                             label="Name"
@@ -476,8 +476,8 @@ export function NotificationAddForm({ isOpen, toggle }: AddFormProps) {
 
                           <SwitchGroupWide name="enabled" label="Enabled" />
 
-                          <div className="border-t mt-2 border-gray-200 dark:border-gray-700 py-4">
-                            <div className="px-4 space-y-1">
+                          <div className="border-t border-gray-200 dark:border-gray-700 py-4">
+                            <div className="px-4">
                               <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
                                 Events
                               </DialogTitle>
@@ -486,7 +486,7 @@ export function NotificationAddForm({ isOpen, toggle }: AddFormProps) {
                               </p>
                             </div>
 
-                            <div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:gap-4 sm:py-4">
+                              <div className="p-4 sm:grid sm:gap-4">
                               <EventCheckBoxes />
                             </div>
                           </div>
@@ -494,25 +494,25 @@ export function NotificationAddForm({ isOpen, toggle }: AddFormProps) {
                         {componentMap[values.type]}
                       </div>
 
-                      <div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-4 sm:px-6">
+                      <div className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-4 sm:px-6">
                         <div className="space-x-3 flex justify-end">
                           <button
                             type="button"
-                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                             onClick={() => testNotification(values)}
                           >
                             Test
                           </button>
                           <button
                             type="button"
-                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                             onClick={toggle}
                           >
                             Cancel
                           </button>
                           <button
                             type="submit"
-                            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                           >
                             Save
                           </button>
@@ -544,7 +544,7 @@ const EventCheckBoxes = () => (
             name="events"
             type="checkbox"
             value={e.value}
-            className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
+            className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded-sm"
           />
         </div>
         <div className="ml-3 text-sm">
@@ -645,7 +645,7 @@ export function NotificationUpdateForm({ isOpen, toggle, data: notification }: U
         <div>
           <TextFieldWide name="name" label="Name" required={true}/>
 
-          <div className="space-y-2 divide-y divide-gray-200 dark:divide-gray-700">
+          <div className="divide-y divide-gray-200 dark:divide-gray-700">
             <div className="py-4 flex items-center justify-between space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-4">
               <div>
                 <label
@@ -697,8 +697,8 @@ export function NotificationUpdateForm({ isOpen, toggle, data: notification }: U
               </div>
             </div>
             <SwitchGroupWide name="enabled" label="Enabled"/>
-            <div className="border-t border-gray-200 dark:border-gray-700 py-4">
-              <div className="px-4 space-y-1">
+            <div className="pb-2">
+              <div className="p-4">
                 <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
                   Events
                 </DialogTitle>
@@ -707,7 +707,7 @@ export function NotificationUpdateForm({ isOpen, toggle, data: notification }: U
                 </p>
               </div>
 
-              <div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:gap-4 sm:py-2">
+              <div className="p-4 sm:grid sm:gap-4">
                 <EventCheckBoxes />
               </div>
             </div>
diff --git a/web/src/forms/settings/ProxyForms.tsx b/web/src/forms/settings/ProxyForms.tsx
index cdf44e2..158f263 100644
--- a/web/src/forms/settings/ProxyForms.tsx
+++ b/web/src/forms/settings/ProxyForms.tsx
@@ -78,7 +78,7 @@ export function ProxyAddForm({ isOpen, toggle }: AddFormProps) {
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
-              <div className="w-screen max-w-2xl dark:border-gray-700 border-l">
+              <div className="w-screen max-w-2xl">
                 <Formik
                   enableReinitialize={true}
                   initialValues={initialValues}
@@ -100,7 +100,7 @@ export function ProxyAddForm({ isOpen, toggle }: AddFormProps) {
                             <div className="h-7 flex items-center">
                               <button
                                 type="button"
-                                className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
                                 onClick={toggle}
                               >
                                 <span className="sr-only">Close panel</span>
@@ -110,10 +110,9 @@ export function ProxyAddForm({ isOpen, toggle }: AddFormProps) {
                           </div>
                         </div>
 
-                        <div className="py-6 space-y-4 divide-y divide-gray-200 dark:divide-gray-700">
-                          <SwitchGroupWide name="enabled" label="Enabled" />
+                        <div className="divide-y divide-gray-200 dark:divide-gray-700">
                           <TextFieldWide name="name" label="Name" defaultValue="" required={true} />
-
+                          <SwitchGroupWide name="enabled" label="Enabled" />
                           <SelectFieldBasic
                             name="type"
                             label="Proxy type"
@@ -121,7 +120,6 @@ export function ProxyAddForm({ isOpen, toggle }: AddFormProps) {
                             tooltip={<span>Proxy type. Commonly SOCKS5.</span>}
                             help="Usually SOCKS5"
                           />
-
                           <TextFieldWide name="addr" label="Addr" required={true} help="Addr: scheme://ip:port or scheme://domain" autoComplete="off"/>
                         </div>
 
@@ -132,25 +130,25 @@ export function ProxyAddForm({ isOpen, toggle }: AddFormProps) {
                       </div>
 
                       <div
-                        className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
+                        className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
                         <div className="space-x-3 flex justify-end">
                           <button
                             type="button"
-                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                             onClick={() => testProxy(values)}
                           >
                             Test
                           </button>
                           <button
                             type="button"
-                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                             onClick={toggle}
                           >
                             Cancel
                           </button>
                           <button
                             type="submit"
-                            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                           >
                             Save
                           </button>
@@ -241,12 +239,9 @@ export function ProxyUpdateForm({ isOpen, toggle, data }: UpdateFormProps<Proxy>
     >
       {() => (
         <div>
-          <div className="py-6 space-y-4 divide-y divide-gray-200 dark:divide-gray-700">
-
-            <SwitchGroupWide name="enabled" label="Enabled"/>
-
+          <div className="divide-y divide-gray-200 dark:divide-gray-700">
             <TextFieldWide name="name" label="Name" defaultValue="" required={true}/>
-
+            <SwitchGroupWide name="enabled" label="Enabled"/>
             <SelectFieldBasic
               name="type"
               label="Proxy type"
@@ -255,7 +250,6 @@ export function ProxyUpdateForm({ isOpen, toggle, data }: UpdateFormProps<Proxy>
               tooltip={<span>Proxy type. Commonly SOCKS5.</span>}
               help="Usually SOCKS5"
             />
-
             <TextFieldWide name="addr" label="Addr" required={true} help="Addr: scheme://ip:port or scheme://domain" autoComplete="off"/>
           </div>
 
diff --git a/web/src/index.css b/web/src/index.css
index cd304ca..36c8e1c 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -3,101 +3,101 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config '../tailwind.config.ts';
 
-body {
-  margin: 0;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
-
-@keyframes enter {
-  0% {
-    transform: scale(0.9);
-    opacity: 0;
+@layer utilities {
+  body {
+    margin: 0;
   }
 
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.animate-enter {
-  animation: enter 0.2s ease-out;
-}
-
-@keyframes leave {
-  0% {
-    transform: scale(1);
-    opacity: 1;
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+      monospace;
   }
 
-  to {
-    transform: scale(0.9);
-    opacity: 0;
+  @keyframes enter {
+    0% {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
   }
-}
 
-.animate-leave {
-  animation: leave 0.15s ease-in forwards;
-}
+  .animate-enter {
+    animation: enter 0.2s ease-out;
+  }
 
-.rmsc {
-  --rmsc-p: 0.75rem !important;
-  --rmsc-radius: 0.375rem !important;
-  --rmsc-h: unset !important;
-}
+  @keyframes leave {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
 
-.rmsc .dropdown-heading {
-  padding: 0.5rem 0.75rem !important;
-}
+    to {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+  }
 
-.rmsc .dropdown-heading-value {
-  line-height: 1.5rem;
-}
+  .animate-leave {
+    animation: leave 0.15s ease-in forwards;
+  }
 
-.rmsc .dropdown-heading-dropdown-arrow {
-  width: 18px;
-  height: 18px;
-  margin: -6px 0 0 -6px;
-}
+  .rmsc {
+    --rmsc-p: 0.75rem !important;
+    --rmsc-radius: 0.375rem !important;
+    --rmsc-h: unset !important;
+  }
 
-.rmsc .dropdown-search-clear-icon {
-  width: 18px;
-  height: 18px;
-  margin: -6px 10px 0 -6px;
-}
+  .rmsc .dropdown-heading {
+    padding: 0.5rem 0.75rem !important;
+  }
 
-.rmsc .search input {
-  height: unset !important;
-  padding: 0.5rem 0.75rem !important;
-}
+  .rmsc .dropdown-heading-value {
+    line-height: 1.5rem;
+  }
 
-.rmsc .item-renderer {
-  align-items: center !important;
-}
+  .rmsc .dropdown-heading-dropdown-arrow {
+    width: 18px;
+    height: 18px;
+    margin: -6px 0 0 -6px;
+  }
 
-.rmsc .item-renderer input {
-  margin: 0 0.5rem 0 0 !important;
-}
+  .rmsc .dropdown-search-clear-icon {
+    width: 18px;
+    height: 18px;
+    margin: -6px 10px 0 -6px;
+  }
 
-.rmsc .item-renderer > input[type="checkbox"] {
-  border: 1px solid var(--rmsc-main);
-}
+  .rmsc .search input {
+    height: unset !important;
+    padding: 0.5rem 0.75rem !important;
+  }
 
-.rmsc.dark .item-renderer > input[type="checkbox"] {
-  background-color: unset;
-}
+  .rmsc .item-renderer {
+    align-items: center !important;
+  }
 
-.rmsc .item-renderer > input[type="checkbox"]:hover {
-  border: 1px solid var(--rmsc-main);
-}
+  .rmsc .item-renderer input {
+    margin: 0 0.5rem 0 0 !important;
+  }
+
+  .rmsc .item-renderer > input[type='checkbox'] {
+    border: 1px solid var(--rmsc-main);
+  }
+
+  .rmsc.dark .item-renderer > input[type='checkbox'] {
+    background-color: unset;
+  }
+
+  .rmsc .item-renderer > input[type='checkbox']:hover {
+    border: 1px solid var(--rmsc-main);
+  }
 
 html:not(.dark) .rmsc {
   --rmsc-main: theme(colors.blue.500) !important;
@@ -119,24 +119,25 @@ html.dark .rmsc {
   color: #fff !important;
 }
 
-html:not(.dark) .rmsc input[type="checkbox"] {
-  @apply border-gray-400;
-}
+  html:not(.dark) .rmsc input[type='checkbox'] {
+    @apply border-gray-400;
+  }
 
-html .rmsc input[type="checkbox"]:checked {
-  @apply bg-blue-500 border-blue-500;
-}
+  html .rmsc input[type='checkbox']:checked {
+    @apply bg-blue-500 border-blue-500;
+  }
 
-html.dark .rmsc input[type="checkbox"] {
-  @apply bg-gray-775 border-gray-650;
-}
+  html.dark .rmsc input[type='checkbox'] {
+    @apply bg-gray-775 border-gray-650;
+  }
 
-html .dropdown-content > div.panel-content {
-  @apply border border-gray-350 !shadow-2xl;
-}
+  html .dropdown-content > div.panel-content {
+    @apply border border-gray-350 shadow-2xl!;
+  }
 
-html.dark .dropdown-content > div.panel-content {
-  @apply border border-gray-700 !shadow-2xl;
+  html.dark .dropdown-content > div.panel-content {
+    @apply border border-gray-700 shadow-2xl!;
+  }
 }
 
 @layer base {
diff --git a/web/src/routes.tsx b/web/src/routes.tsx
index bd348a7..b451de1 100644
--- a/web/src/routes.tsx
+++ b/web/src/routes.tsx
@@ -383,7 +383,7 @@ const routeTree = RootRoute.addChildren([
 export const Router = createRouter({
   routeTree,
   defaultPendingComponent: () => (
-    <div className="flex flex-grow items-center justify-center col-span-9">
+    <div className="flex grow items-center justify-center col-span-9">
       <RingResizeSpinner className="text-blue-500 size-24" />
     </div>
   ),
diff --git a/web/src/screens/Dashboard.tsx b/web/src/screens/Dashboard.tsx
index d679f18..143c664 100644
--- a/web/src/screens/Dashboard.tsx
+++ b/web/src/screens/Dashboard.tsx
@@ -8,7 +8,7 @@ import { ActivityTable } from "./dashboard/ActivityTable";
 
 export const Dashboard = () => (
   <main>
-    <div className="my-6 max-w-screen-xl mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
+    <div className="my-6 max-w-(--breakpoint-xl) mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
       <Stats />
       <ActivityTable />
     </div>
diff --git a/web/src/screens/Logs.tsx b/web/src/screens/Logs.tsx
index d623029..258a68f 100644
--- a/web/src/screens/Logs.tsx
+++ b/web/src/screens/Logs.tsx
@@ -100,11 +100,11 @@ export const Logs = () => {
 
   return (
     <main>
-      <div className="my-6 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="my-6 max-w-(--breakpoint-xl) mx-auto px-4 sm:px-6 lg:px-8">
         <h1 className="text-3xl font-bold text-black dark:text-white">Logs</h1>
       </div>
 
-      <div className="max-w-screen-xl mx-auto pb-12 px-2 sm:px-4 lg:px-8">
+      <div className="max-w-(--breakpoint-xl) mx-auto pb-12 px-2 sm:px-4 lg:px-8">
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-250 dark:border-gray-775 px-2 sm:px-4 pt-3 sm:pt-4 pb-3 sm:pb-4">
           <div className="flex relative mb-3">
             <DebounceInput
@@ -116,7 +116,7 @@ export const Logs = () => {
               }}
               className={classNames(
                 "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
-                "block w-full dark:bg-gray-900 shadow-sm dark:text-gray-100 sm:text-sm rounded-md"
+                "block w-full dark:bg-gray-900 shadow-xs dark:text-gray-100 sm:text-sm rounded-md"
               )}
               placeholder="Enter a regex pattern to filter logs by..."
             />
@@ -162,7 +162,7 @@ export const Logs = () => {
         </div>
       </div>
 
-      <div className="max-w-screen-xl mx-auto pb-10 px-2 sm:px-4 lg:px-8">
+      <div className="max-w-(--breakpoint-xl) mx-auto pb-10 px-2 sm:px-4 lg:px-8">
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-250 dark:border-gray-775 px-4 sm:px-6 pt-3 sm:pt-4">
           <LogFiles />
         </div>
@@ -323,7 +323,7 @@ const LogsDropdown = () => {
         leaveTo="transform opacity-0 scale-95"
       >
         <MenuItems
-          className="absolute right-0 mt-1 origin-top-right bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700 rounded-md shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none"
+          className="absolute right-0 mt-1 origin-top-right bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700 rounded-md shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-hidden"
         >
           <div className="p-3">
             <MenuItem>
diff --git a/web/src/screens/Releases.tsx b/web/src/screens/Releases.tsx
index 2a2b150..0bf8a23 100644
--- a/web/src/screens/Releases.tsx
+++ b/web/src/screens/Releases.tsx
@@ -19,7 +19,7 @@ export const Releases = () => {
   const [isHintOpen, setIsHintOpen] = useState(false);
   return (
     <main>
-      <div className="mt-6 mb-4 mx-auto flex flex-col max-w-screen-xl px-4 sm:px-6 lg:px-8">
+      <div className="mt-6 mb-4 mx-auto flex flex-col max-w-(--breakpoint-xl) px-4 sm:px-6 lg:px-8">
         <h1 className="text-3xl font-bold text-black dark:text-white">Releases</h1>
         <p className="flex-row items-start mt-1 text-sm text-gray-800 dark:text-gray-200">
           The search engine uses a special pattern-matching engine to filter out results.
@@ -79,7 +79,7 @@ export const Releases = () => {
               {"As always, please refer to our "}
               <ExternalLink
                 href="https://autobrr.com/usage/search/"
-                className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 decoration-2 hover:text-black hover:dark:text-gray-100"
+                className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 decoration-2 hover:text-black dark:hover:text-gray-100"
               >
                 Search function usage
               </ExternalLink>
@@ -88,7 +88,7 @@ export const Releases = () => {
           </div>
         ) : null}
       </div>
-      <div className="max-w-screen-xl mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
+      <div className="max-w-(--breakpoint-xl) mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
         <ReleaseTable />
       </div>
     </main>
diff --git a/web/src/screens/Settings.tsx b/web/src/screens/Settings.tsx
index b469192..09099c7 100644
--- a/web/src/screens/Settings.tsx
+++ b/web/src/screens/Settings.tsx
@@ -73,7 +73,7 @@ function SubNavLink({ item }: NavLinkProps) {
             )
           }>
             <item.icon
-              className="text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+              className="text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 shrink-0 -ml-1 mr-3 h-6 w-6"
               aria-hidden="true"
             />
             <span className="truncate">{item.name}</span>
@@ -103,11 +103,11 @@ function SidebarNav({ subNavigation }: SidebarNavProps) {
 export function Settings() {
   return (
     <main>
-      <div className="my-6 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="my-6 max-w-(--breakpoint-xl) mx-auto px-4 sm:px-6 lg:px-8">
         <h1 className="text-3xl font-bold text-black dark:text-white">Settings</h1>
       </div>
 
-      <div className="max-w-screen-xl mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
+      <div className="max-w-(--breakpoint-xl) mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow-table border border-gray-250 dark:border-gray-775">
           <div className="lg:grid lg:grid-cols-12">
             <SidebarNav subNavigation={subNavigation}/>
diff --git a/web/src/screens/auth/Login.tsx b/web/src/screens/auth/Login.tsx
index 803f0e5..6154ef7 100644
--- a/web/src/screens/auth/Login.tsx
+++ b/web/src/screens/auth/Login.tsx
@@ -143,7 +143,7 @@ export const Login = () => {
       {/* Wait for OIDC config to load before rendering any login forms */}
       {typeof oidcConfig !== 'undefined' && (
         <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
-          <div className={`px-6 ${(!canOnboard && (!oidcConfig?.enabled || !oidcConfig?.disableBuiltInLogin)) ? 'py-12 bg-white dark:bg-gray-800 shadow sm:rounded-lg sm:px-12 border border-gray-150 dark:border-gray-775' : ''}`}>
+          <div className={`px-6 ${(!canOnboard && (!oidcConfig?.enabled || !oidcConfig?.disableBuiltInLogin)) ? 'py-12 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg sm:px-12 border border-gray-150 dark:border-gray-775' : ''}`}>
             {/* Built-in login form */}
             {!canOnboard && (!oidcConfig?.enabled || !oidcConfig?.disableBuiltInLogin) && (
               <>
@@ -173,7 +173,8 @@ export const Login = () => {
                       <Tooltip
                         label={
                           <div className="flex flex-row items-center cursor-pointer text-gray-700 dark:text-gray-200">
-                            Forgot password? <svg className="ml-1 w-3 h-3 text-gray-500 dark:text-gray-400 fill-current" viewBox="0 0 72 72"><path d="M32 2C15.432 2 2 15.432 2 32s13.432 30 30 30s30-13.432 30-30S48.568 2 32 2m5 49.75H27v-24h10v24m-5-29.5a5 5 0 1 1 0-10a5 5 0 0 1 0 10" /></svg>
+                            Forgot password? <svg className="ml-1 w-3 h-3 text-gray-500 dark:text-gray-400 fill-current" viewBox="0 0 72 72">
+                            <path d="M32 2C15.432 2 2 15.432 2 32s13.432 30 30 30s30-13.432 30-30S48.568 2 32 2m5 49.75H27v-24h10v24m-5-29.5a5 5 0 1 1 0-10a5 5 0 0 1 0 10" /></svg>
                           </div>
                         }
                       >
@@ -184,9 +185,9 @@ export const Login = () => {
 
                   <button
                     type="submit"
-                    className="w-full flex items-center justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                    className="w-full flex items-center justify-center py-2 px-4 border border-transparent rounded-md shadow-xs text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                   >
-                    <RocketLaunchIcon className="w-4 h-4 mr-1.5" />
+                    <RocketLaunchIcon className="w-4 h-4 mr-1.5"/>
                     Sign in
                   </button>
                 </form>
@@ -210,7 +211,7 @@ export const Login = () => {
                 <button
                   type="button"
                   onClick={handleOIDCLogin}
-                  className="w-full flex items-center justify-center gap-3 py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-900 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700"
+                  className="w-full flex items-center justify-center gap-3 py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-xs text-sm font-medium text-gray-900 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700"
                 >
                   <FontAwesomeIcon icon={faOpenid} className="h-5 w-5" />
                   <span>OpenID Connect</span>
diff --git a/web/src/screens/auth/Onboarding.tsx b/web/src/screens/auth/Onboarding.tsx
index 2691153..9c8b1c1 100644
--- a/web/src/screens/auth/Onboarding.tsx
+++ b/web/src/screens/auth/Onboarding.tsx
@@ -85,7 +85,7 @@ export const Onboarding = () => {
               </div>
               <button
                 type="submit"
-                className="mt-6 w-full flex items-center justify-center py-2 px-4 border border-transparent transition rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                className="mt-6 w-full flex items-center justify-center py-2 px-4 border border-transparent transition rounded-md shadow-xs text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
               >
                 <UserPlusIcon className="w-4 h-4 mr-1.5" />
                 Create account
diff --git a/web/src/screens/dashboard/ActivityTable.tsx b/web/src/screens/dashboard/ActivityTable.tsx
index 8f00989..51303f4 100644
--- a/web/src/screens/dashboard/ActivityTable.tsx
+++ b/web/src/screens/dashboard/ActivityTable.tsx
@@ -53,7 +53,7 @@ function Table({ columns, data }: TableProps) {
                   <th
                     key={header.id}
                     scope="col"
-                    className="first:pl-5 first:rounded-tl-md last:rounded-tr-md pl-3 pr-3 py-3 text-xs font-medium tracking-wider text-left uppercase group text-gray-600 dark:text-gray-400 transition hover:bg-gray-200 dark:hover:bg-gray-775"
+                    className="first:pl-5 first:rounded-tl-md last:rounded-tr-md pl-3 pr-3 py-3 text-xs font-medium tracking-wider text-left uppercase group text-gray-600 dark:text-gray-400"
                     colSpan={header.colSpan}
                   >
                     <div className="flex items-center justify-between">
diff --git a/web/src/screens/dashboard/Stats.tsx b/web/src/screens/dashboard/Stats.tsx
index 465ab71..add67aa 100644
--- a/web/src/screens/dashboard/Stats.tsx
+++ b/web/src/screens/dashboard/Stats.tsx
@@ -27,7 +27,7 @@ const StatsItem = ({ name, placeholder, value, to, eventType }: StatsItemProps)
     params={{}}
   >
     <dt>
-      <div className="flex items-center text-sm font-medium text-gray-500 group-hover:dark:text-gray-475 group-hover:text-gray-600 transition-colors duration-200 ease-in-out">
+      <div className="flex items-center text-sm font-medium text-gray-500 dark:group-hover:text-gray-475 group-hover:text-gray-600 transition-colors duration-200 ease-in-out">
         <p className="pb-0.5 truncate">{name}</p>
         <LinkIcon className="h-3 w-3 ml-2" aria-hidden="true" />
       </div>
diff --git a/web/src/screens/filters/Details.tsx b/web/src/screens/filters/Details.tsx
index 633dd89..2a41361 100644
--- a/web/src/screens/filters/Details.tsx
+++ b/web/src/screens/filters/Details.tsx
@@ -63,7 +63,7 @@ function TabNavLink({ item }: NavLinkProps) {
           <span
             className={
             classNames(
-              "transition border-b-2 whitespace-nowrap py-4 duration-3000 px-1 font-medium text-sm first:rounded-tl-lg last:rounded-tr-lg",
+              "border-b-2 whitespace-nowrap py-4 px-1 font-medium text-sm first:rounded-tl-lg last:rounded-tr-lg",
               isActive
                 ? "text-blue-600 dark:text-white border-blue-600 dark:border-blue-500"
                 : "text-gray-550 hover:text-blue-500 dark:hover:text-white border-transparent"
@@ -105,7 +105,7 @@ const FormButtonsGroup = ({ values, deleteAction, reset, isLoading }: FormButton
       <div className="px-0.5 mt-8 flex flex-col-reverse sm:flex-row flex-wrap-reverse justify-between">
         <button
           type="button"
-          className="flex items-center justify-center px-4 py-2 rounded-md sm:text-sm transition bg-red-700 dark:bg-red-900 hover:dark:bg-red-700 hover:bg-red-800 text-white focus:outline-none"
+          className="flex items-center justify-center px-4 py-2 rounded-md sm:text-sm transition bg-red-700 dark:bg-red-900 dark:hover:bg-red-700 hover:bg-red-800 text-white focus:outline-hidden"
           onClick={toggleDeleteModal}
         >
           Delete Filter
@@ -115,7 +115,7 @@ const FormButtonsGroup = ({ values, deleteAction, reset, isLoading }: FormButton
           {/* {dirty && <span className="mr-4 text-sm text-gray-500">Unsaved changes..</span>} */}
           <button
             type="button"
-            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 transition rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 transition rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
             onClick={(e) => {
               e.preventDefault();
               reset();
@@ -127,7 +127,7 @@ const FormButtonsGroup = ({ values, deleteAction, reset, isLoading }: FormButton
           </button>
           <button
             type="submit"
-            className="ml-1 sm:ml-4 flex items-center px-4 py-2 border border-transparent transition shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            className="ml-1 sm:ml-4 flex items-center px-4 py-2 border border-transparent transition shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             Save
           </button>
@@ -367,7 +367,7 @@ export const FilterDetails = () => {
 
   return (
     <main>
-      <div className="my-6 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center text-black dark:text-white">
+      <div className="my-6 max-w-(--breakpoint-xl) mx-auto px-4 sm:px-6 lg:px-8 flex items-center text-black dark:text-white">
         <h1 className="text-3xl font-bold">
           <Link to="/filters">
             Filters
@@ -376,7 +376,7 @@ export const FilterDetails = () => {
         <ChevronRightIcon className="h-6 w-4 shrink-0 sm:shrink sm:h-6 sm:w-6 mx-1" aria-hidden="true" />
         <h1 className="text-3xl font-bold truncate" title={filter.name}>{filter.name}</h1>
       </div>
-      <div className="max-w-screen-xl mx-auto pb-12 px-2 sm:px-6 lg:px-8">
+      <div className="max-w-(--breakpoint-xl) mx-auto pb-12 px-2 sm:px-6 lg:px-8">
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-250 dark:border-gray-775">
           <div className="rounded-t-lg bg-gray-125 dark:bg-gray-850 border-b border-gray-200 dark:border-gray-750">
             <nav className="px-4 py-4 -mb-px flex space-x-6 sm:space-x-8 overflow-x-auto">
diff --git a/web/src/screens/filters/Importer.tsx b/web/src/screens/filters/Importer.tsx
index c1f8552..c97f4ba 100644
--- a/web/src/screens/filters/Importer.tsx
+++ b/web/src/screens/filters/Importer.tsx
@@ -39,7 +39,7 @@ const ModalLower = ({ isOpen, setIsOpen, onImportClick }: ModalLowerProps) => (
   <div className="bg-gray-50 dark:bg-gray-800 border-t border-gray-300 dark:border-gray-700 px-4 py-3 sm:px-4 sm:flex sm:flex-row-reverse">
     <button
       type="button"
-      className="w-full inline-flex justify-center rounded-md border border-blue-500 shadow-sm px-4 py-2 bg-blue-700 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+      className="w-full inline-flex justify-center rounded-md border border-blue-500 shadow-xs px-4 py-2 bg-blue-700 text-base font-medium text-white hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
       onClick={(e) => {
         e.preventDefault();
         if (isOpen) {
@@ -52,7 +52,7 @@ const ModalLower = ({ isOpen, setIsOpen, onImportClick }: ModalLowerProps) => (
     </button>
     <button
       type="button"
-      className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+      className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-xs px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
       onClick={(e) => {
         e.preventDefault();
         setIsOpen(false);
@@ -246,7 +246,7 @@ export const Importer = ({
             <DialogPanel className="inline-block align-bottom border border-transparent dark:border-gray-700 rounded-lg text-left overflow-hidden shadow-xl transform transition sm:my-8 sm:align-middle w-full sm:max-w-6xl">
               <ModalUpper>
                 <textarea
-                  className="form-input resize-y block w-full shadow-sm sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
+                  className="form-input resize-y block w-full shadow-xs sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
                   placeholder="Paste your filter data here (either autobrr JSON format or your entire autodl-irssi config)"
                   value={inputFilterText}
                   onChange={(event) => {
diff --git a/web/src/screens/filters/List.tsx b/web/src/screens/filters/List.tsx
index a35c4e6..7ed2695 100644
--- a/web/src/screens/filters/List.tsx
+++ b/web/src/screens/filters/List.tsx
@@ -106,13 +106,13 @@ export function Filters() {
         setIsOpen={setShowImportModal}
       />
 
-      <div className="flex justify-between items-center flex-row flex-wrap my-6 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="flex justify-between items-center flex-row flex-wrap my-6 max-w-(--breakpoint-xl) mx-auto px-4 sm:px-6 lg:px-8">
         <h1 className="text-3xl font-bold text-black dark:text-white">Filters</h1>
         <Menu as="div" className="relative">
           {({ open }) => (
             <>
               <button
-                className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-l-md transition text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                className="relative inline-flex items-center px-4 py-2 shadow-xs text-sm font-medium rounded-l-md transition text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                 onClick={(e: { stopPropagation: () => void; }) => {
                   if (!open) {
                     e.stopPropagation();
@@ -123,7 +123,7 @@ export function Filters() {
                 <PlusIcon className="h-5 w-5 mr-1" />
                 Create Filter
               </button>
-              <MenuButton className="relative inline-flex items-center px-2 py-2 border-l border-spacing-1 dark:border-black shadow-sm text-sm font-medium rounded-r-md transition text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500">
+              <MenuButton className="relative inline-flex items-center px-2 py-2 border-l border-spacing-1 dark:border-black shadow-xs text-sm font-medium rounded-r-md transition text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500">
                 <ChevronDownIcon className="h-5 w-5" />
               </MenuButton>
               <Transition
@@ -143,7 +143,7 @@ export function Filters() {
                         type="button"
                         className={classNames(
                           active ? "bg-gray-50 dark:bg-gray-600" : "",
-                          "flex items-center w-full text-left py-2 px-3 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-md focus:outline-none"
+                          "flex items-center w-full text-left py-2 px-3 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-md focus:outline-hidden"
                         )}
                         onClick={() => setShowImportModal(true)}
                       >
@@ -207,7 +207,7 @@ function FilterList({ toggleCreateFilter }: any) {
   const filtered = filteredData(data ?? [], status);
 
   return (
-    <div className="max-w-screen-xl mx-auto pb-12 px-2 sm:px-6 lg:px-8 relative">
+    <div className="max-w-(--breakpoint-xl) mx-auto pb-12 px-2 sm:px-6 lg:px-8 relative">
       <div className="align-middle min-w-full rounded-t-lg rounded-b-lg shadow-table bg-gray-50 dark:bg-gray-800 border border-gray-250 dark:border-gray-775">
         <div className="rounded-t-lg flex justify-between px-4 bg-gray-125 dark:bg-gray-850 border-b border-gray-200 dark:border-gray-750">
           <div className="flex gap-4">
@@ -406,7 +406,7 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
       >
         <MenuItems
           anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2
-          className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-none z-10"
+          className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-hidden z-10"
         >
           <div className="px-1 py-1">
             <MenuItem>
@@ -737,7 +737,7 @@ const ListboxFilter = ({
         leaveTo="opacity-0"
       >
         <ListboxOptions
-          className="w-52 absolute z-10 mt-1 right-0 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-none sm:text-sm"
+          className="w-52 absolute z-10 mt-1 right-0 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-hidden sm:text-sm"
         >
           {children}
         </ListboxOptions>
diff --git a/web/src/screens/filters/NotFound.tsx b/web/src/screens/filters/NotFound.tsx
index 8050c42..b7e206a 100644
--- a/web/src/screens/filters/NotFound.tsx
+++ b/web/src/screens/filters/NotFound.tsx
@@ -31,14 +31,14 @@ export const FilterNotFound = () => {
         {" "}
         <ExternalLink
           href="https://github.com/autobrr/autobrr"
-          className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
+          className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black dark:hover:text-gray-100"
         >
           GitHub page
         </ExternalLink>
         {" or to "}
         <ExternalLink
           href="https://discord.gg/WQ2eUycxyT"
-          className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
+          className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black dark:hover:text-gray-100"
         >
           our official Discord channel
         </ExternalLink>
@@ -50,7 +50,7 @@ export const FilterNotFound = () => {
       <div className="flex justify-center">
         <Link to="/filters">
           <button
-            className="w-48 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+            className="w-48 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-xs text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
           >
             Back to filters
           </button>
diff --git a/web/src/screens/filters/sections/Actions.tsx b/web/src/screens/filters/sections/Actions.tsx
index 7b5f176..0e9a269 100644
--- a/web/src/screens/filters/sections/Actions.tsx
+++ b/web/src/screens/filters/sections/Actions.tsx
@@ -93,10 +93,10 @@ export function Actions() {
                 title="Actions"
                 subtitle="Add to download clients or run custom commands."
               />
-              <div className="ml-4 mt-4 flex-shrink-0">
+              <div className="ml-4 mt-4 shrink-0">
                 <button
                   type="button"
-                  className="relative inline-flex items-center px-4 py-2 border border-transparent transition shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                  className="relative inline-flex items-center px-4 py-2 border border-transparent transition shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                   onClick={() => push(newAction)}
                 >
                   <BoltIcon
@@ -247,7 +247,7 @@ function FilterActionsItem({ action, clients, idx, initialEdit, remove }: Filter
                 {action.name}
               </p>
             </div>
-            <div className="flex-shrink-0 sm:mt-0 sm:ml-5">
+            <div className="shrink-0 sm:mt-0 sm:ml-5">
               <div className="flex overflow-hidden -space-x-1">
                 <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
                   {ActionTypeNameMap[action.type]}
@@ -255,7 +255,7 @@ function FilterActionsItem({ action, clients, idx, initialEdit, remove }: Filter
               </div>
             </div>
           </div>
-          <div className="ml-5 flex-shrink-0">
+          <div className="ml-5 shrink-0">
             <ChevronRightIcon
               className="h-5 w-5 text-gray-400"
               aria-hidden="true"
@@ -303,7 +303,7 @@ function FilterActionsItem({ action, clients, idx, initialEdit, remove }: Filter
             <div className="pt-6 pb-4 flex space-x-2 justify-between">
               <button
                 type="button"
-                className="inline-flex items-center justify-center px-4 py-2 rounded-md sm:text-sm bg-red-700 dark:bg-red-900 hover:dark:bg-red-700 hover:bg-red-800 text-white focus:outline-none"
+                className="inline-flex items-center justify-center px-4 py-2 rounded-md sm:text-sm bg-red-700 dark:bg-red-900 dark:hover:bg-red-700 hover:bg-red-800 text-white focus:outline-hidden"
                 onClick={toggleDeleteModal}
               >
                 Remove Action
@@ -311,7 +311,7 @@ function FilterActionsItem({ action, clients, idx, initialEdit, remove }: Filter
 
               <button
                 type="button"
-                className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none"
+                className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden"
                 onClick={toggleEdit}
               >
                 Close
diff --git a/web/src/screens/filters/sections/External.tsx b/web/src/screens/filters/sections/External.tsx
index fd45cc6..e88e0c8 100644
--- a/web/src/screens/filters/sections/External.tsx
+++ b/web/src/screens/filters/sections/External.tsx
@@ -47,10 +47,10 @@ export function External() {
                 title="External filters"
                 subtitle="Run external scripts or webhooks and check status as part of filtering."
               />
-              <div className="ml-4 mt-4 flex-shrink-0">
+              <div className="ml-4 mt-4 shrink-0">
                 <button
                   type="button"
-                  className="relative inline-flex items-center px-4 py-2 transition border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                  className="relative inline-flex items-center px-4 py-2 transition border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                   onClick={() => push(newItem)}
                 >
                   <SquaresPlusIcon
@@ -170,7 +170,7 @@ function FilterExternalItem({ idx, external, initialEdit, remove, move }: Filter
                 </p>
               </div>
             </div>
-            <div className="flex-shrink-0 sm:mt-0 sm:ml-5">
+            <div className="shrink-0 sm:mt-0 sm:ml-5">
               <div className="flex overflow-hidden -space-x-1">
                 <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
                   {ExternalFilterTypeNameMap[external.type]}
@@ -178,7 +178,7 @@ function FilterExternalItem({ idx, external, initialEdit, remove, move }: Filter
               </div>
             </div>
           </div>
-          <div className="ml-5 flex-shrink-0">
+          <div className="ml-5 shrink-0">
             <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
           </div>
         </button>
@@ -223,7 +223,7 @@ function FilterExternalItem({ idx, external, initialEdit, remove, move }: Filter
             <div className="pt-6 pb-4 space-x-2 flex justify-between">
               <button
                 type="button"
-                className="inline-flex items-center justify-center px-4 py-2 rounded-md sm:text-sm bg-red-700 dark:bg-red-900 hover:dark:bg-red-700 hover:bg-red-800 text-white focus:outline-none"
+                className="inline-flex items-center justify-center px-4 py-2 rounded-md sm:text-sm bg-red-700 dark:bg-red-900 dark:hover:bg-red-700 hover:bg-red-800 text-white focus:outline-hidden"
                 onClick={toggleDeleteModal}
               >
                 Remove External
@@ -231,7 +231,7 @@ function FilterExternalItem({ idx, external, initialEdit, remove, move }: Filter
 
               <button
                 type="button"
-                className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none"
+                className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden"
                 onClick={toggleEdit}
               >
                 Close
diff --git a/web/src/screens/filters/sections/Music.tsx b/web/src/screens/filters/sections/Music.tsx
index 2687d7f..8f2d023 100644
--- a/web/src/screens/filters/sections/Music.tsx
+++ b/web/src/screens/filters/sections/Music.tsx
@@ -149,7 +149,7 @@ export const Music = () => {
             />
           </FilterLayout>
 
-          <FilterLayout className="items-end sm:!gap-x-6">
+          <FilterLayout className="items-end sm:gap-x-6!">
             <FilterRow className="sm:col-span-4">
               <SwitchGroup
                 name="cue"
@@ -197,7 +197,7 @@ export const Music = () => {
           <span className="border-b border-gray-150 dark:border-gray-750 w-full" />
         </div>
 
-        <FilterLayout className="sm:!gap-x-6">
+        <FilterLayout className="sm:gap-x-6!">
           <SwitchGroup
             name="perfect_flac"
             label="Perfect FLAC"
diff --git a/web/src/screens/releases/ReleaseFilters.tsx b/web/src/screens/releases/ReleaseFilters.tsx
index d52f6b9..4bf11d8 100644
--- a/web/src/screens/releases/ReleaseFilters.tsx
+++ b/web/src/screens/releases/ReleaseFilters.tsx
@@ -52,7 +52,7 @@ const ListboxFilter = ({
           leaveTo="opacity-0"
         >
           <ListboxOptions
-            className="absolute z-10 w-full mt-1 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-none sm:text-sm"
+            className="absolute z-10 w-full mt-1 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-hidden sm:text-sm"
           >
             <FilterOption label="All" value="" />
             {children}
diff --git a/web/src/screens/releases/ReleaseTable.tsx b/web/src/screens/releases/ReleaseTable.tsx
index 00c5eb4..afd50a5 100644
--- a/web/src/screens/releases/ReleaseTable.tsx
+++ b/web/src/screens/releases/ReleaseTable.tsx
@@ -267,7 +267,7 @@ export const ReleaseTable = () => {
                         key={header.id}
                         scope="col"
                         colSpan={header.colSpan}
-                        className="first:pl-5 first:rounded-tl-md last:rounded-tr-md pl-3 pr-3 py-3 text-xs font-medium tracking-wider text-left uppercase group text-gray-600 dark:text-gray-400 transition hover:bg-gray-200 dark:hover:bg-gray-775"
+                        className="first:pl-5 first:rounded-tl-md last:rounded-tr-md pl-3 pr-3 py-3 text-xs font-medium tracking-wider text-left uppercase group text-gray-600 dark:text-gray-400"
                       >
                         <div className="flex items-center justify-between">
                           {header.isPlaceholder
@@ -333,7 +333,7 @@ export const ReleaseTable = () => {
                     <label>
                       <span className="sr-only bg-gray-700">Items Per Page</span>
                       <select
-                        className="py-1 pl-2 pr-8 text-sm block w-full border-gray-300 rounded-md shadow-sm cursor-pointer transition-colors dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:text-gray-200 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+                        className="py-1 pl-2 pr-8 text-sm block w-full border-gray-300 rounded-md shadow-xs cursor-pointer transition-colors dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:text-gray-200 focus:border-blue-300 focus:ring-3 focus:ring-blue-200 focus:ring-opacity-50"
                         value={tableInstance.getState().pagination.pageSize}
                         onChange={e => {
                           tableInstance.setPageSize(Number(e.target.value));
@@ -348,7 +348,7 @@ export const ReleaseTable = () => {
                     </label>
                   </div>
                   <div>
-                    <nav className="inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
+                    <nav className="inline-flex -space-x-px rounded-md shadow-xs" aria-label="Pagination">
                       <TablePageButton
                         className="rounded-l-md"
                         onClick={() => tableInstance.firstPage()}
diff --git a/web/src/screens/settings/Account.tsx b/web/src/screens/settings/Account.tsx
index d1b170d..a19b43e 100644
--- a/web/src/screens/settings/Account.tsx
+++ b/web/src/screens/settings/Account.tsx
@@ -145,7 +145,7 @@ function Credentials() {
               <div className="flex justify-end">
                 <button
                   type="submit"
-                  className="mt-4 w-auto flex items-center py-2 px-4 transition rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                  className="mt-4 w-auto flex items-center py-2 px-4 transition rounded-md shadow-xs text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                 >
                   <UserIcon className="w-4 h-4 mr-1" />
                   Save
diff --git a/web/src/screens/settings/Api.tsx b/web/src/screens/settings/Api.tsx
index d1000de..4551943 100644
--- a/web/src/screens/settings/Api.tsx
+++ b/web/src/screens/settings/Api.tsx
@@ -34,7 +34,7 @@ function APISettings() {
       rightSide={
         <button
           type="button"
-          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           onClick={toggleAddForm}
         >
           <PlusIcon className="h-5 w-5 mr-1" />
diff --git a/web/src/screens/settings/Application.tsx b/web/src/screens/settings/Application.tsx
index 382cb75..e2a8be6 100644
--- a/web/src/screens/settings/Application.tsx
+++ b/web/src/screens/settings/Application.tsx
@@ -55,7 +55,7 @@ function ApplicationSettings() {
       description="Application settings. Change in config.toml and restart to take effect."
     >
       <div className="-mx-4 divide-y divide-gray-150 dark:divide-gray-750">
-        <form className="mt-6 mb-4" action="#" method="POST">
+        <form className="mt-6 pb-4" action="#" method="POST">
           {data && (
             <div className="grid grid-cols-12 gap-2 sm:gap-6 px-4 sm:px-6">
               <div className="col-span-12 sm:col-span-4">
diff --git a/web/src/screens/settings/DownloadClient.tsx b/web/src/screens/settings/DownloadClient.tsx
index 054ee3c..0379654 100644
--- a/web/src/screens/settings/DownloadClient.tsx
+++ b/web/src/screens/settings/DownloadClient.tsx
@@ -145,7 +145,7 @@ function DownloadClientSettings() {
       rightSide={
         <button
           type="button"
-          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
           onClick={toggleAddClient}
         >
           <PlusIcon className="h-5 w-5 mr-1" />
diff --git a/web/src/screens/settings/Feed.tsx b/web/src/screens/settings/Feed.tsx
index 3d690f9..bbd7723 100644
--- a/web/src/screens/settings/Feed.tsx
+++ b/web/src/screens/settings/Feed.tsx
@@ -319,7 +319,7 @@ const FeedItemDropdown = ({
       >
         <MenuItems
             anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2
-            className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-none z-10"
+            className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-hidden z-10"
         >
           <div className="px-1 py-1">
             <MenuItem>
diff --git a/web/src/screens/settings/Indexer.tsx b/web/src/screens/settings/Indexer.tsx
index fd9b4e7..fabba85 100644
--- a/web/src/screens/settings/Indexer.tsx
+++ b/web/src/screens/settings/Indexer.tsx
@@ -184,7 +184,7 @@ function IndexerSettings() {
         <button
           type="button"
           onClick={toggleAddIndexer}
-          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
         >
           <PlusIcon className="h-5 w-5 mr-1" />
           Add new
@@ -198,19 +198,19 @@ function IndexerSettings() {
           <ul className="min-w-full relative">
             <li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
               <div
-                className="flex col-span-2 sm:col-span-1 pl-0 sm:pl-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
+                className="flex col-span-2 sm:col-span-1 pl-0 sm:pl-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
                 onClick={() => sortedIndexers.requestSort("enabled")}
               >
                 Enabled <span className="sort-indicator">{sortedIndexers.getSortIndicator("enabled")}</span>
               </div>
               <div
-                className="col-span-7 sm:col-span-8 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
+                className="col-span-7 sm:col-span-8 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
                 onClick={() => sortedIndexers.requestSort("name")}
               >
                 Name <span className="sort-indicator">{sortedIndexers.getSortIndicator("name")}</span>
               </div>
               <div
-                className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
+                className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
                 onClick={() => sortedIndexers.requestSort("implementation")}
               >
                 Implementation <span className="sort-indicator">{sortedIndexers.getSortIndicator("implementation")}</span>
diff --git a/web/src/screens/settings/Irc.tsx b/web/src/screens/settings/Irc.tsx
index f0c44d0..5e3db3f 100644
--- a/web/src/screens/settings/Irc.tsx
+++ b/web/src/screens/settings/Irc.tsx
@@ -104,7 +104,7 @@ const IrcSettings = () => {
         <button
           type="button"
           onClick={toggleAddNetwork}
-          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
         >
           <PlusIcon className="h-5 w-5 mr-1" />
           Add new
@@ -145,7 +145,7 @@ const IrcSettings = () => {
         </ul>
         <div className="flex gap-x-2">
           <button
-            className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded shadow bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
+            className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded-sm shadow-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
             onClick={toggleExpand}
             title={expandNetworks ? "collapse" : "expand"}
           >
@@ -390,7 +390,7 @@ const ChannelItem = ({ network, channel }: ChannelItemProps) => {
           </span>
         </div>
         <div className="col-span-1 flex items-center justify-end">
-          <button className="hover:text-gray-500 px-2 mx-2 py-1 dark:bg-gray-800 rounded dark:border-gray-900">
+          <button className="hover:text-gray-500 px-2 mx-2 py-1 dark:bg-gray-800 rounded-sm dark:border-gray-900">
             {viewChannel ? "Hide" : "View"}
           </button>
         </div>
@@ -479,7 +479,7 @@ const ListItemDropdown = ({
       >
         <MenuItems
             anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2
-            className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-none z-10"
+            className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-hidden z-10"
         >
           <div className="px-1 py-1">
             <MenuItem>
@@ -609,7 +609,7 @@ const ReprocessAnnounceButton = ({ networkId, channel, msg }: ReprocessAnnounceP
 
   return (
     <div className="block">
-    <button className="flex items-center justify-center size-5 mr-1 p-1 rounded transition border-gray-500 bg-gray-250 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600" onClick={reprocessAnnounce} title="Re-process announce">
+    <button className="flex items-center justify-center size-5 mr-1 p-1 rounded-sm transition border-gray-500 bg-gray-250 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600" onClick={reprocessAnnounce} title="Re-process announce">
       {mutation.isPending
         ? <RingResizeSpinner className="text-blue-500 iconHeight" aria-hidden="true" />
         : <ArrowPathIcon />
@@ -720,7 +720,7 @@ export const Events = ({ network, channel }: EventsProps) => {
       <div
         className={classNames(
           "overflow-y-auto rounded-lg min-w-full bg-gray-100 dark:bg-gray-900 overflow-auto",
-          isFullscreen ? "max-w-full h-full p-2 border-gray-300 dark:border-gray-700" : "px-2 py-1 aspect-[2/1]"
+          isFullscreen ? "max-w-full h-full p-2 border-gray-300 dark:border-gray-700" : "px-2 py-1 aspect-2/1"
         )}
         ref={messagesEndRef}
       >
@@ -730,7 +730,7 @@ export const Events = ({ network, channel }: EventsProps) => {
             className={classNames(
               settings.indentLogLines ? "grid justify-start grid-flow-col" : "",
               settings.hideWrappedText ? "truncate hover:text-ellipsis hover:whitespace-normal" : "",
-              "flex items-center hover:bg-gray-200 hover:dark:bg-gray-800"
+              "flex items-center hover:bg-gray-200 dark:hover:bg-gray-800"
             )}
           >
             <ReprocessAnnounceButton networkId={network.id} channel={channel} msg={entry.msg} />
@@ -777,7 +777,7 @@ const IRCLogsDropdown = () => {
   //  at IRCLogsDropdown (http://localhost:3000/src/screens/settings/Irc.tsx?t=1694269937935:1354:53)
   return (
     <Menu as="div" className="relative">
-      <MenuButton className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded shadow bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
+      <MenuButton className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded-sm shadow-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
         <span className="flex items-center">Options <Cog6ToothIcon className="ml-1 w-4 h-4" /></span>
       </MenuButton>
       <Transition
@@ -791,7 +791,7 @@ const IRCLogsDropdown = () => {
       >
         <MenuItems
           anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2
-          className="absolute z-10 mt-2 px-3 py-2 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-750 focus:outline-none"
+          className="absolute z-10 mt-2 px-3 py-2 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-750 focus:outline-hidden"
         >
           <MenuItem>
             {() => (
diff --git a/web/src/screens/settings/Lists.tsx b/web/src/screens/settings/Lists.tsx
index 9d1408f..47e9a77 100644
--- a/web/src/screens/settings/Lists.tsx
+++ b/web/src/screens/settings/Lists.tsx
@@ -34,7 +34,7 @@ function ListsSettings() {
         <button
           type="button"
           onClick={toggleAddList}
-          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
         >
           <PlusIcon className="h-5 w-5 mr-1"/>
           Add new
@@ -91,7 +91,7 @@ interface FilterPillProps {
 
 const FilterPill: FC<FilterPillProps> = ({ filter }) => (
   <Link
-    className="hidden sm:inline-flex items-center px-2 py-0.5 rounded-md text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400 hover:dark:bg-gray-750 hover:bg-gray-700"
+    className="hidden sm:inline-flex items-center px-2 py-0.5 rounded-md text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400 dark:hover:bg-gray-750 hover:bg-gray-700"
     to={`/filters/$filterId`}
     params={{ filterId: filter.id }}
   >
diff --git a/web/src/screens/settings/Notifications.tsx b/web/src/screens/settings/Notifications.tsx
index c234185..b5c3048 100644
--- a/web/src/screens/settings/Notifications.tsx
+++ b/web/src/screens/settings/Notifications.tsx
@@ -40,7 +40,7 @@ function NotificationSettings() {
         <button
           type="button"
           onClick={toggleAddNotifications}
-          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
         >
           <PlusIcon className="h-5 w-5 mr-1" />
           Add new
@@ -67,7 +67,7 @@ function NotificationSettings() {
   );
 }
 
-const iconStyle = "flex items-center px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400";
+const iconStyle = "flex items-center px-2 py-0.5 rounded-sm bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400";
 const iconComponentMap: componentMapType = {
   DISCORD: <span className={iconStyle}><DiscordIcon /> Discord</span>,
   NOTIFIARR: <span className={iconStyle}><NotifiarrIcon /> Notifiarr</span>,
diff --git a/web/src/screens/settings/Proxy.tsx b/web/src/screens/settings/Proxy.tsx
index 5f33173..3549832 100644
--- a/web/src/screens/settings/Proxy.tsx
+++ b/web/src/screens/settings/Proxy.tsx
@@ -86,7 +86,7 @@ function ProxySettings() {
         <button
           type="button"
           onClick={toggleAddProxy}
-          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
         >
           <PlusIcon className="h-5 w-5 mr-1"/>
           Add new
@@ -100,21 +100,21 @@ function ProxySettings() {
           <ul className="min-w-full relative">
             <li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
               <div
-                className="flex col-span-2 sm:col-span-1 pl-0 sm:pl-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
+                className="flex col-span-2 sm:col-span-1 pl-0 sm:pl-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
                 // onClick={() => sortedIndexers.requestSort("enabled")}
               >
                 Enabled
                 {/*<span className="sort-indicator">{sortedIndexers.getSortIndicator("enabled")}</span>*/}
               </div>
               <div
-                className="col-span-7 sm:col-span-8 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
+                className="col-span-7 sm:col-span-8 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
                 // onClick={() => sortedIndexers.requestSort("name")}
               >
                 Name
                 {/*<span className="sort-indicator">{sortedIndexers.getSortIndicator("name")}</span>*/}
               </div>
               <div
-                className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
+                className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
                 // onClick={() => sortedIndexers.requestSort("implementation")}
               >
                 Type
diff --git a/web/src/screens/settings/RegexPlayground.tsx b/web/src/screens/settings/RegexPlayground.tsx
index 2e07db2..9e414f6 100644
--- a/web/src/screens/settings/RegexPlayground.tsx
+++ b/web/src/screens/settings/RegexPlayground.tsx
@@ -80,7 +80,7 @@ const RegexPlayground = () => {
           id="input-regex"
           type="text"
           autoComplete="true"
-          className="mt-1 mb-4 block w-full border rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100 sm:text-sm"
+          className="mt-1 mb-4 block w-full border rounded-md shadow-xs py-2 px-3 focus:outline-hidden focus:ring-blue-500 focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100 sm:text-sm"
         />
         <label
           htmlFor="input-lines"
@@ -90,7 +90,7 @@ const RegexPlayground = () => {
         </label>
         <div
           id="input-lines"
-          className="mt-1 mb-4 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
+          className="mt-1 mb-4 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-xs py-2 px-3 focus:outline-hidden focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
           onInput={(e) => onInput(e.currentTarget.innerText ?? "")}
           contentEditable
         ></div>
diff --git a/web/src/screens/settings/Releases.tsx b/web/src/screens/settings/Releases.tsx
index ff1b5a7..ecdba15 100644
--- a/web/src/screens/settings/Releases.tsx
+++ b/web/src/screens/settings/Releases.tsx
@@ -26,7 +26,7 @@ const ReleaseSettings = () => (
     <ReleaseProfileDuplicates/>
 
     <div className="py-6 px-4 sm:p-6">
-      <div className="border border-red-500 rounded">
+      <div className="border border-red-500 rounded-sm">
         <div className="py-6 px-4 sm:p-6">
           <DeleteReleases/>
         </div>
@@ -111,7 +111,7 @@ function ReleaseProfileDuplicates() {
       rightSide={
         <button
           type="button"
-          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+          className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
           onClick={toggleAdd}
         >
           <PlusIcon className="h-5 w-5 mr-1"/>
@@ -320,7 +320,7 @@ function DeleteReleases() {
                 toggleDeleteModal();
               }
             }}
-            className="inline-flex justify-center sm:w-1/5 md:w-1/5 w-full px-4 py-2 sm:mt-6 border border-transparent text-sm font-medium rounded-md text-red-700 hover:text-red-800 dark:text-white bg-red-200 dark:bg-red-700 hover:bg-red-300 dark:hover:bg-red-800 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-red-600"
+            className="inline-flex justify-center sm:w-1/5 md:w-1/5 w-full px-4 py-2 sm:mt-6 border border-transparent text-sm font-medium rounded-md text-red-700 hover:text-red-800 dark:text-white bg-red-200 dark:bg-red-700 hover:bg-red-300 dark:hover:bg-red-800 focus:outline-hidden focus:ring-1 focus:ring-inset focus:ring-red-600"
           >
             Delete
           </button>
diff --git a/web/src/screens/settings/_components.tsx b/web/src/screens/settings/_components.tsx
index cffb1ae..a0ecdbf 100644
--- a/web/src/screens/settings/_components.tsx
+++ b/web/src/screens/settings/_components.tsx
@@ -41,7 +41,7 @@ export const Section = ({
         {titleElement ?? <h2 className="text-lg leading-4 font-bold text-gray-900 dark:text-white">{title}</h2>}
         <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{description}</p>
       </div>
-      <div className="flex-shrink-0">
+      <div className="shrink-0">
         {rightSide ?? null}
       </div>
     </div>
@@ -80,7 +80,7 @@ export const RowItem = ({
         ? (
           <>
             {typeof (value) === "string" ? (
-              <span className="px-1.5 py-1 bg-gray-200 dark:bg-gray-700 rounded shadow text-ellipsis leading-7">
+              <span className="px-1.5 py-1 bg-gray-200 dark:bg-gray-700 rounded-sm shadow-sm text-ellipsis leading-7">
                 {value}
               </span>
             ) : value}
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 9979329..9700fd7 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -5,6 +5,7 @@ import react from "@vitejs/plugin-react-swc";
 import svgr from "vite-plugin-svgr";
 import path from "node:path";
 import fs from "node:fs";
+import tailwindcss from '@tailwindcss/vite'
 
 interface PreRenderedAsset {
   name: string | undefined;
@@ -21,7 +22,7 @@ export default ({ mode }: ConfigEnv) => {
   return defineConfig({
     // __BASE_URL__: "{{.BaseUrl}}",
     base: "",
-    plugins: [react(), svgr(), VitePWA({
+    plugins: [react(), svgr(), tailwindcss(), VitePWA({
       injectRegister: null,
       selfDestroying: true,
       scope: "{{.BaseUrl}}",