diff --git a/reposilite-frontend/.vscode/settings.json b/reposilite-frontend/.vscode/settings.json
index 953fe9739..b3aafd3a9 100644
--- a/reposilite-frontend/.vscode/settings.json
+++ b/reposilite-frontend/.vscode/settings.json
@@ -14,8 +14,7 @@
     "signout",
     "toastify",
     "vueform",
-    "vueuse",
-    "windicss"
+    "vueuse"
   ],
   "vetur.validation.script": false // https://github.com/vuejs/vetur/issues/2296
 }
diff --git a/reposilite-frontend/build.gradle.kts b/reposilite-frontend/build.gradle.kts
index c259e7f1d..35e2e2297 100644
--- a/reposilite-frontend/build.gradle.kts
+++ b/reposilite-frontend/build.gradle.kts
@@ -32,7 +32,7 @@ node {
 //    dependsOn(tasks.npmInstall)
 //    inputs.dir("src")
 //    inputs.dir("node_modules")
-//    inputs.files("vite.config.js", "windi.config.js", "index.html", "eslint.config.js")
+//    inputs.files("vite.config.js", "index.html", "eslint.config.js")
 //    outputs.upToDateWhen { true }
 //}
 
@@ -44,7 +44,7 @@ val buildTask = tasks.register<NpmTask>("buildFrontend") {
     dependsOn(tasks.npmInstall)
     inputs.dir(project.fileTree("src"))
     inputs.dir("node_modules")
-    inputs.files("vite.config.js", "windi.config.js", "index.html")
+    inputs.files("vite.config.js", "index.html")
     outputs.dir("${project.layout.buildDirectory.get()}/frontend")
 }
 
diff --git a/reposilite-frontend/fake-api/fake-ingot-backend.js b/reposilite-frontend/fake-api/fake-ingot-backend.js
index e6acec6ca..7dd578636 100644
--- a/reposilite-frontend/fake-api/fake-ingot-backend.js
+++ b/reposilite-frontend/fake-api/fake-ingot-backend.js
@@ -85,11 +85,34 @@ let accessTokens = [
   },
 ]
 
+// The dashboard now draws meters against maxMemory and maxThreads, so the stub has to stay
+// inside its own limits. It used to add to both without bound, which drove every reading
+// past 100% within a minute and made the panel impossible to judge.
+const MAX_MEMORY_MB = 512
+const MAX_THREADS = 64
+
+// A rolling window of snapshots, so the trend charts have a shape to draw rather than the
+// two points the stub used to return.
+const snapshots = []
+
+const recordSnapshot = () => {
+  snapshots.push({ at: new Date().getTime(), memory: Math.round(memory), threads })
+  if (snapshots.length > 120) snapshots.shift()
+}
+
+for (let step = 60; step > 0; step--) {
+  snapshots.push({
+    at: new Date().getTime() - step * 30000,
+    memory: Math.round(140 + Math.sin(step / 6) * 60 + step / 3),
+    threads: Math.round(18 + Math.sin(step / 4) * 6)
+  })
+}
+
 setInterval(() => {
-  memory += Math.random() * 10
-  threads += 1
+  memory = Math.min(MAX_MEMORY_MB, Math.max(64, memory + (Math.random() - 0.45) * 20))
+  threads = Math.min(MAX_THREADS, Math.max(4, threads + (Math.random() < 0.5 ? -1 : 1)))
   uptime += 5000
-  failures += 1
+  recordSnapshot()
 }, 5000)
 
 const statisticsSeries = [
@@ -341,13 +364,15 @@ application
       req,
       () => {
         res.send({
-          version: '3.2.0',
-          latestVersion: '<unknown>',
+          version: '1.0.0',
+          // Deliberately ahead of `version`, so the "update available" state on the version
+          // tile is reachable without editing this file.
+          latestVersion: '1.1.0',
           uptime: uptime,
           usedMemory: memory,
-          maxMemory: '32',
+          maxMemory: MAX_MEMORY_MB,
           usedThreads: threads,
-          maxThreads: 64,
+          maxThreads: MAX_THREADS,
           failuresCount: failures
         })
       },
@@ -358,18 +383,7 @@ application
     authorized(
       req,
       () => {
-        res.send([
-          {
-            at: new Date().getTime() - (1000 * 60),
-            memory: 20,
-            threads: 11
-          },
-          {
-            at: new Date().getTime(),
-            memory: 10,
-            threads: 5
-          }
-        ])
+        res.send(snapshots)
       },
       () => invalidCredentials(res)
     )
diff --git a/reposilite-frontend/package-lock.json b/reposilite-frontend/package-lock.json
index 9902ead6f..0b976ea19 100644
--- a/reposilite-frontend/package-lock.json
+++ b/reposilite-frontend/package-lock.json
@@ -32,6 +32,8 @@
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
+        "@tailwindcss/forms": "^0.5.11",
+        "@tailwindcss/vite": "^4.3.3",
         "@vitejs/plugin-vue": "^6.0.7",
         "@vitejs/plugin-vue-jsx": "^5.1.5",
         "@vue/compiler-sfc": "^3.5.35",
@@ -47,9 +49,8 @@
         "license-checker-rseidelsohn": "^5.0.1",
         "nodemon": "^3.1.14",
         "rollup-plugin-visualizer": "^7.0.1",
+        "tailwindcss": "^4.3.3",
         "vite": "^8.0.16",
-        "vite-plugin-windicss": "^1.9.4",
-        "windicss": "^3.5.6",
         "ws": "^8.21.0"
       },
       "engines": {
@@ -57,16 +58,6 @@
         "npm": ">=10.0.0"
       }
     },
-    "node_modules/@antfu/utils": {
-      "version": "0.7.10",
-      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.10.tgz",
-      "integrity": "sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -829,44 +820,6 @@
         "@emnapi/runtime": "^1.7.1"
       }
     },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/@npmcli/agent": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-4.0.2.tgz",
@@ -1644,6 +1597,303 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.11.tgz",
+      "integrity": "sha512-h9wegbZDPurxG22xZSoWtdzc41/OlNEUQERNqI/0fOwa2aVlWGu7C35E/x6LDyD3lgtztFSSjKZyuVM0hxhbgA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz",
+      "integrity": "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.24.1",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.3.tgz",
+      "integrity": "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-x64": "4.3.3",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.3",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.3",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.3",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.3.tgz",
+      "integrity": "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.3.tgz",
+      "integrity": "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.3.tgz",
+      "integrity": "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.3.tgz",
+      "integrity": "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.3.tgz",
+      "integrity": "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.3.tgz",
+      "integrity": "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.3.tgz",
+      "integrity": "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.3.tgz",
+      "integrity": "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.3.tgz",
+      "integrity": "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.3.tgz",
+      "integrity": "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.11.1",
+        "@emnapi/runtime": "^1.11.1",
+        "@emnapi/wasi-threads": "^1.2.2",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.3.tgz",
+      "integrity": "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.3.tgz",
+      "integrity": "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.3.tgz",
+      "integrity": "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.3",
+        "@tailwindcss/oxide": "4.3.3",
+        "tailwindcss": "4.3.3"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
     "node_modules/@tufjs/canonical-json": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
@@ -2252,40 +2502,6 @@
         "vue": "^3.5.0"
       }
     },
-    "node_modules/@windicss/config": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/@windicss/config/-/config-1.9.4.tgz",
-      "integrity": "sha512-vKXJlEC01/LFuYLF6XZsrCv13QKsxByWFqzDRctTva+O4yqr5j0e5VWB4Dr2tgzVbZuYG5ewg7qywAI/9JD0Cw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.3.7",
-        "jiti": "^1.21.6",
-        "windicss": "^3.5.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@windicss/plugin-utils": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-1.9.4.tgz",
-      "integrity": "sha512-GUAX0z+wnq6Rn3+YGJli/keGja73+a6I/PtTpH8EMlNNHrHBbqsbyY5+25QagV39rHwTe/IbkiSdD3csP8L6MA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@antfu/utils": "^0.7.10",
-        "@windicss/config": "1.9.4",
-        "debug": "^4.3.7",
-        "fast-glob": "^3.3.2",
-        "magic-string": "^0.30.14",
-        "micromatch": "^4.0.8",
-        "windicss": "^3.5.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
@@ -3482,6 +3698,20 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.24.5",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.24.5.tgz",
+      "integrity": "sha512-L1l8TNvomm6UVW5B253AGxQagSQr+vGwhMlrrfRS2qmhx46AMpMVJKQYLvWYbysTMY8VoicOvzHzoHMbyzB+4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
@@ -3999,36 +4229,6 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "license": "MIT"
     },
-    "node_modules/fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -4059,16 +4259,6 @@
       ],
       "license": "BSD-3-Clause"
     },
-    "node_modules/fastq": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
-      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -4789,13 +4979,13 @@
       "license": "ISC"
     },
     "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
       "devOptional": true,
       "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/jju": {
@@ -5317,13 +5507,6 @@
         "graceful-fs": "^4.1.9"
       }
     },
-    "node_modules/kolorist": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
-      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5884,16 +6067,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/method-override": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/method-override/-/method-override-3.0.0.tgz",
@@ -5937,20 +6110,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
     "node_modules/mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -5989,6 +6148,16 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "10.2.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
@@ -7169,27 +7338,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -7268,17 +7416,6 @@
         "lodash": "^4.17.21"
       }
     },
-    "node_modules/reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/rolldown": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.3.tgz",
@@ -7533,30 +7670,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
     "node_modules/rxjs": {
       "version": "7.8.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
@@ -8111,6 +8224,27 @@
       "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
       "license": "MIT"
     },
+    "node_modules/tailwindcss": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
+      "integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tar": {
       "version": "7.5.22",
       "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.22.tgz",
@@ -8620,25 +8754,6 @@
         }
       }
     },
-    "node_modules/vite-plugin-windicss": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.9.4.tgz",
-      "integrity": "sha512-3t1AUVrs2XBXGc2BefRPRvy1CLy8qA/5A1J1Z73Ej1DIx+puXn39MQSWluxZ2FHEz8z9OEIvsoIIPc/s/P3OmQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@windicss/plugin-utils": "1.9.4",
-        "debug": "^4.3.7",
-        "kolorist": "^1.8.0",
-        "windicss": "^3.5.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "vite": "*"
-      }
-    },
     "node_modules/vite/node_modules/picomatch": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
@@ -9029,19 +9144,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/windicss": {
-      "version": "3.5.6",
-      "resolved": "https://registry.npmjs.org/windicss/-/windicss-3.5.6.tgz",
-      "integrity": "sha512-P1mzPEjgFMZLX0ZqfFht4fhV/FX8DTG7ERG1fBLiWvd34pTLVReS5CVsewKn9PApSgXnVfPWwvq+qUsRwpnwFA==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "windicss": "cli/index.js"
-      },
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
diff --git a/reposilite-frontend/package.json b/reposilite-frontend/package.json
index 60aa38d40..198c7a083 100644
--- a/reposilite-frontend/package.json
+++ b/reposilite-frontend/package.json
@@ -41,6 +41,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@tailwindcss/forms": "^0.5.11",
+    "@tailwindcss/vite": "^4.3.3",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitejs/plugin-vue-jsx": "^5.1.5",
     "@vue/compiler-sfc": "^3.5.35",
@@ -56,9 +58,8 @@
     "license-checker-rseidelsohn": "^5.0.1",
     "nodemon": "^3.1.14",
     "rollup-plugin-visualizer": "^7.0.1",
+    "tailwindcss": "^4.3.3",
     "vite": "^8.0.16",
-    "vite-plugin-windicss": "^1.9.4",
-    "windicss": "^3.5.6",
     "ws": "^8.21.0"
   }
 }
diff --git a/reposilite-frontend/src/App.vue b/reposilite-frontend/src/App.vue
index 2ad3b7ccd..d4d818706 100644
--- a/reposilite-frontend/src/App.vue
+++ b/reposilite-frontend/src/App.vue
@@ -50,36 +50,9 @@ initializeSession().catch(() => {})
   </div>
 </template>
 
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap');
-
-html, body {
-  @apply bg-gray-100 dark:bg-black;
-}
-#app {
-  font-family: 'Open Sans', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.router-view-full {
-  min-height: calc(100vh - 2rem);
-}
-.container {
-  @apply px-10 <sm:px-2;
-}
-.active {
-  @apply dark:border-white;
-}
-.bg-default {
-  @apply bg-gray-100 dark:border-gray-900;
-}
+<!--
+  - The global rules this component used to carry now live in src/style.css. They were
+  - never scoped to App.vue to begin with, and a component style block cannot express the
+  - cascade layer each of them needs.
+  -->
 
-/* skeleton placeholders: the card/background is instant, only these bars fade in so a fast response replaces them before they flicker */
-.skeleton-bars {
-  animation: skeleton-fade-in 0.8s ease-out 0.2s both;
-}
-@keyframes skeleton-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-</style>
diff --git a/reposilite-frontend/src/components/browser/BreadcrumbNavigation.vue b/reposilite-frontend/src/components/browser/BreadcrumbNavigation.vue
index a77826823..c69dc8d13 100644
--- a/reposilite-frontend/src/components/browser/BreadcrumbNavigation.vue
+++ b/reposilite-frontend/src/components/browser/BreadcrumbNavigation.vue
@@ -43,7 +43,7 @@ const breadcrumbs = computed(() => {
       </span>
       <span class="select-text">
         <router-link v-for="crumb of breadcrumbs" :key="crumb.link" :to="crumb.link">
-          <span class="hover:(transition-colors duration-200 text-purple-500)">{{ crumb.name }}</span>
+          <span class="hover:transition-colors hover:duration-200 hover:text-purple-500">{{ crumb.name }}</span>
         </router-link>
       </span>
       <router-link :to="parentPath">
diff --git a/reposilite-frontend/src/components/browser/DetailedListEntry.vue b/reposilite-frontend/src/components/browser/DetailedListEntry.vue
index 71892fd99..c44b14761 100644
--- a/reposilite-frontend/src/components/browser/DetailedListEntry.vue
+++ b/reposilite-frontend/src/components/browser/DetailedListEntry.vue
@@ -70,7 +70,7 @@ const defaultMode = computed(() => !props.compactMode)
           v-if="file.hasOwnProperty('contentLength') && isHumanReadable" 
           :title="`Click to view ${file.name} file content in a new tab`"
           id="view-button"
-          class="px-1 mr-6 pt-0.4 rounded-full text-purple-300 hover:(transition-colors duration-200 bg-gray-100 dark:bg-gray-900)" 
+          class="px-1 mr-6 pt-[0.1rem] rounded-full text-purple-300 hover:transition-colors hover:duration-200 hover:bg-gray-100 dark:hover:bg-gray-900" 
           @click.left.prevent="openUrl(url)"
           v-on:click.stop
         />
@@ -78,14 +78,14 @@ const defaultMode = computed(() => !props.compactMode)
           v-if="isJavaDocsAvailable()"
           :title="`Click to view ${file.name} javadocs in a new tab`"
           id="javadoc-button"
-          class="px-1 mr-6 pt-0.4 rounded-full text-purple-300 hover:(transition-colors duration-200 bg-gray-100 dark:bg-gray-900)"
+          class="px-1 mr-6 pt-[0.1rem] rounded-full text-purple-300 hover:transition-colors hover:duration-200 hover:bg-gray-100 dark:hover:bg-gray-900"
           @click.left.prevent="openUrl(getJavaDocsUrl())"
           v-on:click.stop
         />
         <TrashIcon
           v-if="qualifier.path.length > 1 && hasPermissionTo(`/${qualifier.path}`, 'route:write')"
           id="delete-button"
-          class="px-1 mr-6 pt-0.4 rounded-full text-purple-300 hover:(transition-colors duration-200 bg-gray-100 dark:bg-gray-900)"
+          class="px-1 mr-6 pt-[0.1rem] rounded-full text-purple-300 hover:transition-colors hover:duration-200 hover:bg-gray-100 dark:hover:bg-gray-900"
           @click.left.prevent="openDeleteEntryModal(file.name)"
           v-on:click.stop
         />
@@ -98,24 +98,25 @@ const defaultMode = computed(() => !props.compactMode)
 </template>
 
 <style>
+@reference "../../style.css";
 .browser-entry:hover > .entry-details .entry-menu {
   display: flex;
 }
 
 .default-entry {
-  @apply flex flex-row justify-between mb-1.5 py-3 rounded-3xl default-button <sm:rounded-xl;
+  @apply flex flex-row justify-between mb-1.5 py-3 rounded-3xl default-button max-sm:rounded-xl;
 }
 .compact-entry {
   @apply rounded-lg inline-block w-full flex;
-  @apply hover:(transition-colors duration-200 bg-purple-400 text-white);
-  @apply dark:text-white dark:hover:(transition-colors duration-200 bg-purple-600);
+  @apply hover:transition-colors hover:duration-200 hover:bg-purple-400 hover:text-white;
+  @apply dark:text-white dark:hover:transition-colors dark:hover:duration-200 dark:hover:bg-purple-600;
 }
 
 .default-icon {
-  @apply text-xm px-6 pt-1.75 <sm:px-3;
+  @apply text-xm px-6 pt-1.75 max-sm:px-3;
 }
 .compact-icon {
-  @apply text-xxs pl-4 pt-2 <sm:px-3;
+  @apply text-xxs pl-4 pt-2 max-sm:px-3;
 }
 
 .default-filename {
diff --git a/reposilite-frontend/src/components/browser/FileBrowserView.vue b/reposilite-frontend/src/components/browser/FileBrowserView.vue
index 6734308a7..194337697 100644
--- a/reposilite-frontend/src/components/browser/FileBrowserView.vue
+++ b/reposilite-frontend/src/components/browser/FileBrowserView.vue
@@ -120,7 +120,7 @@ const toggleCompactMode = () => {
 const MenuButton = (_, context) => {
   return (
     <div class="w-9 mx-2">
-      <div class="bg-white dark:bg-gray-900 pl-2 pt-1.3 pb-1 pr-2 cursor-pointer rounded-full default-button">
+      <div class="bg-white dark:bg-gray-900 pl-2 pt-[0.325rem] pb-1 pr-2 cursor-pointer rounded-full default-button">
         {context.slots.default()}
       </div>
     </div>
@@ -131,7 +131,7 @@ const MenuButton = (_, context) => {
 <template>
   <div class="bg-gray-100">
     <div class="dark:bg-black">
-      <div class="container mx-auto relative min-h-320px mb-12">
+      <div class="container mx-auto relative min-h-[320px] mb-12">
         <div class="lg:absolute pt-13 -top-5 right-8">
           <Card :qualifier="qualifier" />
         </div>
@@ -140,14 +140,14 @@ const MenuButton = (_, context) => {
             <Breadcrumb :parentPath="parentPath" />
             <div class="flex">
               <MenuButton @click="toggleCompactMode()">
-                <ViewGrid v-if="fileBrowserCompactMode" class="pr-0.9"/>
-                <ViewList v-else class="pr-0.9"/>
+                <ViewGrid v-if="fileBrowserCompactMode" class="pr-[0.225rem]"/>
+                <ViewList v-else class="pr-[0.225rem]"/>
               </MenuButton>
               <AdjustmentsModal>
                 <template v-slot:button>
                   <div class="w-9">
-                    <div class="bg-white dark:bg-gray-900 pl-2 pt-1.3 pb-1 pr-2 cursor-pointer rounded-full default-button">
-                      <AdjustmentsIcon class="pr-0.9" />
+                    <div class="bg-white dark:bg-gray-900 pl-2 pt-[0.325rem] pb-1 pr-2 cursor-pointer rounded-full default-button">
+                      <AdjustmentsIcon class="pr-[0.225rem]" />
                     </div>
                   </div>
                 </template>
diff --git a/reposilite-frontend/src/components/browser/FileList.vue b/reposilite-frontend/src/components/browser/FileList.vue
index 7c32a5282..f5dbeb533 100644
--- a/reposilite-frontend/src/components/browser/FileList.vue
+++ b/reposilite-frontend/src/components/browser/FileList.vue
@@ -150,6 +150,7 @@ const RouterEntry = ({ file }, context) => {
 </template>
 
 <style>
+@reference "../../style.css";
 .compact-background {
   @apply relative w-full bg-white dark:bg-gray-800 py-3 px-1 rounded-xl;
 }
diff --git a/reposilite-frontend/src/components/browser/FileUpload.vue b/reposilite-frontend/src/components/browser/FileUpload.vue
index e1931de50..adfe5bb25 100644
--- a/reposilite-frontend/src/components/browser/FileUpload.vue
+++ b/reposilite-frontend/src/components/browser/FileUpload.vue
@@ -104,8 +104,8 @@ const uploadFiles = () => {
       :class="[ isEnabled ? 'rounded-t-3xl rounded-b' : 'rounded-3xl' ]"
       class="
         border border-dashed mt-1.5 cursor-pointer
-        bg-gray-50 border-gray-300 hover:(transition-colors duration-200 bg-white)
-        dark:bg-black dark:border-gray-800 dark:hover:(transition-colors duration-400 bg-gray-900)
+        bg-gray-50 border-gray-300 hover:transition-colors hover:duration-200 hover:bg-white
+        dark:bg-black dark:border-gray-800 dark:hover:transition-colors dark:hover:duration-400 dark:hover:bg-gray-900
       "
     >
       <FileUpload
@@ -125,7 +125,7 @@ const uploadFiles = () => {
             </p>
           </div>
           <div v-else class="flex">
-            <span class="text-xm pt-1.6">🟣</span>
+            <span class="text-xm pt-[0.4rem]">🟣</span>
             <span class="font-bold px-5">Select files</span>
           </div>
         </div>
@@ -133,7 +133,7 @@ const uploadFiles = () => {
       <div v-if="isEnabled">
         <div class="-mt-2 pb-2">
           <div v-for="file in files" :key="file.name" class="pt-1 px-6 flex">
-            <span @click="removeFile(file)" class="pt-0.85">
+            <span @click="removeFile(file)" class="pt-[0.2125rem]">
               <CloseIcon class="h-5 pb-1 text-purple-400" />
             </span>
             <span class="px-2">{{file.name}}</span>
@@ -177,8 +177,8 @@ const uploadFiles = () => {
           @click.prevent="uploadFiles"
           class="
             border text-sm py-1.5 h-9 px-4 mt-2 border-dashed rounded
-            bg-gray-50  border-gray-400 hover:(transition-colors duration-200 bg-purple-500 text-white)
-            dark:bg-black dark:border-gray-700 dark:text-white dark:hover:(transition-colors duration-200 bg-purple-700)
+            bg-gray-50  border-gray-400 hover:transition-colors hover:duration-200 hover:bg-purple-500 hover:text-white
+            dark:bg-black dark:border-gray-700 dark:text-white dark:hover:transition-colors dark:hover:duration-200 dark:hover:bg-purple-700
           "
         >
           <span>Upload files </span>
@@ -191,6 +191,7 @@ const uploadFiles = () => {
 </template>
 
 <style>
+@reference "../../style.css";
 #browser-upload label {
   @apply cursor-pointer;
 }
diff --git a/reposilite-frontend/src/components/card/CardMenu.vue b/reposilite-frontend/src/components/card/CardMenu.vue
index 0d4134ed1..d25ae2477 100644
--- a/reposilite-frontend/src/components/card/CardMenu.vue
+++ b/reposilite-frontend/src/components/card/CardMenu.vue
@@ -44,28 +44,28 @@ watchEffect(() => localStorage.setItem('dropdown-open', dropdownOpen.value))
 
 <template>
   <div>
-    <div id="card-menu" class="flex mt-2 <sm:(hidden)">
+    <div id="card-menu" class="flex mt-2 max-sm:hidden">
       <div 
         v-for="configuration in configurations" 
         :key="configuration.name" 
         @click="selectConfiguration(configuration)"
         class="py-4 px-7 flex-grow text-center border-b-2 cursor-pointer border-transparent"
-        :class="{ '!border-gray-800': configuration.name === selectedTab }"
+        :class="{ 'border-gray-800!': configuration.name === selectedTab }"
       >
         {{ configuration.name }}
       </div>
     </div>
-    <div class="hidden flex-col items-center mt-24px <sm:(flex)">
+    <div class="hidden flex-col items-center mt-[24px] max-sm:flex">
       <div
-        class="w-full box-border py-5px p-2 rounded-lg border-1 border-true-gray-200 dark:border-dark-300"
+        class="w-full box-border py-[5px] p-2 rounded-lg border-1 border-gray-200 dark:border-dark-300"
         @click="dropdownOpen = !dropdownOpen"
       >
         {{ selectedTab }}
-        <div class="w-20px h-25px float-right m-auto flex items-center">
+        <div class="w-[20px] h-[25px] float-right m-auto flex items-center">
           <DownIcon />
         </div>
       </div>
-      <ul v-if="!dropdownOpen" class="rounded-lg w-full box-border p-2 bg-true-gray-100 dark:bg-dark-600">
+      <ul v-if="!dropdownOpen" class="rounded-lg w-full box-border p-2 bg-gray-100 dark:bg-dark-600">
         <li
             v-for="configuration in configurations"
             :key="configuration.name"
diff --git a/reposilite-frontend/src/components/card/SnippetsCard.vue b/reposilite-frontend/src/components/card/SnippetsCard.vue
index b0e159e5d..fbc4f6834 100644
--- a/reposilite-frontend/src/components/card/SnippetsCard.vue
+++ b/reposilite-frontend/src/components/card/SnippetsCard.vue
@@ -142,7 +142,7 @@ const selectTab = (tab) =>
       @selectTab="selectTab"
     />
 
-    <hr class="dark:border-gray-800 <sm:(hidden)">
+    <hr class="dark:border-gray-800 max-sm:hidden">
 
     <div class="mt-6">
       <transition :name="transitionName" mode="out-in">
@@ -150,7 +150,7 @@ const selectTab = (tab) =>
           <span
             v-if="isCopySupported && !loading"
             @click="copy"
-            class="absolute top-2 right-2 z-10 flex items-center cursor-pointer select-none rounded-md p-1 bg-gray-100 dark:bg-gray-800 text-gray-400 hover:(text-gray-600 bg-gray-200) dark:hover:(text-gray-200 bg-gray-700) transition-colors duration-200"
+            class="absolute top-2 right-2 z-10 flex items-center cursor-pointer select-none rounded-md p-1 bg-gray-100 dark:bg-gray-800 text-gray-400 hover:text-gray-600 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-700 transition-colors duration-200"
           >
             <span v-if="copied" class="text-ssm font-normal text-green-500 mr-1.5">Copied</span>
             <CopiedIcon v-if="copied" class="text-green-500" />
@@ -189,6 +189,7 @@ const selectTab = (tab) =>
 </template>
 
 <style>
+@reference "../../style.css";
 #card-menu div {
   border-top-left-radius: 10%;
   border-top-right-radius: 10%;
diff --git a/reposilite-frontend/src/components/console/ConsoleView.vue b/reposilite-frontend/src/components/console/ConsoleView.vue
index 6f478d19f..f23285166 100644
--- a/reposilite-frontend/src/components/console/ConsoleView.vue
+++ b/reposilite-frontend/src/components/console/ConsoleView.vue
@@ -83,8 +83,8 @@ watch(
   <div class="container mx-auto pt-7 px-15 pb-12 text-xs">
     <div class="flex text-sm flex-col xl:flex-row w-full py-2 justify-between">
       <input placeholder="Filter" v-model="filter" class="w-full xl:w-1/2 mr-5 py-1 px-4 rounded-lg bg-white dark:bg-gray-900" />
-      <div class="flex flex-row justify-around w-full xl:w-1/2 <md:flex-wrap">
-        <div v-for="level in levels" :key="level.name" class="pt-1.9 xl:pt-0.8 font-sans whitespace-nowrap">
+      <div class="flex flex-row justify-around w-full xl:w-1/2 max-md:flex-wrap">
+        <div v-for="level in levels" :key="level.name" class="pt-[0.475rem] xl:pt-[0.2rem] font-sans whitespace-nowrap">
           <input
             type="checkbox" 
             :checked="level.enabled" 
diff --git a/reposilite-frontend/src/components/dashboard/ChartCard.vue b/reposilite-frontend/src/components/dashboard/ChartCard.vue
new file mode 100644
index 000000000..e33b72110
--- /dev/null
+++ b/reposilite-frontend/src/components/dashboard/ChartCard.vue
@@ -0,0 +1,62 @@
+<!--
+  ~ Copyright (c) 2026 OneLiteFeather
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  /** Names the unit and the window, so the axis does not have to repeat either. */
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  /** Shown instead of the plot when there is genuinely nothing to draw. */
+  emptyMessage: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <section class="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
+    <header class="pb-3">
+      <h2 class="text-sm font-semibold text-gray-900 dark:text-gray-50">{{ title }}</h2>
+      <p v-if="subtitle" class="text-xs text-gray-500 dark:text-gray-400">{{ subtitle }}</p>
+    </header>
+
+    <div v-if="loading" class="skeleton-bars h-[220px] w-full rounded bg-gray-100 dark:bg-gray-800" />
+
+    <!--
+      An empty state says which switch produces the emptiness. A blank rectangle leaves the
+      reader deciding between "nothing happened" and "this is broken".
+    -->
+    <p
+      v-else-if="emptyMessage"
+      class="flex h-[220px] items-center justify-center px-6 text-center text-xs text-gray-500 dark:text-gray-400"
+    >
+      {{ emptyMessage }}
+    </p>
+
+    <slot v-else />
+  </section>
+</template>
diff --git a/reposilite-frontend/src/components/dashboard/DashboardBox.vue b/reposilite-frontend/src/components/dashboard/DashboardBox.vue
deleted file mode 100644
index 1ee6a0de5..000000000
--- a/reposilite-frontend/src/components/dashboard/DashboardBox.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup>
-import LinkIcon from '../icons/LinkIcon.vue'
-
-defineProps({
-  title: {
-    type: String,
-    required: true
-  },
-  content: {
-    type: String,
-    required: true
-  },
-  link: {
-    type: String,
-    required: false
-  }
-})
-</script>
-
-<template>
-  <div class="py-3 w-1/6 mx-4 text-center border-2 border-xl rounded-xl border-gray-700 <sm:(h-16 w-full flex flex-col justify-center mb-2 mx-0)">
-    <a v-if="link" :href="link" target="_blank">
-      <div class="flex text-blue-500 w-full justify-center">
-        <h1 class="text-md pt-1">{{title}}</h1>
-        <LinkIcon class="w-3 py-1"/>
-      </div>
-    </a>
-    <h1 v-else class="text-md pt-1">{{title}}</h1>
-    <p class="text-md font-bold">{{content}}</p>
-  </div>
-</template>
\ No newline at end of file
diff --git a/reposilite-frontend/src/components/dashboard/DashboardView.vue b/reposilite-frontend/src/components/dashboard/DashboardView.vue
index 2ff51000c..dcb4127de 100644
--- a/reposilite-frontend/src/components/dashboard/DashboardView.vue
+++ b/reposilite-frontend/src/components/dashboard/DashboardView.vue
@@ -1,24 +1,54 @@
-<script setup>
-import InstanceStatusCharts from "./InstanceStatusCharts.vue"
-import StatusSnapshotsChart from "./StatusSnapshotsChart.vue"
-import ResolvedRequestsChart from "./ResolvedRequestsChart.vue"
+<!--
+  ~ Copyright (c) 2026 OneLiteFeather
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
 
-defineProps({
-  selectedTab: {
-    type: String,
-    required: true
-  }
-})
+<script setup>
+import InstanceStatusPanel from './InstanceStatusPanel.vue'
+import ResourceTrends from './ResourceTrends.vue'
+import ResolvedRequestsChart from './ResolvedRequestsChart.vue'
 </script>
 
+<!--
+  Read top to bottom, the page answers three questions in the order an operator asks them:
+  is anything wrong right now, how have the resources been behaving, and what is the traffic
+  doing.
+  The panels fetch and poll themselves and are only ever mounted while this tab is open, so
+  a slow endpoint holds up its own card instead of the whole page, and the polling stops by
+  unmounting rather than by checking which tab is selected.
+-->
 <template>
-  <div class="container mx-auto pt-7 px-15 pb-12 text-xs <sm:px-2 ">
-    <div class="flex">
-      <h1 class="font-bold pb-6 text-lg">Instance status</h1>
-      <p class="text-3xl text-green-500 px-3 -mt-1 font-bold">•</p>
-    </div>
-    <InstanceStatusCharts :selectedTab="selectedTab" />
-    <StatusSnapshotsChart :selectedTab="selectedTab" />
-    <ResolvedRequestsChart />
+  <div class="container mx-auto px-15 pt-7 pb-12 max-sm:px-4">
+    <section aria-labelledby="instance-status-heading">
+      <h1 id="instance-status-heading" class="pb-3 text-lg font-bold text-gray-900 dark:text-gray-50">
+        Instance status
+      </h1>
+      <InstanceStatusPanel />
+    </section>
+
+    <section class="pt-6" aria-labelledby="resources-heading">
+      <h1 id="resources-heading" class="pb-3 text-lg font-bold text-gray-900 dark:text-gray-50">
+        Resources
+      </h1>
+      <ResourceTrends />
+    </section>
+
+    <section class="pt-6" aria-labelledby="traffic-heading">
+      <h1 id="traffic-heading" class="pb-3 text-lg font-bold text-gray-900 dark:text-gray-50">
+        Traffic
+      </h1>
+      <ResolvedRequestsChart />
+    </section>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/reposilite-frontend/src/components/dashboard/InstanceStatusCharts.vue b/reposilite-frontend/src/components/dashboard/InstanceStatusCharts.vue
deleted file mode 100644
index 0b22e2501..000000000
--- a/reposilite-frontend/src/components/dashboard/InstanceStatusCharts.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script setup>
-import { ref } from "vue"
-import { createErrorToast } from '../../helpers/toast'
-import DashboardBox from "./DashboardBox.vue"
-import { useSession } from "../../store/session"
-
-const props = defineProps({
-  selectedTab: {
-    type: String,
-    required: true
-  }
-})
-
-const { client } = useSession()
-const instanceStatus = ref()
-
-function requestStatus() {
-  if (props.selectedTab == 'Dashboard') {
-    client.value.status.instance()
-      .then(response => response.data)
-      .then(instanceStatusData => {
-        instanceStatus.value = instanceStatusData
-        setTimeout(requestStatus, 1000)
-      })
-      .catch((error) => {
-        createErrorToast(`Cannot load instance status`)
-        console.log(error)
-      })
-  }
-}
-requestStatus()
-
-const prettyUptime = (seconds) => {
-    const d = Math.floor(seconds / 86400)
-    const h = Math.floor((seconds % 86400) / 3600)
-    const m = Math.floor(((seconds % 86400) % 3600) / 60)
-    const s = Math.floor(((seconds % 86400) % 3600) % 60)
-
-    const dDisplay = d > 0 ? d + "d " : ""
-    const hDisplay = h > 0 ? h + "h " : ""
-    const mDisplay = m > 0 ? m + "min " : ""
-    const sDisplay = s > 0 ? s + "s" : ""
-
-    return dDisplay + hDisplay + mDisplay + sDisplay
-}
-</script>
-
-<template>
-  <div v-if="instanceStatus">
-    <div class="flex w-full <sm:flex-wrap justify-center">
-      <DashboardBox 
-        title="Version"
-        :content="instanceStatus.version"
-        link="https://github.com/dzikoysk/reposilite/releases"
-      />
-      <DashboardBox 
-        title="Uptime"
-        :content="prettyUptime(instanceStatus.uptime / 1000)"
-      />
-      <DashboardBox 
-        title="Used memory"
-        :content="`${instanceStatus.usedMemory.toFixed(1)} of ${instanceStatus.maxMemory} MB`"
-      />
-      <DashboardBox 
-        title="Used threads"
-        :content="instanceStatus.usedThreads + ' of ' + instanceStatus.maxThreads"
-      />
-      <DashboardBox 
-        title="Failures"
-        :content="instanceStatus.failuresCount.toString()"
-      />
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/reposilite-frontend/src/components/dashboard/InstanceStatusPanel.vue b/reposilite-frontend/src/components/dashboard/InstanceStatusPanel.vue
new file mode 100644
index 000000000..73a166563
--- /dev/null
+++ b/reposilite-frontend/src/components/dashboard/InstanceStatusPanel.vue
@@ -0,0 +1,175 @@
+<!--
+  ~ Copyright (c) 2026 OneLiteFeather
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { createErrorToast } from '../../helpers/toast'
+import { useSession } from '../../store/session'
+import StatTile from './StatTile.vue'
+
+// Five seconds, where this used to ask once a second. Memory, threads and uptime do not
+// carry a second's worth of news, and the dashboard is open on an operator's screen for
+// hours at a time; a fifth of the requests is a fifth of the load for the same reading.
+const POLL_INTERVAL_MS = 5000
+
+const { client } = useSession()
+const instanceStatus = ref(null)
+const failed = ref(false)
+let timer = null
+
+const requestStatus = () =>
+  client.value.status.instance()
+    .then(response => {
+      instanceStatus.value = response.data
+      failed.value = false
+    })
+    .catch(error => {
+      console.error(error)
+      // One toast, not one per poll: a server that is down stays down, and a stack of
+      // identical toasts buries everything else on screen.
+      if (!failed.value) {
+        failed.value = true
+        createErrorToast('Cannot load instance status')
+      }
+    })
+
+// A hidden tab is nobody looking at the numbers. Polling through it costs the server the
+// same as polling a visible one.
+const onVisibilityChange = () => {
+  if (!document.hidden) requestStatus()
+}
+
+onMounted(() => {
+  requestStatus()
+  timer = setInterval(() => {
+    if (!document.hidden) requestStatus()
+  }, POLL_INTERVAL_MS)
+  document.addEventListener('visibilitychange', onVisibilityChange)
+})
+
+onBeforeUnmount(() => {
+  clearInterval(timer)
+  document.removeEventListener('visibilitychange', onVisibilityChange)
+})
+
+const prettyUptime = (millis) => {
+  const seconds = Math.floor(millis / 1000)
+  const days = Math.floor(seconds / 86400)
+  const hours = Math.floor((seconds % 86400) / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+
+  if (days > 0) return `${days}d ${hours}h`
+  if (hours > 0) return `${hours}h ${minutes}m`
+  if (minutes > 0) return `${minutes}m ${seconds % 60}s`
+  return `${seconds}s`
+}
+
+const ratio = (used, max) => {
+  const limit = Number(max)
+  return Number.isFinite(limit) && limit > 0 ? Number(used) / limit : null
+}
+
+const memory = computed(() => {
+  const status = instanceStatus.value
+  return {
+    value: `${Number(status.usedMemory).toFixed(1)} MB`,
+    detail: `of ${Number(status.maxMemory)} MB available`,
+    ratio: ratio(status.usedMemory, status.maxMemory)
+  }
+})
+
+const threads = computed(() => {
+  const status = instanceStatus.value
+  return {
+    value: `${status.usedThreads}`,
+    detail: `of ${status.maxThreads} in the pool`,
+    ratio: ratio(status.usedThreads, status.maxThreads)
+  }
+})
+
+// The backend reports the newest published release next to the running one, and until now
+// nothing on this page did anything with it. `<unknown>` is what it sends when the check
+// could not run, which is not the same as being up to date.
+const versionState = computed(() => {
+  const { version, latestVersion } = instanceStatus.value
+
+  if (!latestVersion || latestVersion === '<unknown>') {
+    return { status: null, label: '' }
+  }
+  return latestVersion === version
+    ? { status: 'good', label: 'Up to date' }
+    : { status: 'warning', label: `${latestVersion} available` }
+})
+
+const failures = computed(() => {
+  const count = instanceStatus.value.failuresCount
+  return count === 0
+    ? { status: 'good', label: 'None recorded' }
+    : { status: 'critical', label: count === 1 ? '1 failure recorded' : `${count} failures recorded` }
+})
+</script>
+
+<template>
+  <!--
+    Loading placeholder with the same shape as the result, so the row does not jump into
+    place once the first response lands.
+  -->
+  <div v-if="!instanceStatus" class="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-5">
+    <div
+      v-for="slot in 5"
+      :key="`status-placeholder-${slot}`"
+      class="h-28 rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900"
+    >
+      <div class="skeleton-bars">
+        <div class="h-3 w-20 rounded bg-gray-200 dark:bg-gray-800" />
+        <div class="mt-3 h-6 w-24 rounded bg-gray-200 dark:bg-gray-800" />
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-5">
+    <StatTile
+      label="Used memory"
+      :value="memory.value"
+      :detail="memory.detail"
+      :ratio="memory.ratio"
+    />
+    <StatTile
+      label="Used threads"
+      :value="threads.value"
+      :detail="threads.detail"
+      :ratio="threads.ratio"
+    />
+    <StatTile
+      label="Failures"
+      :value="`${instanceStatus.failuresCount}`"
+      :status="failures.status"
+      :status-label="failures.label"
+    />
+    <StatTile
+      label="Uptime"
+      :value="prettyUptime(instanceStatus.uptime)"
+      detail="Since the last restart"
+    />
+    <StatTile
+      label="Version"
+      :value="instanceStatus.version"
+      :status="versionState.status"
+      :status-label="versionState.label"
+      link="https://github.com/OneLiteFeatherNET/ingot/releases"
+    />
+  </div>
+</template>
diff --git a/reposilite-frontend/src/components/dashboard/ResolvedRequestsChart.vue b/reposilite-frontend/src/components/dashboard/ResolvedRequestsChart.vue
index baf1854bf..d9e3e6d31 100644
--- a/reposilite-frontend/src/components/dashboard/ResolvedRequestsChart.vue
+++ b/reposilite-frontend/src/components/dashboard/ResolvedRequestsChart.vue
@@ -1,35 +1,105 @@
+<!--
+  ~ Copyright (c) 2026 OneLiteFeather
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
 <script setup>
-import { ref, defineAsyncComponent } from "vue"
+import { computed, defineAsyncComponent, ref } from 'vue'
 import { createErrorToast } from '../../helpers/toast'
-import { useSession } from "../../store/session"
+import { useSession } from '../../store/session'
+import ChartCard from './ChartCard.vue'
 
 const TimeSeriesChart = defineAsyncComponent(() => import('./TimeSeriesChart.vue'))
 
+// Past this many repositories the lines stop being tellable apart, whatever the palette
+// does. The remainder is summed into one series rather than given a ninth colour that
+// nobody can distinguish from the first eight.
+const SERIES_LIMIT = 7
+
 const { client } = useSession()
-const statisticsEnabled = ref(false)
-const resolvedSeries = ref()
+const statisticsEnabled = ref(null)
+const series = ref(null)
+
+const foldTail = (repositories) => {
+  if (repositories.length <= SERIES_LIMIT + 1) {
+    return repositories
+  }
+
+  const ranked = [...repositories].sort((left, right) =>
+    right.data.reduce((sum, record) => sum + record.count, 0) -
+    left.data.reduce((sum, record) => sum + record.count, 0))
+
+  const head = ranked.slice(0, SERIES_LIMIT)
+  const tail = ranked.slice(SERIES_LIMIT)
+  const totals = new Map()
+
+  for (const repository of tail) {
+    for (const record of repository.data) {
+      totals.set(record.date, (totals.get(record.date) ?? 0) + record.count)
+    }
+  }
+
+  return [
+    ...head,
+    {
+      name: `Other (${tail.length})`,
+      data: [...totals.entries()]
+        .sort(([left], [right]) => left - right)
+        .map(([date, count]) => ({ date, count }))
+    }
+  ]
+}
 
 client.value.statistics.allResolved()
   .then(response => response.data)
   .then(allResolved => {
-    resolvedSeries.value = allResolved.repositories.map(repositoryStatistics => {
-      return {
-        name: repositoryStatistics.name,
-        // [epoch millis, count] is what the time axis expects
-        data: repositoryStatistics.data.map(record => [record.date, record.count])
-      }
-    })
     statisticsEnabled.value = allResolved.statisticsEnabled
+    series.value = foldTail(allResolved.repositories).map(repository => ({
+      name: repository.name,
+      // [epoch millis, count] is what the time axis expects
+      data: repository.data.map(record => [record.date, record.count])
+    }))
   })
   .catch(error => {
     console.error(error)
-    createErrorToast(`Cannot load statistics`)
+    statisticsEnabled.value = false
+    createErrorToast('Cannot load statistics')
   })
+
+const loading = computed(() => statisticsEnabled.value === null)
+
+/*
+ * This card used to disappear entirely when statistics were switched off, which left a gap
+ * where a reader had every reason to expect a chart and no way to tell whether the feature
+ * was off or the request had failed.
+ */
+const emptyMessage = computed(() => {
+  if (loading.value) return ''
+  if (!statisticsEnabled.value) {
+    return 'Resolved request statistics are disabled for this instance. Enable them under Settings to start recording.'
+  }
+  return series.value?.length ? '' : 'No resolved requests recorded yet.'
+})
 </script>
 
 <template>
-  <div v-if="statisticsEnabled && resolvedSeries">
-    <h1 class="font-bold text-lg">Resolved requests</h1>
-    <TimeSeriesChart class="pt-2" variant="area" :series="resolvedSeries" />
-  </div>
-</template>
\ No newline at end of file
+  <ChartCard
+    title="Resolved requests"
+    subtitle="Requests served per repository, per day"
+    :loading="loading"
+    :empty-message="emptyMessage"
+  >
+    <TimeSeriesChart :series="series" height="260px" />
+  </ChartCard>
+</template>
diff --git a/reposilite-frontend/src/components/dashboard/ResourceTrends.vue b/reposilite-frontend/src/components/dashboard/ResourceTrends.vue
new file mode 100644
index 000000000..71ebe1004
--- /dev/null
+++ b/reposilite-frontend/src/components/dashboard/ResourceTrends.vue
@@ -0,0 +1,96 @@
+<!--
+  ~ Copyright (c) 2026 OneLiteFeather
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<script setup>
+import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useSession } from '../../store/session'
+import { createErrorToast } from '../../helpers/toast'
+import ChartCard from './ChartCard.vue'
+
+const TimeSeriesChart = defineAsyncComponent(() => import('./TimeSeriesChart.vue'))
+
+const POLL_INTERVAL_MS = 30000
+
+const { client } = useSession()
+const snapshots = ref(null)
+const failed = ref(false)
+let timer = null
+
+const requestSnapshots = () =>
+  client.value.status.snapshots()
+    .then(response => {
+      snapshots.value = response.data
+      failed.value = false
+    })
+    .catch(error => {
+      console.error(error)
+      if (!failed.value) {
+        failed.value = true
+        createErrorToast('Cannot load status snapshots statistics')
+      }
+    })
+
+onMounted(() => {
+  requestSnapshots()
+  timer = setInterval(() => {
+    if (!document.hidden) requestSnapshots()
+  }, POLL_INTERVAL_MS)
+})
+
+onBeforeUnmount(() => clearInterval(timer))
+
+/*
+ * Memory and threads used to share one chart and therefore one y-axis, which put megabytes
+ * and a thread count on the same scale. Whichever number happened to be larger drew the
+ * taller line, and the comparison the reader took from that shape meant nothing. They are
+ * two charts now, stacked, sharing a time axis: the trends stay comparable, the magnitudes
+ * no longer pretend to be.
+ */
+const memorySeries = computed(() => [{
+  name: 'Used memory',
+  data: snapshots.value.map(record => [record.at, record.memory])
+}])
+
+const threadsSeries = computed(() => [{
+  name: 'Used threads',
+  data: snapshots.value.map(record => [record.at, record.threads])
+}])
+
+const loading = computed(() => snapshots.value === null)
+const empty = computed(() => snapshots.value !== null && snapshots.value.length === 0)
+</script>
+
+<template>
+  <div class="grid gap-3 lg:grid-cols-2">
+    <ChartCard
+      title="Memory"
+      subtitle="Megabytes in use, recent history"
+      :loading="loading"
+      :empty-message="empty ? 'No snapshots recorded yet. The first one appears a few minutes after startup.' : ''"
+    >
+      <TimeSeriesChart :series="memorySeries" unit="MB" />
+    </ChartCard>
+
+    <ChartCard
+      title="Threads"
+      subtitle="Threads in use, recent history"
+      :loading="loading"
+      :empty-message="empty ? 'No snapshots recorded yet. The first one appears a few minutes after startup.' : ''"
+    >
+      <TimeSeriesChart :series="threadsSeries" />
+    </ChartCard>
+  </div>
+</template>
diff --git a/reposilite-frontend/src/components/dashboard/StatTile.vue b/reposilite-frontend/src/components/dashboard/StatTile.vue
new file mode 100644
index 000000000..dc36a34b8
--- /dev/null
+++ b/reposilite-frontend/src/components/dashboard/StatTile.vue
@@ -0,0 +1,115 @@
+<!--
+  ~ Copyright (c) 2026 OneLiteFeather
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<script setup>
+import { computed } from 'vue'
+import { STATUS } from '../../store/palette'
+import LinkIcon from '../icons/LinkIcon.vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: String,
+    required: true
+  },
+  /** Small print under the value: a limit, a comparison, whatever gives the number scale. */
+  detail: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Share of a limit, 0 to 1. Present it and the tile grows a meter, which answers "how
+   * close to full" at a glance where "151.5 of 512 MB" makes the reader do the division.
+   */
+  ratio: {
+    type: Number,
+    default: null
+  },
+  /** One of the reserved state names. Always shown with `statusLabel`, never colour alone. */
+  status: {
+    type: String,
+    default: null,
+    validator: (value) => value === null || value in STATUS
+  },
+  statusLabel: {
+    type: String,
+    default: ''
+  },
+  link: {
+    type: String,
+    default: ''
+  }
+})
+
+const meterWidth = computed(() =>
+  props.ratio === null ? '0%' : `${Math.min(100, Math.max(0, props.ratio * 100))}%`)
+
+// The meter track and its fill are steps of one hue, so the fill reads as "more of the
+// same" rather than as a second category. It only turns to a state colour once the reading
+// is one the operator has to act on.
+const meterColor = computed(() => {
+  if (props.ratio === null) return null
+  if (props.ratio >= 0.9) return STATUS.critical
+  if (props.ratio >= 0.75) return STATUS.warning
+  return '#2a78d6'
+})
+</script>
+
+<template>
+  <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
+    <div class="flex items-center gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ label }}</span>
+      <a
+        v-if="link"
+        :href="link"
+        target="_blank"
+        rel="noopener"
+        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+        :aria-label="`${label}: open in a new tab`"
+      >
+        <LinkIcon class="w-3" />
+      </a>
+    </div>
+
+    <!--
+      Tabular figures on purpose: several of these values are replaced while the reader is
+      looking at them, and proportional digits make the whole tile twitch on every poll.
+    -->
+    <p class="pt-1 text-2xl font-semibold tabular-nums text-gray-900 dark:text-gray-50">{{ value }}</p>
+
+    <div
+      v-if="ratio !== null"
+      class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"
+      role="meter"
+      :aria-valuenow="Math.round(ratio * 100)"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :aria-label="`${label}: ${Math.round(ratio * 100)} percent of the limit`"
+    >
+      <div class="h-full rounded-full" :style="{ width: meterWidth, backgroundColor: meterColor }" />
+    </div>
+
+    <p v-if="detail" class="pt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ detail }}</p>
+
+    <p v-if="status" class="flex items-center gap-1.5 pt-1.5 text-xs text-gray-600 dark:text-gray-300">
+      <span class="h-2 w-2 shrink-0 rounded-full" :style="{ backgroundColor: STATUS[status] }" aria-hidden="true" />
+      {{ statusLabel }}
+    </p>
+  </div>
+</template>
diff --git a/reposilite-frontend/src/components/dashboard/StatusSnapshotsChart.vue b/reposilite-frontend/src/components/dashboard/StatusSnapshotsChart.vue
deleted file mode 100644
index accd0d096..000000000
--- a/reposilite-frontend/src/components/dashboard/StatusSnapshotsChart.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup>
-import { ref, computed, defineAsyncComponent } from "vue"
-import { useSession } from "../../store/session"
-import { createErrorToast } from '../../helpers/toast'
-
-const TimeSeriesChart = defineAsyncComponent(() => import('./TimeSeriesChart.vue'))
-
-const props = defineProps({
-  selectedTab: {
-    type: String,
-    required: true
-  }
-})
-
-const { client } = useSession()
-const statusSnapshots = ref()
-const statusSnapshotsSeries = computed(() => {
-  return [
-    {
-      name: 'Used memory (MB)',
-      data: statusSnapshots.value.map(record => [record.at, record.memory])
-    },
-    {
-      name: 'Used threads',
-      data: statusSnapshots.value.map(record => [record.at, record.threads])
-    }
-  ]
-})
-
-function requestStatus() {
-  if (props.selectedTab == 'Dashboard') {
-    client.value.status.snapshots()
-      .then(response => response.data)
-      .then(snapshotsData => {
-        statusSnapshots.value = snapshotsData
-        setTimeout(requestStatus, 1000 * 30)
-      })
-      .catch(error => {
-        console.error(error)
-        createErrorToast(`Cannot load status snapshots statistics`)
-      })
-  }
-}
-requestStatus()
-</script>
-
-<template>
-  <div v-if="statusSnapshots">
-    <h1 class="font-bold pt-6 text-lg">Resources</h1>
-    <TimeSeriesChart class="pt-1" :series="statusSnapshotsSeries" />
-  </div>
-</template>
\ No newline at end of file
diff --git a/reposilite-frontend/src/components/dashboard/TimeSeriesChart.vue b/reposilite-frontend/src/components/dashboard/TimeSeriesChart.vue
index addf9b137..af00b27f2 100644
--- a/reposilite-frontend/src/components/dashboard/TimeSeriesChart.vue
+++ b/reposilite-frontend/src/components/dashboard/TimeSeriesChart.vue
@@ -15,12 +15,13 @@
   -->
 
 <script setup>
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { init, use } from 'echarts/core'
 import { LineChart } from 'echarts/charts'
 import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
 import useTheme from '../../store/theme'
+import { categorical, chrome } from '../../store/palette'
 
 // ECharts ships every chart type and component separately so a build only pays for what it
 // draws. The dashboard needs one chart type and three components, which keeps this bundle
@@ -32,83 +33,96 @@ const props = defineProps({
     type: Array,
     required: true
   },
-  // 'line' draws the plain series, 'area' fills the space below it.
-  variant: {
+  /**
+   * Appended to every value in the axis and the tooltip. A chart carries one unit and one
+   * scale: two measures that do not share a unit belong in two charts, because a single
+   * axis makes their relative size look like a fact when it is an accident of units.
+   */
+  unit: {
     type: String,
-    default: 'line'
+    default: ''
   },
   height: {
     type: String,
-    default: '320px'
+    default: '220px'
   }
 })
 
 const { theme } = useTheme()
-
-// The dashboard sits on a white or near-black surface, so the axes and the legend have to
-// follow the theme. The series colours are picked to stay distinguishable on both.
-const PALETTE = ['#4f46e5', '#0891b2', '#e11d48', '#16a34a', '#d97706', '#7c3aed', '#0ea5e9', '#65a30d']
-
 const container = ref(null)
 let chart = null
 
-const axisColor = () => (theme.isDark ? '#9ca3af' : '#6b7280')
-const splitLineColor = () => (theme.isDark ? '#374151' : '#e5e7eb')
+// One series is its own subject and the surrounding heading already names it, so a legend
+// would only repeat the title. Several series have to be told apart, and then the legend is
+// what keeps identity off colour alone.
+const multiSeries = computed(() => props.series.length > 1)
 
-const buildOption = () => ({
-  color: PALETTE,
-  animation: false,
-  backgroundColor: 'transparent',
-  grid: {
-    left: 8,
-    right: 16,
-    top: 8,
-    // Room for the legend, which sits below the plot and would otherwise print on top of
-    // the axis labels.
-    bottom: 32,
-    containLabel: true
-  },
-  legend: {
-    bottom: 0,
-    icon: 'roundRect',
-    itemGap: 20,
-    textStyle: { color: axisColor() }
-  },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: { type: 'line' }
-  },
-  xAxis: {
-    type: 'time',
-    axisLine: { show: false },
-    axisTick: { show: false },
-    axisLabel: { color: axisColor(), hideOverlap: true },
-    splitLine: { show: false }
-  },
-  yAxis: {
-    type: 'value',
-    axisLine: { show: false },
-    axisTick: { show: false },
-    axisLabel: { color: axisColor() },
-    splitLine: { lineStyle: { color: splitLineColor() } }
-  },
-  series: props.series.map(series => ({
-    name: series.name,
-    type: 'line',
-    smooth: false,
-    showSymbol: false,
-    areaStyle: props.variant === 'area' ? { opacity: 0.2 } : undefined,
-    data: series.data
-  }))
-})
+const formatValue = (value) => {
+  const rounded = Math.abs(value) >= 100 ? Math.round(value) : Math.round(value * 10) / 10
+  return props.unit ? `${rounded} ${props.unit}` : `${rounded}`
+}
 
-const render = () => {
-  if (chart === null) {
-    return
+const buildOption = () => {
+  const ink = chrome(theme.isDark)
+
+  return {
+    color: categorical(theme.isDark),
+    animation: false,
+    backgroundColor: 'transparent',
+    grid: {
+      left: 4,
+      right: 12,
+      top: 8,
+      bottom: multiSeries.value ? 28 : 4,
+      containLabel: true
+    },
+    legend: multiSeries.value
+      ? {
+          bottom: 0,
+          icon: 'roundRect',
+          itemGap: 18,
+          itemWidth: 10,
+          itemHeight: 10,
+          textStyle: { color: ink.text, fontSize: 11 }
+        }
+      : { show: false },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'line', lineStyle: { color: ink.baseline } },
+      valueFormatter: formatValue
+    },
+    xAxis: {
+      type: 'time',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: ink.axis, hideOverlap: true, fontSize: 11 },
+      splitLine: { show: false }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: ink.axis, fontSize: 11, formatter: formatValue },
+      splitLine: { lineStyle: { color: ink.grid } }
+    },
+    series: props.series.map(series => ({
+      name: series.name,
+      type: 'line',
+      smooth: false,
+      showSymbol: false,
+      lineStyle: { width: 2 },
+      // Only a lone series gets a fill. Stacked translucent areas hide each other, and the
+      // overlap reads as a value of its own.
+      areaStyle: multiSeries.value ? undefined : { opacity: 0.14 },
+      data: series.data
+    }))
   }
+}
+
+const render = () => {
   // notMerge, because a redraw after a theme switch has to drop the previous colours
   // instead of layering the new option on top of them.
-  chart.setOption(buildOption(), true)
+  chart?.setOption(buildOption(), true)
 }
 
 const resize = () => chart?.resize()
diff --git a/reposilite-frontend/src/components/header/DefaultHeader.vue b/reposilite-frontend/src/components/header/DefaultHeader.vue
index bda8919c1..fa902c910 100644
--- a/reposilite-frontend/src/components/header/DefaultHeader.vue
+++ b/reposilite-frontend/src/components/header/DefaultHeader.vue
@@ -31,12 +31,12 @@ const { title } = usePlaceholders()
 
 <template>
   <header class="bg-gray-100 dark:bg-black dark:text-white">
-    <div class="container mx-auto flex flex-row py-10 justify-between <sm:(pb-2 pt-5 px-5 justify-start)">
-      <h1 @click="logoClickCallback" class="text-xl font-medium py-1 <sm:w-1/2">
+    <div class="container mx-auto flex flex-row py-10 justify-between max-sm:pb-2 max-sm:pt-5 max-sm:px-5 max-sm:justify-start">
+      <h1 @click="logoClickCallback" class="text-xl font-medium py-1 max-sm:w-1/2">
         <router-link :to="'/'">{{ title }}</router-link>
       </h1>
       <MenuPanel class="mt-0.5"/>
     </div>
-    <HeaderHero class="pt-2 pb-10 <sm:pb-4" />
+    <HeaderHero class="pt-2 pb-10 max-sm:pb-4" />
   </header>
 </template>
\ No newline at end of file
diff --git a/reposilite-frontend/src/components/header/HeaderHero.vue b/reposilite-frontend/src/components/header/HeaderHero.vue
index ea8698076..c8171bbff 100644
--- a/reposilite-frontend/src/components/header/HeaderHero.vue
+++ b/reposilite-frontend/src/components/header/HeaderHero.vue
@@ -23,13 +23,13 @@ const { description, organizationWebsite, organizationLogo } = usePlaceholders()
 
 <template>
   <div class="bg-gray-100 dark:bg-black">
-    <div class="container mx-auto flex flex-row <sm:(flex-col items-center)">
-      <div class="w-35 <sm:mb-2">
+    <div class="container mx-auto flex flex-row max-sm:flex-col max-sm:items-center">
+      <div class="w-35 max-sm:mb-2">
         <img class="border-2 rounded-full dark:border-gray-700" :src="organizationLogo">
       </div>
-      <div class="flex flex-col justify-center px-10 <sm:px-0">
-        <div class="<sm:text-center" v-html="description"></div>
-        <div class="flex flex-row py-2 <sm:justify-center">
+      <div class="flex flex-col justify-center px-10 max-sm:px-0">
+        <div class="max-sm:text-center" v-html="description"></div>
+        <div class="flex flex-row py-2 max-sm:justify-center">
           <GlobeIcon />
           <a class="px-3 text-gray-500" :href="organizationWebsite" target="_blank">{{organizationWebsite}}</a>
         </div>
diff --git a/reposilite-frontend/src/components/header/LoginModal.vue b/reposilite-frontend/src/components/header/LoginModal.vue
index d1a534db4..22b1fccf7 100644
--- a/reposilite-frontend/src/components/header/LoginModal.vue
+++ b/reposilite-frontend/src/components/header/LoginModal.vue
@@ -51,7 +51,7 @@ export default {
     >
       <div class="relative border bg-white dark:bg-gray-900 border-gray-100 dark:border-black m-w-20 py-5 px-10 rounded-2xl shadow-xl text-center">
         <p class="font-bold text-xl pb-4">Login with access token</p>
-        <form class="flex flex-col w-96 <sm:w-65" @submit.prevent="signin(name, secret)">
+        <form class="flex flex-col w-96 max-sm:w-65" @submit.prevent="signin(name, secret)">
           <input placeholder="Name" v-model="name" type="text" class="input"/>
           <input placeholder="Secret" v-model="secret" type="password" class="input"/>
           <div class="text-right mt-1">
@@ -71,6 +71,7 @@ export default {
 </template>
 
 <style scoped>
+@reference "../../style.css";
 .input {
   @apply p-2;
   @apply my-1;
diff --git a/reposilite-frontend/src/components/header/MenuButton.vue b/reposilite-frontend/src/components/header/MenuButton.vue
index 239aabfa9..9ba5d4dc9 100644
--- a/reposilite-frontend/src/components/header/MenuButton.vue
+++ b/reposilite-frontend/src/components/header/MenuButton.vue
@@ -15,7 +15,7 @@
   -->
 
 <template>
-  <div class="mx-2 py-1.5 rounded-full font-bold px-6 text-sm max-h-35px min-w-93px default-button">
+  <div class="mx-2 py-1.5 rounded-full font-bold px-6 text-sm max-h-[35px] min-w-[93px] default-button">
     <slot/>
   </div>
 </template>
\ No newline at end of file
diff --git a/reposilite-frontend/src/components/header/MenuPanel.vue b/reposilite-frontend/src/components/header/MenuPanel.vue
index 41419f47c..858733580 100644
--- a/reposilite-frontend/src/components/header/MenuPanel.vue
+++ b/reposilite-frontend/src/components/header/MenuPanel.vue
@@ -42,8 +42,8 @@ const toggleTheme = () => {
 </script>
 
 <template>
-  <nav class="flex flex-row <sm:(max-w-100px flex-wrap flex-1 justify-end min-w-1/2)">
-    <div v-if="isLogged" class="pt-1.1 px-2 <sm:hidden">
+  <nav class="flex flex-row max-sm:max-w-[100px] max-sm:flex-wrap max-sm:flex-1 max-sm:justify-end max-sm:min-w-1/2">
+    <div v-if="isLogged" class="pt-[0.275rem] px-2 max-sm:hidden">
       Welcome 
       <span class="font-bold underline">{{ token.name }}</span>
     </div>
@@ -54,16 +54,16 @@ const toggleTheme = () => {
         </MenuButton>
       </template>
     </LoginModal>
-    <MenuButton v-if="isLogged" @click="logout()" class="<sm:hidden">
+    <MenuButton v-if="isLogged" @click="logout()" class="max-sm:hidden">
       Logout
     </MenuButton>
     <div
       v-if="isLogged"
-      class="hidden px-2.7 pt-0.8 mr-1.5 cursor-pointer rounded-full bg-white dark:bg-gray-900 max-h-35px <sm:(block pt-1.5)"
+      class="hidden px-[0.675rem] pt-[0.2rem] mr-1.5 cursor-pointer rounded-full bg-white dark:bg-gray-900 max-h-[35px] max-sm:block max-sm:pt-1.5"
     >
       <LogoutIcon @click="logout()"/>
     </div>
-    <div class="flex justify-center items-center rounded-full w-40px h-35px default-button" @click="toggleTheme()">
+    <div class="flex justify-center items-center rounded-full w-[40px] h-[35px] default-button" @click="toggleTheme()">
       <SunIcon v-if="theme.mode === 'light'"/>
       <MoonIcon class="pl-0.5" v-if="theme.mode === 'dark'"/>
       <div class="font-bold w-full text-center text-lg" v-if="theme.mode === 'auto'">
diff --git a/reposilite-frontend/src/components/renderers/OneOfRenderer.vue b/reposilite-frontend/src/components/renderers/OneOfRenderer.vue
index 106a7429d..627a14ad2 100644
--- a/reposilite-frontend/src/components/renderers/OneOfRenderer.vue
+++ b/reposilite-frontend/src/components/renderers/OneOfRenderer.vue
@@ -159,6 +159,7 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
 .dialog-actions {
   display: flex;
   justify-content: flex-end;
@@ -177,6 +178,6 @@ button {
   @apply bg-blue-700 mx-2 rounded text-sm h-9 px-4 text-white;
 }
 .tabs {
-  @apply cursor-pointer !important;
+  @apply cursor-pointer!;
 }
 </style>
diff --git a/reposilite-frontend/src/components/settings/FactoryResetModal.vue b/reposilite-frontend/src/components/settings/FactoryResetModal.vue
index 3b8ce795f..9019eae96 100644
--- a/reposilite-frontend/src/components/settings/FactoryResetModal.vue
+++ b/reposilite-frontend/src/components/settings/FactoryResetModal.vue
@@ -50,6 +50,7 @@ export default {
 </template>
 
 <style scoped>
+@reference "../../style.css";
 .factory-reset-confirm button {
   @apply mt-6 bg-gray-200 dark:bg-gray-700 px-20 py-2 rounded-lg;
 }
diff --git a/reposilite-frontend/src/components/settings/SettingsView.vue b/reposilite-frontend/src/components/settings/SettingsView.vue
index 7fd2e7326..16ca3b10c 100644
--- a/reposilite-frontend/src/components/settings/SettingsView.vue
+++ b/reposilite-frontend/src/components/settings/SettingsView.vue
@@ -161,14 +161,15 @@ const formsConfiguration = {
 
 <!--suppress CssInvalidAtRule -->
 <style scoped>
+@reference "../../style.css";
 #configuration-state button {
   @apply mx-2 rounded text-sm px-4 text-white py-2;
 }
 #configuration-state .changed {
-  @apply bg-blue-700 cursor-pointer !important;
+  @apply bg-blue-700! cursor-pointer!;
 }
 #configuration-state .forbidden {
-  @apply bg-gray-500 cursor-not-allowed !important;
+  @apply bg-gray-500! cursor-not-allowed!;
 }
 .item {
   @apply pb-1;
@@ -185,6 +186,7 @@ const formsConfiguration = {
 
 <!--suppress CssInvalidAtRule -->
 <style>
+@reference "../../style.css";
 .error {
   @apply text-red-500 px-2 font-bold;
 }
@@ -252,7 +254,7 @@ const formsConfiguration = {
   @apply bg-gray-125 dark:bg-gray-900;
 }
 .one-of-container .tab-panel, .tab-panel .array-list .tab-panel .array-list .tab-panel {
-  @apply bg-gray-125 dark: bg-gray-900;
+  @apply bg-gray-125 dark:bg-gray-900;
   border-radius: 0.25rem;
   padding-left: 17px;
 }
@@ -285,10 +287,10 @@ const formsConfiguration = {
   @apply w-1/2;
 }
 .wrapper input, .wrapper select {
-  @apply dark:bg-gray-800 dark:text-white !important;
+  @apply dark:bg-gray-800! dark:text-white!;
 }
 .wrapper input:not([type=checkbox]):read-only {
-  @apply bg-gray-200 dark:bg-gray-800 text-gray-500 !important;
+  @apply bg-gray-200! dark:bg-gray-800! text-gray-500!;
 }
 .array-list-legend {
   margin-bottom: 0;
diff --git a/reposilite-frontend/src/components/tokens/TokensView.vue b/reposilite-frontend/src/components/tokens/TokensView.vue
index 13b1111b8..e7fef44a5 100644
--- a/reposilite-frontend/src/components/tokens/TokensView.vue
+++ b/reposilite-frontend/src/components/tokens/TokensView.vue
@@ -129,7 +129,7 @@ const runConfirm = (token) => {
 </script>
 
 <template>
-  <div class="container mx-auto pt-7 px-15 pb-12 <sm:px-4">
+  <div class="container mx-auto pt-7 px-15 pb-12 max-sm:px-4">
     <div class="pb-7">
       <p>Generate and revoke access tokens used to authenticate with this Ingot instance.</p>
       <p class="text-sm text-gray-500">A token's secret is shown only once, at the moment it is generated.</p>
@@ -238,6 +238,7 @@ const runConfirm = (token) => {
 </template>
 
 <style scoped>
+@reference "../../style.css";
 .flat { @apply bg-white dark:bg-transparent dark:border dark:border-gray-800 rounded-lg overflow-hidden text-sm text-gray-600 dark:text-gray-300; }
 .flat > :last-child { @apply border-b-0; }
 
@@ -248,11 +249,18 @@ const runConfirm = (token) => {
 .row { @apply flex items-center gap-2 px-4.5 h-11.5 border-b border-gray-200 dark:border-gray-800 transition-colors; }
 .row:hover { @apply bg-gray-50 dark:bg-gray-900; }
 .row.is-open { @apply bg-gray-100 dark:bg-gray-900; }
-.indent { @apply pl-9.5; }
+/*
+ * The text-indent is not decoration, it is restored behaviour: Windi shipped an `indent`
+ * utility of its own, so every element carrying this component's `indent` class silently
+ * picked up `text-indent: 1.5rem` on top of the padding. Tailwind spells that utility
+ * `indent-6` and never matched the bare name, which moved these rows 24px to the left.
+ * Whether these rows want two separate indents at all is a question for the redesign.
+ */
+.indent { @apply pl-9.5; text-indent: 1.5rem; }
 .lead { @apply whitespace-nowrap; }
 .meta { @apply text-gray-500 dark:text-gray-500 truncate; }
 .desc { @apply flex-1 min-w-0 truncate text-gray-500 dark:text-gray-500; }
-.dates { @apply inline-flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap cursor-default <sm:hidden; }
+.dates { @apply inline-flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap cursor-default max-sm:hidden; }
 .exsep { @apply text-gray-400 dark:text-gray-500; }
 .ex { @apply text-gray-600 dark:text-gray-300; }
 .ex.expired { @apply text-red-500; }
diff --git a/reposilite-frontend/src/main.js b/reposilite-frontend/src/main.js
index 1107cd3fc..1496e1ddf 100644
--- a/reposilite-frontend/src/main.js
+++ b/reposilite-frontend/src/main.js
@@ -23,7 +23,7 @@ import App from './App.vue'
 import router from './router'
 import { loadFrontendSettings } from './store/placeholders'
 
-import 'virtual:windi.css'
+import './style.css'
 import 'mosha-vue-toastify/dist/style.css'
 import 'vue-final-modal/style.css'
 
diff --git a/reposilite-frontend/src/pages/IndexPage.vue b/reposilite-frontend/src/pages/IndexPage.vue
index 06262d01b..11fc1bc9c 100644
--- a/reposilite-frontend/src/pages/IndexPage.vue
+++ b/reposilite-frontend/src/pages/IndexPage.vue
@@ -69,30 +69,24 @@ const selectHomepage = () =>
   <div>
     <DefaultHeader :logoClickCallback="selectHomepage" />
     <div class="bg-gray-100 dark:bg-black overflow-y-visible">
-      <div class="container mx-auto <sm:px-0">
-        <Tabs 
+      <!--
+        The bar scrolls sideways when it runs out of room. Every tab used to be pinned to a
+        quarter of the width on small screens, which five tabs cannot satisfy: the row wrapped
+        onto a second line and the last label was cut off at the edge.
+      -->
+      <div class="tab-bar container mx-auto overflow-x-auto max-sm:px-0">
+        <Tabs
           v-model="selectedTab"
           @update:modelValue="createTabClick"
         >
-          <template 
-            v-for="(tab, i) in menuTabs" 
+          <Tab
+            v-for="(tab, i) in menuTabs"
             :key="`menu${i}`"
-          >
-            <Tab
-              v-if="tab !== 'Dashboard'"
-              class="item font-normal <sm:w-1/4"
-              :val="tab"
-              :label="tab"
-              :indicator="true"
-            />
-            <Tab
-              v-if="tab === 'Dashboard'"
-              class="item font-normal dashboard <sm:w-1/4"
-              :val="tab"
-              :label="tab"
-              :indicator="true"
-            />
-          </template>
+            class="item font-normal whitespace-nowrap"
+            :val="tab"
+            :label="tab"
+            :indicator="true"
+          />
         </Tabs>
       </div>
       <hr class="dark:border-gray-700">
@@ -102,7 +96,7 @@ const selectHomepage = () =>
             <FileBrowserView v-if="selectedTab == 'Overview'" :qualifier="qualifier" ref=""/>
           </TabPanel>
           <TabPanel :val="'Dashboard'" v-show="isManager">
-            <DashboardView v-if="selectedTab == 'Dashboard'" :selectedTab="selectedTab" />
+            <DashboardView v-if="selectedTab == 'Dashboard'" />
           </TabPanel>
           <TabPanel :val="'Console'" v-show="isManager">
             <ConsoleView v-if="selectedTab == 'Console'" :selectedTab="selectedTab" />
@@ -120,6 +114,7 @@ const selectHomepage = () =>
 </template>
 
 <style>
+@reference "../style.css";
 .tabs .tab {
   cursor: pointer;
   text-transform: capitalize;
@@ -128,19 +123,22 @@ const selectHomepage = () =>
   @apply bg-gray-150 dark:bg-gray-900;
   transition: background-color 0.5s;
 }
-  .dashboard {
-    @media (max-width: 640px) {
-      padding-left: 0px !important;
-    }
+/*
+ * vue3-tabs lets its row wrap. On a phone that turns the bar into two ragged lines, so the
+ * row is held on one line and the wrapper around it scrolls instead. Two classes deep
+ * because the rule it overrides is a scoped one from the library, which carries the weight
+ * of a class and an attribute.
+ */
+.tab-bar > .tabs {
+  flex-wrap: nowrap;
 }
-.dashboard .tab {
-  @media (max-width: 640px){
-    padding-left: 15px !important;
-  }
+.tab-bar .item {
+  flex-shrink: 0;
 }
 </style>
 
 <style scoped>
+@reference "../style.css";
 .item {
   @apply px-1;
   @apply pb-1;
diff --git a/reposilite-frontend/src/store/palette.js b/reposilite-frontend/src/store/palette.js
new file mode 100644
index 000000000..1e9ab42fd
--- /dev/null
+++ b/reposilite-frontend/src/store/palette.js
@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2026 OneLiteFeather
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Colours for everything the dashboard plots.
+ *
+ * The two categorical ramps are not a light set and a free-hand dark set: they are the
+ * same eight hues, each stepped for the surface it is drawn on. Both were checked against
+ * the surfaces the charts actually use (white cards on #f5f5f5, gray-900 cards on black)
+ * for the lightness band, a chroma floor, colour-vision separation between neighbouring
+ * slots, and contrast. Reordering the slots or dropping one in changes those results, so
+ * treat the order as part of the data and re-validate before touching it.
+ *
+ * In light mode aqua, yellow and magenta sit below 3:1 against a white card. That is
+ * allowed only while every series carries a visible label, which is why the multi-series
+ * chart always draws its legend.
+ */
+const CATEGORICAL_LIGHT = [
+  '#2a78d6', // blue
+  '#eb6834', // orange
+  '#1baf7a', // aqua
+  '#eda100', // yellow
+  '#e87ba4', // magenta
+  '#008300', // green
+  '#4a3aa7', // violet
+  '#e34948'  // red
+]
+
+const CATEGORICAL_DARK = [
+  '#3987e5',
+  '#d95926',
+  '#199e70',
+  '#c98500',
+  '#d55181',
+  '#008300',
+  '#9085e9',
+  '#e66767'
+]
+
+/**
+ * Reserved for state, never for a series. Each one is paired with a word in the interface
+ * so the colour is never the only thing carrying the meaning.
+ */
+export const STATUS = {
+  good: '#0ca30c',
+  warning: '#fab219',
+  serious: '#ec835a',
+  critical: '#d03b3b'
+}
+
+/** Axis, grid and label colours. Deliberately recessive: the data is the ink. */
+const CHROME_LIGHT = {
+  axis: '#898781',
+  grid: '#e1e0d9',
+  baseline: '#c3c2b7',
+  text: '#52514e'
+}
+
+const CHROME_DARK = {
+  axis: '#898781',
+  grid: '#2c2c2a',
+  baseline: '#383835',
+  text: '#c3c2b7'
+}
+
+export const categorical = (isDark) => (isDark ? CATEGORICAL_DARK : CATEGORICAL_LIGHT)
+
+export const chrome = (isDark) => (isDark ? CHROME_DARK : CHROME_LIGHT)
diff --git a/reposilite-frontend/src/style.css b/reposilite-frontend/src/style.css
new file mode 100644
index 000000000..b8a88f9ab
--- /dev/null
+++ b/reposilite-frontend/src/style.css
@@ -0,0 +1,242 @@
+/*
+ * Copyright (c) 2026 OneLiteFeather
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * A plain CSS `@import` has to lead the file it appears in. This one used to sit in
+ * App.vue's style block, which no longer exists.
+ */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap");
+
+@import "tailwindcss";
+
+@plugin "@tailwindcss/forms";
+
+/*
+ * The dashboard toggles a `dark` class on a wrapper element rather than following the
+ * media query, because the theme picker in the header offers an explicit light and dark
+ * choice next to `auto`. See src/store/theme.js.
+ *
+ * `:is` and not the more common `:where`, because `:where` contributes no specificity. A
+ * `dark:` utility then loses to any third-party rule written with two classes, and the
+ * dashboard has those: vue3-tabs styles its own indicator that way. Windi emitted a plain
+ * `.dark &` descendant selector, and `:is` is what reproduces its weight.
+ */
+@custom-variant dark (&:is(.dark, .dark *));
+
+@theme {
+  --font-mono: Consolas, Monaco, monospace;
+
+  --text-xxs: 0.45rem;
+  --text-xxs--line-height: 0.5rem;
+  --text-xm: 0.625rem;
+  --text-xm--line-height: 0.75rem;
+  --text-ssm: 0.8rem;
+  --text-ssm--line-height: 1.15rem;
+
+  /*
+   * `gray` deliberately carries the neutral ramp, not Tailwind's own gray, which is
+   * blue-tinted. The dashboard is built on flat neutrals and the two are not
+   * interchangeable. 125 and 150 fill the gap between 100 and 200, which the hover states
+   * of the file browser and the tab bar rely on.
+   */
+  --color-gray-50: #fafafa;
+  --color-gray-100: #f5f5f5;
+  --color-gray-125: #efefef;
+  --color-gray-150: #ececec;
+  --color-gray-200: #e5e5e5;
+  --color-gray-300: #d4d4d4;
+  --color-gray-400: #a3a3a3;
+  --color-gray-500: #737373;
+  --color-gray-600: #525252;
+  --color-gray-700: #404040;
+  --color-gray-800: #262626;
+  --color-gray-900: #171717;
+  --color-gray-950: #0a0a0a;
+}
+
+/*
+ * ---------------------------------------------------------------------------------------
+ * Compatibility block: everything below reproduces what WindiCSS used to emit, so that the
+ * move to Tailwind is a toolchain change and nothing else. It is scaffolding, not design.
+ * The UI work that follows this migration replaces these values with deliberate ones and
+ * deletes this block. Do not extend it.
+ * ---------------------------------------------------------------------------------------
+ */
+
+/*
+ * Tailwind v4 ships the sRGB palette re-authored in OKLCH, which lands the same colour
+ * names on visibly more saturated values. Pinning the previous hex codes keeps the
+ * migration free of colour drift.
+ */
+@theme {
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+
+  --color-purple-300: #d8b4fe;
+  --color-purple-400: #c084fc;
+  --color-purple-500: #a855f7;
+  --color-purple-600: #9333ea;
+  --color-purple-700: #7e22ce;
+
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+
+  --color-green-500: #22c55e;
+  --color-yellow-500: #eab308;
+
+  /*
+   * Windi shipped a near-black ramp called `dark`, which the mobile tab dropdown and the
+   * console divider use. It has no Tailwind counterpart, so the two shades still in use
+   * are carried over verbatim. The name reads oddly next to the `dark:` variant; that is
+   * one more reason it goes away with this block.
+   */
+  --color-dark-300: #2d2d2d;
+  --color-dark-600: #1c1c1e;
+}
+
+/*
+ * Windi's forms plugin predates the `input:not([type])` selector that
+ * @tailwindcss/forms added, so an <input> written without a type went unstyled. Thirteen
+ * of them in this dashboard were laid out against that untouched box and grow a border,
+ * padding and a taller line box without this. The declarations below are Preflight's, put
+ * back for that one selector.
+ */
+@layer base {
+  input:not([type]) {
+    appearance: none;
+    background-color: transparent;
+    border: 0 solid;
+    border-radius: 0;
+    padding: 0;
+    font: inherit;
+    box-shadow: none;
+  }
+
+  input:not([type]):focus {
+    outline: revert;
+    border-color: inherit;
+    box-shadow: none;
+  }
+}
+
+/*
+ * v4 defaults an unqualified border to `currentColor` where v3 and Windi defaulted to
+ * gray-200. Plenty of markup here writes `border` and expects the light grey.
+ */
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+/*
+ * Global rules, moved here out of App.vue, where they were never scoped to anything. Which
+ * layer each one lands in is a decision, not a formality: an unlayered rule outranks every
+ * utility, and a layered one loses to every unlayered rule a dependency ships. The three
+ * groups below each need something different, and the comments say which.
+ */
+@layer base {
+  html,
+  body {
+    @apply bg-gray-100 dark:bg-black;
+  }
+
+  #app {
+    font-family: "Open Sans", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@layer components {
+  /*
+   * The shared page gutter. This one belongs in a layer: several views write their own
+   * `px-15` next to `container`, and a utility only wins against a layered rule.
+   */
+  .container {
+    @apply px-10 max-sm:px-2;
+  }
+}
+
+/*
+ * Outside any layer, on purpose. `.active` has to outrank the indicator colour vue3-tabs
+ * ships in its own stylesheet, and layered rules lose to unlayered ones whatever their
+ * specificity. No utility competes with these three on the same element.
+ */
+.active {
+  @apply dark:border-white;
+}
+
+.router-view-full {
+  min-height: calc(100vh - 2rem);
+}
+
+/*
+ * Skeleton placeholders: the card and its background appear at once, only these bars fade
+ * in, so a fast response replaces them before they get a chance to flicker.
+ */
+.skeleton-bars {
+  animation: skeleton-fade-in 0.8s ease-out 0.2s both;
+}
+
+@keyframes skeleton-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/*
+ * Was a Windi shortcut. It is declared as a utility rather than a plain class because
+ * DetailedListEntry.vue reaches it through `@apply`, which only resolves utilities.
+ *
+ * The original also listed `transition-color`, which is not a real utility and never was,
+ * so it is dropped instead of carried over. The duration beside it has no transition
+ * property to act on and is kept only so the rendered result stays identical.
+ */
+@utility default-button {
+  cursor: pointer;
+  background-color: var(--color-white);
+
+  &:hover {
+    background-color: var(--color-gray-200);
+    transition-duration: 500ms;
+  }
+
+  &:where(.dark, .dark *) {
+    background-color: var(--color-gray-900);
+
+    &:hover {
+      background-color: var(--color-gray-800);
+    }
+  }
+}
diff --git a/reposilite-frontend/vite.config.js b/reposilite-frontend/vite.config.js
index 0f15441f8..545909636 100644
--- a/reposilite-frontend/vite.config.js
+++ b/reposilite-frontend/vite.config.js
@@ -17,7 +17,7 @@
 import { defineConfig } from "vite"
 import vue from "@vitejs/plugin-vue"
 import vueJsx from "@vitejs/plugin-vue-jsx"
-import WindiCSS from "vite-plugin-windicss"
+import tailwindcss from "@tailwindcss/vite"
 import { visualizer } from "rollup-plugin-visualizer"
 
 // https://vitejs.dev/config/
@@ -28,7 +28,7 @@ export default defineConfig({
   plugins: [
     vue(),
     vueJsx(),
-    WindiCSS(),
+    tailwindcss(),
     visualizer(),
   ],
   // Served by the server itself, the placeholder is substituted on the way out and the
diff --git a/reposilite-frontend/windi.config.js b/reposilite-frontend/windi.config.js
deleted file mode 100644
index dae6a3bfc..000000000
--- a/reposilite-frontend/windi.config.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * Copyright (c) 2023 dzikoysk
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { defineConfig } from "windicss/helpers"
-import colors from "windicss/colors"
-
-export default defineConfig({
-  darkMode: "class",
-  plugins: [
-    require('windicss/plugin/forms')
-  ],
-  theme: {
-    screens: {
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-    },
-    extend: {
-      colors: {
-        gray: {
-          125: "#efefef",
-          150: "#ececec",
-          ...colors.neutral,
-        },
-      },
-      fontSize: {
-        xxs: ["0.45rem", { lineHeight: "0.5rem" }],
-        xm: ["0.625rem", { lineHeight: "0.75rem" }],
-        ssm: ["0.8rem", { lineHeight: "1.15rem" }],
-      },
-      fontFamily: {
-        mono: ["Consolas", "Monaco", "monospace"],
-      }
-    },
-  },
-  shortcuts: {
-    "default-button":
-      "bg-white dark:bg-gray-900 cursor-pointer hover:(transition-color bg-gray-200 dark:bg-gray-800 duration-500)",
-  },
-})
-