diff --git a/web/package-lock.json b/web/package-lock.json
index 76278058f1..12d65473c9 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@formatjs/icu-messageformat-parser": "^2.9.8",
         "@immich/sdk": "file:../open-api/typescript-sdk",
-        "@immich/ui": "^0.20.0",
+        "@immich/ui": "^0.21.1",
         "@mapbox/mapbox-gl-rtl-text": "0.2.3",
         "@mdi/js": "^7.4.47",
         "@photo-sphere-viewer/core": "^5.11.5",
@@ -1337,9 +1337,9 @@
       "link": true
     },
     "node_modules/@immich/ui": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.20.0.tgz",
-      "integrity": "sha512-euK3N0AhQLB28qFteorRKyDUdet3UpA9MEAd8eBLbTtTFZKvZismBGa4J7pHbQrSkuOlbmJD5LJuM575q8zigQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.21.1.tgz",
+      "integrity": "sha512-ofDbLMYgM3Bnrv1nCbyPV5Gw9PdWvyhTAJPtojw4C3r2m7CbRW1kJDHt5M79n6xAVgjMOFyre1lOE5cwSSvRQA==",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@mdi/js": "^7.4.47",
diff --git a/web/package.json b/web/package.json
index 8a9f6472b6..7bf5e36189 100644
--- a/web/package.json
+++ b/web/package.json
@@ -27,7 +27,7 @@
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.20.0",
+    "@immich/ui": "^0.21.1",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",
diff --git a/web/src/app.css b/web/src/app.css
index 211d34bb6c..1693aacab8 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -21,34 +21,6 @@
     --immich-dark-success: 56 142 60;
     --immich-dark-warning: 245 124 0;
   }
-
-  :root {
-    /* light */
-    --immich-ui-primary: 66 80 175;
-    --immich-ui-dark: 58 58 58;
-    --immich-ui-light: 255 255 255;
-    --immich-ui-success: 16 188 99;
-    --immich-ui-danger: 200 60 60;
-    --immich-ui-warning: 216 143 64;
-    --immich-ui-info: 8 111 230;
-    --immich-ui-gray: 246 246 246;
-
-    --immich-ui-default-border: 209 213 219;
-  }
-
-  .dark {
-    /* dark */
-    --immich-ui-primary: 172 203 250;
-    --immich-ui-light: 0 0 0;
-    --immich-ui-dark: 229 231 235;
-    --immich-ui-danger: 246 125 125;
-    --immich-ui-success: 72 237 152;
-    --immich-ui-warning: 254 197 132;
-    --immich-ui-info: 121 183 254;
-    --immich-ui-gray: 33 33 33;
-
-    --immich-ui-default-border: 55 65 81;
-  }
 }
 
 @font-face {
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 3a6320a265..fe0c680ec3 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -16,6 +16,7 @@
   import { copyToClipboard } from '$lib/utils';
   import { isAssetViewerRoute } from '$lib/utils/navigation';
   import { setTranslations } from '@immich/ui';
+  import '@immich/ui/theme/default.css';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import { run } from 'svelte/legacy';
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 2e13e5997d..ae241a44bb 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,5 +1,8 @@
+import { tailwindConfig } from '@immich/ui/theme/default.js';
 import plugin from 'tailwindcss/plugin';
 
+const { colors, borderColor } = tailwindConfig();
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
@@ -29,19 +32,9 @@ export default {
         'immich-dark-success': 'rgb(var(--immich-dark-success) / <alpha-value>)',
         'immich-dark-warning': 'rgb(var(--immich-dark-warning) / <alpha-value>)',
 
-        primary: 'rgb(var(--immich-ui-primary) / <alpha-value>)',
-        light: 'rgb(var(--immich-ui-light) / <alpha-value>)',
-        dark: 'rgb(var(--immich-ui-dark) / <alpha-value>)',
-        success: 'rgb(var(--immich-ui-success) / <alpha-value>)',
-        danger: 'rgb(var(--immich-ui-danger) / <alpha-value>)',
-        warning: 'rgb(var(--immich-ui-warning) / <alpha-value>)',
-        info: 'rgb(var(--immich-ui-info) / <alpha-value>)',
-        subtle: 'rgb(var(--immich-ui-gray) / <alpha-value>)',
+        ...colors,
       },
-      borderColor: ({ theme }) => ({
-        ...theme('colors'),
-        DEFAULT: 'rgb(var(--immich-ui-default-border) / <alpha-value>)',
-      }),
+      borderColor,
       fontFamily: {
         'immich-mono': ['Overpass Mono', 'monospace'],
       },