diff --git a/client/package.json b/client/package.json
index ff2901c..68171fe 100644
--- a/client/package.json
+++ b/client/package.json
@@ -13,12 +13,17 @@
     "@hey-api/client-fetch": "^0.7.0",
     "@solidjs/router": "^0.15.3",
     "@soorria/solid-dropzone": "^1.0.1",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.11",
     "@tanstack/solid-query": "^5.64.1",
     "bulma": "^1.0.3",
+    "daisyui": "^5.0.46",
     "huge-uploader": "^1.0.6",
     "lucide-solid": "^0.473.0",
+    "node-vibrant": "^4.0.3",
     "oidc-client-ts": "^3.1.0",
-    "solid-js": "^1.9.3"
+    "solid-js": "^1.9.3",
+    "tailwindcss": "^4.1.11"
   },
   "devDependencies": {
     "@hey-api/openapi-ts": "^0.62.1",
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index 7444e6e..7b14c09 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -14,24 +14,39 @@ dependencies:
   '@soorria/solid-dropzone':
     specifier: ^1.0.1
     version: 1.0.1(solid-js@1.9.4)
+  '@tailwindcss/typography':
+    specifier: ^0.5.16
+    version: 0.5.16(tailwindcss@4.1.11)
+  '@tailwindcss/vite':
+    specifier: ^4.1.11
+    version: 4.1.11(vite@6.0.7)
   '@tanstack/solid-query':
     specifier: ^5.64.1
     version: 5.64.1(solid-js@1.9.4)
   bulma:
     specifier: ^1.0.3
     version: 1.0.3
+  daisyui:
+    specifier: ^5.0.46
+    version: 5.0.46
   huge-uploader:
     specifier: ^1.0.6
     version: 1.0.6
   lucide-solid:
     specifier: ^0.473.0
     version: 0.473.0(solid-js@1.9.4)
+  node-vibrant:
+    specifier: ^4.0.3
+    version: 4.0.3
   oidc-client-ts:
     specifier: ^3.1.0
     version: 3.1.0
   solid-js:
     specifier: ^1.9.3
     version: 1.9.4
+  tailwindcss:
+    specifier: ^4.1.11
+    version: 4.1.11
 
 devDependencies:
   '@hey-api/openapi-ts':
@@ -58,7 +73,6 @@ packages:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
-    dev: true
 
   /@babel/code-frame@7.26.2:
     resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
@@ -234,7 +248,6 @@ packages:
     cpu: [ppc64]
     os: [aix]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-arm64@0.24.2:
@@ -243,7 +256,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-arm@0.24.2:
@@ -252,7 +264,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-x64@0.24.2:
@@ -261,7 +272,6 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-arm64@0.24.2:
@@ -270,7 +280,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-x64@0.24.2:
@@ -279,7 +288,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-arm64@0.24.2:
@@ -288,7 +296,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-x64@0.24.2:
@@ -297,7 +304,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm64@0.24.2:
@@ -306,7 +312,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm@0.24.2:
@@ -315,7 +320,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ia32@0.24.2:
@@ -324,7 +328,6 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-loong64@0.24.2:
@@ -333,7 +336,6 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-mips64el@0.24.2:
@@ -342,7 +344,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ppc64@0.24.2:
@@ -351,7 +352,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-riscv64@0.24.2:
@@ -360,7 +360,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-s390x@0.24.2:
@@ -369,7 +368,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-x64@0.24.2:
@@ -378,7 +376,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/netbsd-arm64@0.24.2:
@@ -387,7 +384,6 @@ packages:
     cpu: [arm64]
     os: [netbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/netbsd-x64@0.24.2:
@@ -396,7 +392,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/openbsd-arm64@0.24.2:
@@ -405,7 +400,6 @@ packages:
     cpu: [arm64]
     os: [openbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/openbsd-x64@0.24.2:
@@ -414,7 +408,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/sunos-x64@0.24.2:
@@ -423,7 +416,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-arm64@0.24.2:
@@ -432,7 +424,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-ia32@0.24.2:
@@ -441,7 +432,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-x64@0.24.2:
@@ -450,7 +440,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@hey-api/client-fetch@0.7.0:
@@ -482,6 +471,115 @@ packages:
       - magicast
     dev: true
 
+  /@isaacs/fs-minipass@4.0.1:
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      minipass: 7.1.2
+    dev: false
+
+  /@jimp/bmp@0.22.12(@jimp/custom@0.22.12):
+    resolution: {integrity: sha512-aeI64HD0npropd+AR76MCcvvRaa+Qck6loCOS03CkkxGHN5/r336qTM5HPUdHKMDOGzqknuVPA8+kK1t03z12g==}
+    peerDependencies:
+      '@jimp/custom': '>=0.3.5'
+    dependencies:
+      '@jimp/custom': 0.22.12
+      '@jimp/utils': 0.22.12
+      bmp-js: 0.1.0
+    dev: false
+
+  /@jimp/core@0.22.12:
+    resolution: {integrity: sha512-l0RR0dOPyzMKfjUW1uebzueFEDtCOj9fN6pyTYWWOM/VS4BciXQ1VVrJs8pO3kycGYZxncRKhCoygbNr8eEZQA==}
+    dependencies:
+      '@jimp/utils': 0.22.12
+      any-base: 1.1.0
+      buffer: 5.7.1
+      exif-parser: 0.1.12
+      file-type: 16.5.4
+      isomorphic-fetch: 3.0.0
+      pixelmatch: 4.0.2
+      tinycolor2: 1.6.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /@jimp/custom@0.22.12:
+    resolution: {integrity: sha512-xcmww1O/JFP2MrlGUMd3Q78S3Qu6W3mYTXYuIqFq33EorgYHV/HqymHfXy9GjiCJ7OI+7lWx6nYFOzU7M4rd1Q==}
+    dependencies:
+      '@jimp/core': 0.22.12
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /@jimp/gif@0.22.12(@jimp/custom@0.22.12):
+    resolution: {integrity: sha512-y6BFTJgch9mbor2H234VSjd9iwAhaNf/t3US5qpYIs0TSbAvM02Fbc28IaDETj9+4YB4676sz4RcN/zwhfu1pg==}
+    peerDependencies:
+      '@jimp/custom': '>=0.3.5'
+    dependencies:
+      '@jimp/custom': 0.22.12
+      '@jimp/utils': 0.22.12
+      gifwrap: 0.10.1
+      omggif: 1.0.10
+    dev: false
+
+  /@jimp/jpeg@0.22.12(@jimp/custom@0.22.12):
+    resolution: {integrity: sha512-Rq26XC/uQWaQKyb/5lksCTCxXhtY01NJeBN+dQv5yNYedN0i7iYu+fXEoRsfaJ8xZzjoANH8sns7rVP4GE7d/Q==}
+    peerDependencies:
+      '@jimp/custom': '>=0.3.5'
+    dependencies:
+      '@jimp/custom': 0.22.12
+      '@jimp/utils': 0.22.12
+      jpeg-js: 0.4.4
+    dev: false
+
+  /@jimp/plugin-resize@0.22.12(@jimp/custom@0.22.12):
+    resolution: {integrity: sha512-3NyTPlPbTnGKDIbaBgQ3HbE6wXbAlFfxHVERmrbqAi8R3r6fQPxpCauA8UVDnieg5eo04D0T8nnnNIX//i/sXg==}
+    peerDependencies:
+      '@jimp/custom': '>=0.3.5'
+    dependencies:
+      '@jimp/custom': 0.22.12
+      '@jimp/utils': 0.22.12
+    dev: false
+
+  /@jimp/png@0.22.12(@jimp/custom@0.22.12):
+    resolution: {integrity: sha512-Mrp6dr3UTn+aLK8ty/dSKELz+Otdz1v4aAXzV5q53UDD2rbB5joKVJ/ChY310B+eRzNxIovbUF1KVrUsYdE8Hg==}
+    peerDependencies:
+      '@jimp/custom': '>=0.3.5'
+    dependencies:
+      '@jimp/custom': 0.22.12
+      '@jimp/utils': 0.22.12
+      pngjs: 6.0.0
+    dev: false
+
+  /@jimp/tiff@0.22.12(@jimp/custom@0.22.12):
+    resolution: {integrity: sha512-E1LtMh4RyJsoCAfAkBRVSYyZDTtLq9p9LUiiYP0vPtXyxX4BiYBUYihTLSBlCQg5nF2e4OpQg7SPrLdJ66u7jg==}
+    peerDependencies:
+      '@jimp/custom': '>=0.3.5'
+    dependencies:
+      '@jimp/custom': 0.22.12
+      utif2: 4.1.0
+    dev: false
+
+  /@jimp/types@0.22.12(@jimp/custom@0.22.12):
+    resolution: {integrity: sha512-wwKYzRdElE1MBXFREvCto5s699izFHNVvALUv79GXNbsOVqlwlOxlWJ8DuyOGIXoLP4JW/m30YyuTtfUJgMRMA==}
+    peerDependencies:
+      '@jimp/custom': '>=0.3.5'
+    dependencies:
+      '@jimp/bmp': 0.22.12(@jimp/custom@0.22.12)
+      '@jimp/custom': 0.22.12
+      '@jimp/gif': 0.22.12(@jimp/custom@0.22.12)
+      '@jimp/jpeg': 0.22.12(@jimp/custom@0.22.12)
+      '@jimp/png': 0.22.12(@jimp/custom@0.22.12)
+      '@jimp/tiff': 0.22.12(@jimp/custom@0.22.12)
+      timm: 1.7.1
+    dev: false
+
+  /@jimp/utils@0.22.12:
+    resolution: {integrity: sha512-yJ5cWUknGnilBq97ZXOyOS0HhsHOyAyjHwYfHxGbSyMTohgQI6sVyE8KPgDwH8HHW/nMKXk8TrSwAE71zt716Q==}
+    dependencies:
+      regenerator-runtime: 0.13.11
+    dev: false
+
   /@jridgewell/gen-mapping@0.3.8:
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
@@ -489,28 +587,23 @@ packages:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
-    dev: true
 
   /@jridgewell/resolve-uri@3.1.2:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/set-array@1.2.1:
     resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/sourcemap-codec@1.5.0:
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
-    dev: true
 
   /@jridgewell/trace-mapping@0.3.25:
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
-    dev: true
 
   /@jsdevtools/ono@7.1.3:
     resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}
@@ -521,7 +614,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-android-arm64@4.30.1:
@@ -529,7 +621,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-darwin-arm64@4.30.1:
@@ -537,7 +628,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-darwin-x64@4.30.1:
@@ -545,7 +635,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-freebsd-arm64@4.30.1:
@@ -553,7 +642,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-freebsd-x64@4.30.1:
@@ -561,7 +649,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm-gnueabihf@4.30.1:
@@ -569,7 +656,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm-musleabihf@4.30.1:
@@ -577,7 +663,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-gnu@4.30.1:
@@ -585,7 +670,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-musl@4.30.1:
@@ -593,7 +677,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-loongarch64-gnu@4.30.1:
@@ -601,7 +684,6 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-powerpc64le-gnu@4.30.1:
@@ -609,7 +691,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-riscv64-gnu@4.30.1:
@@ -617,7 +698,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-s390x-gnu@4.30.1:
@@ -625,7 +705,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-gnu@4.30.1:
@@ -633,7 +712,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-musl@4.30.1:
@@ -641,7 +719,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-arm64-msvc@4.30.1:
@@ -649,7 +726,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-ia32-msvc@4.30.1:
@@ -657,7 +733,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-x64-msvc@4.30.1:
@@ -665,7 +740,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@solidjs/router@0.15.3(solid-js@1.9.4):
@@ -685,6 +759,177 @@ packages:
       solid-js: 1.9.4
     dev: false
 
+  /@tailwindcss/node@4.1.11:
+    resolution: {integrity: sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==}
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      enhanced-resolve: 5.18.2
+      jiti: 2.4.2
+      lightningcss: 1.30.1
+      magic-string: 0.30.17
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.11
+    dev: false
+
+  /@tailwindcss/oxide-android-arm64@4.1.11:
+    resolution: {integrity: sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@tailwindcss/oxide-darwin-arm64@4.1.11:
+    resolution: {integrity: sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@tailwindcss/oxide-darwin-x64@4.1.11:
+    resolution: {integrity: sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@tailwindcss/oxide-freebsd-x64@4.1.11:
+    resolution: {integrity: sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11:
+    resolution: {integrity: sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@tailwindcss/oxide-linux-arm64-gnu@4.1.11:
+    resolution: {integrity: sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@tailwindcss/oxide-linux-arm64-musl@4.1.11:
+    resolution: {integrity: sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@tailwindcss/oxide-linux-x64-gnu@4.1.11:
+    resolution: {integrity: sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@tailwindcss/oxide-linux-x64-musl@4.1.11:
+    resolution: {integrity: sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@tailwindcss/oxide-wasm32-wasi@4.1.11:
+    resolution: {integrity: sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    requiresBuild: true
+    dev: false
+    optional: true
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  /@tailwindcss/oxide-win32-arm64-msvc@4.1.11:
+    resolution: {integrity: sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@tailwindcss/oxide-win32-x64-msvc@4.1.11:
+    resolution: {integrity: sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@tailwindcss/oxide@4.1.11:
+    resolution: {integrity: sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==}
+    engines: {node: '>= 10'}
+    requiresBuild: true
+    dependencies:
+      detect-libc: 2.0.4
+      tar: 7.4.3
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-x64': 4.1.11
+      '@tailwindcss/oxide-freebsd-x64': 4.1.11
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.11
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.11
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.11
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.11
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.11
+    dev: false
+
+  /@tailwindcss/typography@0.5.16(tailwindcss@4.1.11):
+    resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 4.1.11
+    dev: false
+
+  /@tailwindcss/vite@4.1.11(vite@6.0.7):
+    resolution: {integrity: sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
+    dependencies:
+      '@tailwindcss/node': 4.1.11
+      '@tailwindcss/oxide': 4.1.11
+      tailwindcss: 4.1.11
+      vite: 6.0.7
+    dev: false
+
   /@tanstack/query-core@5.64.1:
     resolution: {integrity: sha512-978Wx4Wl4UJZbmvU/rkaM9cQtXXrbhK0lsz/UZhYIbyKYA8E4LdomTwyh2GHZ4oU0BKKoDH4YlKk2VscCUgNmg==}
     dev: false
@@ -698,6 +943,10 @@ packages:
       solid-js: 1.9.4
     dev: false
 
+  /@tokenizer/token@0.3.0:
+    resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
+    dev: false
+
   /@types/babel__core@7.20.5:
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:
@@ -729,18 +978,115 @@ packages:
 
   /@types/estree@1.0.6:
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
-    dev: true
 
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
 
+  /@types/node@16.9.1:
+    resolution: {integrity: sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==}
+    dev: false
+
+  /@types/node@18.19.120:
+    resolution: {integrity: sha512-WtCGHFXnVI8WHLxDAt5TbnCM4eSE+nI0QN2NJtwzcgMhht2eNz6V9evJrk+lwC8bCY8OWV5Ym8Jz7ZEyGnKnMA==}
+    dependencies:
+      undici-types: 5.26.5
+    dev: false
+
+  /@vibrant/color@4.0.0:
+    resolution: {integrity: sha512-S9ItdqS1135wTXoIIqAJu8df9dqlOo6Boc5Y4MGsBTu9UmUOvOwfj5b4Ga6S5yrLAKmKYIactkz7zYJdMddkig==}
+    dev: false
+
+  /@vibrant/core@4.0.0:
+    resolution: {integrity: sha512-fqlVRUTDjEws9VNKvI3cDXM4wUT7fMFS+cVqEjJk3im+R5EvjJzPF6OAbNhfPzW04NvHNE555eY9FfhYuX3PRw==}
+    dependencies:
+      '@vibrant/color': 4.0.0
+      '@vibrant/generator': 4.0.0
+      '@vibrant/image': 4.0.0
+      '@vibrant/quantizer': 4.0.0
+      '@vibrant/worker': 4.0.0
+    dev: false
+
+  /@vibrant/generator-default@4.0.3:
+    resolution: {integrity: sha512-HZlfp19sDokODEkZF4p70QceARHgjP3a1Dmxg+dlblYMJM98jPq+azA0fzqKNR7R17JJNHxexpJEepEsNlG0gw==}
+    dependencies:
+      '@vibrant/color': 4.0.0
+      '@vibrant/generator': 4.0.0
+    dev: false
+
+  /@vibrant/generator@4.0.0:
+    resolution: {integrity: sha512-CqKAjmgHVDXJVo3Q5+9pUJOvksR7cN3bzx/6MbURYh7lA4rhsIewkUK155M6q0vfcUN3ETi/eTneCi0tLuM2Sg==}
+    dependencies:
+      '@vibrant/color': 4.0.0
+      '@vibrant/types': 4.0.0
+    dev: false
+
+  /@vibrant/image-browser@4.0.0:
+    resolution: {integrity: sha512-mXckzvJWiP575Y/wNtP87W/TPgyJoGlPBjW4E9YmNS6n4Jb6RqyHQA0ZVulqDslOxjSsihDzY7gpAORRclaoLg==}
+    dependencies:
+      '@vibrant/image': 4.0.0
+    dev: false
+
+  /@vibrant/image-node@4.0.0:
+    resolution: {integrity: sha512-m7yfnQtmo2y8z+tOjRFBx6q/qGnhl/ax2uCaj4TBkm4TtXfR4Dsn90wT6OWXmCFFzxIKHXKKEBShkxR+4RHseA==}
+    dependencies:
+      '@jimp/custom': 0.22.12
+      '@jimp/plugin-resize': 0.22.12(@jimp/custom@0.22.12)
+      '@jimp/types': 0.22.12(@jimp/custom@0.22.12)
+      '@vibrant/image': 4.0.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /@vibrant/image@4.0.0:
+    resolution: {integrity: sha512-Asv/7R/L701norosgvbjOVkodFiwcFihkXixA/gbAd6C+5GCts1Wm1NPk14FNKnM7eKkfAN+0wwPkdOH+PY/YA==}
+    dependencies:
+      '@vibrant/color': 4.0.0
+    dev: false
+
+  /@vibrant/quantizer-mmcq@4.0.0:
+    resolution: {integrity: sha512-TZqNiRoGGyCP8fH1XE6rvhFwLNv9D8MP1Xhz3K8tsuUweC6buWax3qLfrfEnkhtQnPJHaqvTfTOlIIXVMfRpow==}
+    dependencies:
+      '@vibrant/color': 4.0.0
+      '@vibrant/image': 4.0.0
+      '@vibrant/quantizer': 4.0.0
+    dev: false
+
+  /@vibrant/quantizer@4.0.0:
+    resolution: {integrity: sha512-YDGxmCv/RvHFtZghDlVRwH5GMxdGGozWS1JpUOUt73/F5zAKGiiier8F31K1npIXARn6/Gspvg/Rbg7qqyEr2A==}
+    dependencies:
+      '@vibrant/color': 4.0.0
+      '@vibrant/image': 4.0.0
+      '@vibrant/types': 4.0.0
+    dev: false
+
+  /@vibrant/types@4.0.0:
+    resolution: {integrity: sha512-tA5TAbuROXcPkt+PWjmGfoaiEXyySVaNnCZovf6vXhCbMdrTTCQXvNCde2geiVl6YwtuU/Qrj9iZxS5jZ6yVIw==}
+    dev: false
+
+  /@vibrant/worker@4.0.0:
+    resolution: {integrity: sha512-nSaZZwWQKOgN/nPYUAIRF0/uoa7KpK91A+gjLmZZDgfN1enqxaiihmn+75ayNadW0c6cxAEpEFEHTONR5u9tMw==}
+    dependencies:
+      '@vibrant/types': 4.0.0
+    dev: false
+
+  /abort-controller@3.0.0:
+    resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
+    engines: {node: '>=6.5'}
+    dependencies:
+      event-target-shim: 5.0.1
+    dev: false
+
   /acorn@8.14.0:
     resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
     engines: {node: '>=0.4.0'}
     hasBin: true
     dev: true
 
+  /any-base@1.1.0:
+    resolution: {integrity: sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==}
+    dev: false
+
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
@@ -768,6 +1114,14 @@ packages:
       babel-plugin-jsx-dom-expressions: 0.39.5(@babel/core@7.26.0)
     dev: true
 
+  /base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+    dev: false
+
+  /bmp-js@0.1.0:
+    resolution: {integrity: sha512-vHdS19CnY3hwiNdkaqk93DvjVLfbEcI8mys4UjuWrlX1haDmroo8o4xCzh4wD6DGV6HxRCyauwhHRqMTfERtjw==}
+    dev: false
+
   /browserslist@4.24.4:
     resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -779,6 +1133,20 @@ packages:
       update-browserslist-db: 1.1.2(browserslist@4.24.4)
     dev: true
 
+  /buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: false
+
+  /buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: false
+
   /bulma@1.0.3:
     resolution: {integrity: sha512-9eVXBrXwlU337XUXBjIIq7i88A+tRbJYAjXQjT/21lwam+5tpvKF0R7dCesre9N+HV9c6pzCNEPKrtgvBBes2g==}
     dev: false
@@ -821,6 +1189,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+    dev: false
+
   /citty@0.1.6:
     resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
     dependencies:
@@ -854,9 +1227,19 @@ packages:
       which: 2.0.2
     dev: true
 
+  /cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: false
+
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  /daisyui@5.0.46:
+    resolution: {integrity: sha512-vMDZK1tI/bOb2Mc3Mk5WpquBG3ZqBz1YKZ0xDlvpOvey60dOS4/5Qhdowq1HndbQl7PgDLDYysxAjjUjwR7/eQ==}
+    dev: false
+
   /debug@4.4.0:
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
@@ -877,6 +1260,11 @@ packages:
     resolution: {integrity: sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ==}
     dev: true
 
+  /detect-libc@2.0.4:
+    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
+    engines: {node: '>=8'}
+    dev: false
+
   /dotenv@16.4.7:
     resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
     engines: {node: '>=12'}
@@ -886,6 +1274,14 @@ packages:
     resolution: {integrity: sha512-LcUDPqSt+V0QmI47XLzZrz5OqILSMGsPFkDYus22rIbgorSvBYEFqq854ltTmUdHkY92FSdAAvsh4jWEULMdfQ==}
     dev: true
 
+  /enhanced-resolve@5.18.2:
+    resolution: {integrity: sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.2
+    dev: false
+
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -922,7 +1318,6 @@ packages:
       '@esbuild/win32-arm64': 0.24.2
       '@esbuild/win32-ia32': 0.24.2
       '@esbuild/win32-x64': 0.24.2
-    dev: true
 
   /escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
@@ -934,11 +1329,21 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
+  /event-target-shim@5.0.1:
+    resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
+    engines: {node: '>=6'}
+    dev: false
+
   /event-target-shim@6.0.2:
     resolution: {integrity: sha512-8q3LsZjRezbFZ2PN+uP+Q7pnHUMmAOziU2vA2OwoFaKIXxlxl38IylhSSgUorWu/rf4er67w0ikBqjBFk/pomA==}
     engines: {node: '>=10.13.0'}
     dev: true
 
+  /events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+    dev: false
+
   /execa@8.0.1:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
@@ -954,6 +1359,10 @@ packages:
       strip-final-newline: 3.0.0
     dev: true
 
+  /exif-parser@0.1.12:
+    resolution: {integrity: sha512-c2bQfLNbMzLPmzQuOr8fy0csy84WmwnER81W88DzTp9CYNPJ6yzOj2EZAh9pywYpqHnshVLHQJ8WzldAyfY+Iw==}
+    dev: false
+
   /file-selector@0.6.0:
     resolution: {integrity: sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==}
     engines: {node: '>= 12'}
@@ -961,6 +1370,15 @@ packages:
       tslib: 2.8.1
     dev: false
 
+  /file-type@16.5.4:
+    resolution: {integrity: sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw==}
+    engines: {node: '>=10'}
+    dependencies:
+      readable-web-to-node-stream: 3.0.4
+      strtok3: 6.3.0
+      token-types: 4.2.1
+    dev: false
+
   /fs-minipass@2.1.0:
     resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
     engines: {node: '>= 8'}
@@ -973,7 +1391,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /gensync@1.0.0-beta.2:
@@ -986,6 +1403,13 @@ packages:
     engines: {node: '>=16'}
     dev: true
 
+  /gifwrap@0.10.1:
+    resolution: {integrity: sha512-2760b1vpJHNmLzZ/ubTtNnEx5WApN/PYWJvXvgS+tL1egTTthayFYIQQNi136FLEDcN/IyEY2EcGpIITD6eYUw==}
+    dependencies:
+      image-q: 4.0.0
+      omggif: 1.0.10
+    dev: false
+
   /giget@1.2.3:
     resolution: {integrity: sha512-8EHPljDvs7qKykr6uw8b+lqLiUc/vUg+KVTI0uND4s63TdsZM2Xus3mflvF0DDG9SiM4RlCkFGL+7aAjRmV7KA==}
     hasBin: true
@@ -1005,6 +1429,10 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+    dev: false
+
   /handlebars@4.7.8:
     resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
     engines: {node: '>=0.4.7'}
@@ -1033,6 +1461,16 @@ packages:
     engines: {node: '>=16.17.0'}
     dev: true
 
+  /ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+    dev: false
+
+  /image-q@4.0.0:
+    resolution: {integrity: sha512-PfJGVgIfKQJuq3s0tTDOKtztksibuUEbJQIYT3by6wctQo+Rdlh7ef4evJ5NCdxY4CfMbvFkocEwbl4BF8RlJw==}
+    dependencies:
+      '@types/node': 16.9.1
+    dev: false
+
   /is-stream@3.0.0:
     resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -1047,10 +1485,22 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
+  /isomorphic-fetch@3.0.0:
+    resolution: {integrity: sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==}
+    dependencies:
+      node-fetch: 2.7.0
+      whatwg-fetch: 3.6.20
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /jiti@2.4.2:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
-    dev: true
+
+  /jpeg-js@0.4.4:
+    resolution: {integrity: sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==}
+    dev: false
 
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@@ -1080,6 +1530,126 @@ packages:
     engines: {node: '>=18'}
     dev: false
 
+  /lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
+    dependencies:
+      detect-libc: 2.0.4
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
+    dev: false
+
+  /lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+    dev: false
+
+  /lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+    dev: false
+
+  /lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    dev: false
+
   /lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
     dependencies:
@@ -1094,6 +1664,12 @@ packages:
       solid-js: 1.9.4
     dev: false
 
+  /magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+    dev: false
+
   /merge-anything@5.1.7:
     resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
     engines: {node: '>=12.13'}
@@ -1126,6 +1702,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dev: false
+
   /minizlib@2.1.2:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
     engines: {node: '>= 8'}
@@ -1134,12 +1715,25 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /minizlib@3.0.2:
+    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
+    engines: {node: '>= 18'}
+    dependencies:
+      minipass: 7.1.2
+    dev: false
+
   /mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
     hasBin: true
     dev: true
 
+  /mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dev: false
+
   /mlly@1.7.4:
     resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
     dependencies:
@@ -1157,7 +1751,6 @@ packages:
     resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: true
 
   /neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
@@ -1167,10 +1760,35 @@ packages:
     resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==}
     dev: true
 
+  /node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: false
+
   /node-releases@2.0.19:
     resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
     dev: true
 
+  /node-vibrant@4.0.3:
+    resolution: {integrity: sha512-kzoIuJK90BH/k65Avt077JCX4Nhqz1LNc8cIOm2rnYEvFdJIYd8b3SQwU1MTpzcHtr8z8jxkl1qdaCfbP3olFg==}
+    dependencies:
+      '@types/node': 18.19.120
+      '@vibrant/core': 4.0.0
+      '@vibrant/generator-default': 4.0.3
+      '@vibrant/image-browser': 4.0.0
+      '@vibrant/image-node': 4.0.0
+      '@vibrant/quantizer-mmcq': 4.0.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /npm-run-path@5.3.0:
     resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -1202,6 +1820,10 @@ packages:
       jwt-decode: 4.0.0
     dev: false
 
+  /omggif@1.0.10:
+    resolution: {integrity: sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw==}
+    dev: false
+
   /onetime@6.0.0:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
@@ -1209,6 +1831,10 @@ packages:
       mimic-fn: 4.0.0
     dev: true
 
+  /pako@1.0.11:
+    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
+    dev: false
+
   /parse5@7.2.1:
     resolution: {integrity: sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==}
     dependencies:
@@ -1233,13 +1859,24 @@ packages:
     resolution: {integrity: sha512-15Ztpk+nov8DR524R4BF7uEuzESgzUEAV4Ah7CUMNGXdE5ELuvxElxGXndBl32vMSsWa1jpNf22Z+Er3sKwq+w==}
     dev: true
 
+  /peek-readable@4.1.0:
+    resolution: {integrity: sha512-ZI3LnwUv5nOGbQzD9c2iDG6toheuXSZP5esSHBjopsXH4dg19soufvpUGA3uohi5anFtGb2lhAVdHzH6R/Evvg==}
+    engines: {node: '>=8'}
+    dev: false
+
   /perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
     dev: true
 
   /picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
-    dev: true
+
+  /pixelmatch@4.0.2:
+    resolution: {integrity: sha512-J8B6xqiO37sU/gkcMglv6h5Jbd9xNER7aHzpfRdNmV4IbQBzBpe4l9XmbG+xPF/znacgu2jfEw+wHffaq/YkXA==}
+    hasBin: true
+    dependencies:
+      pngjs: 3.4.0
+    dev: false
 
   /pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
@@ -1249,6 +1886,24 @@ packages:
       pathe: 2.0.2
     dev: true
 
+  /pngjs@3.4.0:
+    resolution: {integrity: sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==}
+    engines: {node: '>=4.0.0'}
+    dev: false
+
+  /pngjs@6.0.0:
+    resolution: {integrity: sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==}
+    engines: {node: '>=12.13.0'}
+    dev: false
+
+  /postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: false
+
   /postcss@8.5.1:
     resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1256,7 +1911,11 @@ packages:
       nanoid: 3.3.8
       picocolors: 1.1.1
       source-map-js: 1.2.1
-    dev: true
+
+  /process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
 
   /rc9@2.1.2:
     resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
@@ -1265,11 +1924,33 @@ packages:
       destr: 2.0.3
     dev: true
 
+  /readable-stream@4.7.0:
+    resolution: {integrity: sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      abort-controller: 3.0.0
+      buffer: 6.0.3
+      events: 3.3.0
+      process: 0.11.10
+      string_decoder: 1.3.0
+    dev: false
+
+  /readable-web-to-node-stream@3.0.4:
+    resolution: {integrity: sha512-9nX56alTf5bwXQ3ZDipHJhusu9NTQJ/CVPtb/XHAJCXihZeitfJvIRS4GqQ/mfIoOE3IelHMrpayVrosdHBuLw==}
+    engines: {node: '>=8'}
+    dependencies:
+      readable-stream: 4.7.0
+    dev: false
+
   /readdirp@4.1.1:
     resolution: {integrity: sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==}
     engines: {node: '>= 14.18.0'}
     dev: true
 
+  /regenerator-runtime@0.13.11:
+    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
+    dev: false
+
   /rollup@4.30.1:
     resolution: {integrity: sha512-mlJ4glW020fPuLi7DkM/lN97mYEZGWeqBnrljzN0gs7GLctqX3lNWxKQ7Gl712UAX+6fog/L3jh4gb7R6aVi3w==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -1297,7 +1978,10 @@ packages:
       '@rollup/rollup-win32-ia32-msvc': 4.30.1
       '@rollup/rollup-win32-x64-msvc': 4.30.1
       fsevents: 2.3.3
-    dev: true
+
+  /safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+    dev: false
 
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
@@ -1356,18 +2040,40 @@ packages:
   /source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: false
+
   /strip-final-newline@3.0.0:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
     engines: {node: '>=12'}
     dev: true
 
+  /strtok3@6.3.0:
+    resolution: {integrity: sha512-fZtbhtvI9I48xDSywd/somNqgUHl2L2cstmXCCif0itOf96jeW18MBSyrLuNicYQVkvpOxkZtkzujiTJ9LW5Jw==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@tokenizer/token': 0.3.0
+      peek-readable: 4.1.0
+    dev: false
+
+  /tailwindcss@4.1.11:
+    resolution: {integrity: sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==}
+    dev: false
+
+  /tapable@2.2.2:
+    resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /tar@6.2.1:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
@@ -1380,6 +2086,38 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.0.2
+      mkdirp: 3.0.1
+      yallist: 5.0.0
+    dev: false
+
+  /timm@1.7.1:
+    resolution: {integrity: sha512-IjZc9KIotudix8bMaBW6QvMuq64BrJWFs1+4V0lXwWGQZwH+LnX87doAYhem4caOEusRP9/g6jVDQmZ8XOk1nw==}
+    dev: false
+
+  /tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+    dev: false
+
+  /token-types@4.2.1:
+    resolution: {integrity: sha512-6udB24Q737UD/SDsKAHI9FCRP7Bqc9D/MQUV02ORQg5iskjtLJlZJNdN4kKtcdtwCeWIwIHDGaUsTsCCAa8sFQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@tokenizer/token': 0.3.0
+      ieee754: 1.2.1
+    dev: false
+
+  /tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: false
+
   /tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
     dev: false
@@ -1402,6 +2140,10 @@ packages:
     dev: true
     optional: true
 
+  /undici-types@5.26.5:
+    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+    dev: false
+
   /update-browserslist-db@1.1.2(browserslist@4.24.4):
     resolution: {integrity: sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==}
     hasBin: true
@@ -1413,6 +2155,16 @@ packages:
       picocolors: 1.1.1
     dev: true
 
+  /utif2@4.1.0:
+    resolution: {integrity: sha512-+oknB9FHrJ7oW7A2WZYajOcv4FcDR4CfoGB0dPNfxbi4GO05RRnFmt5oa23+9w32EanrYcSJWspUiJkLMs+37w==}
+    dependencies:
+      pako: 1.0.11
+    dev: false
+
+  /util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+    dev: false
+
   /validate-html-nesting@1.2.2:
     resolution: {integrity: sha512-hGdgQozCsQJMyfK5urgFcWEqsSSrK63Awe0t/IMR0bZ0QMtnuaiHzThW81guu3qx9abLi99NEuiaN6P9gVYsNg==}
     dev: true
@@ -1484,7 +2236,6 @@ packages:
       rollup: 4.30.1
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /vitefu@1.0.5(vite@6.0.7):
     resolution: {integrity: sha512-h4Vflt9gxODPFNGPwp4zAMZRpZR7eslzwH2c5hn5kNZ5rhnKyRJ50U+yGCdc2IRaBs8O4haIgLNGrV5CrpMsCA==}
@@ -1497,6 +2248,21 @@ packages:
       vite: 6.0.7
     dev: true
 
+  /webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: false
+
+  /whatwg-fetch@3.6.20:
+    resolution: {integrity: sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==}
+    dev: false
+
+  /whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: false
+
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -1516,3 +2282,8 @@ packages:
   /yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
+
+  /yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+    dev: false
diff --git a/client/src/admin-layout.tsx b/client/src/admin-layout.tsx
index 9730137..9dfc12b 100644
--- a/client/src/admin-layout.tsx
+++ b/client/src/admin-layout.tsx
@@ -1,54 +1,51 @@
 import { A } from "@solidjs/router";
 import { createQuery } from "@tanstack/solid-query";
-import { children, createSignal, ErrorBoundary, ParentProps, Suspense } from "solid-js";
+import { children, ErrorBoundary, ParentProps, Suspense } from "solid-js";
 import { readUserOptions } from "./client/@tanstack/solid-query.gen";
 import { logout } from "./auth";
+import { Menu } from "lucide-solid";
 
 export default function AdminLayout(props: ParentProps) {
   const content = children(() => props.children);
-  const [navbarToggled, setNavbarToggled] = createSignal(false);
 
   const userQuery = createQuery(() => ({
     ...readUserOptions(),
   }));
 
   return <>
-    <nav class="navbar" role="navigation" aria-label="main navigation">
-      <div class="navbar-brand">
-        <a class="navbar-item" href="/admin">
-          <b>Podcast Server</b>
-        </a>
-
-        <a role="button" class="navbar-burger" classList={{ "is-active": navbarToggled() }} aria-label="menu" aria-expanded="false" onClick={() => setNavbarToggled(!navbarToggled())}>
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-        </a>
-      </div>
-
-      <div id="navbarBasicExample" class="navbar-menu is-active" classList={{ "is-active": navbarToggled() }}>
-        <div class="navbar-start">
-          <A class="navbar-item" href="/admin">
-            Podcasts
-          </A>
+    <div class="navbar bg-primary text-primary-content shadow-sm">
+      <div class="navbar-start">
+        <div class="dropdown">
+          <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+            <Menu class="h-5 w-5" />
+          </div>
+          <ul
+            tabindex="0"
+            class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow text-base-content">
+            <li><A href="/admin">Podcasts</A></li>
+          </ul>
         </div>
-
-        <div class="navbar-end">
-          <ErrorBoundary fallback={() => <p class="navbar-item">Error</p>}>
-            <Suspense fallback={<p class="navbar-item">Loading...</p>}>
-              <p class="navbar-item">Hey {userQuery.data?.user_name.split(" ")[0]}!</p>
+        <A class="btn btn-ghost text-xl" href="/admin">Podcast Admin</A>
+      </div>
+      <div class="navbar-center hidden lg:flex">
+        <ul class="menu menu-horizontal px-1">
+          <li><A href="/admin">Podcasts</A></li>
+        </ul>
+      </div>
+      <div class="navbar-end">
+        <div class="flex flex-row gap-2 items-center">
+          <ErrorBoundary fallback={() => <p>Error</p>}>
+            <Suspense fallback={<p>Loading...</p>}>
+              <p>Hey {userQuery.data?.user_name.split(" ")[0]}!</p>
             </Suspense>
           </ErrorBoundary>
-          <div class="navbar-item">
-            <a class="button is-light" onClick={logout}>
-              Log out
-            </a>
-          </div>
+          <a class="btn" onClick={logout}>
+            Log out
+          </a>
         </div>
       </div>
-    </nav>
-    <main>
+    </div>
+    <main class="h-100">
       {content()}
     </main>
   </>;
diff --git a/client/src/client/types.gen.ts b/client/src/client/types.gen.ts
index 8135257..5ab7dd0 100644
--- a/client/src/client/types.gen.ts
+++ b/client/src/client/types.gen.ts
@@ -57,6 +57,7 @@ export type PodcastPublic = {
     explicit?: boolean;
     id: string;
     image_filename?: string | null;
+    episode_count: number;
 };
 
 export type PodcastUpdate = {
diff --git a/client/src/components/AuthProvider.tsx b/client/src/components/AuthProvider.tsx
index f1316b1..f20a3b8 100644
--- a/client/src/components/AuthProvider.tsx
+++ b/client/src/components/AuthProvider.tsx
@@ -1,6 +1,7 @@
 import { createContext, createEffect, createSignal, ParentComponent } from "solid-js";
 import { fetchUser, login, logout, user } from "../auth";
 import { User } from "oidc-client-ts";
+import Loading from "./loading";
 
 interface AuthContextType {
   user: () => User | null;
@@ -20,7 +21,7 @@ const AuthProvider: ParentComponent = (props) => {
 
   return (
     <AuthContext.Provider value={{ user, login, logout }}>
-      {isLoading() ? <p>Loading...</p> : props.children}
+      {isLoading() ? <Loading /> : props.children}
     </AuthContext.Provider>
   );
 }
diff --git a/client/src/components/UploadEpisodeAdditional.tsx b/client/src/components/UploadEpisodeAdditional.tsx
index 4969430..d19fbff 100644
--- a/client/src/components/UploadEpisodeAdditional.tsx
+++ b/client/src/components/UploadEpisodeAdditional.tsx
@@ -1,5 +1,5 @@
 import { createDropzone } from "@soorria/solid-dropzone";
-import { UploadIcon } from "lucide-solid";
+import { Info, UploadIcon } from "lucide-solid";
 import { createSignal, Show } from "solid-js";
 import { createMutation, useQueryClient } from "@tanstack/solid-query";
 import { episodeAdditionalUploadMutation, readEpisodesQueryKey, readEpisodeQueryKey } from "../client/@tanstack/solid-query.gen";
@@ -50,15 +50,16 @@ export default function UploadEpisodeAdditional(props: { podcastId: string, epis
 
   return <>
     <Show when={statusText()}>
-      <div class="notification is-info">
-        {statusText()}
+      <div role="alert" class="alert">
+        <Info class="stroke-primary h-6 w-6 shrink-0" />
+        <p>{statusText()}</p>
       </div>
     </Show>
     <Show when={!uploading()}>
-      <div {...dropzone.getRootProps()} class="box is-flex is-flex-direction-column is-align-items-center p-6 mb-6">
+      <div {...dropzone.getRootProps()} class="bg-base-200 rounded-lg shadow-sm flex flex-col items-center p-6 mb-6">
         <input {...dropzone.getInputProps()} />
         <UploadIcon size="42" />
-        <p class="mt-4 has-text-centered">
+        <p class="mt-4 text-center">
           {dropzone.isDragActive ? "Drop extra file here..." : "Drag an extra file here to upload, or click to open"}
         </p>
       </div>
diff --git a/client/src/components/error.tsx b/client/src/components/error.tsx
index 1afcb10..318a66e 100644
--- a/client/src/components/error.tsx
+++ b/client/src/components/error.tsx
@@ -1,14 +1,18 @@
+import { XCircle } from "lucide-solid";
+
 export default function Error(props: { message?: any, reset?: () => void }) {
   return (
-    <section class="section">
-      <div class="container">
-        <h1 class="title">Uh Oh!</h1>
-        <h2 class="subtitle">Something has gone wrong.</h2>
-        {props.message && <>
-          <p class="mb-4">Error: <code>{props.message.toString()}</code></p>
-        </>}
-        {props.reset && <button class="button" onClick={props.reset}>Retry</button>}
+    <div class="container mx-auto">
+      <div role="alert" class="alert alert-error alert-vertical sm:alert-horizontal">
+        <XCircle class="h-6 w-6 shrink-0 stroke-current" />
+        <div>
+          <h3 class="font-bold">Uh Oh! Something has gone wrong.</h3>
+          {props.message && <>
+            <div class="text-xs">Error: <code>{props.message.toString()}</code></div>
+          </>}
+        </div>
+        {props.reset && <button class="btn btn-sm" onClick={props.reset}>Retry</button>}
       </div>
-    </section>
+    </div>
   );
 }
diff --git a/client/src/components/loading.tsx b/client/src/components/loading.tsx
index df717e7..2e0bb85 100644
--- a/client/src/components/loading.tsx
+++ b/client/src/components/loading.tsx
@@ -1,10 +1,10 @@
-export default function Loading() {
+export default function Loading(props: { loadingText?: string }) {
   return (
-    <section class="section">
-      <div class="container">
-        <h1 class="title">One moment...</h1>
-        <progress class="progress is-primary" max="100" />
+    <div class="container mx-auto h-full">
+      <div class="w-full h-full flex items-center justify-center gap-2">
+        <span class="loading loading-spinner"></span>
+        <p>{props.loadingText || "One moment..."}</p>
       </div>
-    </section>
+    </div>
   );
 }
diff --git a/client/src/components/upload-image.tsx b/client/src/components/upload-image.tsx
index 31d618b..e97f668 100644
--- a/client/src/components/upload-image.tsx
+++ b/client/src/components/upload-image.tsx
@@ -1,5 +1,5 @@
 import { createDropzone } from "@soorria/solid-dropzone";
-import { UploadIcon } from "lucide-solid";
+import { Info, UploadIcon } from "lucide-solid";
 import { createSignal, Show } from "solid-js";
 import { createMutation, useQueryClient } from "@tanstack/solid-query";
 import { readPodcastQueryKey, readPodcastsQueryKey, updatePodcastImageMutation } from "../client/@tanstack/solid-query.gen";
@@ -49,15 +49,16 @@ export default function UploadImage(props: { podcastId: string }) {
 
   return <>
     <Show when={statusText()}>
-      <div class="notification is-info">
-        {statusText()}
+      <div role="alert" class="alert">
+        <Info class="stroke-primary h-6 w-6 shrink-0" />
+        <p>{statusText()}</p>
       </div>
     </Show>
     <Show when={!uploading()}>
-      <div {...dropzone.getRootProps()} class="box is-flex is-flex-direction-column is-align-items-center p-6 mb-6">
+      <div {...dropzone.getRootProps()} class="bg-base-200 rounded-lg shadow-sm flex flex-col items-center p-6 mb-6">
         <input {...dropzone.getInputProps()} />
         <UploadIcon size="42" />
-        <p class="mt-4 has-text-centered">
+        <p class="mt-4 text-center">
           {dropzone.isDragActive ? "Drop podcast image here..." : "Drag podcast image here to upload, or click to open"}
         </p>
       </div>
diff --git a/client/src/components/upload.tsx b/client/src/components/upload.tsx
index d38f272..37f0fd0 100644
--- a/client/src/components/upload.tsx
+++ b/client/src/components/upload.tsx
@@ -1,5 +1,5 @@
 import { createDropzone } from "@soorria/solid-dropzone";
-import { UploadIcon } from "lucide-solid";
+import { Info, UploadIcon } from "lucide-solid";
 import HugeUploader from "huge-uploader";
 import { SERVER_URL } from "../constants";
 import { createSignal, Show } from "solid-js";
@@ -53,16 +53,20 @@ export default function Upload(props: { podcastId: string }) {
 
   return <>
     <Show when={statusText()}>
-      <div class="notification is-info">
-        {uploadProgress() && <progress class="progress mb-4" value={uploadProgress()!} max="100">{uploadProgress()}%</progress>}
-        {statusText()}
+      <div role="alert" class="alert">
+        <Info class="stroke-primary h-6 w-6 shrink-0" />
+        <div class="w-full">
+          {statusText()}
+          {uploadProgress() && <progress class="progress progress-primary w-full" value={uploadProgress()!} max="100">{uploadProgress()}%</progress>}
+          {uploading() && <p class="text-xs">Do not navigate away until the upload has completed as any progress will be lost.</p>}
+        </div>
       </div>
     </Show>
     <Show when={!uploading()}>
-      <div {...dropzone.getRootProps()} class="box is-flex is-flex-direction-column is-align-items-center p-6 mb-6">
+      <div {...dropzone.getRootProps()} class="bg-base-200 rounded-lg shadow-sm flex flex-col items-center p-6 mb-6">
         <input {...dropzone.getInputProps()} />
         <UploadIcon size="42" />
-        <p class="mt-4 has-text-centered">
+        <p class="mt-4 text-center">
           {dropzone.isDragActive ? "Drop episode here..." : "Drag episode here to upload, or click to open"}
         </p>
       </div>
diff --git a/client/src/helpers.ts b/client/src/helpers.ts
index 719b53e..949239b 100644
--- a/client/src/helpers.ts
+++ b/client/src/helpers.ts
@@ -1,4 +1,6 @@
-export function humanFileSize(bytes: number, si=false, dp=1) {
+const pluralRules = new Intl.PluralRules("en-GB");
+
+export function humanFileSize(bytes: number, si = false, dp = 1) {
   const thresh = si ? 1000 : 1024;
 
   if (Math.abs(bytes) < thresh) {
@@ -9,7 +11,7 @@ export function humanFileSize(bytes: number, si=false, dp=1) {
     ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
     : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
   let u = -1;
-  const r = 10**dp;
+  const r = 10 ** dp;
 
   do {
     bytes /= thresh;
@@ -19,3 +21,14 @@ export function humanFileSize(bytes: number, si=false, dp=1) {
 
   return bytes.toFixed(dp) + ' ' + units[u];
 }
+
+export function pluralize(count: number, singular: string, plural: string): string {
+  const grammaticalNumber = pluralRules.select(count);
+
+  switch (grammaticalNumber) {
+    case "one":
+      return `${count} ${singular}`;
+    default:
+      return `${count} ${plural}`;
+  }
+}
diff --git a/client/src/index.css b/client/src/index.css
index 6119ad9..b56ec4d 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,68 +1,11 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@plugin "daisyui";
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+html, body, #root {
+    height: 100%;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+.container {
+    @apply py-8 px-4;
 }
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 4f06dcb..86554be 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -5,12 +5,13 @@ import { lazy } from 'solid-js';
 import { QueryClient, QueryClientProvider } from '@tanstack/solid-query';
 import { client as apiClient } from './client/sdk.gen';
 
-import "bulma/css/bulma.min.css";
 import { SERVER_URL } from './constants';
 import Protected from './components/Protected';
 import AuthProvider from './components/AuthProvider';
 import { refreshToken, user } from './auth';
 
+import "./index.css";
+
 const wrapper = document.getElementById('root');
 
 if (!wrapper) {
diff --git a/client/src/routes/Callback.tsx b/client/src/routes/Callback.tsx
index c387875..1142aea 100644
--- a/client/src/routes/Callback.tsx
+++ b/client/src/routes/Callback.tsx
@@ -1,6 +1,7 @@
 import { useNavigate } from "@solidjs/router"
 import { onMount } from "solid-js";
 import { fetchUser, getUserManager } from "../auth";
+import Loading from "../components/loading";
 
 const Callback = () => {
   const navigate = useNavigate();
@@ -11,7 +12,7 @@ const Callback = () => {
     navigate("/admin");
   });
 
-  return <p>Signing in...</p>;
+  return <Loading loadingText="Signing in..." />;
 }
 
 export default Callback;
diff --git a/client/src/routes/Login.tsx b/client/src/routes/Login.tsx
index 41ac5e9..4bfbd77 100644
--- a/client/src/routes/Login.tsx
+++ b/client/src/routes/Login.tsx
@@ -2,13 +2,11 @@ import { login } from "../auth"
 
 const Login = () => {
   return (
-    <main>
-      <section class="section">
-        <div class="container">
-          <h1 class="title">Login</h1>
-          <button class="button is-primary" onClick={login}>Sign in with OIDC</button>
-        </div>
-      </section>
+    <main class="flex items-center justify-center h-full">
+      <div class="w-100 max-w-100 bg-base-100 shadow-sm p-8 rounded-md">
+        <h1 class="text-2xl mb-2">Login</h1>
+        <button class="btn btn-primary w-full" onClick={login}>Sign in with OIDC</button>
+      </div>
     </main>
   );
 }
diff --git a/client/src/routes/admin/episode.tsx b/client/src/routes/admin/episode.tsx
index f8c6579..7652151 100644
--- a/client/src/routes/admin/episode.tsx
+++ b/client/src/routes/admin/episode.tsx
@@ -5,7 +5,7 @@ import { A, useNavigate, useParams } from "@solidjs/router";
 import { deleteEpisodeMutation, readEpisodeOptions, readEpisodeQueryKey, readEpisodesQueryKey, updateEpisodeMutation } from "../../client/@tanstack/solid-query.gen";
 import Error from "../../components/error";
 import Loading from "../../components/loading";
-import { Save, Trash } from "lucide-solid";
+import { AlertCircle, CircleCheck, Save, Trash } from "lucide-solid";
 import { SERVER_URL } from "../../constants";
 import { PodcastEpisodePublic } from "../../client";
 import { humanFileSize } from "../../helpers";
@@ -94,78 +94,62 @@ export default function AdminEpisode() {
     <AdminLayout>
       <ErrorBoundary fallback={(err, reset) => <Error message={err} reset={reset} />}>
         <Suspense fallback={<Loading />}>
-          <section class="section">
-            <div class="container">
-              <h1 class="title">{episodeQuery.data?.name}</h1>
-              <h2 class="subtitle">{episodeQuery.data?.publish_date && (new Date(episodeQuery.data?.publish_date)).toLocaleString()}&ensp;&bull;&ensp;{episodeQuery.data?.duration && `${(episodeQuery.data.duration / 60).toFixed(0)} minutes` || "Unknown"}</h2>
-              {episodeQuery.data?.description_html && <div class="content" innerHTML={episodeQuery.data?.description_html} />}
+          <div class="container mx-auto">
+            <h1 class="text-4xl line-clamp-2 overflow-ellipsis mb-2">{episodeQuery.data?.name}</h1>
+            <p class="subtitle text-base-content/50 text-xl">{episodeQuery.data?.publish_date && (new Date(episodeQuery.data?.publish_date)).toLocaleString()}&ensp;&bull;&ensp;{episodeQuery.data?.duration && `${(episodeQuery.data.duration / 60).toFixed(0)} minutes` || "Unknown"}</p>
+            {episodeQuery.data?.description_html && <div class="mt-4 prose prose-neutral" innerHTML={episodeQuery.data?.description_html} />}
+          </div>
+          <div class="container mx-auto">
+            <h2 class="text-2xl">Update Episode</h2>
+
+            {updateEpisode.isSuccess && <div role="alert" class="alert alert-success">
+              <CircleCheck class="stroke-current h-6 w-6 shrink-0" />
+              <p>This episode has been updated successfully.</p>
+              <button class="btn btn-sm" onClick={() => updateEpisode.reset()}>Ok</button>
+            </div>}
+
+            {updateEpisode.isError && <div role="alert" class="alert alert-error">
+              <AlertCircle class="stroke-current h-6 w-6 shrink-0" />
+              <p>Something went wrong. {JSON.stringify(updateEpisode.error)}</p>
+              <button class="btn btn-sm" onClick={() => updateEpisode.reset()}>Ok</button>
+            </div>}
+
+            <fieldset class="fieldset">
+              <legend class="fieldset-legend">Name</legend>
+              <input class="input w-full" type="text" value={name()} onInput={(e) => setName(e.target.value)} />
+            </fieldset>
+
+            <fieldset class="fieldset">
+              <legend class="fieldset-legend">Description</legend>
+              <textarea class="textarea h-24 w-full" onChange={(e) => setDescription(e.target.value)}>{description()}</textarea>
+              <p class="label">The description supports <a href="https://www.markdownguide.org/cheat-sheet/" class="underline hover:no-underline">Markdown</a>. Leave this empty to unset the description.</p>
+            </fieldset>
+
+            <fieldset class="fieldset">
+              <legend class="fieldset-legend">Publish Date</legend>
+              <input class="input w-full" type="datetime-local" value={publishDate()} onInput={(e) => setPublishDate(e.target.value)} />
+            </fieldset>
+
+            <div class="flex flex-row justify-end mt-2">
+              <button class="btn btn-primary" onClick={() => saveChanges()}><Save /> Save Changes</button>
             </div>
-          </section>
-          <section class="section">
-            <div class="container">
-              <h2 class="title is-4">Update Episode</h2>
 
-              {updateEpisode.isSuccess && <div class="notification is-success">
-                <button class="delete" onClick={() => updateEpisode.reset()}></button>
-                This episode has been updated successfully.
-              </div>}
+            <h2 class="text-2xl mt-8">Additional Upload</h2>
+            <p class="mb-4">Drag extra files here</p>
+            <UploadEpisodeAdditional podcastId={params.podcastId} episodeId={params.episodeId} />
 
-              {updateEpisode.isError && <div class="notification is-danger">
-                <button class="delete" onClick={() => updateEpisode.reset()}></button>
-                Something went wrong. {JSON.stringify(updateEpisode.error)}
-              </div>}
+            <h2 class="text-2xl mb-4 mt-8">Info</h2>
+            <ul>
+              <li><b>Audio URL:</b> <A href={audioUrl()} class="text-primary underline hover:no-underline">{audioUrl()}</A></li>
+              <li><b>SHA256 Checksum:</b> <code class="overflow-x-scroll">{episodeQuery.data?.file_hash}</code></li>
+              <li><b>File Size:</b> {episodeQuery.data?.file_size ? humanFileSize(episodeQuery.data?.file_size, true) : "?"}</li>
+            </ul>
+          </div>
 
-              <div class="field">
-                <label class="label">Name</label>
-                <div class="control">
-                  <input class="input" type="text" value={name()} onInput={(e) => setName(e.target.value)} />
-                </div>
-              </div>
-
-              <div class="field">
-                <label class="label">Description</label>
-                <div class="control">
-                  <textarea class="textarea" onChange={(e) => setDescription(e.target.value)}>{description()}</textarea>
-                </div>
-                <p class="help">The description supports <a href="https://www.markdownguide.org/cheat-sheet/">Markdown</a>. Leave this empty to unset the description.</p>
-              </div>
-
-              <div class="field">
-                <label class="label">Publish Date</label>
-                <div class="control">
-                  <input class="input" type="datetime-local" value={publishDate()} onInput={(e) => setPublishDate(e.target.value)} />
-                </div>
-              </div>
-
-              <button class="button" onClick={() => saveChanges()}><Save /> Save Changes</button>
-            </div>
-          </section>
-
-          <section class="section">
-            <div class="container">
-              <h2 class="title is-4">Additional Upload</h2>
-              <p class="mb-4">Drag extra files here</p>
-              <UploadEpisodeAdditional podcastId={params.podcastId} episodeId={params.episodeId} />
-            </div>
-          </section>
-
-          <section class="section">
-            <div class="container">
-              <h2 class="title is-4">Info</h2>
-              <ul>
-                <li><b>Audio URL:</b> <A href={audioUrl()}>{audioUrl()}</A></li>
-                <li><b>SHA256 Checksum:</b> <code>{episodeQuery.data?.file_hash}</code></li>
-                <li><b>File Size:</b> {episodeQuery.data?.file_size ? humanFileSize(episodeQuery.data?.file_size, true) : "?"}</li>
-              </ul>
-            </div>
-          </section>
-
-          <section class="section">
-            <div class="container">
-              <h2 class="title is-4">Danger Zone</h2>
-              <button class="button is-danger" onClick={() => deleteAction()}><Trash /> Delete</button>
-            </div>
-          </section>
+          <div class="container mx-auto py-4! rounded-lg border-1 border-error text-error">
+            <h2 class="text-2xl mb-4">Danger Zone</h2>
+            <button class="btn btn-error" onClick={() => deleteAction()}><Trash /> Delete</button>
+          </div>
         </Suspense>
       </ErrorBoundary>
     </AdminLayout>
diff --git a/client/src/routes/admin/podcast.tsx b/client/src/routes/admin/podcast.tsx
index b397898..9d8cfa1 100644
--- a/client/src/routes/admin/podcast.tsx
+++ b/client/src/routes/admin/podcast.tsx
@@ -5,7 +5,7 @@ import { A, useNavigate, useParams } from "@solidjs/router";
 import { deletePodcastMutation, readEpisodesOptions, readPodcastOptions, readPodcastQueryKey, readPodcastsQueryKey, updatePodcastMutation } from "../../client/@tanstack/solid-query.gen";
 import Error from "../../components/error";
 import Loading from "../../components/loading";
-import { List, Pencil, RefreshCw, Save, Settings, Trash } from "lucide-solid";
+import { AlertCircle, CheckCircle, Info, List, Pencil, RefreshCw, Save, Settings, Trash } from "lucide-solid";
 import { SERVER_URL } from "../../constants";
 import Upload from "../../components/upload";
 import UploadImage from "../../components/upload-image";
@@ -83,122 +83,108 @@ export default function AdminPodcast() {
     <AdminLayout>
       <ErrorBoundary fallback={(err, reset) => <Error message={err} reset={reset} />}>
         <Suspense fallback={<Loading />}>
-          <section class="section">
-            <div class="container">
-              <div class="columns">
-                <Show when={podcastQuery.data?.image_filename}>
-                  <div class="column">
-                    <figure class="image is-128x128">
-                      <img src={new URL(`/files/${params.podcastId}/${podcastQuery.data!.image_filename}`, SERVER_URL).href} />
-                    </figure>
+          <div class="container mx-auto">
+            <div class="flex flex-row gap-4">
+              <Show when={podcastQuery.data?.image_filename}>
+                <img class="size-48 md:size-72 rounded-lg" src={new URL(`/files/${params.podcastId}/${podcastQuery.data!.image_filename}`, SERVER_URL).href} />
+              </Show>
+              <div class="grow">
+                <h1 class="text-4xl mb-2">{podcastQuery.data?.name}</h1>
+                <p>{podcastQuery.data?.description}</p>
+
+                <Show when={episodeQuery.data?.length || 0 > 0}>
+                  <div role="alert" class="alert mt-4">
+                    <Info class="h-6 w-6 shrink-0 stroke-info" />
+                    <span>Subscribe at <code>{new URL(`${params.podcastId}.xml`, SERVER_URL).href}</code></span>
                   </div>
                 </Show>
-                <div class="column is-full">
-                  <h1 class="title">{podcastQuery.data?.name}</h1>
-                  <p>{podcastQuery.data?.description}</p>
-                </div>
               </div>
+            </div>
 
-              <Show when={episodeQuery.data?.length || 0 > 0}>
-                <p><strong>Subscribe at:</strong></p>
-                <pre><code>{new URL(`${params.podcastId}.xml`, SERVER_URL).href}</code></pre>
-              </Show>
+            <div role="tablist" class="tabs tabs-box justify-center mt-4 w-full">
+              <button role="tab" class="tab" classList={{ "tab-active": tab() === 0 }} onClick={() => setTab(0)}><List class="size-5 me-2" /> Episodes</button>
+              <button role="tab" class="tab" classList={{ "tab-active": tab() === 1 }} onClick={() => setTab(1)}><Settings class="size-5 me-2" /> Settings</button>
             </div>
-          </section>
-          <section class="section py-0">
-            <div class="container">
-              <div class="tabs is-centered">
-                <ul>
-                  <li classList={{ "is-active": tab() === 0 }}><a role="button" onClick={() => setTab(0)}><List class="icon is-small" /> Episodes</a></li>
-                  <li classList={{ "is-active": tab() === 1 }}><a role="button" onClick={() => setTab(1)}><Settings class="icon is-small" /> Settings</a></li>
-                </ul>
-              </div>
-            </div>
-          </section>
+          </div>
 
           <Switch>
             <Match when={tab() === 0}>
-              <section class="section">
-                <div class="container">
-                  <Upload podcastId={params.podcastId} />
-                  <h2 class="title is-4">Published Episodes</h2>
-                  <div class="buttons">
-                    <button class="button is-primary" onClick={() => episodeQuery.refetch()}><RefreshCw /> Refresh</button>
-                  </div>
-                  <div class="table-container">
-                    <table class="table is-narrow is-fullwidth">
-                      <thead>
-                        <tr>
-                          <th>Name</th>
-                          <th>Published</th>
-                          <th>Duration</th>
-                          <th>Actions</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <For each={episodeQuery.data}>
-                          {(episode) => (
-                            <tr>
-                              <td>{episode.name}</td>
-                              <td>{episode.publish_date ? (new Date(episode.publish_date)).toLocaleString() : "?"}</td>
-                              <td>{episode.duration ? `${(episode.duration / 60).toFixed(0)}min` : "?"}</td>
-                              <td>
-                                <A href={`/admin/${params.podcastId}/${episode.id}`}><Pencil class="icon is-small" /> Edit</A>
-                              </td>
-                            </tr>
-                          )}
-                        </For>
-                      </tbody>
-                    </table>
-                  </div>
+              <div class="container mx-auto">
+                <Upload podcastId={params.podcastId} />
+                <div class="flex flex-row mb-4">
+                  <h2 class="text-2xl grow">Published Episodes</h2>
+                  <button class="btn btn-sm" onClick={() => episodeQuery.refetch()}><RefreshCw class="size-4" /> Refresh</button>
                 </div>
-              </section>
+
+                <div class="overflow-x-auto">
+                  <table class="table">
+                    <thead>
+                      <tr>
+                        <th>Name</th>
+                        <th>Published</th>
+                        <th>Duration</th>
+                        <th>Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <For each={episodeQuery.data}>
+                        {(episode) => (
+                          <tr>
+                            <td>{episode.name}</td>
+                            <td>{episode.publish_date ? (new Date(episode.publish_date)).toLocaleString() : "?"}</td>
+                            <td>{episode.duration ? `${(episode.duration / 60).toFixed(0)}min` : "?"}</td>
+                            <td>
+                              <A href={`/admin/${params.podcastId}/${episode.id}`} class="btn btn-ghost btn-xs"><Pencil class="size-4" /> Edit</A>
+                            </td>
+                          </tr>
+                        )}
+                      </For>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
             </Match>
 
             <Match when={tab() === 1}>
-              <section class="section">
-                <div class="container">
-                  {updatePodcast.isSuccess && <div class="notification is-success">
-                    <button class="delete" onClick={() => updatePodcast.reset()}></button>
-                    This episode has been updated successfully.
-                  </div>}
-
-                  {updatePodcast.isError && <div class="notification is-danger">
-                    <button class="delete" onClick={() => updatePodcast.reset()}></button>
-                    Something went wrong. {JSON.stringify(updatePodcast.error)}
-                  </div>}
-
-                  <div class="field">
-                    <label class="label">Name</label>
-                    <div class="control">
-                      <input class="input" type="text" value={name()} onInput={(e) => setName(e.target.value)} />
-                    </div>
+              <div class="container mx-auto">
+                {updatePodcast.isSuccess && <div role="alert" class="alert alert-success alert-vertical sm:alert-horizontal">
+                  <CheckCircle class="h-6 w-6 shrink-0 stroke-current" />
+                  <span>The podcast has been updated successfully.</span>
+                  <div>
+                    <button class="btn btn-sm" onClick={() => updatePodcast.reset()}>Ok</button>
                   </div>
+                </div>}
 
-                  <div class="field">
-                    <label class="label">Description</label>
-                    <div class="control">
-                      <textarea class="textarea" onInput={(e) => setDescription(e.target.value)}>{description()}</textarea>
-                    </div>
+                {updatePodcast.isError && <div role="alert" class="alert alert-error alert-vertical sm:alert-horizontal">
+                  <AlertCircle class="h-6 w-6 shrink-0 stroke-current" />
+                  <span>Something went wrong. {JSON.stringify(updatePodcast.error)}</span>
+                  <div>
+                    <button class="btn btn-sm" onClick={() => updatePodcast.reset()}>Ok</button>
                   </div>
+                </div>}
 
-                  <button class="button" onClick={() => saveChanges()}><Save /> Save Changes</button>
-                </div>
-              </section>
+                <fieldset class="fieldset">
+                  <legend class="fieldset-legend">Name</legend>
+                  <input class="input w-full" type="text" value={name()} onInput={(e) => setName(e.target.value)} />
+                </fieldset>
 
-              <section class="section">
-                <div class="container">
-                  <h2 class="title is-4">Podcast Image</h2>
-                  <UploadImage podcastId={params.podcastId} />
-                </div>
-              </section>
+                <fieldset class="fieldset">
+                  <legend class="fieldset-legend">Description</legend>
+                  <textarea class="textarea h-24 w-full" onInput={(e) => setDescription(e.target.value)}>{description()}</textarea>
+                </fieldset>
 
-              <section class="section">
-                <div class="container">
-                  <h2 class="title is-4">Danger Zone</h2>
-                  <button class="button is-danger" onClick={() => deleteAction()}><Trash /> Delete</button>
+                <div class="flex flex-row justify-end mt-2">
+                  <button class="btn btn-primary" onClick={() => saveChanges()}><Save /> Save Changes</button>
                 </div>
-              </section>
+
+                <h2 class="text-2xl mb-4 mt-8">Podcast Image</h2>
+                <UploadImage podcastId={params.podcastId} />
+
+              </div>
+              <div class="container mx-auto py-4! rounded-lg border-1 border-error text-error">
+                <h2 class="text-2xl mb-4">Danger Zone</h2>
+                <button class="btn btn-error" onClick={() => deleteAction()}><Trash /> Delete</button>
+              </div>
             </Match>
           </Switch>
         </Suspense>
diff --git a/client/src/routes/admin/podcasts.tsx b/client/src/routes/admin/podcasts.tsx
index 95c045d..a9afa7a 100644
--- a/client/src/routes/admin/podcasts.tsx
+++ b/client/src/routes/admin/podcasts.tsx
@@ -8,6 +8,7 @@ import Error from "../../components/error";
 import { SERVER_URL } from "../../constants";
 import { Eye, Plus } from "lucide-solid";
 import { PodcastPublic } from "../../client";
+import { pluralize } from "../../helpers";
 
 export default function AdminPodcasts() {
   const queryClient = useQueryClient();
@@ -40,39 +41,37 @@ export default function AdminPodcasts() {
     <AdminLayout>
       <ErrorBoundary fallback={(err, reset) => <Error message={err} reset={reset} />}>
         <Suspense fallback={<Loading />}>
-          <section class="section">
-            <div class="container">
-              <h1 class="title">Podcasts</h1>
-              <div class="mb-4">
-                <button class="button" onClick={() => createAction()}>
-                  <Plus />
-                  Create
-                </button>
-              </div>
+          <div class="container mx-auto">
+            <div class="flex flex-row mb-4">
+              <h1 class="text-2xl grow">Podcasts</h1>
+              <button class="btn btn-sm" onClick={() => createAction()}>
+                <Plus />
+                New
+              </button>
+            </div>
+
+            <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
               <For each={query.data}>
                 {(podcast) => (
-                  <div class="card">
-                    <div class="card-content">
-                      <div class="columns">
-                        <Show when={podcast.image_filename}>
-                          <div class="column">
-                            <figure class="image is-64x64">
-                              <img src={new URL("/files/" + podcast.id + "/" + podcast.image_filename, SERVER_URL).href} />
-                            </figure>
-                          </div>
-                        </Show>
-                        <div class="column is-full">
-                          <h5 class="title is-4">{podcast.name}</h5>
-                          <p class="mb-4">{podcast.description}</p>
-                          <A href={`/admin/${podcast.id}`} class="button"><Eye /> View</A>
-                        </div>
+                  <div class="card bg-base-100 shadow-sm">
+                    <Show when={podcast.image_filename}>
+                      <figure>
+                        <img src={new URL("/files/" + podcast.id + "/" + podcast.image_filename, SERVER_URL).href} />
+                      </figure>
+                    </Show>
+                    <div class="card-body">
+                      <h2 class="card-title mb-0">{podcast.name}</h2>
+                      <p class="text-base-content/50">{pluralize(podcast.episode_count, "episode", "episodes")}</p>
+                      <p>{podcast.description}</p>
+                      <div class="card-actions justify-end mt-2">
+                        <A class="btn btn-primary" href={`/admin/${podcast.id}`}><Eye /> View</A>
                       </div>
                     </div>
                   </div>
                 )}
               </For>
             </div>
-          </section>
+          </div>
         </Suspense>
       </ErrorBoundary>
     </AdminLayout>
diff --git a/client/src/routes/podcast.tsx b/client/src/routes/podcast.tsx
index 5afc28e..ac9d1a2 100644
--- a/client/src/routes/podcast.tsx
+++ b/client/src/routes/podcast.tsx
@@ -1,11 +1,15 @@
 import { useParams } from "@solidjs/router";
 import { createQuery } from "@tanstack/solid-query";
 import { readPodcastOptions, readEpisodesOptions } from "../client/@tanstack/solid-query.gen";
-import { ErrorBoundary, For, Show, Suspense } from "solid-js";
+import { createEffect, ErrorBoundary, For, Show, Suspense } from "solid-js";
 import Error from "../components/error";
 import Loading from "../components/loading";
 import { DownloadIcon, MusicIcon } from "lucide-solid";
 import { SERVER_URL } from "../constants";
+import { Vibrant, WorkerPipeline } from "node-vibrant/worker";
+import PipelineWorker from "node-vibrant/worker.worker?worker";
+
+Vibrant.use(new WorkerPipeline(PipelineWorker as never));
 
 export default function Podcast() {
   const params = useParams();
@@ -23,61 +27,73 @@ export default function Podcast() {
         podcast_id: params.podcastId,
       }
     })
-  }))
+  }));
+
+  createEffect(async () => {
+    if (!podcastQuery.data?.image_filename) {
+      return;
+    }
+
+    const imageUrl = new URL(`/files/${params.podcastId}/${podcastQuery.data.image_filename}`, SERVER_URL).href;
+    const palette = await Vibrant.from(imageUrl).getPalette();
+
+    console.log(palette);
+
+    const swatch = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? palette.DarkVibrant : palette.Vibrant;
+
+    if (swatch) {
+      document.documentElement.style.setProperty("--color-primary", swatch.hex);
+      document.documentElement.style.setProperty("--color-primary-content", swatch.bodyTextColor)
+    }
+  });
 
   return (
     <main>
       <ErrorBoundary fallback={(err, reset) => <Error message={err} reset={reset} />}>
         <Suspense fallback={<Loading />}>
-          <section class="hero is-medium is-primary">
-            <div class="hero-body">
-              <div class="columns">
+          <div class="bg-primary transition-colors">
+            <div class="container mx-auto py-12!">
+              <div class="flex flex-row gap-8">
                 <Show when={podcastQuery.data?.image_filename}>
-                  <div class="column">
-                    <figure class="image is-128x128">
-                      <img src={new URL(`/files/${params.podcastId}/${podcastQuery.data!.image_filename}`, SERVER_URL).href} />
-                    </figure>
-                  </div>
+                  <img class="size-64 md:size-72 rounded-2xl" src={new URL(`/files/${params.podcastId}/${podcastQuery.data!.image_filename}`, SERVER_URL).href} />
                 </Show>
-                <div class="column is-full">
-                  <h1 class="title">{podcastQuery.data?.name}</h1>
-                  <p class="subtitle">{podcastQuery.data?.description}</p>
+                <div>
+                  <h1 class="text-4xl text-primary-content font-semibold transition-colors">{podcastQuery.data?.name}</h1>
+                  <p class="text-lg text-primary-content mt-2 transition-colors">{podcastQuery.data?.description}</p>
                 </div>
               </div>
             </div>
-          </section>
-          <section class="section">
-            <div class="container is-max-desktop">
-              <For each={episodeQuery.data}>
-                {(episode) => (
-                  <article class="media">
-                    <figure class="media-left">
-                      <p class="image is-64x64 has-background-primary is-flex is-align-content-center">
-                        <MusicIcon class="p-4 has-text-dark" />
-                      </p>
-                    </figure>
-                    <div class="media-content">
-                      <div class="content">
-                        <p class="title is-5">{episode.name}</p>
-                        <Show when={episode.publish_date}>
-                          <p class="subtitle is-6">{new Date(episode.publish_date!).toLocaleDateString()}</p>
-                        </Show>
-                        <figure class="m-0 mb-4">
-                          <audio controls src={new URL(`/files/${episode.podcast_id}/${episode.id}.m4a`, SERVER_URL).toString()}></audio>
-                        </figure>
-                        <Show when={episode.description_html}>
-                          <p innerHTML={episode.description_html!}></p>
-                        </Show>
+          </div>
+
+          <div class="container mx-auto">
+            <For each={episodeQuery.data}>
+              {(episode) => (
+                <div class="bg-base-200 flex flex-row p-4 gap-4 mb-16 rounded-lg">
+                  <div>
+                    <div class="bg-primary p-4 rounded-lg transition-colors">
+                      <MusicIcon class="stroke-primary-content size-8 transition-colors" />
+                    </div>
+                  </div>
+
+                  <div class="grow">
+                    <div class="flex flex-row mb-4">
+                      <div class="grow">
+                        <h4 class="text-xl line-clamp-2 overflow-ellipsis mb-1">{episode.name}</h4>
+                        <p class="text-base-content/50">{new Date(episode.publish_date!).toLocaleDateString()}</p>
                       </div>
+                      <a class="bg-primary mb-auto rounded-full p-3 text-primary-content hover:text-primary hover:bg-primary/20 transition-colors" href={new URL(`/files/${episode.podcast_id}/${episode.id}.m4a`, SERVER_URL).toString()}><DownloadIcon /></a>
                     </div>
-                    <div class="media-right">
-                      <a href={new URL(`/files/${episode.podcast_id}/${episode.id}.m4a`, SERVER_URL).toString()}><DownloadIcon /></a>
-                    </div>
-                  </article>
-                )}
-              </For>
-            </div>
-          </section>
+                    <figure class="m-0 mb-4">
+                      <audio controls src={new URL(`/files/${episode.podcast_id}/${episode.id}.m4a`, SERVER_URL).toString()} class="w-full"></audio>
+                    </figure>
+                    <Show when={episode.description_html}>
+                      <p innerHTML={episode.description_html!}></p>
+                    </Show>
+                  </div>
+                </div>
+              )}
+            </For>
+          </div>
         </Suspense>
       </ErrorBoundary>
     </main>
diff --git a/client/vite.config.ts b/client/vite.config.ts
index a92bb6e..32aadf8 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -1,8 +1,9 @@
 import { defineConfig } from 'vite'
 import solid from 'vite-plugin-solid'
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
-  plugins: [solid()],
+  plugins: [tailwindcss(), solid()],
   build: {
     assetsDir: "static",
   }
diff --git a/src/main.py b/src/main.py
index 9c65d18..65de47d 100644
--- a/src/main.py
+++ b/src/main.py
@@ -487,7 +487,10 @@ def get_episode_or_cover(session: SessionDep, podcast_id: str, filename: str):
     elif (
         filename.endswith(".jpg") or filename.endswith(".png")
     ) and filename == podcast.image_filename:
-        return FileResponse(settings.directory / podcast.image_filename)
+        return FileResponse(
+            settings.directory / podcast.image_filename,
+            headers={"Access-Control-Allow-Origin": "*"},
+        )
 
     raise HTTPException(status_code=404, detail="File not found")
 
diff --git a/src/models.py b/src/models.py
index a8d191f..9e7f30d 100644
--- a/src/models.py
+++ b/src/models.py
@@ -24,10 +24,16 @@ class Podcast(PodcastBase, table=True):
     )
     image_filename: Optional[str] = Field(default=None)
 
+    @computed_field
+    @property
+    def episode_count(self) -> int:
+        return len(self.episodes)
+
 
 class PodcastPublic(PodcastBase):
     id: str
     image_filename: Optional[str] = Field(default=None)
+    episode_count: int
 
 
 class PodcastCreate(PodcastBase):