diff --git a/src/components/Area.jsx b/src/components/Area.jsx
index edf7819..28122a5 100644
--- a/src/components/Area.jsx
+++ b/src/components/Area.jsx
@@ -13,7 +13,7 @@ import {
   defaultTableTheme,
   State,
 } from "../data/data";
-import { StateContext, TabContext } from "../pages/Editor";
+import { StateContext } from "../pages/Editor";
 import useLayout from "../hooks/useLayout";
 import useSettings from "../hooks/useSettings";
 import useUndoRedo from "../hooks/useUndoRedo";
@@ -26,7 +26,6 @@ export default function Area(props) {
   const { setState } = useContext(StateContext);
   const { layout } = useLayout();
   const { settings } = useSettings();
-  const { tab, setTab } = useContext(TabContext);
   const { updateArea, deleteArea } = useAreas();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const { selectedElement, setSelectedElement } = useSelect();
@@ -79,20 +78,27 @@ export default function Area(props) {
         {(hovered ||
           (selectedElement.element === ObjectType.AREA &&
             selectedElement.id === props.areaData.id &&
-            selectedElement.openDialogue &&
+            selectedElement.open &&
             !layout.sidebar)) && (
           <div className="absolute top-2 right-3">
             <Popover
               visible={
                 selectedElement.element === ObjectType.AREA &&
                 selectedElement.id === props.areaData.id &&
-                selectedElement.openDialogue &&
+                selectedElement.open &&
                 !layout.sidebar
               }
               onClickOutSide={() => {
+                if (selectedElement.editFromToolbar) {
+                  setSelectedElement((prev) => ({
+                    ...prev,
+                    editFromToolbar: false,
+                  }));
+                  return;
+                }
                 setSelectedElement((prev) => ({
                   ...prev,
-                  openDialogue: false,
+                  open: false,
                 }));
                 setState(State.SAVING);
               }}
@@ -261,18 +267,25 @@ export default function Area(props) {
                 }}
                 onClick={() => {
                   if (layout.sidebar) {
-                    setTab(Tab.subject_areas);
-                    if (tab !== Tab.subject_areas) return;
+                    setSelectedElement((prev) => ({
+                      ...prev,
+                      element: ObjectType.AREA,
+                      id: props.areaData.id,
+                      currentTab: Tab.subject_areas,
+                      open: true,
+                    }));
+                    if (selectedElement.currentTab !== Tab.subject_areas)
+                      return;
                     document
                       .getElementById(`scroll_area_${props.areaData.id}`)
                       .scrollIntoView({ behavior: "smooth" });
                   } else {
-                    setSelectedElement({
+                    setSelectedElement((prev) => ({
+                      ...prev,
                       element: ObjectType.AREA,
                       id: props.areaData.id,
-                      openDialogue: true,
-                      openCollapse: false,
-                    });
+                      open: true,
+                    }));
                   }
                 }}
               ></Button>
diff --git a/src/components/Canvas.jsx b/src/components/Canvas.jsx
index e6c3994..8ad97e6 100644
--- a/src/components/Canvas.jsx
+++ b/src/components/Canvas.jsx
@@ -102,12 +102,12 @@ export default function Canvas() {
         prevY: note.y,
       });
     }
-    setSelectedElement({
+    setSelectedElement((prev) => ({
+      ...prev,
       element: type,
       id: id,
-      openDialogue: false,
-      openCollapse: false,
-    });
+      open: false,
+    }));
   };
 
   const handleMouseMove = (e) => {
@@ -284,7 +284,12 @@ export default function Canvas() {
         },
       ]);
       setRedoStack([]);
-      setSelectedElement({ element: ObjectType.NONE, id: -1 });
+      setSelectedElement((prev) => ({
+        ...prev,
+        element: ObjectType.NONE,
+        id: -1,
+        open: false,
+      }));
     }
     setPanning({ state: false, x: 0, y: 0 });
     setCursor("default");
diff --git a/src/components/ControlPanel.jsx b/src/components/ControlPanel.jsx
index 96e16bd..e83d827 100644
--- a/src/components/ControlPanel.jsx
+++ b/src/components/ControlPanel.jsx
@@ -43,7 +43,7 @@ import {
   jsonToMariaDB,
   jsonToSQLServer,
 } from "../utils/toSQL";
-import { StateContext, TabContext } from "../pages/Editor";
+import { StateContext } from "../pages/Editor";
 import { IconAddTable, IconAddArea, IconAddNote } from "./CustomIcons";
 import { ObjectType, Action, Tab, State, Cardinality } from "../data/data";
 import jsPDF from "jspdf";
@@ -137,7 +137,6 @@ export default function ControlPanel({
   const { areas, setAreas, updateArea, addArea, deleteArea } = useAreas();
   const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo();
   const { selectedElement, setSelectedElement } = useSelect();
-  const { tab, setTab } = useContext(TabContext);
   const { transform, setTransform } = useTransform();
 
   const invertLayout = (component) =>
@@ -574,54 +573,55 @@ export default function ControlPanel({
   const edit = () => {
     if (selectedElement.element === ObjectType.TABLE) {
       if (!layout.sidebar) {
-        setSelectedElement({
-          element: ObjectType.TABLE,
-          id: selectedElement.id,
-          openDialogue: true,
-          openCollapse: false,
-        });
+        setSelectedElement((prev) => ({
+          ...prev,
+          open: true,
+        }));
       } else {
-        setTab(Tab.tables);
-        setSelectedElement({
-          element: ObjectType.TABLE,
-          id: selectedElement.id,
-          openDialogue: false,
-          openCollapse: true,
-        });
-        if (tab !== Tab.tables) return;
+        setSelectedElement((prev) => ({
+          ...prev,
+          open: true,
+          currentTab: Tab.tables,
+        }));
+        if (selectedElement.currentTab !== Tab.tables) return;
         document
           .getElementById(`scroll_table_${selectedElement.id}`)
           .scrollIntoView({ behavior: "smooth" });
       }
     } else if (selectedElement.element === ObjectType.AREA) {
       if (layout.sidebar) {
-        setTab(Tab.subject_areas);
-        if (tab !== Tab.subject_areas) return;
+        setSelectedElement((prev) => ({
+          ...prev,
+          currentTab: Tab.subject_areas,
+        }));
+        if (selectedElement.currentTab !== Tab.subject_areas) return;
         document
           .getElementById(`scroll_area_${selectedElement.id}`)
           .scrollIntoView({ behavior: "smooth" });
       } else {
-        setSelectedElement({
-          element: ObjectType.AREA,
-          id: selectedElement.id,
-          openDialogue: true,
-          openCollapse: false,
-        });
+        setSelectedElement((prev) => ({
+          ...prev,
+          open: true,
+          editFromToolbar: true,
+        }));
       }
     } else if (selectedElement.element === ObjectType.NOTE) {
       if (layout.sidebar) {
-        setTab(Tab.notes);
-        if (tab !== Tab.notes) return;
+        setSelectedElement((prev) => ({
+          ...prev,
+          currentTab: Tab.notes,
+          open: false,
+        }));
+        if (selectedElement.currentTab !== Tab.notes) return;
         document
           .getElementById(`scroll_note_${selectedElement.id}`)
           .scrollIntoView({ behavior: "smooth" });
       } else {
-        setSelectedElement({
-          element: ObjectType.NOTE,
-          id: selectedElement.id,
-          openDialogue: true,
-          openCollapse: false,
-        });
+        setSelectedElement((prev) => ({
+          ...prev,
+          open: true,
+          editFromToolbar: true,
+        }));
       }
     }
   };
diff --git a/src/components/Note.jsx b/src/components/Note.jsx
index 6477da5..6d3fbf4 100644
--- a/src/components/Note.jsx
+++ b/src/components/Note.jsx
@@ -1,5 +1,5 @@
 import { useContext, useState } from "react";
-import { TabContext, StateContext } from "../pages/Editor";
+import { StateContext } from "../pages/Editor";
 import { Action, ObjectType, noteThemes, Tab, State } from "../data/data";
 import { Input, Button, Popover, Toast } from "@douyinfe/semi-ui";
 import {
@@ -12,25 +12,24 @@ import useUndoRedo from "../hooks/useUndoRedo";
 import useSelect from "../hooks/useSelect";
 import useNotes from "../hooks/useNotes";
 
-export default function Note(props) {
-  const [editField, setEditField] = useState({});
-  const [hovered, setHovered] = useState(false);
+export default function Note({ data, onMouseDown }) {
   const w = 180;
   const r = 3;
   const fold = 24;
+  const [editField, setEditField] = useState({});
+  const [hovered, setHovered] = useState(false);
+  const { layout } = useLayout();
+  const { setState } = useContext(StateContext);
   const { updateNote, deleteNote } = useNotes();
   const { setUndoStack, setRedoStack } = useUndoRedo();
-  const { setState } = useContext(StateContext);
-  const { layout } = useLayout();
-  const { tab, setTab } = useContext(TabContext);
   const { selectedElement, setSelectedElement } = useSelect();
 
   const handleChange = (e) => {
-    const textarea = document.getElementById(`note_${props.data.id}`);
+    const textarea = document.getElementById(`note_${data.id}`);
     textarea.style.height = "0";
     textarea.style.height = textarea.scrollHeight + "px";
     const newHeight = textarea.scrollHeight + 41;
-    updateNote(props.data.id, { content: e.target.value, height: newHeight });
+    updateNote(data.id, { content: e.target.value, height: newHeight });
   };
 
   return (
@@ -39,23 +38,21 @@ export default function Note(props) {
       onMouseLeave={() => setHovered(false)}
     >
       <path
-        d={`M${props.data.x + fold} ${props.data.y} L${props.data.x + w - r} ${
-          props.data.y
-        } A${r} ${r} 0 0 1 ${props.data.x + w} ${props.data.y + r} L${
-          props.data.x + w
-        } ${props.data.y + props.data.height - r} A${r} ${r} 0 0 1 ${
-          props.data.x + w - r
-        } ${props.data.y + props.data.height} L${props.data.x + r} ${
-          props.data.y + props.data.height
-        } A${r} ${r} 0 0 1 ${props.data.x} ${
-          props.data.y + props.data.height - r
-        } L${props.data.x} ${props.data.y + fold}`}
-        fill={props.data.color}
+        d={`M${data.x + fold} ${data.y} L${data.x + w - r} ${
+          data.y
+        } A${r} ${r} 0 0 1 ${data.x + w} ${data.y + r} L${data.x + w} ${
+          data.y + data.height - r
+        } A${r} ${r} 0 0 1 ${data.x + w - r} ${data.y + data.height} L${
+          data.x + r
+        } ${data.y + data.height} A${r} ${r} 0 0 1 ${data.x} ${
+          data.y + data.height - r
+        } L${data.x} ${data.y + fold}`}
+        fill={data.color}
         stroke={
           hovered
             ? "rgb(59 130 246)"
             : selectedElement.element === ObjectType.NOTE &&
-              selectedElement.id === props.data.id
+              selectedElement.id === data.id
             ? "rgb(59 130 246)"
             : "rgb(168 162 158)"
         }
@@ -64,19 +61,17 @@ export default function Note(props) {
         strokeWidth="1.2"
       />
       <path
-        d={`M${props.data.x} ${props.data.y + fold} L${
-          props.data.x + fold - r
-        } ${props.data.y + fold} A${r} ${r} 0 0 0 ${props.data.x + fold} ${
-          props.data.y + fold - r
-        } L${props.data.x + fold} ${props.data.y} L${props.data.x} ${
-          props.data.y + fold
-        } Z`}
-        fill={props.data.color}
+        d={`M${data.x} ${data.y + fold} L${data.x + fold - r} ${
+          data.y + fold
+        } A${r} ${r} 0 0 0 ${data.x + fold} ${data.y + fold - r} L${
+          data.x + fold
+        } ${data.y} L${data.x} ${data.y + fold} Z`}
+        fill={data.color}
         stroke={
           hovered
             ? "rgb(59 130 246)"
             : selectedElement.element === ObjectType.NOTE &&
-              selectedElement.id === props.data.id
+              selectedElement.id === data.id
             ? "rgb(59 130 246)"
             : "rgb(168 162 158)"
         }
@@ -85,29 +80,29 @@ export default function Note(props) {
         strokeWidth="1.2"
       />
       <foreignObject
-        x={props.data.x}
-        y={props.data.y}
+        x={data.x}
+        y={data.y}
         width={w}
-        height={props.data.height}
-        onMouseDown={props.onMouseDown}
+        height={data.height}
+        onMouseDown={onMouseDown}
       >
         <div className="text-gray-900 select-none w-full h-full cursor-move px-3 py-2">
-          <label htmlFor={`note_${props.data.id}`} className="ms-5">
-            {props.data.title}
+          <label htmlFor={`note_${data.id}`} className="ms-5">
+            {data.title}
           </label>
           <textarea
-            id={`note_${props.data.id}`}
-            value={props.data.content}
+            id={`note_${data.id}`}
+            value={data.content}
             onChange={handleChange}
             onFocus={(e) =>
               setEditField({
                 content: e.target.value,
-                height: props.data.height,
+                height: data.height,
               })
             }
             onBlur={(e) => {
               if (e.target.value === editField.content) return;
-              const textarea = document.getElementById(`note_${props.data.id}`);
+              const textarea = document.getElementById(`note_${data.id}`);
               textarea.style.height = "0";
               textarea.style.height = textarea.scrollHeight + "px";
               const newHeight = textarea.scrollHeight + 16 + 20 + 4;
@@ -116,7 +111,7 @@ export default function Note(props) {
                 {
                   action: Action.EDIT,
                   element: ObjectType.NOTE,
-                  nid: props.data.id,
+                  nid: data.id,
                   undo: editField,
                   redo: { content: e.target.value, height: newHeight },
                   message: `Edit note content to "${e.target.value}"`,
@@ -125,25 +120,32 @@ export default function Note(props) {
               setRedoStack([]);
             }}
             className="w-full resize-none outline-none overflow-y-hidden border-none select-none"
-            style={{ backgroundColor: props.data.color }}
+            style={{ backgroundColor: data.color }}
           ></textarea>
           {(hovered ||
             (selectedElement.element === ObjectType.NOTE &&
-              selectedElement.id === props.data.id &&
-              selectedElement.openDialogue &&
+              selectedElement.id === data.id &&
+              selectedElement.open &&
               !layout.sidebar)) && (
             <div className="absolute top-2 right-3">
               <Popover
                 visible={
                   selectedElement.element === ObjectType.NOTE &&
-                  selectedElement.id === props.data.id &&
-                  selectedElement.openDialogue &&
+                  selectedElement.id === data.id &&
+                  selectedElement.open &&
                   !layout.sidebar
                 }
                 onClickOutSide={() => {
+                  if (selectedElement.editFromToolbar) {
+                    setSelectedElement((prev) => ({
+                      ...prev,
+                      editFromToolbar: false,
+                    }));
+                    return;
+                  }
                   setSelectedElement((prev) => ({
                     ...prev,
-                    openDialogue: false,
+                    open: false,
                   }));
                   setState(State.SAVING);
                 }}
@@ -153,11 +155,11 @@ export default function Note(props) {
                     <div className="font-semibold mb-2 ms-1">Edit note</div>
                     <div className="w-[280px] flex items-center mb-2">
                       <Input
-                        value={props.data.title}
+                        value={data.title}
                         placeholder="Title"
                         className="me-2"
                         onChange={(value) =>
-                          updateNote(props.data.id, { title: value })
+                          updateNote(data.id, { title: value })
                         }
                         onFocus={(e) => setEditField({ title: e.target.value })}
                         onBlur={(e) => {
@@ -167,7 +169,7 @@ export default function Note(props) {
                             {
                               action: Action.EDIT,
                               element: ObjectType.NOTE,
-                              nid: props.data.id,
+                              nid: data.id,
                               undo: editField,
                               redo: { title: e.target.value },
                               message: `Edit note title to "${e.target.value}"`,
@@ -193,17 +195,17 @@ export default function Note(props) {
                                       {
                                         action: Action.EDIT,
                                         element: ObjectType.NOTE,
-                                        nid: props.data.id,
-                                        undo: { color: props.data.color },
+                                        nid: data.id,
+                                        undo: { color: data.color },
                                         redo: { color: c },
                                         message: `Edit note color to ${c}`,
                                       },
                                     ]);
                                     setRedoStack([]);
-                                    updateNote(props.data.id, { color: c });
+                                    updateNote(data.id, { color: c });
                                   }}
                                 >
-                                  {props.data.color === c ? (
+                                  {data.color === c ? (
                                     <IconCheckboxTick
                                       style={{ color: "white" }}
                                     />
@@ -220,7 +222,7 @@ export default function Note(props) {
                       >
                         <div
                           className="h-[32px] w-[32px] rounded"
-                          style={{ backgroundColor: props.data.color }}
+                          style={{ backgroundColor: data.color }}
                         />
                       </Popover>
                     </div>
@@ -231,7 +233,7 @@ export default function Note(props) {
                         block
                         onClick={() => {
                           Toast.success(`Note deleted!`);
-                          deleteNote(props.data.id, true);
+                          deleteNote(data.id, true);
                         }}
                       >
                         Delete
@@ -253,18 +255,21 @@ export default function Note(props) {
                   }}
                   onClick={() => {
                     if (layout.sidebar) {
-                      setTab(Tab.notes);
-                      if (tab !== Tab.notes) return;
+                      setSelectedElement((prev) => ({
+                        ...prev,
+                        currentTab: Tab.notes,
+                      }));
+                      if (selectedElement.currentTab !== Tab.notes) return;
                       document
-                        .getElementById(`scroll_note_${props.data.id}`)
+                        .getElementById(`scroll_note_${data.id}`)
                         .scrollIntoView({ behavior: "smooth" });
                     } else {
-                      setSelectedElement({
+                      setSelectedElement((prev) => ({
+                        ...prev,
                         element: ObjectType.NOTE,
-                        id: props.data.id,
-                        openDialogue: true,
-                        openCollapse: false,
-                      });
+                        id: data.id,
+                        open: true,
+                      }));
                     }
                   }}
                 ></Button>
diff --git a/src/components/SidePanel.jsx b/src/components/SidePanel.jsx
index a59e5c5..60fd3e5 100644
--- a/src/components/SidePanel.jsx
+++ b/src/components/SidePanel.jsx
@@ -1,18 +1,17 @@
-import { useContext } from "react";
 import { Tabs } from "@douyinfe/semi-ui";
+import { Tab } from "../data/data";
 import TableOverview from "./TableOverview";
 import ReferenceOverview from "./ReferenceOverview";
 import AreaOverview from "./AreaOverview";
-import { Tab } from "../data/data";
-import { TabContext } from "../pages/Editor";
 import NotesOverview from "./NotesOverview";
-import Issues from "./Issues";
 import TypesOverview from "./TypesOverview";
+import Issues from "./Issues";
 import useLayout from "../hooks/useLayout";
+import useSelect from "../hooks/useSelect";
 
-const SidePanel = (props) => {
-  const { tab, setTab } = useContext(TabContext);
+export default function SidePanel({ width, resize, setResize }) {
   const { layout } = useLayout();
+  const { selectedElement, setSelectedElement } = useSelect();
 
   const tabList = [
     { tab: "Tables", itemKey: Tab.tables },
@@ -22,30 +21,32 @@ const SidePanel = (props) => {
     { tab: "Types", itemKey: Tab.types },
   ];
   const contentList = [
-    <TableOverview key={1}/>,
-    <ReferenceOverview key={2}/>,
-    <AreaOverview key={3}/>,
-    <NotesOverview key={4}/>,
-    <TypesOverview key={5}/>,
+    <TableOverview key={1} />,
+    <ReferenceOverview key={2} />,
+    <AreaOverview key={3} />,
+    <NotesOverview key={4} />,
+    <TypesOverview key={5} />,
   ];
 
   return (
     <div className="flex h-full">
       <div
         className="flex flex-col h-full relative border-r border-color"
-        style={{ width: `${props.width}px` }}
+        style={{ width: `${width}px` }}
       >
         <div className="h-full flex-1 overflow-y-auto">
           <Tabs
             type="card"
-            activeKey={tab}
+            activeKey={selectedElement.currentTab}
             tabList={tabList}
-            onChange={(key) => {
-              setTab(key);
-            }}
+            onChange={(key) =>
+              setSelectedElement((prev) => ({ ...prev, currentTab: key }))
+            }
             collapsible
           >
-            <div className="p-2">{contentList[parseInt(tab) - 1]}</div>
+            <div className="p-2">
+              {contentList[parseInt(selectedElement.currentTab) - 1]}
+            </div>
           </Tabs>
         </div>
         {layout.issues && (
@@ -56,14 +57,12 @@ const SidePanel = (props) => {
       </div>
       <div
         className={`flex justify-center items-center p-1 h-auto hover-2 cursor-col-resize ${
-          props.resize ? "bg-semi-grey-2" : ""
+          resize ? "bg-semi-grey-2" : ""
         }`}
-        onMouseDown={() => props.setResize(true)}
+        onMouseDown={() => setResize(true)}
       >
         <div className="w-1 border-x border-color h-1/6" />
       </div>
     </div>
   );
-};
-
-export default SidePanel;
+}
diff --git a/src/components/Table.jsx b/src/components/Table.jsx
index f7e1727..d2cde55 100644
--- a/src/components/Table.jsx
+++ b/src/components/Table.jsx
@@ -1,4 +1,4 @@
-import { useState, useContext } from "react";
+import { useState } from "react";
 import {
   sqlDataTypes,
   tableThemes,
@@ -31,7 +31,6 @@ import {
   SideSheet,
   Toast,
 } from "@douyinfe/semi-ui";
-import { TabContext } from "../pages/Editor";
 import { getSize, hasCheck, hasPrecision, isSized } from "../utils/toSQL";
 import useLayout from "../hooks/useLayout";
 import useSettings from "../hooks/useSettings";
@@ -47,7 +46,6 @@ export default function Table(props) {
   const { layout } = useLayout();
   const { deleteTable, updateTable, updateField, setRelationships } =
     useTables();
-  const { tab, setTab } = useContext(TabContext);
   const { settings } = useSettings();
   const { types } = useTypes();
   const { setUndoStack, setRedoStack } = useUndoRedo();
@@ -113,21 +111,21 @@ export default function Table(props) {
                   }}
                   onClick={() => {
                     if (!layout.sidebar) {
-                      setSelectedElement({
+                      setSelectedElement((prev) => ({
+                        ...prev,
                         element: ObjectType.TABLE,
                         id: props.tableData.id,
-                        openDialogue: true,
-                        openCollapse: false,
-                      });
+                        open: true,
+                      }));
                     } else {
-                      setTab(Tab.tables);
-                      setSelectedElement({
+                      setSelectedElement((prev) => ({
+                        ...prev,
+                        currentTab: Tab.tables,
                         element: ObjectType.TABLE,
                         id: props.tableData.id,
-                        openDialogue: false,
-                        openCollapse: true,
-                      });
-                      if (tab !== Tab.tables) return;
+                        open: true,
+                      }));
+                      if (selectedElement.currentTab !== Tab.tables) return;
                       document
                         .getElementById(`scroll_table_${props.tableData.id}`)
                         .scrollIntoView({ behavior: "smooth" });
@@ -266,12 +264,13 @@ export default function Table(props) {
         visible={
           selectedElement.element === ObjectType.TABLE &&
           selectedElement.id === props.tableData.id &&
-          selectedElement.openDialogue
+          selectedElement.open &&
+          !layout.sidebar
         }
         onCancel={() =>
           setSelectedElement((prev) => ({
             ...prev,
-            openDialogue: !prev.openDialogue,
+            open: !prev.open,
           }))
         }
         style={{ paddingBottom: "16px" }}
diff --git a/src/components/TableOverview.jsx b/src/components/TableOverview.jsx
index 90476fa..a1a6ea7 100644
--- a/src/components/TableOverview.jsx
+++ b/src/components/TableOverview.jsx
@@ -89,12 +89,11 @@ export default function TableOverview() {
             onChange={(v) => setValue(v)}
             onSelect={(v) => {
               const { id } = tables.find((t) => t.name === v);
-              setSelectedElement({
-                element: ObjectType.TABLE,
+              setSelectedElement((prev) => ({
+                ...prev,
                 id: id,
-                openDialogue: false,
-                openCollapse: true,
-              });
+                open: true,
+              }));
               document
                 .getElementById(`scroll_table_${id}`)
                 .scrollIntoView({ behavior: "smooth" });
@@ -109,14 +108,13 @@ export default function TableOverview() {
         </Col>
       </Row>
       <Collapse
-        activeKey={selectedElement.openCollapse ? `${selectedElement.id}` : ""}
+        activeKey={selectedElement.open ? `${selectedElement.id}` : ""}
         onChange={(k) =>
-          setSelectedElement({
-            element: ObjectType.TABLE,
+          setSelectedElement((prev) => ({
+            ...prev,
             id: parseInt(k),
-            openDialogue: false,
-            openCollapse: true,
-          })
+            open: true,
+          }))
         }
         accordion
       >
diff --git a/src/context/SelectContext.jsx b/src/context/SelectContext.jsx
index 7cb2e59..11f409e 100644
--- a/src/context/SelectContext.jsx
+++ b/src/context/SelectContext.jsx
@@ -1,5 +1,5 @@
 import { createContext, useState } from "react";
-import { ObjectType } from "../data/data";
+import { ObjectType, Tab } from "../data/data";
 
 export const SelectContext = createContext(null);
 
@@ -9,6 +9,9 @@ export default function SelectContextProvider({ children }) {
     id: -1,
     openDialogue: false,
     openCollapse: false,
+    currentTab: Tab.tables,
+    open: false, // open popover or sidesheet when sidebar is disabled
+    openFromToolbar: false, // this is to handle triggering onClickOutside when sidebar is disabled
   });
 
   return (
diff --git a/src/pages/Editor.jsx b/src/pages/Editor.jsx
index 12c48a6..467e2aa 100644
--- a/src/pages/Editor.jsx
+++ b/src/pages/Editor.jsx
@@ -2,7 +2,7 @@ import { useState, createContext, useEffect, useCallback } from "react";
 import ControlPanel from "../components/ControlPanel";
 import Canvas from "../components/Canvas";
 import SidePanel from "../components/SidePanel";
-import { Tab, State } from "../data/data";
+import { State } from "../data/data";
 import { db } from "../data/db";
 import useLayout from "../hooks/useLayout";
 import LayoutContextProvider from "../context/LayoutContext";
@@ -23,7 +23,6 @@ import useTypes from "../hooks/useTypes";
 import TypesContextProvider from "../context/TypesContext";
 
 export const StateContext = createContext();
-export const TabContext = createContext();
 export const TaskContext = createContext();
 
 export default function Editor() {
@@ -56,7 +55,6 @@ function WorkSpace() {
   const { types, setTypes } = useTypes();
   const [resize, setResize] = useState(false);
   const [width, setWidth] = useState(340);
-  const [tab, setTab] = useState(Tab.tables);
   const [tasks, setTasks] = useState([]);
   const { layout } = useLayout();
   const { areas, setAreas } = useAreas();
@@ -316,38 +314,36 @@ function WorkSpace() {
 
   return (
     <StateContext.Provider value={{ state, setState }}>
-      <TabContext.Provider value={{ tab, setTab }}>
-        <div className="h-[100vh] flex flex-col overflow-hidden theme">
-          <TaskContext.Provider value={{ tasks, setTasks, updateTask }}>
-            <ControlPanel
-              diagramId={id}
-              setDiagramId={setId}
-              title={title}
-              setTitle={setTitle}
-              lastSaved={lastSaved}
-              setLastSaved={setLastSaved}
-            />
-          </TaskContext.Provider>
-          <div
-            className="flex h-full overflow-y-auto"
-            onMouseUp={() => setResize(false)}
-            onMouseLeave={() => setResize(false)}
-            onMouseMove={handleResize}
-          >
-            {layout.sidebar && (
-              <SidePanel resize={resize} setResize={setResize} width={width} />
+      <div className="h-[100vh] flex flex-col overflow-hidden theme">
+        <TaskContext.Provider value={{ tasks, setTasks, updateTask }}>
+          <ControlPanel
+            diagramId={id}
+            setDiagramId={setId}
+            title={title}
+            setTitle={setTitle}
+            lastSaved={lastSaved}
+            setLastSaved={setLastSaved}
+          />
+        </TaskContext.Provider>
+        <div
+          className="flex h-full overflow-y-auto"
+          onMouseUp={() => setResize(false)}
+          onMouseLeave={() => setResize(false)}
+          onMouseMove={handleResize}
+        >
+          {layout.sidebar && (
+            <SidePanel resize={resize} setResize={setResize} width={width} />
+          )}
+          <div className="relative w-full h-full overflow-hidden">
+            <Canvas state={state} setState={setState} />
+            {!(layout.sidebar || layout.toolbar || layout.header) && (
+              <div className="fixed right-5 bottom-4">
+                <Controls />
+              </div>
             )}
-            <div className="relative w-full h-full overflow-hidden">
-              <Canvas state={state} setState={setState} />
-              {!(layout.sidebar || layout.toolbar || layout.header) && (
-                <div className="fixed right-5 bottom-4">
-                  <Controls />
-                </div>
-              )}
-            </div>
           </div>
         </div>
-      </TabContext.Provider>
+      </div>
     </StateContext.Provider>
   );
 }