diff --git a/components/log-viewer-webui/client/package-lock.json b/components/log-viewer-webui/client/package-lock.json
index 3b521151cc..2c2a65039b 100644
--- a/components/log-viewer-webui/client/package-lock.json
+++ b/components/log-viewer-webui/client/package-lock.json
@@ -12,6 +12,7 @@
         "@ant-design/v5-patch-for-react-19": "^1.0.3",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
+        "@mui/icons-material": "^7.1.0",
         "@mui/joy": "^5.0.0-beta.51",
         "@sinclair/typebox": "^0.34.25",
         "antd": "^5.24.5",
@@ -427,13 +428,10 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.9.tgz",
-      "integrity": "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==",
+      "version": "7.27.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.4.tgz",
+      "integrity": "sha512-t3yaEOuGu9NlIZ+hIeGbBjFtZT7j2cb2tg0fuaJKeGotchRjjLfrBA9Kwf8quhpP1EUuxModQg04q/mBwyg8uA==",
       "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1502,6 +1500,32 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.1.0.tgz",
+      "integrity": "sha512-1mUPMAZ+Qk3jfgL5ftRR06ATH/Esi0izHl1z56H+df6cwIlCWG66RXciUqeJCttbOXOQ5y2DCjLZI/4t3Yg3LA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^7.1.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/joy": {
       "version": "5.0.0-beta.51",
       "resolved": "https://registry.npmjs.org/@mui/joy/-/joy-5.0.0-beta.51.tgz",
@@ -1543,6 +1567,202 @@
         }
       }
     },
+    "node_modules/@mui/material": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.1.0.tgz",
+      "integrity": "sha512-ahUJdrhEv+mCp4XHW+tHIEYzZMSRLg8z4AjUOsj44QpD1ZaMxQoVOG2xiHvLFdcsIPbgSRx1bg1eQSheHBgvtg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.27.1",
+        "@mui/core-downloads-tracker": "^7.1.0",
+        "@mui/system": "^7.1.0",
+        "@mui/types": "^7.4.2",
+        "@mui/utils": "^7.1.0",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.1.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^7.1.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/@mui/core-downloads-tracker": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.0.tgz",
+      "integrity": "sha512-E0OqhZv548Qdc0PwWhLVA2zmjJZSTvaL4ZhoswmI8NJEC1tpW2js6LLP827jrW9MEiXYdz3QS6+hask83w74yQ==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/material/node_modules/@mui/private-theming": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.1.0.tgz",
+      "integrity": "sha512-4Kck4jxhqF6YxNwJdSae1WgDfXVg0lIH6JVJ7gtuFfuKcQCgomJxPvUEOySTFRPz1IZzwz5OAcToskRdffElDA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.27.1",
+        "@mui/utils": "^7.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/@mui/styled-engine": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.1.0.tgz",
+      "integrity": "sha512-m0mJ0c6iRC+f9hMeRe0W7zZX1wme3oUX0+XTVHjPG7DJz6OdQ6K/ggEOq7ZdwilcpdsDUwwMfOmvO71qDkYd2w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.27.1",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/@mui/system": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.1.0.tgz",
+      "integrity": "sha512-iedAWgRJMCxeMHvkEhsDlbvkK+qKf9me6ofsf7twk/jfT4P1ImVf7Rwb5VubEA0sikrVL+1SkoZM41M4+LNAVA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.27.1",
+        "@mui/private-theming": "^7.1.0",
+        "@mui/styled-engine": "^7.1.0",
+        "@mui/types": "^7.4.2",
+        "@mui/utils": "^7.1.0",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/@mui/utils": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.1.0.tgz",
+      "integrity": "sha512-/OM3S8kSHHmWNOP+NH9xEtpYSG10upXeQ0wLZnfDgmgadTAk5F4MQfFLyZ5FCRJENB3eRzltMmaNl6UtDnPovw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.27.1",
+        "@mui/types": "^7.4.2",
+        "@types/prop-types": "^15.7.14",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.1.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/private-theming": {
       "version": "5.16.14",
       "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.14.tgz",
@@ -1643,10 +1863,13 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.2.21",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.21.tgz",
-      "integrity": "sha512-6HstngiUxNqLU+/DPqlUJDIPbzUBxIVHb1MmXP0eTWDIROiCR2viugXpEif0PPe2mLqqakPzzRClWAnK+8UJww==",
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.2.tgz",
+      "integrity": "sha512-edRc5JcLPsrlNFYyTPxds+d5oUovuUxnnDtpJUbP6WMeV4+6eaX/mqai1ZIWT62lCOe0nlrON0s9HDiv5en5bA==",
       "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.1"
+      },
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -2335,7 +2558,6 @@
       "version": "19.0.10",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.10.tgz",
       "integrity": "sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -2361,6 +2583,16 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
@@ -3816,6 +4048,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -7304,9 +7547,9 @@
       }
     },
     "node_modules/react-is": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
-      "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==",
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.0.tgz",
+      "integrity": "sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==",
       "license": "MIT"
     },
     "node_modules/react-refresh": {
@@ -7369,6 +7612,23 @@
         "node": "*"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -7417,12 +7677,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "license": "MIT"
-    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
diff --git a/components/log-viewer-webui/client/package.json b/components/log-viewer-webui/client/package.json
index e09384372d..1311e899ae 100644
--- a/components/log-viewer-webui/client/package.json
+++ b/components/log-viewer-webui/client/package.json
@@ -17,6 +17,7 @@
     "@ant-design/v5-patch-for-react-19": "^1.0.3",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.0",
     "@mui/joy": "^5.0.0-beta.51",
     "@sinclair/typebox": "^0.34.25",
     "antd": "^5.24.5",
diff --git a/components/log-viewer-webui/client/src/AntdApp.tsx b/components/log-viewer-webui/client/src/AntdApp.tsx
index 4a70cb5f74..28de5c877f 100644
--- a/components/log-viewer-webui/client/src/AntdApp.tsx
+++ b/components/log-viewer-webui/client/src/AntdApp.tsx
@@ -3,7 +3,7 @@ import {RouterProvider} from "react-router";
 import {ConfigProvider} from "antd";
 
 import router from "./router";
-import THEME_CONFIG from "./theme";
+import THEME_CONFIG, {useThemeStore} from "./theme";
 
 import "@ant-design/v5-patch-for-react-19";
 
@@ -14,9 +14,14 @@ import "@ant-design/v5-patch-for-react-19";
  * @return
  */
 const AntApp = () => {
+    const {algorithm} = useThemeStore();
+
     return (
         <ConfigProvider
-            theme={THEME_CONFIG}
+            theme={{
+                ...THEME_CONFIG,
+                algorithm: algorithm,
+            }}
         >
             <RouterProvider router={router}/>
         </ConfigProvider>
diff --git a/components/log-viewer-webui/client/src/components/Layout/MainLayout.module.css b/components/log-viewer-webui/client/src/components/Layout/MainLayout.module.css
index 1cebf0aaad..3ff7216fe7 100644
--- a/components/log-viewer-webui/client/src/components/Layout/MainLayout.module.css
+++ b/components/log-viewer-webui/client/src/components/Layout/MainLayout.module.css
@@ -1,5 +1,6 @@
 .mainLayout {
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
 }
 
 .siderLogoContainer {
@@ -9,9 +10,20 @@
   height: 64px;
 }
 
+.siderContainer {
+  flex-direction: column;
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+}
+
 .siderLogo {
   max-width: 100%;
   max-height: 100%;
   padding-inline: 15%;
   padding-block: 16px;
 }
+
+.siderTopMenu {
+  flex-grow: 1;
+}
diff --git a/components/log-viewer-webui/client/src/components/Layout/MainLayout.tsx b/components/log-viewer-webui/client/src/components/Layout/MainLayout.tsx
index 39510c9a18..916c8ec8c9 100644
--- a/components/log-viewer-webui/client/src/components/Layout/MainLayout.tsx
+++ b/components/log-viewer-webui/client/src/components/Layout/MainLayout.tsx
@@ -1,7 +1,7 @@
-import {useState} from "react";
 import {
     Link,
     Outlet,
+    useLocation,
 } from "react-router";
 
 import {
@@ -15,45 +15,57 @@ import {
 } from "antd";
 
 import styles from "./MainLayout.module.css";
+import ThemeToggleMenuItem from "./ThemeToggleMenuItem";
 
 
 const {Sider} = Layout;
 
 type MenuItem = Required<MenuProps>["items"][number];
 
-const SIDEBAR_MENU_ITEMS: MenuItem[] = [
+const sidebarTopMenuItems: MenuItem[] = [
+    {type: "divider"},
     {label: <Link to={"/ingest"}>Ingest</Link>, key: "/ingest", icon: <UploadOutlined/>},
     {label: <Link to={"/search"}>Search</Link>, key: "/search", icon: <SearchOutlined/>},
 ];
 
+const sidebarBottomMenuItems = [
+    <ThemeToggleMenuItem key={"theme-toggle"}/>,
+];
+
 /**
  * The main layout of web ui.
  *
  * @return
  */
 const MainLayout = () => {
-    const [collapsed, setCollapsed] = useState(false);
+    const {pathname} = useLocation();
 
     return (
         <Layout className={styles["mainLayout"]}>
             <Sider
-                collapsed={collapsed}
+                collapsedWidth={50}
                 collapsible={true}
                 theme={"light"}
                 width={150}
-                onCollapse={(value) => {
-                    setCollapsed(value);
-                }}
             >
-                <div className={styles["siderLogoContainer"]}>
-                    <img
-                        alt={"CLP Logo"}
-                        className={styles["siderLogo"]}
-                        src={"/clp-logo.png"}/>
+                <div className={styles["siderContainer"]}>
+                    <div className={styles["siderLogoContainer"]}>
+                        <img
+                            alt={"CLP Logo"}
+                            className={styles["siderLogo"]}
+                            src={"/clp-logo.png"}/>
+                    </div>
+                    <Menu
+                        className={styles["siderTopMenu"]}
+                        items={sidebarTopMenuItems}
+                        selectedKeys={[pathname]}/>
+                    <Menu
+                        selectable={false}
+                        selectedKeys={[]}
+                    >
+                        {sidebarBottomMenuItems}
+                    </Menu>
                 </div>
-                <Menu
-                    items={SIDEBAR_MENU_ITEMS}
-                    mode={"inline"}/>
             </Sider>
             <Layout>
                 <Outlet/>
diff --git a/components/log-viewer-webui/client/src/components/Layout/ThemeToggleMenuItem.tsx b/components/log-viewer-webui/client/src/components/Layout/ThemeToggleMenuItem.tsx
new file mode 100644
index 0000000000..54a60d5947
--- /dev/null
+++ b/components/log-viewer-webui/client/src/components/Layout/ThemeToggleMenuItem.tsx
@@ -0,0 +1,65 @@
+import React, {useCallback} from "react";
+
+import {Menu} from "antd";
+
+import DarkModeOutlinedIcon from "@mui/icons-material/DarkModeOutlined";
+import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined";
+import SettingsBrightnessOutlinedIcon from "@mui/icons-material/SettingsBrightnessOutlined";
+
+import {
+    THEME_MODE,
+    useThemeStore,
+} from "../../theme";
+
+
+const {Item} = Menu;
+
+/**
+ * Maps theme mode to icon.
+ */
+const THEME_MODE_TO_ICON: Record<THEME_MODE, React.ReactNode> = Object.freeze({
+    [THEME_MODE.SYSTEM]: <SettingsBrightnessOutlinedIcon/>,
+    [THEME_MODE.DARK]: <DarkModeOutlinedIcon/>,
+    [THEME_MODE.LIGHT]: <LightModeOutlinedIcon/>,
+});
+
+/**
+ * Maps theme mode to label.
+ */
+const THEME_MODE_TO_LABEL: Record<THEME_MODE, string> = Object.freeze({
+    [THEME_MODE.SYSTEM]: "System",
+    [THEME_MODE.DARK]: "Dark",
+    [THEME_MODE.LIGHT]: "Light",
+});
+
+/**
+ * Displays a theme toggle menu item.
+ *
+ * @return
+ */
+const ThemeToggleMenuItem = () => {
+    const mode = useThemeStore((state) => state.mode);
+
+    const handleClick = useCallback(() => {
+        const {setMode} = useThemeStore.getState();
+        if (mode === THEME_MODE.SYSTEM) {
+            setMode(THEME_MODE.DARK);
+        } else if (mode === THEME_MODE.DARK) {
+            setMode(THEME_MODE.LIGHT);
+        } else {
+            setMode(THEME_MODE.SYSTEM);
+        }
+    }, [mode]);
+
+    return (
+        <Item
+            icon={THEME_MODE_TO_ICON[mode]}
+            onClick={handleClick}
+        >
+            {THEME_MODE_TO_LABEL[mode]}
+        </Item>
+    );
+};
+
+
+export default ThemeToggleMenuItem;
diff --git a/components/log-viewer-webui/client/src/theme.tsx b/components/log-viewer-webui/client/src/theme/index.tsx
similarity index 59%
rename from components/log-viewer-webui/client/src/theme.tsx
rename to components/log-viewer-webui/client/src/theme/index.tsx
index a06f77a6b2..18fa69f625 100644
--- a/components/log-viewer-webui/client/src/theme.tsx
+++ b/components/log-viewer-webui/client/src/theme/index.tsx
@@ -1,4 +1,7 @@
-import type {ThemeConfig} from "antd";
+import type {ThemeConfig} from "antd/es/config-provider/context";
+
+import useThemeStore from "./themeStore";
+import {THEME_MODE} from "./typings";
 
 
 /**
@@ -15,4 +18,8 @@ const THEME_CONFIG: ThemeConfig = Object.freeze({
 });
 
 
+export {
+    THEME_MODE,
+    useThemeStore,
+};
 export default THEME_CONFIG;
diff --git a/components/log-viewer-webui/client/src/theme/themeStore.ts b/components/log-viewer-webui/client/src/theme/themeStore.ts
new file mode 100644
index 0000000000..ad28f82b05
--- /dev/null
+++ b/components/log-viewer-webui/client/src/theme/themeStore.ts
@@ -0,0 +1,56 @@
+import type {MappingAlgorithm} from "antd/es/theme/interface";
+import {create} from "zustand";
+import {persist} from "zustand/middleware";
+
+import {THEME_MODE} from "./typings";
+import {
+    getAlgorithm,
+    getSystemAlgorithm,
+} from "./utils";
+
+
+interface ThemeValues {
+    algorithm: MappingAlgorithm;
+    mode: THEME_MODE;
+}
+
+interface ThemeActions {
+    setMode: (mode: THEME_MODE) => void;
+}
+
+type ThemeState = ThemeValues & ThemeActions;
+
+const THEME_DEFAULT: ThemeValues = {
+    algorithm: getSystemAlgorithm(),
+    mode: THEME_MODE.SYSTEM,
+};
+
+const useThemeStore = create(
+    persist<ThemeState>(
+        (set) => ({
+            ...THEME_DEFAULT,
+            setMode: (newMode: THEME_MODE) => {
+                set({mode: newMode});
+                set({algorithm: getAlgorithm(newMode)});
+            },
+        }),
+        {
+            name: "theme-storage",
+            merge: (persistedState, currentState) => {
+                const safePersistedState = persistedState as Partial<ThemeState>;
+
+                return {
+                    ...currentState,
+                    ...safePersistedState,
+                    ...(
+                        safePersistedState.mode &&
+                        {algorithm: getAlgorithm(safePersistedState.mode)}
+                    ),
+                };
+            },
+        }
+    )
+);
+
+
+export default useThemeStore;
diff --git a/components/log-viewer-webui/client/src/theme/typings.ts b/components/log-viewer-webui/client/src/theme/typings.ts
new file mode 100644
index 0000000000..548dc6e959
--- /dev/null
+++ b/components/log-viewer-webui/client/src/theme/typings.ts
@@ -0,0 +1,8 @@
+enum THEME_MODE {
+    SYSTEM = "system",
+    DARK = "dark",
+    LIGHT = "light",
+}
+
+
+export {THEME_MODE};
diff --git a/components/log-viewer-webui/client/src/theme/utils.ts b/components/log-viewer-webui/client/src/theme/utils.ts
new file mode 100644
index 0000000000..0f6215b6ed
--- /dev/null
+++ b/components/log-viewer-webui/client/src/theme/utils.ts
@@ -0,0 +1,37 @@
+import {theme} from "antd";
+
+import {THEME_MODE} from "./typings";
+
+
+/**
+ * Detects Antd theme algorithm from system theme.
+ *
+ * @return The system theme algorithm.
+ */
+const getSystemAlgorithm = () => {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ?
+        theme.darkAlgorithm :
+        theme.defaultAlgorithm;
+};
+
+/**
+ * Detects Antd theme algorithm for the given theme mode.
+ *
+ * @param mode
+ * @return The theme algorithm.
+ */
+const getAlgorithm = (mode: THEME_MODE) => {
+    if (mode === THEME_MODE.SYSTEM) {
+        return getSystemAlgorithm();
+    } else if (mode === THEME_MODE.DARK) {
+        return theme.darkAlgorithm;
+    }
+
+    return theme.defaultAlgorithm;
+};
+
+
+export {
+    getAlgorithm,
+    getSystemAlgorithm,
+};