diff --git a/backend/diagrams/diagram_dvir.json b/backend/diagrams/diagram_dvir.json
new file mode 100644
index 0000000..60a5dc5
--- /dev/null
+++ b/backend/diagrams/diagram_dvir.json
@@ -0,0 +1,40 @@
+{
+  "nodes": [
+    {
+      "id": "1",
+      "type": "custom",
+      "data": {
+        "label": "Node 1",
+        "icon": "https://s3.dvirlabs.com/lab-icons/default.svg"
+      },
+      "position": {
+        "x": 303.3305220688578,
+        "y": 269.54671638680003
+      },
+      "width": 104,
+      "height": 104
+    },
+    {
+      "id": "2",
+      "type": "custom",
+      "data": {
+        "label": "Node 2",
+        "icon": "https://s3.dvirlabs.com/lab-icons/default.svg"
+      },
+      "position": {
+        "x": 87.45932948916324,
+        "y": 183.0493678043483
+      },
+      "width": 104,
+      "height": 104
+    }
+  ],
+  "edges": [
+    {
+      "id": "reactflow__edge-1source-left-2target-right",
+      "source": "1",
+      "target": "2",
+      "animated": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/frontend/src/components/Diagram.jsx b/frontend/src/components/Diagram.jsx
index 29964c9..303cf93 100644
--- a/frontend/src/components/Diagram.jsx
+++ b/frontend/src/components/Diagram.jsx
@@ -44,17 +44,18 @@ function Diagram() {
         if (diagrams.length > 0) {
           setDiagramName(diagrams[0]);
         } else {
-          setDiagramName(null);
+          setDiagramName("default"); // <- ensure we use this name
         }
       } catch (err) {
         console.error(err);
         setDiagramList([]);
-        setDiagramName(null);
+        setDiagramName("default"); // <- fallback to default always
       }
     };
     load();
   }, []);
 
+
   useEffect(() => {
     const loadDiagram = async () => {
       if (!diagramName) {
@@ -204,19 +205,39 @@ function Diagram() {
 
         {!isIframe && (
           <>
-            <button className="btn" style={{ background: '#d28519' }} onClick={() => {
+            <button className="btn" style={{ background: '#d28519' }} onClick={async () => {
               const newName = prompt("Enter new diagram name:");
-              if (newName) {
-                if (!diagramList.includes(newName)) {
-                  setDiagramList((prev) => [...prev, newName]);
-                }
-                setDiagramName(newName);
-                setNodes([]);
-                setEdges([]);
-              }
-            }}>🆕 New Diagram</button>
+              if (!newName) return;
 
-            <button className="btn" onClick={handleSave} style={{ background: 'green' }}>💾 Save</button>
+              if (diagramList.includes(newName)) {
+                toast.warn("❗ Diagram already exists.");
+                return;
+              }
+
+              try {
+                // Save current content (only if in 'default')
+                if (diagramName === 'default' && (nodes.length > 0 || edges.length > 0)) {
+                  const cleanedEdges = edges.map(({ id, source, target, animated }) => ({
+                    id, source, target, animated: !!animated
+                  }));
+                  await saveDiagramByName(newName, { nodes, edges: cleanedEdges });
+                  toast.success(`📁 Migrated content from 'default' to '${newName}'`);
+                }
+
+                setDiagramList((prev) => [...prev, newName]);
+                setDiagramName(newName); // <- only after saving
+              } catch (err) {
+                toast.error(`❌ Failed to migrate default diagram`);
+                console.error(err);
+              }
+            }}>
+              🆕 New Diagram
+            </button>
+
+
+            {diagramName !== 'default' && (
+              <button className="btn" onClick={handleSave} style={{ background: 'green' }}>💾 Save</button>
+              )}
             <button className="btn" onClick={() => setShowForm(true)} style={{ background: 'blue' }}>➕ Add Node</button>
             <button className="btn" onClick={handleDeleteNode} style={{ color: 'white', background: selectedNode ? '#b81a1a' : '#424040' }} disabled={!selectedNode}>🗑️ Delete Node</button>
             <button className="btn" onClick={handleDeleteEdge} style={{ color: 'white', background: selectedEdge ? '#b81a1a' : '#424040' }} disabled={!selectedEdge}>🗑️ Delete Edge</button>