diff --git a/frontend/public/translations/en.json b/frontend/public/translations/en.json
index 74392e410..990c15f45 100644
--- a/frontend/public/translations/en.json
+++ b/frontend/public/translations/en.json
@@ -238,7 +238,9 @@
           "stopImpersonating": "Stop Impersonating",
           "openInVirtualWindow": "Open in Virtual Window",
           "openInPopup": "Open in Popup",
-          "openInNewTab": "Open in New Tab"
+          "openInNewTab": "Open in New Tab",
+          "switchToDark": "Switch to Dark Mode",
+          "switchToLight": "Switch to Light Mode"
         }
       },
       "permissionSelector": {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4de042aa6..aa2c1ea6e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { MantineProvider, type MantineThemeOverride, v8CssVariablesResolver } from '@mantine/core';
+import { MantineProvider, type MantineThemeOverride } from '@mantine/core';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { createBrowserHistory } from 'history';
@@ -96,12 +96,7 @@ export default function App({ theme }: { theme: MantineThemeOverride }) {
 
   return Object.keys(settings).length > 0 ? (
     <ErrorBoundary>
-      <MantineProvider
-        theme={theme}
-        forceColorScheme='dark'
-        cssVariablesResolver={v8CssVariablesResolver}
-        deduplicateInlineStyles
-      >
+      <MantineProvider theme={theme} defaultColorScheme='dark' deduplicateInlineStyles>
         <QueryClientProvider client={queryClient}>
           <TranslationProvider>
             <ToastProvider>
diff --git a/frontend/src/app.css b/frontend/src/app.css
index f747a1c87..f14daf883 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,4 +1,8 @@
 @import "tailwindcss";
+@import "highlight.js/styles/a11y-light.min.css";
+
+@custom-variant dark (&:where([data-mantine-color-scheme="dark"], [data-mantine-color-scheme="dark"] *));
+@custom-variant light (&:where([data-mantine-color-scheme="light"], [data-mantine-color-scheme="light"] *));
 
 @font-face {
   font-family: "Helvetica";
@@ -40,8 +44,14 @@
   }
 }
 
+:root[data-mantine-color-scheme="light"] {
+  --mantine-color-body: #f0eff0;
+}
+
 body {
-  @apply font-sans bg-neutral-850 text-neutral-200;
+  @apply font-sans;
+  background-color: var(--mantine-color-body);
+  color: var(--mantine-color-text);
 }
 
 h1,
@@ -54,7 +64,8 @@ h6 {
 }
 
 p {
-  @apply text-neutral-200 leading-snug font-sans;
+  @apply leading-snug font-sans;
+  color: var(--mantine-color-text);
 }
 
 form {
@@ -73,3 +84,50 @@ button:focus-visible {
 strong {
   @apply font-semibold;
 }
+
+[data-mantine-color-scheme="dark"] {
+  .hljs {
+    background: #2b2b2b;
+    color: #f8f8f2;
+  }
+  .hljs-comment,
+  .hljs-quote {
+    color: #d4d0ab;
+  }
+  .hljs-deletion,
+  .hljs-name,
+  .hljs-regexp,
+  .hljs-selector-class,
+  .hljs-selector-id,
+  .hljs-tag,
+  .hljs-template-variable,
+  .hljs-variable {
+    color: #ffa07a;
+  }
+  .hljs-built_in,
+  .hljs-link,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-params,
+  .hljs-type {
+    color: #f5ab35;
+  }
+  .hljs-attribute {
+    color: gold;
+  }
+  .hljs-addition,
+  .hljs-bullet,
+  .hljs-string,
+  .hljs-symbol {
+    color: #abe338;
+  }
+  .hljs-section,
+  .hljs-title {
+    color: #00e0e0;
+  }
+  .hljs-keyword,
+  .hljs-selector-tag {
+    color: #dcc6e0;
+  }
+}
diff --git a/frontend/src/elements/Button.tsx b/frontend/src/elements/Button.tsx
index 842b17408..fdae4e38a 100644
--- a/frontend/src/elements/Button.tsx
+++ b/frontend/src/elements/Button.tsx
@@ -22,7 +22,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         style={{
           cursor: loading ? 'wait' : undefined,
           fontWeight: 'normal',
-          border: disabled ? '1px solid var(--mantine-color-dark-4)' : undefined,
+          border: disabled ? '1px solid var(--mantine-color-default-border)' : undefined,
           color: disabled ? 'var(--mantine-color-dimmed)' : undefined,
           ...rest.style,
         }}
diff --git a/frontend/src/elements/Card.tsx b/frontend/src/elements/Card.tsx
index b8af51848..08104ef4c 100644
--- a/frontend/src/elements/Card.tsx
+++ b/frontend/src/elements/Card.tsx
@@ -16,7 +16,7 @@ const Card = forwardRef<HTMLDivElement, CardProps & ComponentProps<'div'>>(
         className={classNames(
           'relative',
           className,
-          hoverable && 'transition-all! duration-190 hover:border-white/25! cursor-pointer',
+          hoverable && 'transition-all! duration-190 hover:border-(--mantine-color-default-border)/20! cursor-pointer',
         )}
         pl={typeof pl === 'number' && leftStripeClassName ? pl + 4 : leftStripeClassName ? 20 : pl}
         radius='md'
diff --git a/frontend/src/elements/CollapsibleSection.tsx b/frontend/src/elements/CollapsibleSection.tsx
index dbf056875..d45e4efd2 100644
--- a/frontend/src/elements/CollapsibleSection.tsx
+++ b/frontend/src/elements/CollapsibleSection.tsx
@@ -17,8 +17,8 @@ function CollapsibleSection({ icon, title, className, enabled, onToggle, childre
     <Box
       className={className}
       style={{
-        background: enabled ? 'var(--mantine-color-dark-6)' : 'transparent',
-        border: `1px solid ${enabled ? 'var(--mantine-color-dark-4)' : 'var(--mantine-color-dark-5)'}`,
+        background: enabled ? 'var(--mantine-color-default)' : 'transparent',
+        border: `1px solid var(--mantine-color-default-border)`,
         borderRadius: 8,
         overflow: 'hidden',
         transition: 'all 0.15s ease',
@@ -42,14 +42,14 @@ function CollapsibleSection({ icon, title, className, enabled, onToggle, childre
             alignItems: 'center',
             justifyContent: 'center',
             borderRadius: 6,
-            background: enabled ? 'var(--mantine-color-blue-9)' : 'var(--mantine-color-dark-5)',
+            background: enabled ? 'var(--mantine-color-blue-9)' : 'var(--mantine-color-default-hover)',
             color: enabled ? 'var(--mantine-color-blue-2)' : 'var(--mantine-color-gray-5)',
             transition: 'background 0.15s ease',
           }}
         >
           {icon}
         </Box>
-        <Text size='sm' fw={500} c={enabled ? 'gray.2' : 'gray.5'} style={{ flex: 1, textAlign: 'left' }}>
+        <Text size='sm' fw={500} c={enabled ? undefined : 'dimmed'} style={{ flex: 1, textAlign: 'left' }}>
           {title}
         </Text>
         <FontAwesomeIcon
diff --git a/frontend/src/elements/ErrorBoundary.tsx b/frontend/src/elements/ErrorBoundary.tsx
index c7c653871..571669e8e 100644
--- a/frontend/src/elements/ErrorBoundary.tsx
+++ b/frontend/src/elements/ErrorBoundary.tsx
@@ -62,17 +62,17 @@ class ErrorBoundary extends Component<Props, State> {
             <div className='flex justify-center mb-4'>
               <button
                 onClick={() => window.location.reload()}
-                className='px-4 py-2 text-sm font-medium rounded-md bg-neutral-700 hover:bg-neutral-600 text-neutral-100 transition-colors'
+                className='px-4 py-2 text-sm font-medium rounded-md bg-(--mantine-color-default) hover:bg-(--mantine-color-default-hover) border border-(--mantine-color-default-border) transition-colors'
               >
                 Refresh page
               </button>
             </div>
 
             {error && appDebug && (
-              <div className='mt-2 border bg-neutral-800 border-neutral-700/60 rounded-lg overflow-hidden'>
+              <div className='mt-2 border bg-(--mantine-color-default) border-(--mantine-color-default-border) rounded-lg overflow-hidden'>
                 <button
                   onClick={this.toggleDetails}
-                  className='w-full flex items-center justify-between px-4 py-3 text-xs text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800/50 transition-colors'
+                  className='w-full flex items-center justify-between px-4 py-3 text-xs text-(--mantine-color-dimmed) hover:bg-(--mantine-color-default-hover) transition-colors'
                 >
                   <span className='font-medium tracking-wide uppercase'>
                     {showDetails
@@ -88,7 +88,7 @@ class ErrorBoundary extends Component<Props, State> {
                       <p className='text-xs font-semibold text-red-400 mb-1'>
                         {this.context?.t('elements.errorBoundary.errorMessage', {}) || 'Error Message:'}
                       </p>
-                      <pre className='text-xs text-neutral-300 whitespace-pre-wrap wrap-break-word bg-neutral-950 p-2 rounded'>
+                      <pre className='text-xs whitespace-pre-wrap wrap-break-word bg-(--mantine-color-default-hover) p-2 rounded'>
                         {error.message || this.context?.t('common.na', {}) || 'N/A'}
                       </pre>
                     </div>
@@ -98,7 +98,7 @@ class ErrorBoundary extends Component<Props, State> {
                         <p className='text-xs font-semibold text-red-400 mb-1'>
                           {this.context?.t('elements.errorBoundary.stackTrace', {}) || 'Stack Trace:'}
                         </p>
-                        <pre className='text-xs text-neutral-300 whitespace-pre-wrap wrap-break-word bg-neutral-950 p-2 rounded overflow-x-auto'>
+                        <pre className='text-xs whitespace-pre-wrap wrap-break-word bg-(--mantine-color-default-hover) p-2 rounded overflow-x-auto'>
                           {error.stack}
                         </pre>
                       </div>
@@ -109,7 +109,7 @@ class ErrorBoundary extends Component<Props, State> {
                         <p className='text-xs font-semibold text-red-400 mb-1'>
                           {this.context?.t('elements.errorBoundary.componentStack', {}) || 'Component Stack:'}
                         </p>
-                        <pre className='text-xs text-neutral-300 whitespace-pre-wrap wrap-break-word bg-neutral-950 p-2 rounded overflow-x-auto'>
+                        <pre className='text-xs whitespace-pre-wrap wrap-break-word bg-(--mantine-color-default-hover) p-2 rounded overflow-x-auto'>
                           {errorInfo.componentStack}
                         </pre>
                       </div>
diff --git a/frontend/src/elements/HljsCode.tsx b/frontend/src/elements/HljsCode.tsx
index dfcf7cc14..3b186e5d3 100644
--- a/frontend/src/elements/HljsCode.tsx
+++ b/frontend/src/elements/HljsCode.tsx
@@ -1,7 +1,6 @@
+import { LanguageFn } from 'highlight.js';
 import hljs from 'highlight.js/lib/core';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
-import 'highlight.js/styles/a11y-dark.min.css';
-import { LanguageFn } from 'highlight.js';
 import Spinner from '@/elements/Spinner.tsx';
 import Code from './Code.tsx';
 
diff --git a/frontend/src/elements/KbdKey.tsx b/frontend/src/elements/KbdKey.tsx
index 81ee68647..934132642 100644
--- a/frontend/src/elements/KbdKey.tsx
+++ b/frontend/src/elements/KbdKey.tsx
@@ -13,7 +13,7 @@ function KbdKey({ children, className, icon }: KbdKeyProps) {
   return (
     <div
       className={classNames(
-        'inline-flex items-center justify-center w-11 h-8 bg-linear-to-b from-(--mantine-color-dark-5) to-(--mantine-color-dark-6) border border-(--mantine-color-dark-4) rounded-md shadow-[0_2px_0_var(--mantine-color-dark-7),inset_0_1px_0_rgba(255,255,255,0.05)] text-xs font-semibold font-sans text-(--mantine-color-gray-3) uppercase tracking-[0.02em]',
+        'inline-flex items-center justify-center w-11 h-8 bg-linear-to-b from-(--mantine-color-default-hover) to-(--mantine-color-default) border border-(--mantine-color-default-border) rounded-md shadow-[0_2px_0_var(--mantine-color-default-border),inset_0_1px_0_rgba(255,255,255,0.05)] text-xs font-semibold font-sans text-(--mantine-color-text) uppercase tracking-[0.02em]',
         className,
       )}
     >
diff --git a/frontend/src/elements/MonacoEditor.tsx b/frontend/src/elements/MonacoEditor.tsx
index 602003a79..05339d829 100644
--- a/frontend/src/elements/MonacoEditor.tsx
+++ b/frontend/src/elements/MonacoEditor.tsx
@@ -1,3 +1,4 @@
+import { useComputedColorScheme } from '@mantine/core';
 import { Editor, loader } from '@monaco-editor/react';
 import { ComponentProps } from 'react';
 
@@ -8,9 +9,12 @@ loader.config({
 });
 
 export default function MonacoEditor(props: ComponentProps<typeof Editor>) {
+  const computedColorScheme = useComputedColorScheme('dark');
+
   return (
     <Editor
       {...props}
+      theme={computedColorScheme === 'dark' ? 'vs-dark' : 'light'}
       onMount={(e, m) => {
         for (const handler of window.extensionContext.extensionRegistry.elements.monacoEditor.onMountHandlers) {
           handler(e, m);
diff --git a/frontend/src/elements/PermissionSelector.tsx b/frontend/src/elements/PermissionSelector.tsx
index 6342dd8cf..443b2114f 100644
--- a/frontend/src/elements/PermissionSelector.tsx
+++ b/frontend/src/elements/PermissionSelector.tsx
@@ -111,18 +111,18 @@ export default function PermissionSelector({
 
   const selectedPanel = (
     <Card>
-      <Title order={3} c='white'>
+      <Title order={3}>
         {t('elements.permissionSelector.selectedPermissions', { count: selectedPermissions.length })}
       </Title>
       <div className='max-h-96 overflow-y-auto'>
         {selectedPermissions.length === 0 ? (
-          <p className='text-gray-200 text-sm'>{t('elements.permissionSelector.noPermissions', {})}</p>
+          <p className='text-(--mantine-color-dimmed) text-sm'>{t('elements.permissionSelector.noPermissions', {})}</p>
         ) : (
           <div className='space-y-1'>
             {sortedSelectedPermissions.map((permission) => (
-              <Card key={permission} className='border border-neutral-600' padding='xs'>
+              <Card key={permission} className='border border-(--mantine-color-default-border)' padding='xs'>
                 <Group justify='space-between'>
-                  <span className='text-sm font-mono text-white'>{permission}</span>
+                  <span className='text-sm font-mono'>{permission}</span>
                   <ActionIcon color='red' onClick={() => togglePermission(permission)}>
                     <FontAwesomeIcon icon={faX} />
                   </ActionIcon>
@@ -170,7 +170,7 @@ export default function PermissionSelector({
                       />
                     )}
                     <div>
-                      <Title order={5} c='white' className='uppercase'>
+                      <Title order={5} className='uppercase'>
                         {category.replaceAll('-', ' ')}
                       </Title>
                       <p className='text-sm text-gray-200 mt-1'>{description}</p>
@@ -184,9 +184,9 @@ export default function PermissionSelector({
                     />
                     <ActionIcon variant='subtle' onClick={() => toggleCategory(category)}>
                       {isExpanded ? (
-                        <FontAwesomeIcon icon={faChevronUp} className='w-4 h-4 text-gray-200' />
+                        <FontAwesomeIcon icon={faChevronUp} className='w-4 h-4' />
                       ) : (
-                        <FontAwesomeIcon icon={faChevronDown} className='w-4 h-4 text-gray-200' />
+                        <FontAwesomeIcon icon={faChevronDown} className='w-4 h-4' />
                       )}
                     </ActionIcon>
                   </div>
diff --git a/frontend/src/elements/ScreenBlock.tsx b/frontend/src/elements/ScreenBlock.tsx
index 7297f9725..123371d7b 100644
--- a/frontend/src/elements/ScreenBlock.tsx
+++ b/frontend/src/elements/ScreenBlock.tsx
@@ -8,7 +8,7 @@ function ScreenBlock({ title, content }: { title: string; content: string }) {
       <div className='flex items-center justify-center'>
         <Card className='w-full max-w-md text-center'>
           <Title order={2}>{title}</Title>
-          <p className='text-sm text-neutral-700 mt-2'>{content}</p>
+          <p className='text-sm text-(--mantine-color-dimmed) mt-2'>{content}</p>
         </Card>
       </div>
     </>
diff --git a/frontend/src/elements/ServerStatusIndicator.tsx b/frontend/src/elements/ServerStatusIndicator.tsx
index 6b6a92947..110202744 100644
--- a/frontend/src/elements/ServerStatusIndicator.tsx
+++ b/frontend/src/elements/ServerStatusIndicator.tsx
@@ -94,15 +94,15 @@ export default function ServerStatusIndicator() {
           {socketConnected ? (
             <>
               <span className={classNames('rounded-full size-4 animate-pulse', statusToColor(state))} />
-              <span className='font-medium text-white leading-none'>{t(`common.enum.serverState.${state}`, {})}</span>
+              <span className='font-medium leading-none'>{t(`common.enum.serverState.${state}`, {})}</span>
             </>
           ) : (
             <>
               <FontAwesomeIcon
                 icon={faTowerBroadcast}
-                className={`${socketConnected ? 'animate-pulse text-green-500' : 'text-white'} w-4`}
+                className={`${socketConnected ? 'animate-pulse text-green-500' : ''} w-4`}
               />
-              <span className='font-medium text-white leading-none'>
+              <span className='font-medium leading-none'>
                 {socketConnected
                   ? t('common.enum.connectionStatus.connected', {})
                   : t('common.enum.connectionStatus.offline', {})}
diff --git a/frontend/src/elements/Sidebar.tsx b/frontend/src/elements/Sidebar.tsx
index 34000c4ca..2bae715e1 100644
--- a/frontend/src/elements/Sidebar.tsx
+++ b/frontend/src/elements/Sidebar.tsx
@@ -3,12 +3,14 @@ import {
   faBars,
   faEllipsisVertical,
   faGraduationCap,
+  faMoon,
+  faSun,
   faUserCog,
   faWindowRestore,
   IconDefinition,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Menu } from '@mantine/core';
+import { Menu, useComputedColorScheme, useMantineColorScheme } from '@mantine/core';
 import classNames from 'classnames';
 import { ReactNode, useEffect, useState } from 'react';
 import { MemoryRouter, matchPath, NavLink, useLocation, useNavigate } from 'react-router';
@@ -150,7 +152,7 @@ function Link({ to, end, icon, name, title = name, className, activeMatches }: L
               <Button
                 color={isActive ? 'blue' : 'gray'}
                 className={classNames(isActive && 'cursor-default! active', className)}
-                variant='subtle'
+                variant={isActive ? 'outline' : 'subtle'}
                 fullWidth
                 styles={{ label: { width: '100%' } }}
               >
@@ -172,15 +174,19 @@ function Footer() {
   const { t } = useTranslations();
   const { impersonating, user, doLogout } = useAuth();
   const navigate = useNavigate();
+  const { toggleColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme('dark');
 
   if (!user) {
     return null;
   }
 
+  const isDark = computedColorScheme === 'dark';
+
   return (
     <>
       <div
-        className='border border-neutral-700 rounded-lg p-2 flex flex-row justify-between items-center min-h-fit'
+        className='border border-(--mantine-color-default-border) rounded-lg p-2 flex flex-row justify-between items-center min-h-fit'
         id='sidebar-account-card'
       >
         <NavLink
@@ -196,7 +202,7 @@ function Footer() {
             alt={user.username}
             className='h-10 w-10 rounded-full select-none shrink-0'
           />
-          <span className='font-sans font-normal text-sm text-neutral-50 whitespace-nowrap leading-tight ml-3 overflow-hidden text-ellipsis'>
+          <span className='font-sans font-normal text-sm whitespace-nowrap leading-tight ml-3 overflow-hidden text-ellipsis'>
             {user.username}
           </span>
         </NavLink>
@@ -221,6 +227,10 @@ function Footer() {
               </>
             )}
             <Menu.Divider />
+            <Menu.Item leftSection={<FontAwesomeIcon icon={isDark ? faSun : faMoon} />} onClick={toggleColorScheme}>
+              {isDark ? t('elements.sidebar.button.switchToLight', {}) : t('elements.sidebar.button.switchToDark', {})}
+            </Menu.Item>
+            <Menu.Divider />
             <Menu.Item leftSection={<FontAwesomeIcon icon={faArrowRightFromBracket} />} color='red' onClick={doLogout}>
               {impersonating
                 ? t('elements.sidebar.button.stopImpersonating', {})
diff --git a/frontend/src/elements/TitleCard.tsx b/frontend/src/elements/TitleCard.tsx
index 2b9cb49ce..cb16a6848 100644
--- a/frontend/src/elements/TitleCard.tsx
+++ b/frontend/src/elements/TitleCard.tsx
@@ -28,13 +28,13 @@ function TitleCard({
   rightSection,
 }: TitleCardProps) {
   return (
-    <Card withBorder radius='md' p={0} bg='dark.7' className={className}>
+    <Card withBorder radius='md' p={0} className={className}>
       <Group
         id='title-card-header'
         className={titleClassName}
         style={{
-          borderBottom: '1px solid var(--mantine-color-dark-5)',
-          background: 'var(--mantine-color-dark-6)',
+          borderBottom: '1px solid var(--mantine-color-default-border)',
+          background: 'var(--mantine-color-default)',
         }}
         gap='sm'
         px='md'
@@ -51,12 +51,12 @@ function TitleCard({
             alignItems: 'center',
             justifyContent: 'center',
             borderRadius: 6,
-            background: 'var(--mantine-color-dark-5)',
+            background: 'var(--mantine-color-default-hover)',
           }}
         >
           {icon}
         </Box>
-        <Title order={5} c='gray.2' fw={600}>
+        <Title order={5} fw={600}>
           {title}
         </Title>
         {rightSection}
diff --git a/frontend/src/elements/containers/AccountContentContainer.tsx b/frontend/src/elements/containers/AccountContentContainer.tsx
index fdf02efea..3be51deb5 100644
--- a/frontend/src/elements/containers/AccountContentContainer.tsx
+++ b/frontend/src/elements/containers/AccountContentContainer.tsx
@@ -1,4 +1,4 @@
-import { Group, Title, TitleOrder } from '@mantine/core';
+import { Group, Text, Title, TitleOrder } from '@mantine/core';
 import { Dispatch, ReactNode, SetStateAction, useMemo } from 'react';
 import { ContainerRegistry, makeComponentHookable } from 'shared';
 import { useCurrentWindow } from '@/providers/CurrentWindowProvider.tsx';
@@ -60,10 +60,12 @@ function AccountContentContainer(props: Props) {
         {hideTitleComponent ? null : setSearch ? (
           <Group justify='space-between' mb='md'>
             <div>
-              <Title order={titleOrder} c='white'>
-                {title}
-              </Title>
-              {subtitle ? <p className='text-xs text-gray-300!'>{subtitle}</p> : null}
+              <Title order={titleOrder}>{title}</Title>
+              {subtitle ? (
+                <Text size='xs' c='dimmed'>
+                  {subtitle}
+                </Text>
+              ) : null}
             </div>
             <Group>
               <TextInput
@@ -78,19 +80,23 @@ function AccountContentContainer(props: Props) {
         ) : contentRight ? (
           <Group justify='space-between' mb='md'>
             <div>
-              <Title order={titleOrder} c='white'>
-                {title}
-              </Title>
-              {subtitle ? <p className='text-xs text-gray-300!'>{subtitle}</p> : null}
+              <Title order={titleOrder}>{title}</Title>
+              {subtitle ? (
+                <Text size='xs' c='dimmed'>
+                  {subtitle}
+                </Text>
+              ) : null}
             </div>
             <Group>{contentRight}</Group>
           </Group>
         ) : (
           <div className='mb-4'>
-            <Title order={titleOrder} c='white'>
-              {title}
-            </Title>
-            {subtitle ? <p className='text-xs text-gray-300!'>{subtitle}</p> : null}
+            <Title order={titleOrder}>{title}</Title>
+            {subtitle ? (
+              <Text size='xs' c='dimmed'>
+                {subtitle}
+              </Text>
+            ) : null}
           </div>
         )}
         {registry?.prependedContentComponents.map((Component, index) => (
diff --git a/frontend/src/elements/containers/AdminContentContainer.tsx b/frontend/src/elements/containers/AdminContentContainer.tsx
index 8c27ab74b..e203f930f 100644
--- a/frontend/src/elements/containers/AdminContentContainer.tsx
+++ b/frontend/src/elements/containers/AdminContentContainer.tsx
@@ -1,4 +1,4 @@
-import { Group, Title, TitleOrder } from '@mantine/core';
+import { Group, Text, Title, TitleOrder } from '@mantine/core';
 import { Dispatch, ReactNode, SetStateAction, useMemo } from 'react';
 import { ContainerRegistry, makeComponentHookable } from 'shared';
 import { useCurrentWindow } from '@/providers/CurrentWindowProvider.tsx';
@@ -60,10 +60,12 @@ function AdminContentContainer(props: Props) {
         {hideTitleComponent ? null : setSearch ? (
           <Group justify='space-between' mb='md'>
             <div>
-              <Title order={titleOrder} c='white'>
-                {title}
-              </Title>
-              {subtitle ? <p className='text-xs text-gray-300!'>{subtitle}</p> : null}
+              <Title order={titleOrder}>{title}</Title>
+              {subtitle ? (
+                <Text size='xs' c='dimmed'>
+                  {subtitle}
+                </Text>
+              ) : null}
             </div>
             <Group>
               <TextInput
@@ -78,19 +80,23 @@ function AdminContentContainer(props: Props) {
         ) : contentRight ? (
           <Group justify='space-between' mb='md'>
             <div>
-              <Title order={titleOrder} c='white'>
-                {title}
-              </Title>
-              {subtitle ? <p className='text-xs text-gray-300!'>{subtitle}</p> : null}
+              <Title order={titleOrder}>{title}</Title>
+              {subtitle ? (
+                <Text size='xs' c='dimmed'>
+                  {subtitle}
+                </Text>
+              ) : null}
             </div>
             <Group>{contentRight}</Group>
           </Group>
         ) : (
           <div className='mb-4'>
-            <Title order={titleOrder} c='white'>
-              {title}
-            </Title>
-            {subtitle ? <p className='text-xs text-gray-300!'>{subtitle}</p> : null}
+            <Title order={titleOrder}>{title}</Title>
+            {subtitle ? (
+              <Text size='xs' c='dimmed'>
+                {subtitle}
+              </Text>
+            ) : null}
           </div>
         )}
         {registry?.prependedContentComponents.map((Component, index) => (
diff --git a/frontend/src/elements/containers/AdminSubContentContainer.tsx b/frontend/src/elements/containers/AdminSubContentContainer.tsx
index e07056d58..5af8bb632 100644
--- a/frontend/src/elements/containers/AdminSubContentContainer.tsx
+++ b/frontend/src/elements/containers/AdminSubContentContainer.tsx
@@ -53,9 +53,7 @@ function AdminSubContentContainer<P>(props: Props<P>) {
       {hideTitleComponent ? null : setSearch ? (
         <Group justify='space-between' mb='md'>
           <div>
-            <Title order={titleOrder} c='white'>
-              {title}
-            </Title>
+            <Title order={titleOrder}>{title}</Title>
           </div>
           <Group>
             <TextInput
@@ -70,17 +68,13 @@ function AdminSubContentContainer<P>(props: Props<P>) {
       ) : contentRight ? (
         <Group justify='space-between' mb='md'>
           <div>
-            <Title order={titleOrder} c='white'>
-              {title}
-            </Title>
+            <Title order={titleOrder}>{title}</Title>
           </div>
           <Group>{contentRight}</Group>
         </Group>
       ) : (
         <div className='mb-4'>
-          <Title order={titleOrder} c='white'>
-            {title}
-          </Title>
+          <Title order={titleOrder}>{title}</Title>
         </div>
       )}
       {registry?.prependedContentComponents.map((Component, index) => (
diff --git a/frontend/src/elements/containers/ServerContentContainer.tsx b/frontend/src/elements/containers/ServerContentContainer.tsx
index 22430af90..3c8ada9ce 100644
--- a/frontend/src/elements/containers/ServerContentContainer.tsx
+++ b/frontend/src/elements/containers/ServerContentContainer.tsx
@@ -1,6 +1,6 @@
 import { faCancel } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Group, Title, TitleOrder } from '@mantine/core';
+import { Group, Text, Title, TitleOrder } from '@mantine/core';
 import { Dispatch, ReactNode, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { ContainerRegistry, makeComponentHookable } from 'shared';
 import cancelTransfer from '@/api/admin/servers/cancelTransfer.ts';
@@ -215,10 +215,12 @@ function ServerContentContainer(props: Props) {
         {hideTitleComponent ? null : setSearch ? (
           <Group justify='space-between' mb='md'>
             <div>
-              <Title order={titleOrder} c='white'>
-                {title}
-              </Title>
-              {subtitle ? <p className='text-xs text-gray-300!'>{subtitle}</p> : null}
+              <Title order={titleOrder}>{title}</Title>
+              {subtitle ? (
+                <Text size='xs' c='dimmed'>
+                  {subtitle}
+                </Text>
+              ) : null}
             </div>
             <Group>
               <TextInput
@@ -233,19 +235,23 @@ function ServerContentContainer(props: Props) {
         ) : contentRight ? (
           <Group justify='space-between' mb='md'>
             <div>
-              <Title order={titleOrder} c='white'>
-                {title}
-              </Title>
-              {subtitle ? <p className='text-xs text-gray-300!'>{subtitle}</p> : null}
+              <Title order={titleOrder}>{title}</Title>
+              {subtitle ? (
+                <Text size='xs' c='dimmed'>
+                  {subtitle}
+                </Text>
+              ) : null}
             </div>
             <Group>{contentRight}</Group>
           </Group>
         ) : (
           <div className='mb-4'>
-            <Title order={titleOrder} c='white'>
-              {title}
-            </Title>
-            {subtitle ? <p className='text-xs text-gray-300!'>{subtitle}</p> : null}
+            <Title order={titleOrder}>{title}</Title>
+            {subtitle ? (
+              <Text size='xs' c='dimmed'>
+                {subtitle}
+              </Text>
+            ) : null}
           </div>
         )}
         {registry?.prependedContentComponents.map((Component, index) => (
diff --git a/frontend/src/elements/input/Switch.tsx b/frontend/src/elements/input/Switch.tsx
index 4316dc8e3..4134433d2 100644
--- a/frontend/src/elements/input/Switch.tsx
+++ b/frontend/src/elements/input/Switch.tsx
@@ -6,7 +6,7 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>(({ className, descripti
   return (
     <div className='flex flex-col gap-1'>
       <MantineSwitch ref={ref} className={className} {...rest} />
-      {description && <p className='text-white/40! text-xs'>{description}</p>}
+      {description && <p className='text-(--mantine-color-dimmed)! text-xs'>{description}</p>}
     </div>
   );
 });
diff --git a/frontend/src/elements/oobe/OobeSidebarFooter.tsx b/frontend/src/elements/oobe/OobeSidebarFooter.tsx
index e7d5391d1..44664c6bb 100644
--- a/frontend/src/elements/oobe/OobeSidebarFooter.tsx
+++ b/frontend/src/elements/oobe/OobeSidebarFooter.tsx
@@ -9,7 +9,7 @@ export default function OobeSidebarFooter({ complete, total }: Props) {
   const pct = Math.trunc((complete / total) * 100);
 
   return (
-    <div className='border border-neutral-700 rounded-lg mt-auto p-2 justify-between items-center min-h-fit'>
+    <div className='border border-(--mantine-color-default-border) rounded-lg mt-auto p-2 justify-between items-center min-h-fit'>
       <Progress value={pct} color='blue' radius='xl' mb={6} />
       <Group justify='space-between'>
         <Text size='sm'>
diff --git a/frontend/src/pages/admin/assets/AdminAssets.tsx b/frontend/src/pages/admin/assets/AdminAssets.tsx
index 83423d0a0..4440bdca5 100644
--- a/frontend/src/pages/admin/assets/AdminAssets.tsx
+++ b/frontend/src/pages/admin/assets/AdminAssets.tsx
@@ -7,6 +7,7 @@ import { z } from 'zod';
 import getAssets from '@/api/admin/assets/getAssets.ts';
 import Button from '@/elements/Button.tsx';
 import { AdminCan } from '@/elements/Can.tsx';
+import Card from '@/elements/Card.tsx';
 import { ContextMenuProvider } from '@/elements/ContextMenu.tsx';
 import AdminContentContainer from '@/elements/containers/AdminContentContainer.tsx';
 import SelectionArea from '@/elements/SelectionArea.tsx';
@@ -132,9 +133,9 @@ export default function AdminAssets() {
         onNavigate={navigateToDirectory}
       />
 
-      <div id='asset-breadcrumbs-outer' className='bg-[#282828] border border-[#424242] rounded-lg mb-2 p-4'>
+      <Card mb='sm'>
         <AssetBreadcrumbs directory={currentDirectory} />
-      </div>
+      </Card>
 
       <AssetActionBar
         selectedAssets={selectedAssets}
diff --git a/frontend/src/pages/admin/assets/AssetBreadcrumbs.tsx b/frontend/src/pages/admin/assets/AssetBreadcrumbs.tsx
index 4e3b53563..c73c60e05 100644
--- a/frontend/src/pages/admin/assets/AssetBreadcrumbs.tsx
+++ b/frontend/src/pages/admin/assets/AssetBreadcrumbs.tsx
@@ -14,7 +14,7 @@ export default function AssetBreadcrumbs({ directory }: { directory: string }) {
       <NavLink
         key='root'
         to={`?${createSearchParams({ directory: '' })}`}
-        className='text-blue-300 hover:text-blue-200'
+        className='text-(--mantine-color-anchor) hover:underline'
       >
         assets
       </NavLink>
@@ -25,7 +25,7 @@ export default function AssetBreadcrumbs({ directory }: { directory: string }) {
       <NavLink
         key={item.path}
         to={`?${createSearchParams({ directory: item.path })}`}
-        className='text-blue-300 hover:text-blue-200'
+        className='text-(--mantine-color-anchor) hover:underline'
       >
         {item.name}
       </NavLink>
diff --git a/frontend/src/pages/admin/assets/NewDirectoryModal.tsx b/frontend/src/pages/admin/assets/NewDirectoryModal.tsx
index 7b55299bf..275b508c9 100644
--- a/frontend/src/pages/admin/assets/NewDirectoryModal.tsx
+++ b/frontend/src/pages/admin/assets/NewDirectoryModal.tsx
@@ -56,7 +56,7 @@ export default function NewDirectoryModal({
         />
 
         <p className='mt-2 text-sm break-all'>
-          <span className='text-neutral-200'>Will be created at </span>
+          <span>Will be created at </span>
           <Code>
             assets/
             <span className='text-cyan-200'>
diff --git a/frontend/src/pages/admin/backupConfigurations/stats/AdminBackupConfigurationStats.tsx b/frontend/src/pages/admin/backupConfigurations/stats/AdminBackupConfigurationStats.tsx
index e166f8549..47677a202 100644
--- a/frontend/src/pages/admin/backupConfigurations/stats/AdminBackupConfigurationStats.tsx
+++ b/frontend/src/pages/admin/backupConfigurations/stats/AdminBackupConfigurationStats.tsx
@@ -42,117 +42,93 @@ export default function AdminBackupConfigurationStats({
         <TitleCard title={`Backup Statistics`} icon={<FontAwesomeIcon icon={faArchive} />} className='mt-4'>
           <div className='grid grid-cols-2 xl:grid-cols-5 gap-4'>
             <Card className='col-span-2 xl:col-span-1'>
-              <Title order={3} c='white'>
-                All Time
-              </Title>
+              <Title order={3}>All Time</Title>
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
-                {stats.allTime.total}
-              </Title>
+              <Title order={3}>{stats.allTime.total}</Title>
               Total backups all time
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
+              <Title order={3}>
                 {stats.allTime.successful} ({bytesToString(stats.allTime.successfulBytes)})
               </Title>
               Successful backups all time
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
-                {stats.allTime.failed}
-              </Title>
+              <Title order={3}>{stats.allTime.failed}</Title>
               Failed backups all time
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
+              <Title order={3}>
                 {stats.allTime.deleted} ({bytesToString(stats.allTime.deletedBytes)})
               </Title>
               Deleted backups all time
             </Card>
             <Card className='col-span-2 xl:col-span-1'>
-              <Title order={3} c='white'>
-                Today
-              </Title>
+              <Title order={3}>Today</Title>
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
-                {stats.today.total}
-              </Title>
+              <Title order={3}>{stats.today.total}</Title>
               Total backups today
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
+              <Title order={3}>
                 {stats.today.successful} ({bytesToString(stats.today.successfulBytes)})
               </Title>
               Successful backups today
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
-                {stats.today.failed}
-              </Title>
+              <Title order={3}>{stats.today.failed}</Title>
               Failed backups today
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
+              <Title order={3}>
                 {stats.today.deleted} ({bytesToString(stats.today.deletedBytes)})
               </Title>
               Deleted backups today
             </Card>
             <Card className='col-span-2 xl:col-span-1'>
-              <Title order={3} c='white'>
-                This Week
-              </Title>
+              <Title order={3}>This Week</Title>
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
-                {stats.week.total}
-              </Title>
+              <Title order={3}>{stats.week.total}</Title>
               Total backups this week
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
+              <Title order={3}>
                 {stats.week.successful} ({bytesToString(stats.week.successfulBytes)})
               </Title>
               Successful backups this week
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
-                {stats.week.failed}
-              </Title>
+              <Title order={3}>{stats.week.failed}</Title>
               Failed backups this week
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
+              <Title order={3}>
                 {stats.week.deleted} ({bytesToString(stats.week.deletedBytes)})
               </Title>
               Deleted backups this week
             </Card>
             <Card className='col-span-2 xl:col-span-1'>
-              <Title order={3} c='white'>
-                This Month
-              </Title>
+              <Title order={3}>This Month</Title>
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
-                {stats.month.total}
-              </Title>
+              <Title order={3}>{stats.month.total}</Title>
               Total backups this month
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
+              <Title order={3}>
                 {stats.month.successful} ({bytesToString(stats.month.successfulBytes)})
               </Title>
               Successful backups this month
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
-                {stats.month.failed}
-              </Title>
+              <Title order={3}>{stats.month.failed}</Title>
               Failed backups this month
             </Card>
             <Card className='flex'>
-              <Title order={3} c='white'>
+              <Title order={3}>
                 {stats.month.deleted} ({bytesToString(stats.month.deletedBytes)})
               </Title>
               Deleted backups this month
diff --git a/frontend/src/pages/admin/extensions/ExtensionCard.tsx b/frontend/src/pages/admin/extensions/ExtensionCard.tsx
index f4c4a494f..d075dd581 100644
--- a/frontend/src/pages/admin/extensions/ExtensionCard.tsx
+++ b/frontend/src/pages/admin/extensions/ExtensionCard.tsx
@@ -31,12 +31,14 @@ export default function ExtensionCard({
   return (
     <Card>
       <div className='mb-3 flex items-start gap-3'>
-        <div className='flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-zinc-800 text-zinc-400'>
+        <div className='flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-(--mantine-color-default-hover) text-(--mantine-color-dimmed)'>
           <FontAwesomeIcon icon={faPuzzlePiece} className='text-sm' />
         </div>
         <div className='min-w-0 flex-1'>
-          <h3 className='truncate text-md font-medium leading-tight text-white'>{name}</h3>
-          {packageName && <p className='mt-0.5 truncate font-mono text-[11px] text-zinc-500'>{packageName}</p>}
+          <h3 className='truncate text-md font-medium leading-tight'>{name}</h3>
+          {packageName && (
+            <p className='mt-0.5 truncate font-mono text-[11px] text-(--mantine-color-dimmed)'>{packageName}</p>
+          )}
         </div>
       </div>
 
diff --git a/frontend/src/pages/admin/home/health/AdminOverviewHealth.tsx b/frontend/src/pages/admin/home/health/AdminOverviewHealth.tsx
index 548fcc8c0..79b052ad5 100644
--- a/frontend/src/pages/admin/home/health/AdminOverviewHealth.tsx
+++ b/frontend/src/pages/admin/home/health/AdminOverviewHealth.tsx
@@ -62,7 +62,7 @@ export default function AdminOverviewHealth() {
             <>
               <div className='grid grid-cols-2 xl:grid-cols-4 gap-4'>
                 <Card className='flex col-span-2'>
-                  <Title order={3} c='white'>
+                  <Title order={3}>
                     {general.migrations.applied} / {general.migrations.total}
                   </Title>
                   Applied Migrations ({((general.migrations.applied / general.migrations.total) * 100).toFixed(2)}%)
diff --git a/frontend/src/pages/admin/home/overview/AdminOverview.tsx b/frontend/src/pages/admin/home/overview/AdminOverview.tsx
index f1a2767cd..dc1a1066f 100644
--- a/frontend/src/pages/admin/home/overview/AdminOverview.tsx
+++ b/frontend/src/pages/admin/home/overview/AdminOverview.tsx
@@ -93,13 +93,13 @@ export default function AdminOverview() {
             <>
               <div className='grid grid-cols-2 xl:grid-cols-4 gap-4'>
                 <Card className='flex col-span-2'>
-                  <Title order={3} c='white'>
+                  <Title order={3}>
                     <FontAwesomeIcon icon={faMicrochip} /> {systemOverview.cpu.brand}
                   </Title>
                   CPU
                 </Card>
                 <Card className='flex col-span-2'>
-                  <Title order={3} c='white'>
+                  <Title order={3}>
                     <FontAwesomeIcon icon={faMemory} /> {bytesToString(systemOverview.memory.usedBytes)} /{' '}
                     {bytesToString(systemOverview.memory.totalBytes)} (
                     {((systemOverview.memory.usedBytes / systemOverview.memory.totalBytes) * 100).toFixed(2)}%)
@@ -110,13 +110,13 @@ export default function AdminOverview() {
 
               <div className='grid grid-cols-2 xl:grid-cols-4 gap-4 mt-4'>
                 <Card className='flex'>
-                  <Title order={3} c='white'>
+                  <Title order={3}>
                     <FontAwesomeIcon icon={faServer} /> {systemOverview.kernelVersion}
                   </Title>
                   Kernel Version ({systemOverview.architecture})
                 </Card>
                 <Card className='flex'>
-                  <Title order={3} c='white'>
+                  <Title order={3}>
                     <FontAwesomeIcon
                       icon={
                         systemOverview.containerType === 'unknown'
@@ -139,13 +139,13 @@ export default function AdminOverview() {
                   Container Type
                 </Card>
                 <Card className='flex'>
-                  <Title order={3} c='white'>
+                  <Title order={3}>
                     <FontAwesomeIcon icon={faDatabase} /> PostgreSQL {systemOverview.database.version}
                   </Title>
                   Database Version ({bytesToString(systemOverview.database.sizeBytes)})
                 </Card>
                 <Card className='flex'>
-                  <Title order={3} c='white'>
+                  <Title order={3}>
                     <FontAwesomeIcon icon={faDatabase} /> {systemOverview.cache.version}
                   </Title>
                   Cache Version
@@ -154,28 +154,20 @@ export default function AdminOverview() {
 
               <div className='grid grid-cols-2 xl:grid-cols-4 gap-4 mt-4'>
                 <Card className='flex'>
-                  <Title order={3} c='white'>
-                    {systemOverview.cache.totalCalls}
-                  </Title>
+                  <Title order={3}>{systemOverview.cache.totalCalls}</Title>
                   Cache Calls
                 </Card>
                 <Card className='flex'>
-                  <Title order={3} c='white'>
-                    {systemOverview.cache.totalHits}
-                  </Title>
+                  <Title order={3}>{systemOverview.cache.totalHits}</Title>
                   Cache Hits ({((systemOverview.cache.totalHits / systemOverview.cache.totalCalls) * 100).toFixed(2)}%)
                 </Card>
                 <Card className='flex'>
-                  <Title order={3} c='white'>
-                    {systemOverview.cache.totalMisses}
-                  </Title>
+                  <Title order={3}>{systemOverview.cache.totalMisses}</Title>
                   Cache Misses (
                   {((systemOverview.cache.totalMisses / systemOverview.cache.totalCalls) * 100).toFixed(2)}%)
                 </Card>
                 <Card className='flex'>
-                  <Title order={3} c='white'>
-                    {(systemOverview.cache.averageCallLatencyNs / 1_000 / 1_000).toFixed(2)} ms
-                  </Title>
+                  <Title order={3}>{(systemOverview.cache.averageCallLatencyNs / 1_000 / 1_000).toFixed(2)} ms</Title>
                   Avg. Cached Call Latency
                 </Card>
               </div>
@@ -189,49 +181,49 @@ export default function AdminOverview() {
           ) : (
             <div className='grid grid-cols-2 xl:grid-cols-4 gap-4'>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   <FontAwesomeIcon icon={faUsers} /> {generalStats.users}
                 </Title>
                 Users
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   <FontAwesomeIcon icon={faComputer} /> {generalStats.servers}
                 </Title>
                 Servers
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   <FontAwesomeIcon icon={faEarth} /> {generalStats.locations}
                 </Title>
                 Locations
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   <FontAwesomeIcon icon={faServer} /> {generalStats.nodes}
                 </Title>
                 Nodes
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   <FontAwesomeIcon icon={faEgg} /> {generalStats.nestEggs}
                 </Title>
                 Nest Eggs
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   <FontAwesomeIcon icon={faDatabase} /> {generalStats.databaseHosts}
                 </Title>
                 Database Hosts
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   <FontAwesomeIcon icon={faArchive} /> {generalStats.backupConfigurations}
                 </Title>
                 Backup Configurations
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   <FontAwesomeIcon icon={faScroll} /> {generalStats.roles}
                 </Title>
                 Roles
@@ -246,124 +238,100 @@ export default function AdminOverview() {
           ) : (
             <div className='grid grid-cols-2 xl:grid-cols-5 gap-4'>
               <Card className='col-span-2 xl:col-span-1'>
-                <Title order={3} c='white'>
-                  All Time
-                </Title>
+                <Title order={3}>All Time</Title>
               </Card>
 
               <Card className='flex'>
-                <Title order={3} c='white'>
-                  {backupStats.allTime.total}
-                </Title>
+                <Title order={3}>{backupStats.allTime.total}</Title>
                 Total backups all time
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   {backupStats.allTime.successful} ({bytesToString(backupStats.allTime.successfulBytes)})
                 </Title>
                 Successful backups all time
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
-                  {backupStats.allTime.failed}
-                </Title>
+                <Title order={3}>{backupStats.allTime.failed}</Title>
                 Failed backups all time
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   {backupStats.allTime.deleted} ({bytesToString(backupStats.allTime.deletedBytes)})
                 </Title>
                 Deleted backups all time
               </Card>
 
               <Card className='col-span-2 xl:col-span-1'>
-                <Title order={3} c='white'>
-                  Today
-                </Title>
+                <Title order={3}>Today</Title>
               </Card>
 
               <Card className='flex'>
-                <Title order={3} c='white'>
-                  {backupStats.today.total}
-                </Title>
+                <Title order={3}>{backupStats.today.total}</Title>
                 Total backups today
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   {backupStats.today.successful} ({bytesToString(backupStats.today.successfulBytes)})
                 </Title>
                 Successful backups today
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
-                  {backupStats.today.failed}
-                </Title>
+                <Title order={3}>{backupStats.today.failed}</Title>
                 Failed backups today
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   {backupStats.today.deleted} ({bytesToString(backupStats.today.deletedBytes)})
                 </Title>
                 Deleted backups today
               </Card>
 
               <Card className='col-span-2 xl:col-span-1'>
-                <Title order={3} c='white'>
-                  This Week
-                </Title>
+                <Title order={3}>This Week</Title>
               </Card>
 
               <Card className='flex'>
-                <Title order={3} c='white'>
-                  {backupStats.week.total}
-                </Title>
+                <Title order={3}>{backupStats.week.total}</Title>
                 Total backups this week
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   {backupStats.week.successful} ({bytesToString(backupStats.week.successfulBytes)})
                 </Title>
                 Successful backups this week
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
-                  {backupStats.week.failed}
-                </Title>
+                <Title order={3}>{backupStats.week.failed}</Title>
                 Failed backups this week
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   {backupStats.week.deleted} ({bytesToString(backupStats.week.deletedBytes)})
                 </Title>
                 Deleted backups this week
               </Card>
 
               <Card className='col-span-2 xl:col-span-1'>
-                <Title order={3} c='white'>
-                  This Month
-                </Title>
+                <Title order={3}>This Month</Title>
               </Card>
 
               <Card className='flex'>
-                <Title order={3} c='white'>
-                  {backupStats.month.total}
-                </Title>
+                <Title order={3}>{backupStats.month.total}</Title>
                 Total backups this month
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   {backupStats.month.successful} ({bytesToString(backupStats.month.successfulBytes)})
                 </Title>
                 Successful backups this month
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
-                  {backupStats.month.failed}
-                </Title>
+                <Title order={3}>{backupStats.month.failed}</Title>
                 Failed backups this month
               </Card>
               <Card className='flex'>
-                <Title order={3} c='white'>
+                <Title order={3}>
                   {backupStats.month.deleted} ({bytesToString(backupStats.month.deletedBytes)})
                 </Title>
                 Deleted backups this month
diff --git a/frontend/src/pages/admin/nests/eggs/EggImportOverlay.tsx b/frontend/src/pages/admin/nests/eggs/EggImportOverlay.tsx
index d1d1cbede..e80588eb2 100644
--- a/frontend/src/pages/admin/nests/eggs/EggImportOverlay.tsx
+++ b/frontend/src/pages/admin/nests/eggs/EggImportOverlay.tsx
@@ -12,13 +12,11 @@ function EggImportOverlay({ visible }: EggImportOverlayProps) {
   return (
     <div className='fixed w-screen h-screen left-0 top-0 inset-0 z-100 flex items-center justify-center backdrop-blur-md bg-black/20 pointer-events-auto'>
       <div className='pointer-events-none'>
-        <div className='bg-gray-800 rounded-lg p-8 shadow-2xl border-2 border-dashed border-blue-500 dark:border-blue-400'>
+        <div className='bg-(--mantine-color-body) rounded-lg p-8 shadow-2xl border-2 border-dashed border-(--mantine-color-blue-5)'>
           <div className='flex flex-col items-center gap-4 z-100'>
-            <FontAwesomeIcon icon={faUpload} className='text-6xl text-blue-500 dark:text-blue-400 animate-bounce' />
-            <p className='text-xl font-semibold text-gray-800 dark:text-gray-200'>
-              Drop some files here to import as Eggs
-            </p>
-            <p className='text-sm text-gray-600 dark:text-gray-400'>Release to start importing</p>
+            <FontAwesomeIcon icon={faUpload} className='text-6xl text-(--mantine-color-blue-5) animate-bounce' />
+            <p className='text-xl font-semibold'>Drop some files here to import as Eggs</p>
+            <p className='text-sm text-(--mantine-color-dimmed)'>Release to start importing</p>
           </div>
         </div>
       </div>
diff --git a/frontend/src/pages/admin/settings/EmailTemplatesContainer.tsx b/frontend/src/pages/admin/settings/EmailTemplatesContainer.tsx
index f1adfefd1..b87a9de5a 100644
--- a/frontend/src/pages/admin/settings/EmailTemplatesContainer.tsx
+++ b/frontend/src/pages/admin/settings/EmailTemplatesContainer.tsx
@@ -83,7 +83,7 @@ export default function EmailTemplatesContainer() {
 
   const sidebar = (
     <Paper withBorder radius='md' className='flex flex-col overflow-hidden shrink-0 md:w-72 w-full md:h-full'>
-      <div className='px-3 py-2.5 bg-neutral-800/60'>
+      <div className='px-3 py-2.5 bg-(--mantine-color-default)'>
         <Text size='xs' fw={600} c='dimmed' tt='uppercase' style={{ letterSpacing: '0.05em' }}>
           Templates
         </Text>
@@ -116,7 +116,7 @@ export default function EmailTemplatesContainer() {
       {template && (
         <>
           <Divider />
-          <div className='px-3 py-2.5 bg-neutral-800/60'>
+          <div className='px-3 py-2.5 bg-(--mantine-color-default)'>
             <Text size='xs' fw={600} c='dimmed' tt='uppercase' style={{ letterSpacing: '0.05em' }}>
               Available Variables
             </Text>
@@ -194,7 +194,7 @@ export default function EmailTemplatesContainer() {
             </div>
           ) : template ? (
             <>
-              <div className='px-4 py-2.5 bg-neutral-800/60 shrink-0'>
+              <div className='px-4 py-2.5 bg-(--mantine-color-default) shrink-0'>
                 <Group justify='space-between'>
                   <Group gap='xs'>
                     <Text size='sm' fw={500} style={{ fontFamily: 'var(--mantine-font-family-monospace)' }}>
diff --git a/frontend/src/pages/auth/AuthWrapper.tsx b/frontend/src/pages/auth/AuthWrapper.tsx
index aebe8bd43..d2c7a15b1 100644
--- a/frontend/src/pages/auth/AuthWrapper.tsx
+++ b/frontend/src/pages/auth/AuthWrapper.tsx
@@ -12,7 +12,7 @@ export default function AuthWrapper({ title, children }: { title?: string; child
       <div className='flex items-center justify-center h-screen'>
         <div className='flex flex-col items-center justify-center h-full px-2 md:px-0 max-w-100 w-full'>
           <AppIcon className='mb-5 w-full sm:w-fit' />
-          {title && <h1 className='text-3xl font-bold text-white mb-4'>{title}</h1>}
+          {title && <h1 className='text-3xl font-bold mb-4'>{title}</h1>}
           {children}
           <Copyright className='mt-4 text-sm' />
         </div>
diff --git a/frontend/src/pages/dashboard/home/ServerGroupItem.tsx b/frontend/src/pages/dashboard/home/ServerGroupItem.tsx
index 73e1fd51f..13913e00f 100644
--- a/frontend/src/pages/dashboard/home/ServerGroupItem.tsx
+++ b/frontend/src/pages/dashboard/home/ServerGroupItem.tsx
@@ -136,7 +136,7 @@ export default function ServerGroupItem({
       <Card key={serverGroup.uuid} p={0} className='overflow-hidden rounded-xl!'>
         <div
           id='server-group-item-header'
-          className='flex flex-row items-end sm:items-center gap-3 px-3 bg-(--mantine-color-dark-7) justify-between'
+          className='flex flex-row items-end sm:items-center gap-3 px-3 bg-(--mantine-color-default) justify-between'
         >
           <div className='flex flex-col my-3 sm:my-0'>
             <div className='flex flex-row'>
@@ -162,7 +162,7 @@ export default function ServerGroupItem({
                     'transition duration-200 w-3 h-3 text-gray-400 shrink-0',
                   )}
                 />
-                <span className='font-medium text-white truncate'>{serverGroup.name}</span>
+                <span className='font-medium truncate'>{serverGroup.name}</span>
                 <Badge variant='light' color='gray'>
                   {tItem('server', serverCount)}
                 </Badge>
diff --git a/frontend/src/pages/dashboard/home/ServerItem.tsx b/frontend/src/pages/dashboard/home/ServerItem.tsx
index e3814631f..bc02ee032 100644
--- a/frontend/src/pages/dashboard/home/ServerItem.tsx
+++ b/frontend/src/pages/dashboard/home/ServerItem.tsx
@@ -119,27 +119,31 @@ export default function ServerItem({
                       <div className='flex flex-row gap-2 min-w-0'>
                         <CopyOnClick content={server.allocation.ipAlias ?? server.allocation.ip} className='min-w-0'>
                           <Card p='xs' hoverable className='leading-[100%] min-w-0 rounded-lg!'>
-                            <p className='text-sm text-gray-400 truncate'>
+                            <p className='text-sm text-(--mantine-color-dimmed) truncate'>
                               {server.allocation.ipAlias ?? server.allocation.ip}
                             </p>
                           </Card>
                         </CopyOnClick>
                         <CopyOnClick content={server.allocation.port.toString()} className='shrink-0'>
                           <Card p='xs' hoverable className='leading-[100%] text-nowrap rounded-lg!'>
-                            <p className='text-sm text-gray-400'>{server.allocation.port.toString()}</p>
+                            <p className='text-sm text-(--mantine-color-dimmed)'>{server.allocation.port.toString()}</p>
                           </Card>
                         </CopyOnClick>
                       </div>
                     ) : (
                       <CopyOnClick content={formatAllocation(server.allocation)} className='min-w-0'>
                         <Card p='xs' hoverable className='leading-[100%] min-w-0 rounded-lg!'>
-                          <p className='text-sm text-gray-400 truncate'>{formatAllocation(server.allocation)}</p>
+                          <p className='text-sm text-(--mantine-color-dimmed) truncate'>
+                            {formatAllocation(server.allocation)}
+                          </p>
                         </Card>
                       </CopyOnClick>
                     )
                   ) : (
                     <Card p='xs' className='leading-[100%] min-w-0 rounded-lg! max-w-full'>
-                      <p className='text-sm text-gray-400 truncate'>{t('common.server.noAllocation', {})}</p>
+                      <p className='text-sm text-(--mantine-color-dimmed) truncate'>
+                        {t('common.server.noAllocation', {})}
+                      </p>
                     </Card>
                   )}
                   {showGroupAddButton && (
@@ -225,7 +229,7 @@ export default function ServerItem({
                       <FontAwesomeIcon icon={faMicrochip} className='size-5 flex-none' />
                       <div>
                         <span className='mr-1'>{stats.cpuAbsolute.toFixed(2)}%</span>
-                        <span className='inline-block text-xs text-gray-400'>/ {cpuLimit}</span>
+                        <span className='inline-block text-xs text-(--mantine-color-dimmed)'>/ {cpuLimit}</span>
                       </div>
                     </div>
 
@@ -236,7 +240,7 @@ export default function ServerItem({
                       <FontAwesomeIcon icon={faMemory} className='size-5 flex-none' />
                       <div>
                         <span className='mr-1'>{bytesToString(stats.memoryBytes)}</span>
-                        <span className='inline-block text-xs text-gray-400'>/ {memoryLimit}</span>
+                        <span className='inline-block text-xs text-(--mantine-color-dimmed)'>/ {memoryLimit}</span>
                       </div>
                     </div>
 
@@ -247,7 +251,7 @@ export default function ServerItem({
                       <FontAwesomeIcon icon={faHardDrive} className='size-5 flex-none' />
                       <div>
                         <span className='mr-1'>{bytesToString(stats.diskBytes)}</span>
-                        <span className='inline-block text-xs text-gray-400'>/ {diskLimit}</span>
+                        <span className='inline-block text-xs text-(--mantine-color-dimmed)'>/ {diskLimit}</span>
                       </div>
                     </div>
                   </div>
diff --git a/frontend/src/pages/dashboard/shortcuts/DashboardShortcuts.tsx b/frontend/src/pages/dashboard/shortcuts/DashboardShortcuts.tsx
index ccddd0d61..89b9cc481 100644
--- a/frontend/src/pages/dashboard/shortcuts/DashboardShortcuts.tsx
+++ b/frontend/src/pages/dashboard/shortcuts/DashboardShortcuts.tsx
@@ -65,9 +65,9 @@ export default function DashboardShortcuts() {
           px='sm'
           py={6}
           style={{
-            background: 'var(--mantine-color-dark-6)',
+            background: 'var(--mantine-color-default)',
             borderRadius: 6,
-            border: '1px solid var(--mantine-color-dark-5)',
+            border: '1px solid var(--mantine-color-default-border)',
           }}
         >
           <FontAwesomeIcon icon={isMac ? faApple : faWindows} style={{ color: 'var(--mantine-color-gray-5)' }} />
diff --git a/frontend/src/pages/dashboard/shortcuts/ShortcutItem.tsx b/frontend/src/pages/dashboard/shortcuts/ShortcutItem.tsx
index 9bda34a5e..d10018161 100644
--- a/frontend/src/pages/dashboard/shortcuts/ShortcutItem.tsx
+++ b/frontend/src/pages/dashboard/shortcuts/ShortcutItem.tsx
@@ -16,17 +16,15 @@ export default function ShortcutItem({ keys, description, hideBorder }: Shortcut
       py='sm'
       px='xs'
       style={{
-        borderBottom: hideBorder ? 'none' : '1px solid var(--mantine-color-dark-5)',
+        borderBottom: hideBorder ? 'none' : '1px solid var(--mantine-color-default-border)',
       }}
     >
-      <Text size='sm' c='gray.4'>
-        {description}
-      </Text>
+      <Text size='sm'>{description}</Text>
       <Flex align='center' justify='flex-end' gap={6} style={{ minWidth: 120 }}>
         {keys.map((key, index) => (
           <Flex key={index} align='center' gap={6}>
             {index > 0 && (
-              <Text size='xs' c='dark.3' fw={500}>
+              <Text size='xs' c='dimmed' fw={500}>
                 +
               </Text>
             )}
diff --git a/frontend/src/pages/server/console/Console.tsx b/frontend/src/pages/server/console/Console.tsx
index 030fd2bc2..1d23402e6 100644
--- a/frontend/src/pages/server/console/Console.tsx
+++ b/frontend/src/pages/server/console/Console.tsx
@@ -8,7 +8,7 @@ import {
   faServer,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ComboboxItem, OptionsFilter } from '@mantine/core';
+import { ComboboxItem, OptionsFilter, useComputedColorScheme } from '@mantine/core';
 import { FitAddon } from '@xterm/addon-fit';
 import { SearchAddon } from '@xterm/addon-search';
 import { Unicode11Addon } from '@xterm/addon-unicode11';
@@ -51,10 +51,39 @@ const commandSnippetFilter: OptionsFilter = ({ options, search }) => {
   });
 };
 
+const getXtermTheme = (isDark: boolean) => ({
+  background: '#00000000',
+  foreground: isDark ? '#f8f8f2' : '#1a1a1a',
+  cursor: '#00000000',
+  cursorAccent: '#00000000',
+  selectionBackground: isDark ? '#FFFFFF4D' : '#0000001A',
+  selectionInactiveBackground: isDark ? '#FFFFFF80' : '#00000033',
+  // Light-mode ANSI palette
+  ...(!isDark && {
+    black: '#1c1c1c',
+    red: '#b22222',
+    green: '#005f00',
+    yellow: '#8b6800',
+    blue: '#0000cc',
+    magenta: '#7d0070',
+    cyan: '#005f5f',
+    white: '#6c6c6c',
+    brightBlack: '#505050',
+    brightRed: '#c0392b',
+    brightGreen: '#1e8449',
+    brightYellow: '#b07d00',
+    brightBlue: '#2471a3',
+    brightMagenta: '#7d3c98',
+    brightCyan: '#148f77',
+    brightWhite: '#909090',
+  }),
+});
+
 export default function Terminal() {
   const { t } = useTranslations();
   const { server, updateServer, commandSnippets, imagePulls, socketConnected, socketInstance, state } =
     useServerStore();
+  const computedColorScheme = useComputedColorScheme('dark');
 
   const [history, setHistory] = useState<string[]>([]);
   const [historyIndex, setHistoryIndex] = useState(-1);
@@ -115,13 +144,7 @@ export default function Terminal() {
     const initOptions: ITerminalOptions & ITerminalInitOnlyOptions = {
       fontSize: consoleFontSize,
       fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-      theme: {
-        background: '#00000000',
-        cursor: '#00000000',
-        cursorAccent: '#00000000',
-        selectionBackground: '#FFFFFF4D',
-        selectionInactiveBackground: '#FFFFFF80',
-      },
+      theme: getXtermTheme(computedColorScheme === 'dark'),
       allowTransparency: true,
       lineHeight: 1.2,
       disableStdin: true,
@@ -215,6 +238,12 @@ export default function Terminal() {
     };
   }, []);
 
+  useEffect(() => {
+    if (xtermInstance.current) {
+      xtermInstance.current.options.theme = getXtermTheme(computedColorScheme === 'dark');
+    }
+  }, [computedColorScheme]);
+
   useEffect(() => {
     const terminalElement = terminalRef.current;
     if (!terminalElement) return;
diff --git a/frontend/src/pages/server/console/ServerConsole.tsx b/frontend/src/pages/server/console/ServerConsole.tsx
index 9675fc136..9156cdd20 100644
--- a/frontend/src/pages/server/console/ServerConsole.tsx
+++ b/frontend/src/pages/server/console/ServerConsole.tsx
@@ -18,13 +18,14 @@ export default function ServerConsole() {
       hideTitleComponent
       registry={window.extensionContext.extensionRegistry.pages.server.console.container}
     >
-      <div id='console-infobar' className='sticky top-0 z-10 bg-neutral-850 mb-4 py-2 -mx-4 lg:-mx-6 px-4 lg:px-6'>
+      <div
+        id='console-infobar'
+        className='sticky top-0 z-10 bg-(--mantine-color-body) mb-4 py-2 -mx-4 lg:-mx-6 px-4 lg:px-6'
+      >
         <Group justify='space-between'>
           <div className='flex flex-col'>
-            <Title order={1} c='white'>
-              {server.name}
-            </Title>
-            <p className='text-sm text-gray-300!'>{server.description}</p>
+            <Title order={1}>{server.name}</Title>
+            <p className='text-sm text-(--mantine-color-dimmed)!'>{server.description}</p>
           </div>
           <ServerCan action={['control.start', 'control.stop', 'control.restart']} matchAny>
             <ServerPowerControls />
diff --git a/frontend/src/pages/server/console/drawers/CommandHistoryDrawer.tsx b/frontend/src/pages/server/console/drawers/CommandHistoryDrawer.tsx
index bcfb2835f..55dbe78e2 100644
--- a/frontend/src/pages/server/console/drawers/CommandHistoryDrawer.tsx
+++ b/frontend/src/pages/server/console/drawers/CommandHistoryDrawer.tsx
@@ -86,9 +86,7 @@ export default function CommandHistoryDrawer({ opened, onClose, ...props }: Draw
         {selectedCommand ? (
           <Stack gap='md' className='flex-1 overflow-hidden'>
             <div className='flex items-center justify-between'>
-              <Title order={4} className='text-white'>
-                {t('pages.server.console.drawer.commandHistory.detailTitle', {})}
-              </Title>
+              <Title order={4}>{t('pages.server.console.drawer.commandHistory.detailTitle', {})}</Title>
               <Button
                 variant='subtle'
                 size='xs'
diff --git a/frontend/src/pages/server/files/FileBreadcrumbs.tsx b/frontend/src/pages/server/files/FileBreadcrumbs.tsx
index 6dd93498a..505a38ee9 100644
--- a/frontend/src/pages/server/files/FileBreadcrumbs.tsx
+++ b/frontend/src/pages/server/files/FileBreadcrumbs.tsx
@@ -69,7 +69,7 @@ export default function FileBreadcrumbs({ path, inFileEditor }: { path: string;
             })}`
           : `/server/${server?.uuidShort}/files`
       }
-      className=' text-blue-300 hover:text-blue-200'
+      className='text-(--mantine-color-anchor) hover:underline'
     >
       {browsingBackup ? browsingBackup.name : 'container'}
     </NavLink>,
@@ -80,7 +80,7 @@ export default function FileBreadcrumbs({ path, inFileEditor }: { path: string;
         <NavLink
           key={item.path}
           to={`/server/${server?.uuidShort}/files?${createSearchParams({ directory: join('/', item.path) })}`}
-          className=' text-blue-300 hover:text-blue-200'
+          className='text-(--mantine-color-anchor) hover:underline'
           onClick={() => setBrowsingDirectory(item.path)}
         >
           {item.name}
@@ -131,7 +131,7 @@ export default function FileBreadcrumbs({ path, inFileEditor }: { path: string;
             </ActionIcon>
           </Tooltip>
           <Button
-            variant='light'
+            variant='outline'
             leftSection={<FontAwesomeIcon icon={faSearch} />}
             onClick={() => doOpenModal('search')}
           >
diff --git a/frontend/src/pages/server/files/FileSearchBanner.tsx b/frontend/src/pages/server/files/FileSearchBanner.tsx
index d66edc369..7f04913be 100644
--- a/frontend/src/pages/server/files/FileSearchBanner.tsx
+++ b/frontend/src/pages/server/files/FileSearchBanner.tsx
@@ -32,26 +32,28 @@ export default function FileSearchBanner({ resetEntries }: { resetEntries: () =>
         <div className='flex flex-col gap-1 text-sm'>
           {searchInfo.query && (
             <div>
-              <span className='font-medium text-white/80'>{t('pages.server.files.searchBanner.query', {})}</span>{' '}
-              <span className='text-white/60'>&quot;{searchInfo.query}&quot;</span>
+              <span className='font-medium'>{t('pages.server.files.searchBanner.query', {})}</span>{' '}
+              <span className='text-(--mantine-color-dimmed)'>&quot;{searchInfo.query}&quot;</span>
             </div>
           )}
           {searchInfo.filters.pathFilter?.exclude && searchInfo.filters.pathFilter.exclude.length > 0 && (
             <div>
-              <span className='font-medium text-white/80'>{t('pages.server.files.searchBanner.excluded', {})}</span>{' '}
-              <span className='text-white/60'>{searchInfo.filters.pathFilter.exclude.join(', ')}</span>
+              <span className='font-medium'>{t('pages.server.files.searchBanner.excluded', {})}</span>{' '}
+              <span className='text-(--mantine-color-dimmed)'>{searchInfo.filters.pathFilter.exclude.join(', ')}</span>
             </div>
           )}
           {searchInfo.filters.contentFilter && (
             <div>
-              <span className='font-medium text-white/80'>{t('pages.server.files.searchBanner.content', {})}</span>{' '}
-              <span className='text-white/60'>{searchInfo.filters.contentFilter.query || '(empty)'}</span>
+              <span className='font-medium'>{t('pages.server.files.searchBanner.content', {})}</span>{' '}
+              <span className='text-(--mantine-color-dimmed)'>
+                {searchInfo.filters.contentFilter.query || '(empty)'}
+              </span>
             </div>
           )}
           {searchInfo.filters.sizeFilter && (
             <div>
-              <span className='font-medium text-white/80'>{t('pages.server.files.searchBanner.size', {})}</span>{' '}
-              <span className='text-white/60'>
+              <span className='font-medium'>{t('pages.server.files.searchBanner.size', {})}</span>{' '}
+              <span className='text-(--mantine-color-dimmed)'>
                 {searchInfo.filters.sizeFilter.min > 0 && (
                   <span>
                     {t('pages.server.files.searchBanner.min', {})} {bytesToString(searchInfo.filters.sizeFilter.min)}
diff --git a/frontend/src/pages/server/files/FileUploadOverlay.tsx b/frontend/src/pages/server/files/FileUploadOverlay.tsx
index 1ee676ff5..e9a32a176 100644
--- a/frontend/src/pages/server/files/FileUploadOverlay.tsx
+++ b/frontend/src/pages/server/files/FileUploadOverlay.tsx
@@ -15,13 +15,11 @@ function FileUploadOverlay({ visible }: FileUploadOverlayProps) {
   return (
     <div className='fixed w-screen h-screen left-0 top-0 inset-0 z-100 flex items-center justify-center backdrop-blur-md bg-black/20 pointer-events-auto'>
       <div className='pointer-events-none'>
-        <div className='bg-gray-800 rounded-lg p-8 shadow-2xl border-2 border-dashed border-blue-500 dark:border-blue-400'>
+        <div className='bg-(--mantine-color-body) rounded-lg p-8 shadow-2xl border-2 border-dashed border-(--mantine-color-blue-5)'>
           <div className='flex flex-col items-center gap-4 z-100'>
-            <FontAwesomeIcon icon={faUpload} className='text-6xl text-blue-500 dark:text-blue-400 animate-bounce' />
-            <p className='text-xl font-semibold text-gray-800 dark:text-gray-200'>
-              {t('pages.server.files.dropzone.title', {})}
-            </p>
-            <p className='text-sm text-gray-600 dark:text-gray-400'>{t('pages.server.files.dropzone.subtitle', {})}</p>
+            <FontAwesomeIcon icon={faUpload} className='text-6xl text-(--mantine-color-blue-5) animate-bounce' />
+            <p className='text-xl font-semibold'>{t('pages.server.files.dropzone.title', {})}</p>
+            <p className='text-sm text-(--mantine-color-dimmed)'>{t('pages.server.files.dropzone.subtitle', {})}</p>
           </div>
         </div>
       </div>
diff --git a/frontend/src/pages/server/files/ServerFiles.tsx b/frontend/src/pages/server/files/ServerFiles.tsx
index bedd8805d..fea22fa01 100644
--- a/frontend/src/pages/server/files/ServerFiles.tsx
+++ b/frontend/src/pages/server/files/ServerFiles.tsx
@@ -9,6 +9,7 @@ import { FileOpenMode } from 'shared/src/registries/pages/server/files';
 import { z } from 'zod';
 import { httpErrorToHuman } from '@/api/axios.ts';
 import copyFile from '@/api/server/files/copyFile.ts';
+import Card from '@/elements/Card.tsx';
 import { ContextMenuProvider } from '@/elements/ContextMenu.tsx';
 import ServerContentContainer from '@/elements/containers/ServerContentContainer.tsx';
 import SelectionArea from '@/elements/SelectionArea.tsx';
@@ -63,9 +64,13 @@ function ServerFilesColumnRightSection({ name }: { name: ServerFilesColumn }) {
       <FontAwesomeIcon
         icon={faChevronUp}
         size='xs'
-        className={classNames('-mb-0.5', isActive && isAsc ? 'text-white' : 'text-gray-400')}
+        className={classNames('-mb-0.5', isActive && isAsc ? 'text-(--mantine-color-text)' : 'text-gray-400')}
+      />
+      <FontAwesomeIcon
+        icon={faChevronDown}
+        size='xs'
+        className={isActive && !isAsc ? 'text-(--mantine-color-text)' : 'text-gray-400'}
       />
-      <FontAwesomeIcon icon={faChevronDown} size='xs' className={isActive && !isAsc ? 'text-white' : 'text-gray-400'} />
     </div>
   );
 }
@@ -292,9 +297,7 @@ function ServerFilesComponent() {
 
       <Group justify='space-between' align='center' mb='md'>
         <Group>
-          <Title order={1} c='white'>
-            {t('pages.server.files.title', {})}
-          </Title>
+          <Title order={1}>{t('pages.server.files.title', {})}</Title>
 
           <FileSettings />
         </Group>
@@ -304,9 +307,9 @@ function ServerFilesComponent() {
         </Group>
       </Group>
 
-      <div id='file-breadcrumbs-outer' className='bg-[#282828] border border-[#424242] rounded-lg mb-2 p-4'>
+      <Card mb='sm'>
         <FileBreadcrumbs path={decodeURIComponent(browsingDirectory)} />
-      </div>
+      </Card>
 
       <FileSearchBanner resetEntries={resetEntries} />
 
diff --git a/frontend/src/pages/server/files/modals/ArchiveCreateModal.tsx b/frontend/src/pages/server/files/modals/ArchiveCreateModal.tsx
index fc1d77d39..7feacf6e6 100644
--- a/frontend/src/pages/server/files/modals/ArchiveCreateModal.tsx
+++ b/frontend/src/pages/server/files/modals/ArchiveCreateModal.tsx
@@ -91,7 +91,7 @@ export default function ArchiveCreateModal({ files, opened, onClose }: Props) {
           />
 
           <p className='text-sm md:text-base break-all'>
-            <span className='text-neutral-200'>{t('pages.server.files.modal.createArchive.createdAs', {})}</span>
+            <span>{t('pages.server.files.modal.createArchive.createdAs', {})}</span>
             <Code>
               /home/container/
               <span className='text-cyan-200'>
diff --git a/frontend/src/pages/server/files/modals/DirectoryNameModal.tsx b/frontend/src/pages/server/files/modals/DirectoryNameModal.tsx
index 8d5166909..b9dd9b481 100644
--- a/frontend/src/pages/server/files/modals/DirectoryNameModal.tsx
+++ b/frontend/src/pages/server/files/modals/DirectoryNameModal.tsx
@@ -63,7 +63,7 @@ export default function DirectoryNameModal({ opened, onClose }: ModalProps) {
         />
 
         <p className='mt-2 text-sm md:text-base break-all'>
-          <span className='text-neutral-200'>{t('pages.server.files.modal.createDirectory.createdAs', {})}</span>
+          <span>{t('pages.server.files.modal.createDirectory.createdAs', {})}</span>
           <Code>
             /home/container/
             <span className='text-cyan-200'>
diff --git a/frontend/src/pages/server/files/modals/FileCopyModal.tsx b/frontend/src/pages/server/files/modals/FileCopyModal.tsx
index adfb2de57..d739d4972 100644
--- a/frontend/src/pages/server/files/modals/FileCopyModal.tsx
+++ b/frontend/src/pages/server/files/modals/FileCopyModal.tsx
@@ -109,7 +109,7 @@ export default function FileCopyModal({ file, opened, onClose }: Props) {
         />
 
         <p className='mt-2 text-sm md:text-base break-all'>
-          <span className='text-neutral-200'>{t('pages.server.files.modal.copyFile.createdAs', {})}</span>
+          <span>{t('pages.server.files.modal.copyFile.createdAs', {})}</span>
           <Code>
             /home/container/
             <span className='text-cyan-200'>
diff --git a/frontend/src/pages/server/files/modals/FileCopyRemoteModal.tsx b/frontend/src/pages/server/files/modals/FileCopyRemoteModal.tsx
index 1886525ff..f68f235db 100644
--- a/frontend/src/pages/server/files/modals/FileCopyRemoteModal.tsx
+++ b/frontend/src/pages/server/files/modals/FileCopyRemoteModal.tsx
@@ -110,7 +110,7 @@ export default function FileCopyRemoteModal({ files, opened, onClose }: Props) {
         </Stack>
 
         <p className='mt-2 text-sm md:text-base break-all'>
-          <span className='text-neutral-200'>{t('pages.server.files.modal.copyRemote.createdAs', {})}</span>
+          <span>{t('pages.server.files.modal.copyRemote.createdAs', {})}</span>
           <Code>
             /home/container/
             <span className='text-cyan-200'>{form.values.destination.replace(/^(\.\.\/|\/)+/, '')}</span>
diff --git a/frontend/src/pages/server/files/modals/FilePermissionsModal.tsx b/frontend/src/pages/server/files/modals/FilePermissionsModal.tsx
index 6f82257de..c723cc228 100644
--- a/frontend/src/pages/server/files/modals/FilePermissionsModal.tsx
+++ b/frontend/src/pages/server/files/modals/FilePermissionsModal.tsx
@@ -108,9 +108,7 @@ export default function FilePermissionsModal({ file, opened, onClose }: Props) {
     perms: Record<PermissionType, boolean>;
   }) => (
     <Card>
-      <Title order={3} c='white'>
-        {title}
-      </Title>
+      <Title order={3}>{title}</Title>
       <Stack mt='sm'>
         {Object.entries(perms).map(([type, value]: [string, boolean]) => (
           <Checkbox
@@ -151,17 +149,13 @@ export default function FilePermissionsModal({ file, opened, onClose }: Props) {
     <Modal title={t('pages.server.files.modal.filePermissions.title', {})} onClose={onClose} opened={opened} size='lg'>
       <Card>
         <div className='flex flex-row justify-between'>
-          <Title order={3} c='white'>
-            {t('pages.server.files.modal.filePermissions.symbolic', {})}
-          </Title>
+          <Title order={3}>{t('pages.server.files.modal.filePermissions.symbolic', {})}</Title>
           <Badge variant='light' color='blue' size='xl' className='lowercase!'>
             {getPermissionString()}
           </Badge>
         </div>
         <div className='mt-2 flex flex-row justify-between'>
-          <Title order={3} c='white'>
-            {t('pages.server.files.modal.filePermissions.octal', {})}
-          </Title>
+          <Title order={3}>{t('pages.server.files.modal.filePermissions.octal', {})}</Title>
           <Badge variant='light' color='green' size='xl'>
             {getOctalValue()}
           </Badge>
@@ -187,9 +181,7 @@ export default function FilePermissionsModal({ file, opened, onClose }: Props) {
       </Group>
 
       <Card mt='md'>
-        <Title order={3} c='white'>
-          {t('pages.server.files.modal.filePermissions.breakdown', {})}
-        </Title>
+        <Title order={3}>{t('pages.server.files.modal.filePermissions.breakdown', {})}</Title>
         <div className='text-sm space-y-1'>
           <div>
             <Code className='font-bold'>r</Code> - {t('pages.server.files.modal.filePermissions.readPermission', {})}
diff --git a/frontend/src/pages/server/files/modals/FileSearchModal.tsx b/frontend/src/pages/server/files/modals/FileSearchModal.tsx
index 25b137985..b4ff42b6b 100644
--- a/frontend/src/pages/server/files/modals/FileSearchModal.tsx
+++ b/frontend/src/pages/server/files/modals/FileSearchModal.tsx
@@ -119,7 +119,7 @@ export default function FileSearchModal({ opened, onClose }: ModalProps) {
             placeholder={t('pages.server.files.modal.searchFiles.placeholder', {})}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            leftSection={<FontAwesomeIcon icon={faSearch} style={{ color: 'var(--mantine-color-gray-5)' }} />}
+            leftSection={<FontAwesomeIcon icon={faSearch} style={{ color: 'var(--mantine-color-dimmed)' }} />}
             size='md'
             data-autofocus
           />
@@ -131,8 +131,8 @@ export default function FileSearchModal({ opened, onClose }: ModalProps) {
               py='xs'
               style={{
                 borderRadius: 6,
-                background: showAdvanced ? 'var(--mantine-color-dark-6)' : 'transparent',
-                border: `1px solid ${showAdvanced ? 'var(--mantine-color-dark-4)' : 'var(--mantine-color-dark-5)'}`,
+                background: showAdvanced ? 'var(--mantine-color-default)' : 'transparent',
+                border: `1px solid var(--mantine-color-default-border)`,
                 transition: 'all 0.15s ease',
                 paddingLeft: '14px',
                 paddingRight: '14px',
@@ -146,29 +146,30 @@ export default function FileSearchModal({ opened, onClose }: ModalProps) {
                   alignItems: 'center',
                   justifyContent: 'center',
                   borderRadius: 5,
-                  background: activeFiltersCount > 0 ? 'var(--mantine-color-blue-9)' : 'var(--mantine-color-dark-5)',
+                  background:
+                    activeFiltersCount > 0 ? 'var(--mantine-color-blue-filled)' : 'var(--mantine-color-default-hover)',
                 }}
               >
                 <FontAwesomeIcon
                   icon={faSliders}
                   size='xs'
                   style={{
-                    color: activeFiltersCount > 0 ? 'var(--mantine-color-blue-2)' : 'var(--mantine-color-gray-5)',
+                    color: activeFiltersCount > 0 ? '#fff' : 'var(--mantine-color-dimmed)',
                   }}
                 />
               </Box>
-              <Text size='sm' c={showAdvanced ? 'gray.2' : 'gray.5'} fw={500}>
+              <Text size='sm' c={showAdvanced ? undefined : 'dimmed'} fw={500}>
                 {t('pages.server.files.modal.searchFiles.advancedFilters', {})}
               </Text>
               {activeFiltersCount > 0 && (
                 <Box
                   style={{
-                    background: 'var(--mantine-color-blue-9)',
+                    background: 'var(--mantine-color-blue-filled)',
                     borderRadius: 10,
                     padding: '2px 8px',
                     fontSize: 11,
                     fontWeight: 600,
-                    color: 'var(--mantine-color-blue-2)',
+                    color: '#fff',
                   }}
                 >
                   {activeFiltersCount}
@@ -179,7 +180,7 @@ export default function FileSearchModal({ opened, onClose }: ModalProps) {
                 icon={faChevronDown}
                 size='xs'
                 style={{
-                  color: 'var(--mantine-color-gray-6)',
+                  color: 'var(--mantine-color-dimmed)',
                   transform: showAdvanced ? 'rotate(0deg)' : 'rotate(-90deg)',
                   transition: 'transform 0.15s ease',
                 }}
diff --git a/frontend/src/pages/server/files/modals/PullFileModal.tsx b/frontend/src/pages/server/files/modals/PullFileModal.tsx
index eb1f22028..f6cee74d7 100644
--- a/frontend/src/pages/server/files/modals/PullFileModal.tsx
+++ b/frontend/src/pages/server/files/modals/PullFileModal.tsx
@@ -107,7 +107,7 @@ export default function PullFileModal({ opened, onClose }: ModalProps) {
         />
 
         <p className='mt-2 text-sm md:text-base break-all'>
-          <span className='text-neutral-200'>{t('pages.server.files.modal.pullFile.createdAs', {})}</span>
+          <span>{t('pages.server.files.modal.pullFile.createdAs', {})}</span>
           <Code>
             /home/container/
             <span className='text-cyan-200'>
diff --git a/frontend/src/pages/server/schedules/ScheduleView.tsx b/frontend/src/pages/server/schedules/ScheduleView.tsx
index 9edbdab2c..2a6939df0 100644
--- a/frontend/src/pages/server/schedules/ScheduleView.tsx
+++ b/frontend/src/pages/server/schedules/ScheduleView.tsx
@@ -99,9 +99,7 @@ export default function ScheduleView() {
       <Stack gap='lg'>
         <Group justify='space-between'>
           <Group gap='md'>
-            <Title order={1} c='white'>
-              {schedule.name}
-            </Title>
+            <Title order={1}>{schedule.name}</Title>
             <Badge color={schedule.enabled ? 'green' : 'red'} size='lg'>
               {schedule.enabled ? t('common.badge.active', {}) : t('common.badge.inactive', {})}
             </Badge>
diff --git a/frontend/src/translations.ts b/frontend/src/translations.ts
index a5e03d14c..eafe45591 100644
--- a/frontend/src/translations.ts
+++ b/frontend/src/translations.ts
@@ -217,6 +217,8 @@ const baseTranslations = defineTranslations({
           openInVirtualWindow: 'Open in Virtual Window',
           openInPopup: 'Open in Popup',
           openInNewTab: 'Open in New Tab',
+          switchToDark: 'Switch to Dark Mode',
+          switchToLight: 'Switch to Light Mode',
         },
       },
       permissionSelector: {