diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
index 67f7fdfd0..c70ce0508 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
@@ -10,6 +10,10 @@ div.sidebar-section {
   }
 
   & > div.content {
-    @apply w-full h-full px-1.5 py-3 rounded-md bg-inv-4;
+    @apply w-full h-full px-1.5 py-3 rounded-md bg-inv-4 opacity-60;
+  }
+
+  &.editing > div.content {
+    @apply opacity-100;
   }
 }
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx
index 29d26a330..3e438905a 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx
@@ -3,6 +3,7 @@ import "./SidebarSection.css";
 import { Typography } from "@/src/components/Typography/Typography";
 import { Button as KButton } from "@kobalte/core/button";
 import Icon from "../Icon/Icon";
+import cx from "classnames";
 
 export interface SidebarSectionProps {
   title: string;
@@ -20,7 +21,7 @@ export const SidebarSection = (props: SidebarSectionProps) => {
   };
 
   return (
-    <div class="sidebar-section">
+    <div class={cx("sidebar-section", { editing: editing() })}>
       <div class="header">
         <Typography
           hierarchy="label"