diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index 88c0f8b..88d4f0b 100644
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@@ -395,6 +395,9 @@ export default function ControlPanel(props) {
     },
   };
 
+  const invertLayout = (component) =>
+    setLayout((prev) => ({ ...prev, [component]: !prev[component] }));
+
   const diagramIsEmpty = () => {
     return (
       tables.length === 0 &&
@@ -581,9 +584,7 @@ export default function ControlPanel(props) {
           </button>
         </div>
         <button
-          onClick={(e) =>
-            setLayout((prev) => ({ ...prev, header: !prev.header }))
-          }
+          onClick={() => invertLayout("header")}
           className="flex items-center"
         >
           {layout.header ? <IconChevronUp /> : <IconChevronDown />}
@@ -905,142 +906,35 @@ export default function ControlPanel(props) {
                   <div className="px-2"></div>
                 )
               }
-              onClick={() =>
-                setLayout((prev) => ({
-                  ...prev,
-                  header: !prev.header,
-                }))
-              }
+              onClick={() => invertLayout("header")}
             >
               Header
             </Dropdown.Item>
-            <Dropdown
-              position={"rightTop"}
-              render={
-                <Dropdown.Menu>
-                  <Dropdown.Item
-                    icon={
-                      layout.tables ? (
-                        <IconCheckboxTick />
-                      ) : (
-                        <div className="px-2"></div>
-                      )
-                    }
-                    onClick={() =>
-                      setLayout((prev) => ({
-                        ...prev,
-                        tables: !prev.tables,
-                      }))
-                    }
-                  >
-                    Tables
-                  </Dropdown.Item>
-                  <Dropdown.Item
-                    icon={
-                      layout.relationships ? (
-                        <IconCheckboxTick />
-                      ) : (
-                        <div className="px-2"></div>
-                      )
-                    }
-                    onClick={() =>
-                      setLayout((prev) => ({
-                        ...prev,
-                        relationships: !prev.relationships,
-                      }))
-                    }
-                  >
-                    Relationships
-                  </Dropdown.Item>
-                  <Dropdown.Item
-                    icon={
-                      layout.issues ? (
-                        <IconCheckboxTick />
-                      ) : (
-                        <div className="px-2"></div>
-                      )
-                    }
-                    onClick={() =>
-                      setLayout((prev) => ({
-                        ...prev,
-                        issues: !prev.issues,
-                      }))
-                    }
-                  >
-                    Issues
-                  </Dropdown.Item>
-                  <Dropdown.Item
-                    icon={
-                      layout.areas ? (
-                        <IconCheckboxTick />
-                      ) : (
-                        <div className="px-2"></div>
-                      )
-                    }
-                    onClick={() =>
-                      setLayout((prev) => ({
-                        ...prev,
-                        areas: !prev.areas,
-                      }))
-                    }
-                  >
-                    Subject areas
-                  </Dropdown.Item>
-                  <Dropdown.Item
-                    icon={
-                      layout.editor ? (
-                        <IconCheckboxTick />
-                      ) : (
-                        <div className="px-2"></div>
-                      )
-                    }
-                    onClick={() =>
-                      setLayout((prev) => ({
-                        ...prev,
-                        editor: !prev.editor,
-                      }))
-                    }
-                  >
-                    Editor
-                  </Dropdown.Item>
-                  <Dropdown.Item
-                    icon={
-                      layout.notes ? (
-                        <IconCheckboxTick />
-                      ) : (
-                        <div className="px-2"></div>
-                      )
-                    }
-                    onClick={() =>
-                      setLayout((prev) => ({
-                        ...prev,
-                        notes: !prev.notes,
-                      }))
-                    }
-                  >
-                    Notes
-                  </Dropdown.Item>
-                </Dropdown.Menu>
+            <Dropdown.Item
+              icon={
+                layout.sidebar ? (
+                  <IconCheckboxTick />
+                ) : (
+                  <div className="px-2"></div>
+                )
               }
+              onClick={() => invertLayout("sidebar")}
             >
-              <Dropdown.Item
-                icon={
-                  layout.sidebar ? (
-                    <IconCheckboxTick />
-                  ) : (
-                    <div className="px-2"></div>
-                  )
-                }
-                onClick={() =>
-                  setLayout((prev) => ({
-                    ...prev,
-                    sidebar: !prev.sidebar,
-                  }))
-                }
-              >
-                Sidebar
-              </Dropdown.Item>
-            </Dropdown>
+              Sidebar
+            </Dropdown.Item>
+            <Dropdown.Item
+              icon={
+                layout.issues ? (
+                  <IconCheckboxTick />
+                ) : (
+                  <div className="px-2"></div>
+                )
+              }
+              onClick={() => invertLayout("issues")}
+            >
+              Issues
+            </Dropdown.Item>
+
             <Dropdown.Item
               icon={
                 layout.services ? (
@@ -1049,12 +943,7 @@ export default function ControlPanel(props) {
                   <div className="px-2"></div>
                 )
               }
-              onClick={() =>
-                setLayout((prev) => ({
-                  ...prev,
-                  services: !prev.services,
-                }))
-              }
+              onClick={() => invertLayout("services")}
             >
               Services
             </Dropdown.Item>
@@ -1073,10 +962,7 @@ export default function ControlPanel(props) {
                 } else {
                   enterFullscreen();
                 }
-                setLayout((prev) => ({
-                  ...prev,
-                  fullscreen: !prev.fullscreen,
-                }));
+                invertLayout("fullscreen");
               }}
             >
               Fullscreen
diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index 3a358ad..d6ca63a 100644
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@@ -27,7 +27,6 @@ const myTheme = createTheme({
 });
 
 const EditorPanel = (props) => {
-  // const map = useRef(new Map());
   const { tab, setTab } = useContext(TabContext);
   const { layout } = useContext(LayoutContext);