diff --git a/src/components/draw_area.jsx b/src/components/draw_area.jsx
index 9d464e4..0cf859b 100644
--- a/src/components/draw_area.jsx
+++ b/src/components/draw_area.jsx
@@ -21,10 +21,10 @@ export default function Canvas(props) {
 
   const handleMouseDownRect = (e, id) => {
     const { clientX, clientY } = e;
-    const rectangle = props.rectangles.find((rect) => rect.id === id);
+    const table = props.tables.find((t) => t.id === id);
     setOffset({
-      x: clientX - rectangle.x,
-      y: clientY - rectangle.y,
+      x: clientX - table.x,
+      y: clientY - table.y,
     });
     setDragging(id);
   };
@@ -47,26 +47,25 @@ export default function Canvas(props) {
       const dy = e.clientY - panOffset.y;
       setPanOffset({ x: e.clientX, y: e.clientY });
 
-      const updatedRectangles = props.rectangles.map((rect) => ({
-        ...rect,
-        x: rect.x + dx,
-        y: rect.y + dy,
+      const updatedTables = props.tables.map((t) => ({
+        ...t,
+        x: t.x + dx,
+        y: t.y + dy,
       }));
-      props.setRectangles(updatedRectangles);
+      props.setTables(updatedTables);
     } else if (dragging >= 0) {
-      const { clientX, clientY } = e;
-      const updatedRectangles = props.rectangles.map((rect) => {
-        if (rect.id === dragging) {
-          const updatedRect = {
-            ...rect,
-            x: clientX - offset.x,
-            y: clientY - offset.y,
+      const updatedTables = props.tables.map((t) => {
+        if (t.id === dragging) {
+          const updatedTable = {
+            ...t,
+            x: e.clientX - offset.x,
+            y: e.clientY - offset.y,
           };
-          return updatedRect;
+          return updatedTable;
         }
-        return rect;
+        return t;
       });
-      props.setRectangles(updatedRectangles);
+      props.setTables(updatedTables);
     }
   };
 
@@ -88,17 +87,20 @@ export default function Canvas(props) {
   };
 
   const deleteTable = (id) => {
-    const updatedTables = [...props.rectangles];
+    const updatedTables = [...props.tables];
     updatedTables.splice(id, 1);
-    props.setRectangles(updatedTables);
+    props.setTables(updatedTables);
   };
 
   const handleGripField = (id) => {
     setPanning(false);
     setDragging(-1);
     setLinking(true);
+    handleLinking();
   };
 
+  const handleLinking = () => {};
+
   const [, drop] = useDrop(
     () => ({
       accept: "CARD",
@@ -107,26 +109,35 @@ export default function Canvas(props) {
         const canvasRect = canvas.current.getBoundingClientRect();
         const x = offset.x - canvasRect.left - 100 * 0.5;
         const y = offset.y - canvasRect.top - 100 * 0.5;
-        const newRectangle = {
-          id: props.rectangles.length + 1,
-          x,
-          y,
-          width: 240,
-          height: 100,
-          label: `rect ${props.rectangles.length + 1}`,
+        const newTable = {
+          id: props.tables.length + 1,
+          name: `Table ${props.tables.length + 1}`,
+          x: x,
+          y: y,
+          fields: [
+            {
+              name: "id",
+              type: "UUID",
+              default: "",
+              primary: true,
+              unique: true,
+              notNull: true,
+              increment: true,
+            },
+          ],
         };
-        props.setRectangles([...props.rectangles, newRectangle]);
+        props.setTables((prev) => [...prev, newTable]);
         props.setCode((prev) =>
           prev === ""
-            ? `CREATE TABLE \`${newRectangle.label}\`;`
-            : `${prev}\n\nCREATE TABLE \`${newRectangle.label}\`;`
+            ? `CREATE TABLE \`${newTable.name}\`;`
+            : `${prev}\n\nCREATE TABLE \`${newTable.name}\`;`
         );
       },
       collect: (monitor) => ({
         isOver: !!monitor.isOver(),
       }),
     }),
-    [props.rectangles]
+    [props.tables]
   );
   return (
     <div ref={drop} className="flex-grow" id="canvas">
@@ -168,20 +179,17 @@ export default function Canvas(props) {
           </defs>
 
           <rect width="100%" height="100%" fill="url(#grid)" />
-          {props.rectangles.map((rectangle, i) => (
+          {props.tables.map((table, i) => (
             <Rect
-              key={rectangle.id}
+              key={table.id}
               id={i}
-              x={rectangle.x}
-              y={rectangle.y}
-              label={rectangle.label}
-              width={rectangle.width}
-              height={rectangle.height}
+              tableData={table}
+              tables={props.tables}
+              setTables={props.setTables}
               setOnRect={setOnRect}
               handleGripField={handleGripField}
-              // links={links}
               setLine={setLine}
-              onMouseDown={(e) => handleMouseDownRect(e, rectangle.id)}
+              onMouseDown={(e) => handleMouseDownRect(e, table.id)}
               onDelete={deleteTable}
             />
           ))}
diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index 7d2aea2..f1b9258 100644
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@@ -48,19 +48,32 @@ export default function EditorPanel(props) {
         <br />
         <button
           onClick={() => {
-            const newRectangle = {
-              id: props.rectangles.length + 1,
+            const newTable = {
+              id: props.tables.length + 1,
+              name: `Table ${props.tables.length + 1}`,
               x: 0,
               y: 0,
-              width: 240,
-              height: 100,
-              name: `Table ${props.rectangles.length + 1}`,
+              fields: [
+                {
+                  name: "id",
+                  type: "UUID",
+                  default: "",
+                  primary: true,
+                  unique: true,
+                  notNull: true,
+                  increment: true,
+                },
+              ],
             };
-            props.setRectangles([...props.rectangles, newRectangle]);
+            props.setTables(prev => {
+              const updatedTables = [...prev, newTable];
+              console.log(updatedTables);
+              return updatedTables;
+            });
             props.setCode((prev) =>
               prev === ""
-                ? `CREATE TABLE \`${newRectangle.name}\`;`
-                : `${prev}\n\nCREATE TABLE \`${newRectangle.name}\`;`
+                ? `CREATE TABLE \`${newTable.name}\`;`
+                : `${prev}\n\nCREATE TABLE \`${newTable.name}\`;`
             );
           }}
         >
@@ -91,15 +104,24 @@ export default function EditorPanel(props) {
                     return;
                   }
                   map.current.set(t.table, t);
-                  const newRectangle = {
-                    id: props.rectangles.length + 1,
+                  const newTable = {
+                    id: props.tables.length + 1,
+                    name: `Table ${props.tables.length + 1}`,
                     x: 0,
                     y: 0,
-                    width: 240,
-                    height: 100,
-                    name: `rect ${props.rectangles.length + 1}`,
+                    fields: [
+                      {
+                        name: "id",
+                        type: "UUID",
+                        default: "",
+                        primary: true,
+                        unique: true,
+                        notNull: true,
+                        increment: true,
+                      },
+                    ],
                   };
-                  props.setRectangles([...props.rectangles, newRectangle]);
+                  props.setTables((prev)=>[...prev, newTable]);
                 });
               });
             } catch (e) {
diff --git a/src/components/rect.jsx b/src/components/rect.jsx
index 9966794..716a633 100644
--- a/src/components/rect.jsx
+++ b/src/components/rect.jsx
@@ -21,20 +21,10 @@ import {
 const Rect = (props) => {
   const [isHovered, setIsHovered] = useState(false);
   const [hoveredField, setHoveredField] = useState(-1);
-  const [name, setName] = useState("New Table");
+  const [name, setName] = useState(props.tableData.name);
   const [visible, setVisible] = useState(false);
   const [editFieldVisible, setEditFieldVisible] = useState(-1);
-  const [fields, setFields] = useState([
-    {
-      name: "id",
-      type: "UUID",
-      default: "",
-      primary: true,
-      unique: true,
-      notNull: true,
-      increment: true,
-    },
-  ]);
+
   const [field, setField] = useState({
     name: "",
     type: "",
@@ -45,12 +35,13 @@ const Rect = (props) => {
     increment: false,
   });
 
-  const handleOkEdit = () => {
-    setFields((prev) => {
-      const updatedFields = [...prev];
-      updatedFields[editFieldVisible] = { ...field };
-      return updatedFields;
+  const handleEditField = () => {
+    props.setTables((prev) => {
+      const updatedTables = [...prev];
+      updatedTables[props.id].fields[editFieldVisible] = { ...field };
+      return updatedTables;
     });
+
     setField({
       name: "",
       type: "",
@@ -63,8 +54,15 @@ const Rect = (props) => {
     setEditFieldVisible(-1);
   };
 
-  const handleOk = () => {
-    setFields((prev) => [...prev, field]);
+  const handleAddField = () => {
+    props.setTables((prev) => {
+      const updatedTables = [...prev];
+      updatedTables[props.id].fields = [
+        ...updatedTables[props.id].fields,
+        { ...field },
+      ];
+      return updatedTables;
+    });
     setField({
       name: "",
       type: "",
@@ -77,7 +75,7 @@ const Rect = (props) => {
     setVisible(false);
   };
 
-  const height = fields.length * 36 + 40 + 4;
+  const height = props.tableData.fields.length * 36 + 40 + 4;
 
   const onCheck = (checkedValues) => {
     setField({
@@ -90,9 +88,9 @@ const Rect = (props) => {
     <g>
       <foreignObject
         key={props.id}
-        x={props.x}
-        y={props.y}
-        width={props.width}
+        x={props.tableData.x}
+        y={props.tableData.y}
+        width={240}
         height={height}
         style={{ cursor: "move" }}
         onMouseDown={props.onMouseDown}
@@ -154,7 +152,7 @@ const Rect = (props) => {
               </div>
             )}
           </div>
-          {fields.map((e, i) => {
+          {props.tableData.fields.map((e, i) => {
             return (
               <Popover
                 key={i}
@@ -196,7 +194,9 @@ const Rect = (props) => {
               >
                 <div
                   className={`${
-                    i === fields.length - 1 ? "" : "border-b-2 border-gray-400"
+                    i === props.tableData.fields.length - 1
+                      ? ""
+                      : "border-b-2 border-gray-400"
                   } h-[36px] p-2 flex justify-between`}
                   onMouseEnter={() => {
                     setHoveredField(i);
@@ -205,17 +205,18 @@ const Rect = (props) => {
                     setHoveredField(-1);
                   }}
                 >
-                  <div>
+                  <div
+                    className={`${hoveredField === i ? "text-slate-600" : ""}`}
+                  >
                     <button
-                      className="w-[10px] h-[10px] bg-green-600 rounded-full me-2"
+                      className={`w-[10px] h-[10px] bg-green-600 rounded-full me-2`}
                       onMouseDown={(ev) => {
-                        console.log("mouse down");
                         props.handleGripField(i);
                         props.setLine({
-                          startX: props.x + 15,
-                          startY: props.y + i * 36 + 40 + 19,
-                          endX: props.x + 15,
-                          endY: props.y + i * 36 + 40 + 19,
+                          startX: props.tableData.x + 15,
+                          startY: props.tableData.y + i * 36 + 40 + 19,
+                          endX: props.tableData.x + 15,
+                          endY: props.tableData.y + i * 36 + 40 + 19,
                         });
                       }}
                     ></button>
@@ -235,10 +236,18 @@ const Rect = (props) => {
                         </button>
                         <button
                           className="btn bg-red-800 text-white text-xs py-1 px-2 opacity-80"
-                          onClick={(e) => {
-                            const updatedFields = [...fields];
-                            updatedFields.splice(i, 1);
-                            setFields(updatedFields);
+                          onClick={(ev) => {
+                            props.setTables((prev) => {
+                              const updatedTables = [...prev];
+                              const updatedFields = [
+                                ...updatedTables[props.id].fields,
+                              ];
+                              updatedFields.splice(i, 1);
+                              updatedTables[props.id].fields = [
+                                ...updatedFields,
+                              ];
+                              return updatedTables;
+                            });
                           }}
                         >
                           <IconMinus />
@@ -258,7 +267,7 @@ const Rect = (props) => {
       <Modal
         title="Add new field"
         visible={visible}
-        onOk={handleOk}
+        onOk={handleAddField}
         onCancel={() => setVisible(false)}
         centered
         closeOnEsc={true}
@@ -331,10 +340,12 @@ const Rect = (props) => {
       </Modal>
       <Modal
         title={`Edit field ${
-          editFieldVisible !== -1 ? fields[editFieldVisible].name : ""
+          editFieldVisible !== -1
+            ? props.tableData.fields[editFieldVisible].name
+            : ""
         }`}
         visible={editFieldVisible !== -1}
-        onOk={handleOkEdit}
+        onOk={handleEditField}
         onCancel={() => setEditFieldVisible(-1)}
         centered
         closeOnEsc={true}
@@ -353,7 +364,9 @@ const Rect = (props) => {
                 label="Name"
                 trigger="blur"
                 initValue={
-                  editFieldVisible !== -1 ? fields[editFieldVisible].name : ""
+                  editFieldVisible !== -1
+                    ? props.tableData.fields[editFieldVisible].name
+                    : ""
                 }
               />
             </Col>
@@ -365,7 +378,7 @@ const Rect = (props) => {
                 trigger="blur"
                 initValue={
                   editFieldVisible !== -1
-                    ? fields[editFieldVisible].default
+                    ? props.tableData.fields[editFieldVisible].default
                     : ""
                 }
               />
@@ -385,7 +398,9 @@ const Rect = (props) => {
                 })}
                 filter
                 initValue={
-                  editFieldVisible !== -1 ? fields[editFieldVisible].type : ""
+                  editFieldVisible !== -1
+                    ? props.tableData.fields[editFieldVisible].type
+                    : ""
                 }
               ></Form.Select>
               <div className="flex justify-around mt-2">
@@ -394,7 +409,7 @@ const Rect = (props) => {
                   onChange={onCheck}
                   defaultChecked={
                     editFieldVisible !== -1
-                      ? fields[editFieldVisible].primary
+                      ? props.tableData.fields[editFieldVisible].primary
                       : undefined
                   }
                 >
@@ -405,7 +420,7 @@ const Rect = (props) => {
                   onChange={onCheck}
                   defaultChecked={
                     editFieldVisible !== -1
-                      ? fields[editFieldVisible].unique
+                      ? props.tableData.fields[editFieldVisible].unique
                       : undefined
                   }
                 >
@@ -416,7 +431,7 @@ const Rect = (props) => {
                   onChange={onCheck}
                   defaultChecked={
                     editFieldVisible !== -1
-                      ? fields[editFieldVisible].notNull
+                      ? props.tableData.fields[editFieldVisible].notNull
                       : undefined
                   }
                 >
@@ -427,7 +442,7 @@ const Rect = (props) => {
                   onChange={onCheck}
                   defaultChecked={
                     editFieldVisible !== -1
-                      ? fields[editFieldVisible].increment
+                      ? props.tableData.fields[editFieldVisible].increment
                       : undefined
                   }
                 >
diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx
index 41487dc..6dba941 100644
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@@ -9,7 +9,7 @@ import EditorPanel from "../components/editor_panel";
 
 export default function Editor(props) {
   const [code, setCode] = useState("");
-  const [rectangles, setRectangles] = useState([]);
+  const [tables, setTables] = useState([]);
 
   return (
     <>
@@ -18,14 +18,14 @@ export default function Editor(props) {
       <div className="flex h-full">
         <DndProvider backend={HTML5Backend}>
           <EditorPanel
-            rectangles={rectangles}
-            setRectangles={setRectangles}
+            tables={tables}
+            setTables={setTables}
             code={code}
             setCode={setCode}
           />
           <Canvas
-            rectangles={rectangles}
-            setRectangles={setRectangles}
+            tables={tables}
+            setTables={setTables}
             code={code}
             setCode={setCode}
           />