diff --git a/ui/mantine-ui/package-lock.json b/ui/mantine-ui/package-lock.json
index 41ea67ceba..aec08c440a 100644
--- a/ui/mantine-ui/package-lock.json
+++ b/ui/mantine-ui/package-lock.json
@@ -11,6 +11,7 @@
         "@mantine/code-highlight": "^8.3.16",
         "@mantine/core": "^8.3.13",
         "@mantine/hooks": "^8.3.13",
+        "@tabler/icons-react": "^3.36.1",
         "@tanstack/react-query": "^5.90.21",
         "highlight.js": "^11.11.1",
         "react": "^19.1.0",
@@ -1885,6 +1886,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.36.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.36.1.tgz",
+      "integrity": "sha512-f4Jg3Fof/Vru5ioix/UO4GX+sdDsF9wQo47FbtvG+utIYYVQ/QVAC0QYgcBbAjQGfbdOh2CCf0BgiFOF9Ixtjw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.36.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.36.1.tgz",
+      "integrity": "sha512-/8nOXeNeMoze9xY/QyEKG65wuvRhkT3q9aytaur6Gj8bYU2A98YVJyLc9MRmc5nVvpy+bRlrrwK/Ykr8WGyUWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": ""
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.90.20",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.20.tgz",
diff --git a/ui/mantine-ui/package.json b/ui/mantine-ui/package.json
index d0a583f7dd..3017d90158 100644
--- a/ui/mantine-ui/package.json
+++ b/ui/mantine-ui/package.json
@@ -21,6 +21,7 @@
     "@mantine/core": "^8.3.13",
     "@mantine/hooks": "^8.3.13",
     "@tanstack/react-query": "^5.90.21",
+    "@tabler/icons-react": "^3.36.1",
     "highlight.js": "^11.11.1",
     "react": "^19.1.0",
     "react-dom": "^19.2.4",
diff --git a/ui/mantine-ui/src/components/Header.module.css b/ui/mantine-ui/src/components/Header.module.css
index fdc0a0cc64..4626dd7910 100644
--- a/ui/mantine-ui/src/components/Header.module.css
+++ b/ui/mantine-ui/src/components/Header.module.css
@@ -1,3 +1,9 @@
+.header {
+  background-color: rgb(65, 73, 81);
+  color: #fff;
+  border-bottom: 1px solid var(--mantine-color-gray-6);
+}
+
 .navMain {
   flex: 1;
 }
diff --git a/ui/mantine-ui/src/components/Header.tsx b/ui/mantine-ui/src/components/Header.tsx
index 956a2ae09a..a97f5abfd0 100644
--- a/ui/mantine-ui/src/components/Header.tsx
+++ b/ui/mantine-ui/src/components/Header.tsx
@@ -1,5 +1,6 @@
 import { Link, NavLink, Route, Routes } from 'react-router-dom';
 import { AppShell, Button, Group, Menu, Text } from '@mantine/core';
+import { ThemeSelector } from '@/components/ThemeSelector';
 import { AlertsPage } from '@/pages/Alerts.page';
 import { SilencesPage } from '@/pages/Silences.page';
 import classes from './Header.module.css';
@@ -117,6 +118,9 @@ export const Header = () => {
               {navLinks}
             </Group>
           </Group>
+          <Group visibleFrom="xs" wrap="nowrap" gap="xs">
+            <ThemeSelector />
+          </Group>
         </Group>
       </Group>
     </AppShell.Header>
diff --git a/ui/mantine-ui/src/components/ThemeSelector.tsx b/ui/mantine-ui/src/components/ThemeSelector.tsx
new file mode 100644
index 0000000000..76d8f37a4e
--- /dev/null
+++ b/ui/mantine-ui/src/components/ThemeSelector.tsx
@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { IconBrightnessFilled, IconMoonFilled, IconSunFilled } from '@tabler/icons-react';
+import { ActionIcon, rem, useMantineColorScheme } from '@mantine/core';
+
+export const ThemeSelector: FC = () => {
+  const { colorScheme, setColorScheme } = useMantineColorScheme();
+  const iconProps = {
+    style: { width: rem(20), height: rem(20), display: 'block' },
+    stroke: 1.5,
+  };
+
+  return (
+    <ActionIcon
+      color="gray"
+      title={`Switch to ${colorScheme === 'light' ? 'dark' : colorScheme === 'dark' ? 'browser-preferred' : 'light'} theme`}
+      aria-label={`Switch to ${colorScheme === 'light' ? 'dark' : colorScheme === 'dark' ? 'browser-preferred' : 'light'} theme`}
+      size={32}
+      onClick={() =>
+        setColorScheme(colorScheme === 'light' ? 'dark' : colorScheme === 'dark' ? 'auto' : 'light')
+      }
+    >
+      {colorScheme === 'light' ? (
+        <IconSunFilled {...iconProps} />
+      ) : colorScheme === 'dark' ? (
+        <IconMoonFilled {...iconProps} />
+      ) : (
+        <IconBrightnessFilled {...iconProps} />
+      )}
+    </ActionIcon>
+  );
+};