diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
index 207b6d7..e0d859f 100644
--- a/src/components/canvas.jsx
+++ b/src/components/canvas.jsx
@@ -4,10 +4,12 @@ import Table from "./table";
 import { defaultTableTheme, Cardinality, Constraint } from "../data/data";
 import Area from "./area";
 import Relationship from "./relationship";
-import { TableContext } from "../pages/editor";
+import { AreaContext, TableContext } from "../pages/editor";
 
 export default function Canvas(props) {
-  const { tables, setTables } = useContext(TableContext);
+  const { tables, setTables, relationships, setRelationships } =
+    useContext(TableContext);
+  const { areas, setAreas } = useContext(AreaContext);
   const ObjectType = {
     NONE: 0,
     TABLE: 1,
@@ -60,7 +62,7 @@ export default function Canvas(props) {
       });
       setDragging([ObjectType.TABLE, id]);
     } else if (type === ObjectType.AREA) {
-      const area = props.areas.find((t) => t.id === id);
+      const area = areas.find((t) => t.id === id);
       setOffset({
         x: clientX - area.x,
         y: clientY - area.y,
@@ -97,8 +99,8 @@ export default function Canvas(props) {
         }))
       );
 
-      props.setRelationships(
-        props.relationships.map((r) => ({
+      setRelationships(
+        relationships.map((r) => ({
           ...r,
           startX: r.startX + dx,
           startY: r.startY + dy,
@@ -107,8 +109,8 @@ export default function Canvas(props) {
         }))
       );
 
-      props.setAreas(
-        props.areas.map((t) => ({
+      setAreas(
+        areas.map((t) => ({
           ...t,
           x: t.x + dx,
           y: t.y + dy,
@@ -127,7 +129,7 @@ export default function Canvas(props) {
         return t;
       });
       setTables(updatedTables);
-      const updatedRelationShips = props.relationships.map((r) => {
+      const updatedRelationShips = relationships.map((r) => {
         if (r.startTableId === dragging[1]) {
           return {
             ...r,
@@ -143,13 +145,13 @@ export default function Canvas(props) {
         }
         return r;
       });
-      props.setRelationships(updatedRelationShips);
+      setRelationships(updatedRelationShips);
     } else if (
       dragging[0] === ObjectType.AREA &&
       dragging[1] >= 0 &&
       areaResize.id === -1
     ) {
-      const updatedAreas = props.areas.map((t) => {
+      const updatedAreas = areas.map((t) => {
         if (t.id === dragging[1]) {
           const updatedArea = {
             ...t,
@@ -160,7 +162,7 @@ export default function Canvas(props) {
         }
         return t;
       });
-      props.setAreas(updatedAreas);
+      setAreas(updatedAreas);
     } else if (areaResize.id !== -1) {
       if (areaResize.dir === "none") return;
 
@@ -187,7 +189,7 @@ export default function Canvas(props) {
         newHeight = initCoords.height + (e.clientY - initCoords.mouseY);
       }
 
-      props.setAreas((prev) =>
+      setAreas((prev) =>
         prev.map((a) => {
           if (a.id === areaResize.id) {
             return {
@@ -241,7 +243,7 @@ export default function Canvas(props) {
       line.startFieldId === onRect.field
     )
       return;
-    props.setRelationships((prev) => [
+    setRelationships((prev) => [
       ...prev,
       {
         ...line,
@@ -341,7 +343,7 @@ export default function Canvas(props) {
             height="100%"
             fill="url(#pattern-circles)"
           ></rect>
-          {props.areas.map((a) => (
+          {areas.map((a) => (
             <Area
               key={a.id}
               areaData={a}
@@ -350,7 +352,7 @@ export default function Canvas(props) {
               setResize={setAreaResize}
               initCoords={initCoords}
               setInitCoords={setInitCoords}
-              setAreas={props.setAreas}
+              setAreas={setAreas}
             ></Area>
           ))}
           {tables.map((table, i) => (
@@ -372,7 +374,7 @@ export default function Canvas(props) {
               strokeDasharray="8,8"
             />
           )}
-          {props.relationships.map((e, i) => (
+          {relationships.map((e, i) => (
             <Relationship key={i} data={e} />
           ))}
         </svg>
diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index cc8a90d..b3d3d9a 100644
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@@ -1,4 +1,4 @@
-import { React, useState } from "react";
+import { React, useContext, useState } from "react";
 import CodeMirror from "@uiw/react-codemirror";
 import { createTheme } from "@uiw/codemirror-themes";
 import { sql } from "@codemirror/lang-sql";
@@ -9,6 +9,7 @@ import { Tabs } from "@douyinfe/semi-ui";
 import TableOverview from "./table_overview";
 import ReferenceOverview from "./reference_overview";
 import { defaultTableTheme } from "../data/data";
+import { AreaContext } from "../pages/editor";
 // import { TableContext } from "../pages/editor";
 
 const myTheme = createTheme({
@@ -29,6 +30,7 @@ const EditorPanel = (props) => {
   const [tab, setTab] = useState("1");
   // const map = useRef(new Map());
   // const {tables, setTables} = useContext(TableContext);
+  const {areas, setAreas} = useContext(AreaContext);
 
   const tabList = [
     { tab: "Tables", itemKey: "1" },
@@ -38,10 +40,7 @@ const EditorPanel = (props) => {
   ];
   const contentList = [
     <TableOverview />,
-    <ReferenceOverview
-      relationships={props.relationships}
-      setRelationships={props.setRelationships}
-    />,
+    <ReferenceOverview/>,
     <Shape />,
     <CodeMirror
       value={props.code}
@@ -70,15 +69,15 @@ const EditorPanel = (props) => {
         <button
           onClick={() => {
             const newArea = {
-              id: props.areas.length,
-              name: `area_${props.areas.length}`,
+              id: areas.length,
+              name: `area_${areas.length}`,
               x: 0,
               y: 0,
               width: 200,
               height: 200,
               color: defaultTableTheme,
             };
-            props.setAreas((prev) => {
+            setAreas((prev) => {
               const updatedTables = [...prev, newArea];
               return updatedTables;
             });
diff --git a/src/components/reference_overview.jsx b/src/components/reference_overview.jsx
index c7100c8..f2361b8 100644
--- a/src/components/reference_overview.jsx
+++ b/src/components/reference_overview.jsx
@@ -36,18 +36,18 @@ export default function ReferenceOverview(props) {
       dataIndex: "foreign",
     },
   ];
-  const { tables } = useContext(TableContext);
+  const { tables, relationships, setRelationships } = useContext(TableContext);
   const [refActiveIndex, setRefActiveIndex] = useState("");
   const [value, setValue] = useState("");
   const [filteredResult, setFilteredResult] = useState(
-    props.relationships.map((t) => {
+    relationships.map((t) => {
       return t.name;
     })
   );
 
   const handleStringSearch = (value) => {
     setFilteredResult(
-      props.relationships
+      relationships
         .map((t) => {
           return t.name;
         })
@@ -66,7 +66,7 @@ export default function ReferenceOverview(props) {
         onSearch={(v) => handleStringSearch(v)}
         onChange={(v) => setValue(v)}
         onSelect={(v) => {
-          const { id } = props.relationships.find((t) => t.name === v);
+          const { id } = relationships.find((t) => t.name === v);
           setRefActiveIndex(`${id}`);
           document
             .getElementById(`scroll_ref_${id}`)
@@ -79,7 +79,7 @@ export default function ReferenceOverview(props) {
         onChange={(k) => setRefActiveIndex(k)}
         accordion
       >
-        {props.relationships.length <= 0 ? (
+        {relationships.length <= 0 ? (
           <div className="select-none">
             <Empty
               image={
@@ -95,12 +95,12 @@ export default function ReferenceOverview(props) {
             />
           </div>
         ) : (
-          props.relationships.map((r, i) => (
+          relationships.map((r, i) => (
             <div id={`scroll_ref_${r.id}`} key={i}>
               <Collapse.Panel header={<div>{r.name}</div>} itemKey={`${i}`}>
                 <Form
                   onChange={(value) =>
-                    props.setRelationships((prev) =>
+                    setRelationships((prev) =>
                       prev.map((e, idx) =>
                         idx === i ? { ...e, ...value.values } : e
                       )
@@ -202,7 +202,7 @@ export default function ReferenceOverview(props) {
                       value="mandetory"
                       defaultChecked={r.mandetory}
                       onChange={(checkedValues) =>
-                        props.setRelationships((prev) =>
+                        setRelationships((prev) =>
                           prev.map((e, idx) =>
                             idx === i
                               ? {
@@ -233,7 +233,7 @@ export default function ReferenceOverview(props) {
                       block
                       type="danger"
                       onClick={() =>
-                        props.setRelationships((prev) =>
+                        setRelationships((prev) =>
                           prev
                             .filter((e) => e.id !== i)
                             .map((e, idx) => ({ ...e, id: idx }))
diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx
index 6511137..7acc0f0 100644
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@@ -8,6 +8,7 @@ import EditorPanel from "../components/editor_panel";
 
 export const LayoutContext = createContext();
 export const TableContext = createContext();
+export const AreaContext = createContext();
 
 export default function Editor(props) {
   const [code, setCode] = useState("");
@@ -34,49 +35,42 @@ export default function Editor(props) {
     if (w > 340) setWidth(w);
   };
 
-  const layoutValue = { layout, setLayout };
-  const tableValue = { tables, setTables };
-
   return (
-    <LayoutContext.Provider value={layoutValue}>
-      <TableContext.Provider value={tableValue}>
-        <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
+    <LayoutContext.Provider value={{ layout, setLayout }}>
+      <TableContext.Provider
+        value={{ tables, setTables, relationships, setRelationships }}
+      >
+        <AreaContext.Provider value={{ areas, setAreas }}>
+          <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
+                    code={code}
+                    setCode={setCode}
+                    resize={resize}
+                    setResize={setResize}
+                    width={width}
+                  />
+                )}
+                <Canvas
                   code={code}
                   setCode={setCode}
-                  relationships={relationships}
-                  setRelationships={setRelationships}
-                  areas={areas}
-                  setAreas={setAreas}
-                  resize={resize}
-                  setResize={setResize}
-                  width={width}
                 />
-              )}
-              <Canvas
-                code={code}
-                setCode={setCode}
-                relationships={relationships}
-                setRelationships={setRelationships}
-                areas={areas}
-                setAreas={setAreas}
-              />
-            </DndProvider>
-            {layout.services && <Sidebar />}
-          </div>
-        </div>
+              </DndProvider>
+              {layout.services && <Sidebar />}
+            </div>
+          </div>{" "}
+        </AreaContext.Provider>
       </TableContext.Provider>
     </LayoutContext.Provider>
   );