diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx
index f5fdedb..6e107b0 100644
--- a/src/components/EditorCanvas/Table.jsx
+++ b/src/components/EditorCanvas/Table.jsx
@@ -4,6 +4,7 @@ import {
   ObjectType,
   tableFieldHeight,
   tableHeaderHeight,
+  tableColorStripHeight,
 } from "../../data/constants";
 import {
   IconEdit,
@@ -53,7 +54,7 @@ export default function Table(props) {
         .getElementById(`scroll_table_${tableData.id}`)
         .scrollIntoView({ behavior: "smooth" });
     }
-  }
+  };
 
   return (
     <>
@@ -269,7 +270,9 @@ export default function Table(props) {
     return (
       <div
         className={`${
-          index === tableData.fields.length - 1 || "border-b border-gray-400"
+          index === tableData.fields.length - 1
+            ? ""
+            : "border-b border-gray-400"
         } group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
         onMouseEnter={() => {
           setHoveredField(index);
@@ -296,9 +299,19 @@ export default function Table(props) {
                 startFieldId: index,
                 startTableId: tableData.id,
                 startX: tableData.x + 15,
-                startY: tableData.y + index * 36 + 50 + 19,
+                startY:
+                  tableData.y +
+                  index * tableFieldHeight +
+                  tableHeaderHeight +
+                  tableColorStripHeight +
+                  12,
                 endX: tableData.x + 15,
-                endY: tableData.y + index * 36 + 50 + 19,
+                endY:
+                  tableData.y +
+                  index * tableFieldHeight +
+                  tableHeaderHeight +
+                  tableColorStripHeight +
+                  12,
               }));
             }}
           />
diff --git a/src/components/SimpleCanvas.jsx b/src/components/SimpleCanvas.jsx
index 2d374ac..5adfa44 100644
--- a/src/components/SimpleCanvas.jsx
+++ b/src/components/SimpleCanvas.jsx
@@ -1,17 +1,27 @@
 import { useEffect, useState, useRef } from "react";
-import { Cardinality } from "../data/constants";
+import {
+  Cardinality,
+  tableColorStripHeight,
+  tableFieldHeight,
+  tableHeaderHeight,
+  tableWidth,
+} from "../data/constants";
 import { calcPath } from "../utils/calcPath";
 
 function Table({ table, grab }) {
   const [isHovered, setIsHovered] = useState(false);
   const [hoveredField, setHoveredField] = useState(-1);
-  const height = table.fields.length * 36 + 50 + 7;
+  const height =
+    table.fields.length * tableFieldHeight +
+    tableHeaderHeight +
+    tableColorStripHeight;
+
   return (
     <foreignObject
       key={table.name}
       x={table.x}
       y={table.y}
-      width={200}
+      width={tableWidth}
       height={height}
       className="drop-shadow-lg rounded-md cursor-move"
       onMouseDown={grab}
@@ -161,8 +171,8 @@ export default function SimpleCanvas({ diagram, zoom }) {
       const dy = e.clientY - offset.y;
       setTables((prev) =>
         prev.map((table, i) =>
-          i === dragging ? { ...table, x: dx, y: dy } : table
-        )
+          i === dragging ? { ...table, x: dx, y: dy } : table,
+        ),
       );
     }
   };
diff --git a/src/data/constants.js b/src/data/constants.js
index 350c908..8d8d1e1 100644
--- a/src/data/constants.js
+++ b/src/data/constants.js
@@ -52,6 +52,7 @@ export const defaultNoteTheme = "#fcf7ac";
 export const tableHeaderHeight = 50;
 export const tableWidth = 200;
 export const tableFieldHeight = 36;
+export const tableColorStripHeight = 7;
 
 export const Cardinality = {
   ONE_TO_ONE: "One to one",
diff --git a/src/data/heroDiagram.js b/src/data/heroDiagram.js
index beba094..1f65a24 100644
--- a/src/data/heroDiagram.js
+++ b/src/data/heroDiagram.js
@@ -1,10 +1,19 @@
+import {
+  tableColorStripHeight,
+  tableFieldHeight,
+  tableHeaderHeight,
+} from "./constants";
+
 const xOffset = window.innerWidth * 0.65;
 export const diagram = {
   tables: [
     {
       name: "galactic_users",
       x: xOffset + 75,
-      y: window.innerHeight * 0.23 - (50 + 4 * 36 + 7) * 0.5,
+      y:
+        window.innerHeight * 0.23 -
+        (tableHeaderHeight + 4 * tableFieldHeight + tableColorStripHeight) *
+          0.5,
       fields: [
         {
           name: "id",
@@ -29,7 +38,10 @@ export const diagram = {
       id: 1,
       name: "celestial_data",
       x: xOffset + 27,
-      y: window.innerHeight * 0.72 - (50 + 5 * 36 + 7) * 0.5,
+      y:
+        window.innerHeight * 0.72 -
+        (tableHeaderHeight + 5 * tableFieldHeight + tableColorStripHeight) *
+          0.5,
       fields: [
         {
           name: "id",
@@ -58,7 +70,10 @@ export const diagram = {
       id: 2,
       name: "astro_mine",
       x: xOffset + 336,
-      y: window.innerHeight * 0.72 - (50 + 3 * 36 + 7) * 0.5,
+      y:
+        window.innerHeight * 0.72 -
+        (tableHeaderHeight + 3 * tableFieldHeight + tableColorStripHeight) *
+          0.5,
       fields: [
         {
           name: "id",
@@ -79,7 +94,10 @@ export const diagram = {
       id: 3,
       name: "asteroid",
       x: xOffset + 310,
-      y: window.innerHeight * 0.23 - (50 + 3 * 36 + 7) * 0.5,
+      y:
+        window.innerHeight * 0.23 -
+        (tableHeaderHeight + 3 * tableFieldHeight + tableColorStripHeight) *
+          0.5,
       fields: [
         {
           name: "id",