diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index 677d2b5a33..21d20682d9 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -5,10 +5,8 @@ import { Link } from 'react-router-dom';
 import {
     AppBar,
     Container,
-    FormControlLabel,
     IconButton,
     Tooltip,
-    Switch,
     styled,
     Theme,
 } from '@mui/material';
@@ -31,7 +29,11 @@ import {
     adminMenuRoutes,
     getCondensedRoutes,
 } from 'component/menu/routes';
-import { KeyboardArrowDown } from '@mui/icons-material';
+import {
+    DarkModeOutlined,
+    KeyboardArrowDown,
+    LightModeOutlined,
+} from '@mui/icons-material';
 import { filterByConfig } from 'component/common/util';
 import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions';
 import { useId } from 'hooks/useId';
@@ -239,15 +241,25 @@ const Header: VFC = () => {
                                 uiConfig.flags.ENABLE_DARK_MODE_SUPPORT
                             )}
                             show={
-                                <FormControlLabel
-                                    control={
-                                        <Switch
-                                            onChange={onSetThemeMode}
-                                            checked={themeMode === 'dark'}
-                                        />
+                                <Tooltip
+                                    title={
+                                        themeMode === 'dark'
+                                            ? 'Switch to light theme'
+                                            : 'Switch to dark theme'
                                     }
-                                    label="darkmode"
-                                />
+                                    arrow
+                                >
+                                    <IconButton
+                                        onClick={onSetThemeMode}
+                                        sx={focusable}
+                                    >
+                                        <ConditionallyRender
+                                            condition={themeMode === 'dark'}
+                                            show={<DarkModeOutlined />}
+                                            elseShow={<LightModeOutlined />}
+                                        />
+                                    </IconButton>
+                                </Tooltip>
                             }
                         />
                         <ConditionallyRender