diff --git a/client/.storybook/main.ts b/client/.storybook/main.ts
index 82a430d..03f32f9 100644
--- a/client/.storybook/main.ts
+++ b/client/.storybook/main.ts
@@ -13,8 +13,8 @@ function getAbsolutePath(value: string) {
 }
 const config: StorybookConfig = {
   "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+    "./stories/**/*.mdx",
+    "./stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
   ],
   "addons": [
     getAbsolutePath('@storybook/addon-vitest'),
diff --git a/client/src/ui/Badge/Badge.stories.tsx b/client/.storybook/stories/Badge.stories.tsx
similarity index 95%
rename from client/src/ui/Badge/Badge.stories.tsx
rename to client/.storybook/stories/Badge.stories.tsx
index 959872b..f0ccbf1 100644
--- a/client/src/ui/Badge/Badge.stories.tsx
+++ b/client/.storybook/stories/Badge.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Badge } from './Badge';
+import { Badge } from '../../src/ui/Badge/Badge';
 
 const meta: Meta<typeof Badge> = {
   title: 'UI/Badge',
diff --git a/client/src/ui/Breadcrumbs/Breadcrumbs.stories.tsx b/client/.storybook/stories/Breadcrumbs.stories.tsx
similarity index 93%
rename from client/src/ui/Breadcrumbs/Breadcrumbs.stories.tsx
rename to client/.storybook/stories/Breadcrumbs.stories.tsx
index 6c34c7c..cce2a08 100644
--- a/client/src/ui/Breadcrumbs/Breadcrumbs.stories.tsx
+++ b/client/.storybook/stories/Breadcrumbs.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Breadcrumbs } from './Breadcrumbs';
+import { Breadcrumbs } from '../../src/ui/Breadcrumbs/Breadcrumbs';
 
 const meta: Meta<typeof Breadcrumbs> = {
   title: 'UI/Breadcrumbs',
diff --git a/client/src/ui/Button/Button.stories.tsx b/client/.storybook/stories/Button.stories.tsx
similarity index 95%
rename from client/src/ui/Button/Button.stories.tsx
rename to client/.storybook/stories/Button.stories.tsx
index d5b5160..0c8229c 100644
--- a/client/src/ui/Button/Button.stories.tsx
+++ b/client/.storybook/stories/Button.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Button } from './Button';
+import { Button } from '../../src/ui/Button/Button';
 
 const meta: Meta<typeof Button> = {
   title: 'UI/Button',
diff --git a/client/src/ui/Card/Card.stories.tsx b/client/.storybook/stories/Card.stories.tsx
similarity index 89%
rename from client/src/ui/Card/Card.stories.tsx
rename to client/.storybook/stories/Card.stories.tsx
index fc4ca3d..350f386 100644
--- a/client/src/ui/Card/Card.stories.tsx
+++ b/client/.storybook/stories/Card.stories.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Card } from './Card';
-import { Badge } from '../Badge/Badge';
-import { Button } from '../Button/Button';
+import { Card } from '../../src/ui/Card/Card';
+import { Badge } from '../../src/ui/Badge/Badge';
+import { Button } from '../../src/ui/Button/Button';
 
 const meta: Meta<typeof Card> = {
   title: 'UI/Card',
diff --git a/client/src/ui/Colors.stories.tsx b/client/.storybook/stories/Colors.stories.tsx
similarity index 98%
rename from client/src/ui/Colors.stories.tsx
rename to client/.storybook/stories/Colors.stories.tsx
index 0aec90c..7e36793 100644
--- a/client/src/ui/Colors.stories.tsx
+++ b/client/.storybook/stories/Colors.stories.tsx
@@ -32,7 +32,7 @@ const surfaceColors = [
   { name: 'Primary fg', token: '--color-primary-fg', hex: '#2D3339' },
 ];
 
-function Swatch({ name, token, hex, role }: { name: string; token: string; hex: string; role?: string }) {;
+function Swatch({ name, token, hex, role }: { name: string; token: string; hex: string; role?: string }) {
   return (
     <div style={{
       display: 'flex',
diff --git a/client/src/ui/Input/Input.stories.tsx b/client/.storybook/stories/Input.stories.tsx
similarity index 94%
rename from client/src/ui/Input/Input.stories.tsx
rename to client/.storybook/stories/Input.stories.tsx
index 931eed9..61ea5f2 100644
--- a/client/src/ui/Input/Input.stories.tsx
+++ b/client/.storybook/stories/Input.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Input } from './Input';
+import { Input } from '../../src/ui/Input/Input';
 
 const meta: Meta<typeof Input> = {
   title: 'UI/Input',
diff --git a/client/src/ui/Select/Select.stories.tsx b/client/.storybook/stories/Select.stories.tsx
similarity index 96%
rename from client/src/ui/Select/Select.stories.tsx
rename to client/.storybook/stories/Select.stories.tsx
index 868c235..511b7f7 100644
--- a/client/src/ui/Select/Select.stories.tsx
+++ b/client/.storybook/stories/Select.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Select } from './Select';
+import { Select } from '../../src/ui/Select/Select';
 
 const ENVIRONMENTS = [
   { value: 'dev', label: 'Development' },
diff --git a/client/src/ui/SidePanel/SidePanel.stories.tsx b/client/.storybook/stories/SidePanel.stories.tsx
similarity index 80%
rename from client/src/ui/SidePanel/SidePanel.stories.tsx
rename to client/.storybook/stories/SidePanel.stories.tsx
index bd84d90..0a03f52 100644
--- a/client/src/ui/SidePanel/SidePanel.stories.tsx
+++ b/client/.storybook/stories/SidePanel.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SidePanel } from './SidePanel';
+import { SidePanel } from '../../src/ui/SidePanel/SidePanel';
 
 const NAV_ITEMS = ['Dashboard', 'Scenarios', 'Environments', 'Reports', 'Settings'];
 
@@ -57,27 +57,3 @@ export const Default: Story = {
     children: <NavList />,
   },
 };
-
-export const DefaultCollapsed: Story = {
-  args: {
-    header: 'Navigation',
-    children: <NavList />,
-    defaultCollapsed: true,
-  },
-};
-
-export const NarrowWidth: Story = {
-  args: {
-    header: 'Filters',
-    width: 180,
-    children: <NavList />,
-  },
-};
-
-export const WideWidth: Story = {
-  args: {
-    header: 'Scenarios',
-    width: 320,
-    children: <NavList />,
-  },
-};
diff --git a/client/src/ui/Table/Table.stories.tsx b/client/.storybook/stories/Table.stories.tsx
similarity index 82%
rename from client/src/ui/Table/Table.stories.tsx
rename to client/.storybook/stories/Table.stories.tsx
index ae00bcd..3469eb5 100644
--- a/client/src/ui/Table/Table.stories.tsx
+++ b/client/.storybook/stories/Table.stories.tsx
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Table } from './Table';
-import { Badge } from '../Badge/Badge';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Table } from '../../src/ui/Table/Table';
+import { Badge } from '../../src/ui/Badge/Badge';
 
 const meta: Meta<typeof Table> = {
   title: 'UI/Table',
@@ -10,8 +10,6 @@ const meta: Meta<typeof Table> = {
 };
 export default meta;
 
-// ── Simple string rows ────────────────────────────────────────────────────────
-
 interface User {
   id: number;
   name: string;
diff --git a/client/.storybook/stories/ThemeSwitcher.stories.tsx b/client/.storybook/stories/ThemeSwitcher.stories.tsx
new file mode 100644
index 0000000..55be3fb
--- /dev/null
+++ b/client/.storybook/stories/ThemeSwitcher.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ThemeSwitcher } from '../../src/ui/ThemeSwitcher/ThemeSwitcher';
+
+const meta: Meta<typeof ThemeSwitcher> = {
+  title: 'UI/ThemeSwitcher',
+  component: ThemeSwitcher,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof ThemeSwitcher>;
+
+export const Default: Story = {};
diff --git a/client/index.html b/client/index.html
index ce6e9e8..ad8df9e 100644
--- a/client/index.html
+++ b/client/index.html
@@ -4,6 +4,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Liquio QA Bot</title>
+    <script>
+      (function () {
+        var stored = localStorage.getItem('qa-bot-theme');
+        var theme = stored === 'light' || stored === 'dark'
+          ? stored
+          : window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', theme);
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/client/package.json b/client/package.json
index d05d64b..e1f0373 100644
--- a/client/package.json
+++ b/client/package.json
@@ -11,6 +11,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "lucide-react": "^1.7.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
diff --git a/client/src/App.module.css b/client/src/App.module.css
index 7387948..6edddbe 100644
--- a/client/src/App.module.css
+++ b/client/src/App.module.css
@@ -7,6 +7,13 @@
   overflow: hidden;
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
 .brand {
   font-weight: 700;
   font-size: 1rem;
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 892b958..179877e 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,5 +1,5 @@
 import styles from './App.module.css';
-import { SidePanel } from './ui';
+import { SidePanel, ThemeSwitcher } from './ui';
 import { EnvironmentsPage } from './pages/EnvironmentsPage';
 import { KeysPage } from './pages/KeysPage';
 import { SessionsPage } from './pages/SessionsPage';
@@ -21,7 +21,12 @@ export default function App() {
   return (
     <div className={styles.shell}>
       <SidePanel
-        header={<span className={styles.brand}>QA Bot</span>}
+        header={
+          <div className={styles.header}>
+            <span className={styles.brand}>QA Bot</span>
+            <ThemeSwitcher />
+          </div>
+        }
         width={220}
       >
         <nav className={styles.nav}>
diff --git a/client/src/hooks/useTheme.ts b/client/src/hooks/useTheme.ts
new file mode 100644
index 0000000..2dd08b4
--- /dev/null
+++ b/client/src/hooks/useTheme.ts
@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+type Theme = 'light' | 'dark';
+
+const STORAGE_KEY = 'qa-bot-theme';
+
+function getInitialTheme(): Theme {
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored === 'light' || stored === 'dark') return stored;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(getInitialTheme);
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem(STORAGE_KEY, theme);
+  }, [theme]);
+
+  function toggleTheme() {
+    setTheme(t => (t === 'light' ? 'dark' : 'light'));
+  }
+
+  return { theme, toggleTheme } as const;
+}
diff --git a/client/src/ui/ThemeSwitcher/ThemeSwitcher.module.css b/client/src/ui/ThemeSwitcher/ThemeSwitcher.module.css
new file mode 100644
index 0000000..45d67ae
--- /dev/null
+++ b/client/src/ui/ThemeSwitcher/ThemeSwitcher.module.css
@@ -0,0 +1,26 @@
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: none;
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background var(--transition), color var(--transition), border-color var(--transition);
+}
+
+.btn:hover {
+  background: var(--color-bg-subtle);
+  color: var(--color-text);
+  border-color: var(--color-text-muted);
+}
+
+.btn:active {
+  background: var(--color-secondary);
+  color: var(--color-secondary-fg);
+}
diff --git a/client/src/ui/ThemeSwitcher/ThemeSwitcher.tsx b/client/src/ui/ThemeSwitcher/ThemeSwitcher.tsx
new file mode 100644
index 0000000..665910f
--- /dev/null
+++ b/client/src/ui/ThemeSwitcher/ThemeSwitcher.tsx
@@ -0,0 +1,18 @@
+import { Sun, Moon } from 'lucide-react';
+import { useTheme } from '../../hooks/useTheme';
+import styles from './ThemeSwitcher.module.css';
+
+export function ThemeSwitcher() {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      className={styles.btn}
+      onClick={toggleTheme}
+      aria-label={theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
+      title={theme === 'dark' ? 'Light mode' : 'Dark mode'}
+    >
+      {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
+    </button>
+  );
+}
diff --git a/client/src/ui/index.ts b/client/src/ui/index.ts
index d3f4ea9..ddf1e2c 100644
--- a/client/src/ui/index.ts
+++ b/client/src/ui/index.ts
@@ -19,5 +19,7 @@ export type { SidePanelProps } from './SidePanel/SidePanel';
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
 export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumbs/Breadcrumbs';
 
+export { ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher';
+
 export { Table } from './Table/Table';
 export type { TableProps, TableColumn } from './Table/Table';
diff --git a/package-lock.json b/package-lock.json
index b3c89a5..1c704c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
       "name": "liquio-qa-bot-client",
       "version": "0.0.1",
       "dependencies": {
+        "lucide-react": "^1.7.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0"
       },
@@ -9798,6 +9799,15 @@
         "node": "20 || >=22"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.7.0.tgz",
+      "integrity": "sha512-yI7BeItCLZJTXikmK4KNUGCKoGzSvbKlfCvw44bU4fXAL6v3gYS4uHD1jzsLkfwODYwI6Drw5Tu9Z5ulDe0TSg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/luxon": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz",