diff --git a/package-lock.json b/package-lock.json
index 02ade4d..c6924d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1610,10 +1610,10 @@
       "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
       "license": "MIT"
     },
-    "node_modules/@fontsource-variable/noto-sans": {
+    "node_modules/@fontsource-variable/inter": {
       "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans/-/noto-sans-5.3.0.tgz",
-      "integrity": "sha512-e3ZuxzY9AL2psXPZlhwhnYrHUHv6PMoyK9MQ7croF0CUgURLqu9EMjW7q2FgVLwij1tjLsIHQrnwQ8aUcg4BiA==",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.3.0.tgz",
+      "integrity": "sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
@@ -12361,9 +12361,9 @@
       "license": "ISC"
     },
     "node_modules/shadcn": {
-      "version": "4.17.0",
-      "resolved": "https://registry.npmjs.org/shadcn/-/shadcn-4.17.0.tgz",
-      "integrity": "sha512-kphndh72CD7mxLQ/thkbPVgfXpIjzPUllzvTWRJmU3sNGZc/WbOqzJ0FXbBGj6sqNiaGPiOLDQByy8FAtCuVUQ==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/shadcn/-/shadcn-4.18.0.tgz",
+      "integrity": "sha512-tUFZgkYmfVNQVm3xX7lhSzOvDsp+O14ac5dwgXIr5mIsr79ISueb/Mu+ZtWMz0DH6v77u4eYyvbQ9TTMpSn3aw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -14525,7 +14525,7 @@
       "name": "@react-starter/web",
       "version": "1.8.0-alpha.1",
       "dependencies": {
-        "@fontsource-variable/noto-sans": "5.3.0",
+        "@fontsource-variable/inter": "5.3.0",
         "@fortawesome/fontawesome-svg-core": "7.3.1",
         "@fortawesome/free-regular-svg-icons": "7.3.1",
         "@fortawesome/free-solid-svg-icons": "7.3.1",
@@ -14537,6 +14537,7 @@
         "@tanstack/react-query-devtools": "5.101.4",
         "@tanstack/react-table": "8.21.3",
         "axios": "1.19.0",
+        "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
         "dayjs": "1.11.21",
         "i18next": "26.3.6",
@@ -14572,7 +14573,7 @@
         "@vitest/ui": "4.1.10",
         "jsdom": "29.1.1",
         "msw": "2.15.0",
-        "shadcn": "4.17.0",
+        "shadcn": "4.18.0",
         "storybook": "10.5.7",
         "vite": "8.2.1"
       }
diff --git a/packages/web/components.json b/packages/web/components.json
index 7fc02f6..36d4657 100644
--- a/packages/web/components.json
+++ b/packages/web/components.json
@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "",
     "css": "src/index.css",
-    "baseColor": "neutral",
+    "baseColor": "mist",
     "cssVariables": true,
     "prefix": ""
   },
diff --git a/packages/web/package.json b/packages/web/package.json
index ea42066..59cc91e 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -15,7 +15,7 @@
     "test:coverage": "vitest run --coverage --silent passed-only"
   },
   "dependencies": {
-    "@fontsource-variable/noto-sans": "5.3.0",
+    "@fontsource-variable/inter": "5.3.0",
     "@fortawesome/fontawesome-svg-core": "7.3.1",
     "@fortawesome/free-regular-svg-icons": "7.3.1",
     "@fortawesome/free-solid-svg-icons": "7.3.1",
@@ -27,6 +27,7 @@
     "@tanstack/react-query-devtools": "5.101.4",
     "@tanstack/react-table": "8.21.3",
     "axios": "1.19.0",
+    "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "dayjs": "1.11.21",
     "i18next": "26.3.6",
@@ -62,7 +63,7 @@
     "@vitest/ui": "4.1.10",
     "jsdom": "29.1.1",
     "msw": "2.15.0",
-    "shadcn": "4.17.0",
+    "shadcn": "4.18.0",
     "storybook": "10.5.7",
     "vite": "8.2.1"
   }
diff --git a/packages/web/src/common/components/Button/ThemeToggle.tsx b/packages/web/src/common/components/Button/ThemeToggle.tsx
index 5687163..3b54259 100644
--- a/packages/web/src/common/components/Button/ThemeToggle.tsx
+++ b/packages/web/src/common/components/Button/ThemeToggle.tsx
@@ -1,7 +1,6 @@
 import { PropsWithClassName } from '@/common/utils/types';
 import { useSetSettings } from '@/common/api/useSetSettings';
 import { useSettings } from '@/common/hooks/useSettings';
-import { cn } from '@/common/utils/css';
 import Button from './Button';
 import FAIcon from '@/common/components/Icon/FAIcon';
 
@@ -20,7 +19,7 @@ const ThemeToggle = ({ className }: PropsWithClassName) => {
         <Button
           variant="text"
           size="icon"
-          className={cn('text-primary', className)}
+          className={className}
           title="Dark Mode"
           onClick={() => setSettings({ theme: 'dark' })}
           testId="button-theme-dark"
@@ -31,7 +30,7 @@ const ThemeToggle = ({ className }: PropsWithClassName) => {
         <Button
           variant="text"
           size="icon"
-          className={cn('text-primary', className)}
+          className={className}
           title="Light Mode"
           onClick={() => setSettings({ theme: 'light' })}
           testId="button-theme-light"
diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index 9a129a1..3ba0f5f 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -1,25 +1,25 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 @import 'shadcn/tailwind.css';
-@import '@fontsource-variable/noto-sans';
+@import '@fontsource-variable/inter';
 
 @custom-variant dark (&:is(.dark *));
 
 :root {
   --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --foreground: oklch(0.148 0.004 228.8);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.148 0.004 228.8);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.148 0.004 228.8);
+  --primary: oklch(0.488 0.243 264.376);
+  --primary-foreground: oklch(0.97 0.014 254.604);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.963 0.002 197.1);
+  --muted-foreground: oklch(0.56 0.021 213.5);
+  --accent: oklch(0.963 0.002 197.1);
+  --accent-foreground: oklch(0.218 0.008 223.9);
   --destructive: oklch(0.577 0.245 27.325);
   --info: oklch(0.922 0 0 / 90%);
   --info-foreground: oklch(0.205 0 0);
@@ -27,40 +27,40 @@
   --success-foreground: oklch(1 0 0);
   --warning: oklch(0.666 0.179 58.318);
   --warning-foreground: oklch(0.205 0 0);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.809 0.105 251.813);
-  --chart-2: oklch(0.623 0.214 259.815);
-  --chart-3: oklch(0.546 0.245 262.881);
-  --chart-4: oklch(0.488 0.243 264.376);
-  --chart-5: oklch(0.424 0.199 265.638);
+  --border: oklch(0.925 0.005 214.3);
+  --input: oklch(0.925 0.005 214.3);
+  --ring: oklch(0.723 0.014 214.4);
+  --chart-1: oklch(0.879 0.169 91.605);
+  --chart-2: oklch(0.769 0.188 70.08);
+  --chart-3: oklch(0.666 0.179 58.318);
+  --chart-4: oklch(0.555 0.163 48.998);
+  --chart-5: oklch(0.473 0.137 46.201);
   --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar: oklch(0.987 0.002 197.1);
+  --sidebar-foreground: oklch(0.148 0.004 228.8);
+  --sidebar-primary: oklch(0.546 0.245 262.881);
+  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --sidebar-accent: oklch(0.963 0.002 197.1);
+  --sidebar-accent-foreground: oklch(0.218 0.008 223.9);
+  --sidebar-border: oklch(0.925 0.005 214.3);
+  --sidebar-ring: oklch(0.723 0.014 214.4);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
+  --background: oklch(0.148 0.004 228.8);
+  --foreground: oklch(0.987 0.002 197.1);
+  --card: oklch(0.218 0.008 223.9);
+  --card-foreground: oklch(0.987 0.002 197.1);
+  --popover: oklch(0.218 0.008 223.9);
+  --popover-foreground: oklch(0.987 0.002 197.1);
+  --primary: oklch(0.424 0.199 265.638);
+  --primary-foreground: oklch(0.97 0.014 254.604);
+  --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.275 0.011 216.9);
+  --muted-foreground: oklch(0.723 0.014 214.4);
+  --accent: oklch(0.275 0.011 216.9);
+  --accent-foreground: oklch(0.987 0.002 197.1);
   --destructive: oklch(0.704 0.191 22.216);
   --info: oklch(0.922 0 0 / 90%);
   --info-foreground: oklch(0.205 0 0);
@@ -70,24 +70,24 @@
   --warning-foreground: oklch(0.205 0 0);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.809 0.105 251.813);
-  --chart-2: oklch(0.623 0.214 259.815);
-  --chart-3: oklch(0.546 0.245 262.881);
-  --chart-4: oklch(0.488 0.243 264.376);
-  --chart-5: oklch(0.424 0.199 265.638);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.56 0.021 213.5);
+  --chart-1: oklch(0.879 0.169 91.605);
+  --chart-2: oklch(0.769 0.188 70.08);
+  --chart-3: oklch(0.666 0.179 58.318);
+  --chart-4: oklch(0.555 0.163 48.998);
+  --chart-5: oklch(0.473 0.137 46.201);
+  --sidebar: oklch(0.218 0.008 223.9);
+  --sidebar-foreground: oklch(0.987 0.002 197.1);
+  --sidebar-primary: oklch(0.623 0.214 259.815);
+  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --sidebar-accent: oklch(0.275 0.011 216.9);
+  --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar-ring: oklch(0.56 0.021 213.5);
 }
 
 @theme inline {
-  --font-sans: 'Noto Sans Variable', sans-serif;
+  --font-sans: 'Inter Variable', sans-serif;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -132,6 +132,7 @@
   --radius-2xl: calc(var(--radius) * 1.8);
   --radius-3xl: calc(var(--radius) * 2.2);
   --radius-4xl: calc(var(--radius) * 2.6);
+  --font-heading: var(--font-sans);
 }
 
 @layer base {