diff --git a/frontend/src/features/system/SiteHeader.tsx b/frontend/src/features/system/SiteHeader.tsx
index 527bb2e8d8..515787749b 100644
--- a/frontend/src/features/system/SiteHeader.tsx
+++ b/frontend/src/features/system/SiteHeader.tsx
@@ -41,16 +41,6 @@ const SiteHeader = () => {
       <div className="site-header-right-side">
         <StatusIndicator />
 
-        <SettingsModal>
-          <IconButton
-            aria-label="Settings"
-            variant="link"
-            fontSize={24}
-            size={'sm'}
-            icon={<MdSettings />}
-          />
-        </SettingsModal>
-
         <HotkeysModal>
           <IconButton
             aria-label="Hotkeys"
@@ -61,6 +51,17 @@ const SiteHeader = () => {
           />
         </HotkeysModal>
 
+        <Tooltip hasArrow label="Theme" placement={'bottom'}>
+          <IconButton
+            aria-label="Toggle Dark Mode"
+            onClick={toggleColorMode}
+            variant="link"
+            size={'sm'}
+            fontSize={colorModeIconFontSize}
+            icon={colorModeIcon}
+          />
+        </Tooltip>
+
         <Tooltip hasArrow label="Report Bug" placement={'bottom'}>
           <IconButton
             aria-label="Link to Github Issues"
@@ -106,16 +107,15 @@ const SiteHeader = () => {
           />
         </Tooltip>
 
-        <Tooltip hasArrow label="Theme" placement={'bottom'}>
+        <SettingsModal>
           <IconButton
-            aria-label="Toggle Dark Mode"
-            onClick={toggleColorMode}
+            aria-label="Settings"
             variant="link"
+            fontSize={24}
             size={'sm'}
-            fontSize={colorModeIconFontSize}
-            icon={colorModeIcon}
+            icon={<MdSettings />}
           />
-        </Tooltip>
+        </SettingsModal>
       </div>
     </div>
   );