diff --git a/src/components/Sidebar/ThemeSwitcher.tsx b/src/components/Sidebar/ThemeSwitcher.tsx
index 9cbdcbdee..d3fbb2366 100644
--- a/src/components/Sidebar/ThemeSwitcher.tsx
+++ b/src/components/Sidebar/ThemeSwitcher.tsx
@@ -2,13 +2,13 @@ import { ToggleButton, ToggleButtonGroup } from '@mui/material';
 import React from 'react';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
-import { THEMES } from 'types/theme';
+import { THEME_COLOR } from 'constants/theme';
 interface Iprops {
-    theme: THEMES;
-    setTheme: (theme: THEMES) => void;
+    theme: THEME_COLOR;
+    setTheme: (theme: THEME_COLOR) => void;
 }
 export default function ThemeSwitcher({ theme, setTheme }: Iprops) {
-    const handleChange = (event, theme: THEMES) => {
+    const handleChange = (event, theme: THEME_COLOR) => {
         if (theme !== null) {
             setTheme(theme);
         }
@@ -20,10 +20,10 @@ export default function ThemeSwitcher({ theme, setTheme }: Iprops) {
             value={theme}
             exclusive
             onChange={handleChange}>
-            <ToggleButton value={THEMES.LIGHT}>
+            <ToggleButton value={THEME_COLOR.LIGHT}>
                 <LightModeIcon />
             </ToggleButton>
-            <ToggleButton value={THEMES.DARK}>
+            <ToggleButton value={THEME_COLOR.DARK}>
                 <DarkModeIcon />
             </ToggleButton>
         </ToggleButtonGroup>
diff --git a/src/components/Sidebar/UtilitySection.tsx b/src/components/Sidebar/UtilitySection.tsx
index e81584a4f..54d40270c 100644
--- a/src/components/Sidebar/UtilitySection.tsx
+++ b/src/components/Sidebar/UtilitySection.tsx
@@ -11,6 +11,9 @@ import isElectron from 'is-electron';
 import WatchFolder from 'components/WatchFolder';
 import { getDownloadAppMessage } from 'utils/ui';
 
+import ThemeSwitcher from './ThemeSwitcher';
+import { SpaceBetweenFlex } from 'components/Container';
+
 export default function UtilitySection({ closeSidebar }) {
     const router = useRouter();
     const {
@@ -18,6 +21,8 @@ export default function UtilitySection({ closeSidebar }) {
         startLoading,
         watchFolderView,
         setWatchFolderView,
+        theme,
+        setTheme,
     } = useContext(AppContext);
 
     const [recoverModalView, setRecoveryModalView] = useState(false);
@@ -70,6 +75,10 @@ export default function UtilitySection({ closeSidebar }) {
             <SidebarButton onClick={openRecoveryKeyModal}>
                 {constants.RECOVERY_KEY}
             </SidebarButton>
+            <SpaceBetweenFlex sx={{ px: 1.5 }}>
+                {constants.CHOSE_THEME}
+                <ThemeSwitcher theme={theme} setTheme={setTheme} />
+            </SpaceBetweenFlex>
             <SidebarButton onClick={openTwoFactorModal}>
                 {constants.TWO_FACTOR}
             </SidebarButton>
@@ -85,7 +94,6 @@ export default function UtilitySection({ closeSidebar }) {
             {/* <SidebarButton onClick={openThumbnailCompressModal}>
                 {constants.COMPRESS_THUMBNAILS}
             </SidebarButton> */}
-
             <RecoveryKey
                 show={recoverModalView}
                 onHide={closeRecoveryKeyModal}
@@ -98,7 +106,6 @@ export default function UtilitySection({ closeSidebar }) {
                 setLoading={startLoading}
             />
             <WatchFolder open={watchFolderView} onClose={closeWatchFolder} />
-
             {/* <FixLargeThumbnails
                 isOpen={fixLargeThumbsView}
                 hide={() => setFixLargeThumbsView(false)}