diff --git a/src/assets/icons/dropdown.svg b/src/assets/icons/dropdown.svg
new file mode 100644
index 00000000..19978c25
--- /dev/null
+++ b/src/assets/icons/dropdown.svg
@@ -0,0 +1,2 @@
+<?xml version = "1.0" standalone = "no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" font-family="sans-serif" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="rgb(0,0,0)" fill-opacity="1" stroke="rgb(0,0,0)" stroke-opacity="1" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M5,13 l11,10 l11,-10 Z"/></svg>
\ No newline at end of file
diff --git a/src/components/atoms/BlockGroupField.tsx b/src/components/atoms/BlockGroupField.tsx
index a1359c2b..7cf2d027 100644
--- a/src/components/atoms/BlockGroupField.tsx
+++ b/src/components/atoms/BlockGroupField.tsx
@@ -1,13 +1,60 @@
+import { useCallback, useRef } from "react";
+import { useLocalStorageAdopter } from "../../hooks/localStorage";
+import iconDropdown from "../../assets/icons/dropdown.svg";
+
 interface Props {
   label: string;
   children?: React.ReactNode;
+  accordionKey?: string;
 }
 
-export const BlockGroupField: React.FC<Props> = ({ label, children }) => {
+export const BlockGroupField: React.FC<Props> = ({ label, children, accordionKey }) => {
+  const { state: accordionState, setState: setAccordingState } = useLocalStorageAdopter({
+    key: accordionKey,
+    initialValue: false,
+    version: "1",
+  });
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const handleAccordionClick = useCallback(() => {
+    setAccordingState((v) => {
+      const next = !v;
+      if (next) {
+        setTimeout(() => {
+          contentRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+        }, 0);
+      }
+      return next;
+    });
+  }, [setAccordingState]);
+
+  const content = (
+    <div ref={contentRef} className="ml-2 pl-2 border-l border-b border-gray-400 flex flex-col gap-1">
+      {children}
+    </div>
+  );
+
+  if (!accordionKey) {
+    return (
+      <div className="flex flex-col gap-1">
+        <span>{label}:</span>
+        {content}
+      </div>
+    );
+  }
+
   return (
-    <div className="flex flex-col gap-1">
-      <span>{label}:</span>
-      <div className="ml-2 pl-2 border-l border-gray-400 flex flex-col gap-1">{children}</div>
+    <div className={"flex flex-col gap-1 " + (accordionState ? "" : "border-b border-gray-400")}>
+      <button
+        type="button"
+        className="flex items-center justify-between hover:bg-gray-200"
+        onClick={handleAccordionClick}
+      >
+        {label}:
+        <img src={iconDropdown} alt="" className={"ml-auto w-4 h-4 " + (accordionState ? "rotate-180" : "")} />
+      </button>
+      {accordionState ? content : undefined}
     </div>
   );
 };
diff --git a/src/components/shapeInspectorPanel/ClipInspector.tsx b/src/components/shapeInspectorPanel/ClipInspector.tsx
index 4f4c49f0..9cf6e3b6 100644
--- a/src/components/shapeInspectorPanel/ClipInspector.tsx
+++ b/src/components/shapeInspectorPanel/ClipInspector.tsx
@@ -41,7 +41,7 @@ export const ClipInspector: React.FC<Props> = ({ targetShape, updateTargetShape,
   );
 
   return (
-    <BlockGroupField label="Clip">
+    <BlockGroupField label="Clip" accordionKey="clip-inspector">
       <InlineField label="Clip within parent group">
         <ToggleInput value={targetShape.clipping} onChange={handleClippingChange} />
       </InlineField>
diff --git a/src/components/shapeInspectorPanel/GroupConstraintInspector.tsx b/src/components/shapeInspectorPanel/GroupConstraintInspector.tsx
index 9cc373c1..f7c46b25 100644
--- a/src/components/shapeInspectorPanel/GroupConstraintInspector.tsx
+++ b/src/components/shapeInspectorPanel/GroupConstraintInspector.tsx
@@ -35,7 +35,7 @@ export const GroupConstraintInspector: React.FC<Props> = ({ targetShape, updateT
   );
 
   return (
-    <BlockGroupField label="Group constraints">
+    <BlockGroupField label="Group constraints" accordionKey="group-constraint-inspector">
       <BlockField label="Vertical fixed">
         <div className="w-56 flex flex-wrap justify-end gap-1">
           {gcIcons.map((icon, i) => (