diff --git a/src/context/AreasContext.jsx b/src/context/AreasContext.jsx
index 2e18c1c22..6640f50ac 100644
--- a/src/context/AreasContext.jsx
+++ b/src/context/AreasContext.jsx
@@ -23,19 +23,22 @@ export default function AreasContextProvider({ children }) {
     } else {
       const width = 200;
       const height = 200;
-      setAreas((prev) => [
-        ...prev,
-        {
-          id: prev.length,
-          name: `area_${prev.length}`,
-          x: transform.pan.x - width / 2,
-          y: transform.pan.y - height / 2,
-          width,
-          height,
-          color: defaultBlue,
-          locked: false,
-        },
-      ]);
+      setAreas((prev) => {
+        const offset = prev.length * 20;
+        return [
+          ...prev,
+          {
+            id: prev.length,
+            name: `area_${prev.length}`,
+            x: transform.pan.x - width / 2 + offset,
+            y: transform.pan.y - height / 2 + offset,
+            width,
+            height,
+            color: defaultBlue,
+            locked: false,
+          },
+        ];
+      });
     }
     if (addToHistory) {
       setUndoStack((prev) => [
diff --git a/src/context/DiagramContext.jsx b/src/context/DiagramContext.jsx
index bdb144b54..1a313c1c7 100644
--- a/src/context/DiagramContext.jsx
+++ b/src/context/DiagramContext.jsx
@@ -18,11 +18,12 @@ export default function DiagramContextProvider({ children }) {
 
   const addTable = (data, addToHistory = true) => {
     const id = nanoid();
+    const offset = tables.length * 20;
     const newTable = {
       id,
       name: `table_${id}`,
-      x: transform.pan.x,
-      y: transform.pan.y,
+      x: transform.pan.x + offset,
+      y: transform.pan.y + offset,
       locked: false,
       fields: [
         {