diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index 8fb48fbf1..82a95b533 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -1287,7 +1287,7 @@ export default function Layout(props: ParentProps) {
           </div>
           <div class="shrink-0 w-full pt-3 pb-3 flex flex-col items-center gap-2">
             <Tooltip placement={sidebarProps.mobile ? "bottom" : "right"} value="Settings">
-              <IconButton icon="settings-gear" variant="ghost" size="large" onClick={command.show} />
+              <IconButton disabled icon="settings-gear" variant="ghost" size="large" />
             </Tooltip>
             <Tooltip placement={sidebarProps.mobile ? "bottom" : "right"} value="Help">
               <IconButton
diff --git a/packages/ui/src/components/icon-button.css b/packages/ui/src/components/icon-button.css
index f3f7e1e64..374cd3792 100644
--- a/packages/ui/src/components/icon-button.css
+++ b/packages/ui/src/components/icon-button.css
@@ -67,6 +67,12 @@
     [data-slot="icon-svg"] {
       color: var(--icon-strong-base);
     }
+
+    &:disabled {
+      background-color: var(--icon-strong-disabled);
+      color: var(--icon-invert-base);
+      cursor: not-allowed;
+    }
   }
 
   &[data-variant="ghost"] {
@@ -99,6 +105,10 @@
       /*   color: var(--icon-selected); */
       /* } */
     }
+    &:disabled {
+      color: var(--icon-invert-base);
+      cursor: not-allowed;
+    }
   }
 
   &[data-size="normal"] {
@@ -129,12 +139,6 @@
     letter-spacing: var(--letter-spacing-normal);
   }
 
-  &:disabled {
-    background-color: var(--icon-strong-disabled);
-    color: var(--icon-invert-base);
-    cursor: not-allowed;
-  }
-
   &:focus {
     outline: none;
   }