diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index 5672f21..9073f41 100644
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@@ -1,4 +1,4 @@
-import { React, useState } from "react";
+import { React, useContext, useState } from "react";
 import {
   IconCaretdown,
   IconChevronRight,
@@ -22,6 +22,7 @@ import {
 import { toPng, toJpeg, toSvg } from "html-to-image";
 import { saveAs } from "file-saver";
 import { enterFullscreen, exitFullscreen } from "../utils";
+import { LayoutContext } from "../pages/editor";
 
 export default function ControlPanel(props) {
   const [visible, setVisible] = useState(false);
@@ -30,6 +31,7 @@ export default function ControlPanel(props) {
     `diagram_${new Date().toISOString()}`
   );
   const [extension, setExtension] = useState("");
+  const {layout, setLayout} = useContext(LayoutContext);
 
   const menu = {
     File: {
@@ -237,7 +239,7 @@ export default function ControlPanel(props) {
 
   return (
     <div>
-      {props.layout.header && header()}
+      {layout.header && header()}
       <div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 sm:mx-1 md:mx-6 text-slate-700 select-none overflow-x-hidden">
         <div className="flex justify-start items-center">
           {layoutDropdown()}
@@ -341,10 +343,10 @@ export default function ControlPanel(props) {
         </div>
         <button
           onClick={(e) =>
-            props.setLayout((prev) => ({ ...prev, header: !prev.header }))
+            setLayout((prev) => ({ ...prev, header: !prev.header }))
           }
         >
-          {props.layout.header ? <IconChevronUp /> : <IconChevronDown />}
+          {layout.header ? <IconChevronUp /> : <IconChevronDown />}
         </button>
       </div>
       <Modal
@@ -511,14 +513,14 @@ export default function ControlPanel(props) {
           <Dropdown.Menu>
             <Dropdown.Item
               icon={
-                props.layout.header ? (
+                layout.header ? (
                   <IconCheckboxTick />
                 ) : (
                   <div className="px-2"></div>
                 )
               }
               onClick={() =>
-                props.setLayout((prev) => ({
+                setLayout((prev) => ({
                   ...prev,
                   header: !prev.header,
                 }))
@@ -532,14 +534,14 @@ export default function ControlPanel(props) {
                 <Dropdown.Menu>
                   <Dropdown.Item
                     icon={
-                      props.layout.tables ? (
+                      layout.tables ? (
                         <IconCheckboxTick />
                       ) : (
                         <div className="px-2"></div>
                       )
                     }
                     onClick={() =>
-                      props.setLayout((prev) => ({
+                      setLayout((prev) => ({
                         ...prev,
                         tables: !prev.tables,
                       }))
@@ -549,14 +551,14 @@ export default function ControlPanel(props) {
                   </Dropdown.Item>
                   <Dropdown.Item
                     icon={
-                      props.layout.relationships ? (
+                      layout.relationships ? (
                         <IconCheckboxTick />
                       ) : (
                         <div className="px-2"></div>
                       )
                     }
                     onClick={() =>
-                      props.setLayout((prev) => ({
+                      setLayout((prev) => ({
                         ...prev,
                         relationships: !prev.relationships,
                       }))
@@ -566,14 +568,14 @@ export default function ControlPanel(props) {
                   </Dropdown.Item>
                   <Dropdown.Item
                     icon={
-                      props.layout.issues ? (
+                      layout.issues ? (
                         <IconCheckboxTick />
                       ) : (
                         <div className="px-2"></div>
                       )
                     }
                     onClick={() =>
-                      props.setLayout((prev) => ({
+                      setLayout((prev) => ({
                         ...prev,
                         issues: !prev.issues,
                       }))
@@ -583,14 +585,14 @@ export default function ControlPanel(props) {
                   </Dropdown.Item>
                   <Dropdown.Item
                     icon={
-                      props.layout.editor ? (
+                      layout.editor ? (
                         <IconCheckboxTick />
                       ) : (
                         <div className="px-2"></div>
                       )
                     }
                     onClick={() =>
-                      props.setLayout((prev) => ({
+                      setLayout((prev) => ({
                         ...prev,
                         editor: !prev.editor,
                       }))
@@ -600,14 +602,14 @@ export default function ControlPanel(props) {
                   </Dropdown.Item>
                   <Dropdown.Item
                     icon={
-                      props.layout.shapes ? (
+                      layout.shapes ? (
                         <IconCheckboxTick />
                       ) : (
                         <div className="px-2"></div>
                       )
                     }
                     onClick={() =>
-                      props.setLayout((prev) => ({
+                      setLayout((prev) => ({
                         ...prev,
                         shapes: !prev.shapes,
                       }))
@@ -620,14 +622,14 @@ export default function ControlPanel(props) {
             >
               <Dropdown.Item
                 icon={
-                  props.layout.sidebar ? (
+                  layout.sidebar ? (
                     <IconCheckboxTick />
                   ) : (
                     <div className="px-2"></div>
                   )
                 }
                 onClick={() =>
-                  props.setLayout((prev) => ({
+                  setLayout((prev) => ({
                     ...prev,
                     sidebar: !prev.sidebar,
                   }))
@@ -638,14 +640,14 @@ export default function ControlPanel(props) {
             </Dropdown>
             <Dropdown.Item
               icon={
-                props.layout.services ? (
+                layout.services ? (
                   <IconCheckboxTick />
                 ) : (
                   <div className="px-2"></div>
                 )
               }
               onClick={() =>
-                props.setLayout((prev) => ({
+                setLayout((prev) => ({
                   ...prev,
                   services: !prev.services,
                 }))
@@ -656,19 +658,19 @@ export default function ControlPanel(props) {
             <Dropdown.Divider />
             <Dropdown.Item
               icon={
-                props.layout.fullscreen ? (
+                layout.fullscreen ? (
                   <IconCheckboxTick />
                 ) : (
                   <div className="px-2"></div>
                 )
               }
               onClick={() => {
-                if (props.layout.fullscreen) {
+                if (layout.fullscreen) {
                   exitFullscreen();
                 } else {
                   enterFullscreen();
                 }
-                props.setLayout((prev) => ({
+                setLayout((prev) => ({
                   ...prev,
                   fullscreen: !prev.fullscreen,
                 }));
diff --git a/src/components/table.jsx b/src/components/table.jsx
index 6ef6524..b39a228 100644
--- a/src/components/table.jsx
+++ b/src/components/table.jsx
@@ -1,4 +1,4 @@
-import { React, useState } from "react";
+import { React, useState, useContext } from "react";
 // import { sqlDataTypes } from "../data/data";
 import { IconEdit, IconPlus, IconMore, IconMinus } from "@douyinfe/semi-icons";
 import {
@@ -10,12 +10,15 @@ import {
   Popover,
   Tag,
   Button,
+  SideSheet,
 } from "@douyinfe/semi-ui";
+import { LayoutContext } from "../pages/editor";
 
 export default function Table(props) {
   const [isHovered, setIsHovered] = useState(false);
   const [hoveredField, setHoveredField] = useState(-1);
-  // const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const {layout} = useContext(LayoutContext);
   // const [editFieldVisible, setEditFieldVisible] = useState(-1);
   // const [field, setField] = useState({
   //   name: "",
@@ -73,6 +76,7 @@ export default function Table(props) {
                     opacity: "0.7",
                     marginRight: "6px",
                   }}
+                  onClick={() => setVisible(true)}
                 ></Button>
                 <Button
                   icon={<IconPlus />}
@@ -106,11 +110,16 @@ export default function Table(props) {
                         ) : (
                           <div>
                             {props.tableData.indices.map((index, k) => (
-                              <div className="flex items-center my-1 px-2 py-1 rounded bg-gray-100" key={k}>
+                              <div
+                                className="flex items-center my-1 px-2 py-1 rounded bg-gray-100"
+                                key={k}
+                              >
                                 <i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
                                 <div>
                                   {index.fields.map((f) => (
-                                    <Tag color="blue" key={f} className="me-1">{f}</Tag>
+                                    <Tag color="blue" key={f} className="me-1">
+                                      {f}
+                                    </Tag>
                                   ))}
                                 </div>
                               </div>
@@ -250,6 +259,14 @@ export default function Table(props) {
           })}
         </div>
       </foreignObject>
+      <SideSheet
+        title="Sidesheet"
+        visible={visible && !layout.sidebar}
+        onCancel={() => setVisible((prev) => !prev)}
+      >
+        <p>This is the content of a basic sidesheet.</p>
+        <p>Here is more content...</p>
+      </SideSheet>
     </g>
   );
 }
diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx
index 2bc9bbd..5c9826d 100644
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, createContext } from "react";
 import Sidebar from "../components/sidebar";
 import ControlPanel from "../components/control_panel";
 import { DndProvider } from "react-dnd";
@@ -6,6 +6,8 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import Canvas from "../components/canvas";
 import EditorPanel from "../components/editor_panel";
 
+export const LayoutContext = createContext();
+
 export default function Editor(props) {
   const [code, setCode] = useState("");
   const [tables, setTables] = useState([]);
@@ -31,21 +33,38 @@ export default function Editor(props) {
     if (w > 340) setWidth(w);
   };
 
+  const value = {layout, setLayout};
+
   return (
-    <div className="h-[100vh] overflow-hidden">
-      <ControlPanel layout={layout} setLayout={setLayout} />
-      <div
-        className={
-          layout.header
-            ? `flex h-[calc(100vh-123.93px)]`
-            : `flex h-[calc(100vh-51.97px)]`
-        }
-        onMouseUp={() => setResize(false)}
-        onMouseMove={dragHandler}
-      >
-        <DndProvider backend={HTML5Backend}>
-          {layout.sidebar && (
-            <EditorPanel
+    <LayoutContext.Provider value={value}>
+      <div className="h-[100vh] overflow-hidden">
+        <ControlPanel/>
+        <div
+          className={
+            layout.header
+              ? `flex h-[calc(100vh-123.93px)]`
+              : `flex h-[calc(100vh-51.97px)]`
+          }
+          onMouseUp={() => setResize(false)}
+          onMouseMove={dragHandler}
+        >
+          <DndProvider backend={HTML5Backend}>
+            {layout.sidebar && (
+              <EditorPanel
+                tables={tables}
+                setTables={setTables}
+                code={code}
+                setCode={setCode}
+                relationships={relationships}
+                setRelationships={setRelationships}
+                areas={areas}
+                setAreas={setAreas}
+                resize={resize}
+                setResize={setResize}
+                width={width}
+              />
+            )}
+            <Canvas
               tables={tables}
               setTables={setTables}
               code={code}
@@ -54,24 +73,11 @@ export default function Editor(props) {
               setRelationships={setRelationships}
               areas={areas}
               setAreas={setAreas}
-              resize={resize}
-              setResize={setResize}
-              width={width}
             />
-          )}
-          <Canvas
-            tables={tables}
-            setTables={setTables}
-            code={code}
-            setCode={setCode}
-            relationships={relationships}
-            setRelationships={setRelationships}
-            areas={areas}
-            setAreas={setAreas}
-          />
-        </DndProvider>
-        {layout.services && <Sidebar />}
+          </DndProvider>
+          {layout.services && <Sidebar />}
+        </div>
       </div>
-    </div>
+    </LayoutContext.Provider>
   );
 }