diff --git a/pgmanage/app/migrations/0026_erdlayout.py b/pgmanage/app/migrations/0026_erdlayout.py
new file mode 100644
index 000000000..1f8c74d21
--- /dev/null
+++ b/pgmanage/app/migrations/0026_erdlayout.py
@@ -0,0 +1,26 @@
+# Generated by Django 4.2.19 on 2025-04-30 13:59
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('app', '0025_monwidgetsconnections_position_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ERDLayout',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=200)),
+                ('layout', models.JSONField()),
+                ('connection', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='app.connection')),
+            ],
+            options={
+                'unique_together': {('connection', 'name')},
+            },
+        ),
+    ]
diff --git a/pgmanage/app/models/main.py b/pgmanage/app/models/main.py
index 32f1d7620..3ab63d8dd 100644
--- a/pgmanage/app/models/main.py
+++ b/pgmanage/app/models/main.py
@@ -238,3 +238,12 @@ class Job(models.Model):
     utility_pid = models.IntegerField(null=True)
     process_state = models.IntegerField(null=True)
     connection = models.ForeignKey(Connection, on_delete=models.CASCADE, null=True)
+
+
+class ERDLayout(models.Model):
+    connection = models.ForeignKey(Connection, on_delete=models.CASCADE)
+    name = models.CharField(max_length=200)
+    layout = models.JSONField()
+
+    class Meta:
+        unique_together = ["connection", "name"]
diff --git a/pgmanage/app/static/pgmanage_frontend/src/components/ERDTab.vue b/pgmanage/app/static/pgmanage_frontend/src/components/ERDTab.vue
index 4fa5da22b..91a93bb02 100644
--- a/pgmanage/app/static/pgmanage_frontend/src/components/ERDTab.vue
+++ b/pgmanage/app/static/pgmanage_frontend/src/components/ERDTab.vue
@@ -1,5 +1,26 @@
 <template>
+  <div>
+    <div class="d-flex justify-content-between gap-2 p-2 border-bottom bg-light">
+      <button class="btn btn-outline-secondary btn-sm" @click="resetToDefault" title="Reset to default">
+        Reset
+      </button>
+      
+      <div class="float-right">
+        <!-- Zoom In -->
+        <button class="btn btn-outline-secondary btn-sm me-2" @click="zoomIn" title="Zoom In">
+          <i class="fas fa-search-plus"></i>
+        </button>
+  
+        <!-- Zoom Out -->
+        <button class="btn btn-outline-secondary btn-sm" @click="zoomOut" title="Zoom Out">
+          <i class="fas fa-search-minus"></i>
+        </button>
+
+      </div>
+    </div>
   <div class="pt-3" style="width: 100%; height: calc(100vh - 70px); visibility: hidden" ref="cyContainer"></div>
+
+  </div>
 </template>
 
 <script>
@@ -7,8 +28,8 @@ import axios from 'axios'
 import ShortUniqueId from 'short-unique-id'
 import cytoscape from 'cytoscape';
 import nodeHtmlLabel from 'cytoscape-node-html-label'
-import { tabsStore } from '../stores/stores_initializer';
 import { handleError } from '../logging/utils';
+import debounce from 'lodash/debounce'
 
 
 export default {
@@ -30,7 +51,42 @@ export default {
       edges: [],
       cy: {},
       layout: {},
-      instance_uid: ''
+      instance_uid: '',
+      options: {
+        boxSelectionEnabled: false,
+        wheelSensitivity: 0.4,
+        style: [
+          {
+            selector: 'node',
+            style: {
+              "shape": "round-rectangle",
+              "background-color": "#F8FAFC",
+              "background-opacity": 1,
+              "height": 40,
+              "width": 140,
+              shape: "round-rectangle",
+            }
+          },
+          {
+            selector: 'edge',
+            style: {
+              'curve-style': 'straight',
+              'target-arrow-shape': 'triangle',
+              'width': 2,
+              'line-style': 'solid'
+            }
+          },
+          {
+            selector: 'edge:selected',
+            style: {
+              'width': 4,
+              'line-color': '#F76707',
+              'target-arrow-color': '#F76707',
+              'source-arrow-color': '#F76707',
+            }
+          },
+        ],
+      }
     };
   },
   mounted() {
@@ -41,6 +97,18 @@ export default {
     this.$refs.cyContainer.style.visibility = 'visible';
   },
   methods: {
+    resetToDefault() {
+      this.layout = this.cy.layout({
+          name: "grid",
+          padding: 50,
+          spacingFactor: 0.85,
+        })
+
+        setTimeout(() => {
+        this.adjustSizes()
+        this.saveGraphState();
+      }, 100)
+    },
     loadSchemaGraph() {
       axios.post('/draw_graph/', {
         database_index: this.databaseIndex,
@@ -48,41 +116,47 @@ export default {
         schema: this.schema,
       })
       .then((response) => {
-        this.nodes = response.data.nodes.map((node) => (
-          {
-            data: {
-              id: node.id,
-              html_id: node.id.replace(/[^a-zA-Z_.-:]+/, '_'),
-              label: node.label,
-              columns: node.columns.map((column) => (
-                {
-                  name: column.name,
-                  type: this.shortDataType(column.type),
-                  cgid: column.cgid,
-                  is_pk: column.is_pk,
-                  is_fk: column.is_fk,
-                  is_highlighed: false
-                }
-              )),
-              type: 'table'
-            },
-            position: {},
-            classes: 'group' + node.group
-          }
-        ))
-
-        this.edges = response.data.edges.map((edge) => (
-          {
-            data: {
-              source: edge.from,
-              target: edge.to,
-              source_col: edge.from_col,
-              target_col: edge.to_col,
-              label: edge.label,
-              cgid: edge.cgid
+        if (response.data.layout) {
+          this.jsonLayout = response.data.layout
+          this.new_nodes = response.data.new_nodes
+          this.new_edges = response.data.new_edges
+        } else {
+          this.nodes = response.data.nodes.map((node) => (
+            {
+              data: {
+                id: node.id,
+                html_id: node.id.replace(/[^a-zA-Z_.-:]+/, '_'),
+                label: node.label,
+                columns: node.columns.map((column) => (
+                  {
+                    name: column.name,
+                    type: this.shortDataType(column.type),
+                    cgid: column.cgid,
+                    is_pk: column.is_pk,
+                    is_fk: column.is_fk,
+                    is_highlighted: false
+                  }
+                )),
+                type: 'table'
+              },
+              position: node?.position ?? {},
+              classes: 'group' + node.group
             }
-          }
-        ))
+          ))
+  
+          this.edges = response.data.edges.map((edge) => (
+            {
+              data: {
+                source: edge.from,
+                target: edge.to,
+                source_col: edge.from_col,
+                target_col: edge.to_col,
+                label: edge.label,
+                cgid: edge.cgid
+              }
+            }
+          ))
+        }
       })
       .then(() => { this.initGraph() })
       .catch((error) => {
@@ -107,81 +181,81 @@ export default {
         classes.push('pk-column')
       if(column.is_fk)
         classes.push('fk-column')
-      if(column.is_highlighed)
+      if(column.is_highlighted)
         classes.push('highlighted')
       return classes.join(' ')
     },
     initGraph() {
-      this.cy = cytoscape({
-        container: this.$refs.cyContainer,
-        boxSelectionEnabled: false,
-        wheelSensitivity: 0.4,
-        style: [
-          {
-            selector: 'node',
-            style: {
-              "shape": "round-rectangle",
-              "background-color": "#F8FAFC",
-              "background-opacity": 0,
-              "height": 40,
-              "width": 140,
-              shape: "round-rectangle",
-            }
-          },
-          {
-            selector: 'edge',
-            style: {
-              'curve-style': 'straight',
-              'target-arrow-shape': 'triangle',
-              'width': 2,
-              'line-style': 'solid'
-            }
-          },
-          {
-            selector: 'edge:selected',
-            style: {
-              'width': 4,
-              'line-color': '#F76707',
-              'target-arrow-color': '#F76707',
-              'source-arrow-color': '#F76707',
-            }
-          },
-        ],
-        elements: {
-          selectable: true,
-          grabbable: false,
-          nodes: this.nodes,
-          edges: this.edges
-        }
-      })
-
-      this.cy.on('select unselect', 'edge', function(evt) {
-        let should_highlight = evt.type == 'select'
-        let {source_col, target_col} = evt.target.data()
-        let edge = evt.target
-        let srccols = edge.source().data('columns')
-        srccols.find((c) => c.name === source_col).is_highlighed = should_highlight
-        edge.source().data('columns', srccols)
-        let dstcols = edge.target().data('columns')
-        dstcols.find((c) => c.name === target_col).is_highlighed = should_highlight
-        edge.target().data('columns', dstcols)
-      })
+      if (this.jsonLayout) {
+        this.cy = cytoscape({
+          container: this.$refs.cyContainer,
+          ...this.options,
+          elements: [],
+        })
+        this.cy.json(this.jsonLayout)
 
-      this.layout = this.cy.layout({
-        name: 'grid',
-        padding: 50,
-        spacingFactor: 0.85,
-      })
+        if (this.new_nodes && this.new_nodes.length > 0) {
+          const formattedNodes = this.new_nodes.map(node => ({
+            group: 'nodes',
+            data: {
+              id: node.id,
+              html_id: node.id.replace(/[^a-zA-Z_.-:]+/, '_'),
+              label: node.label,
+              columns: node.columns.map((column) => (
+                  {
+                    name: column.name,
+                    type: this.shortDataType(column.type),
+                    cgid: column.cgid,
+                    is_pk: column.is_pk,
+                    is_fk: column.is_fk,
+                    is_highlighted: false
+                  }
+                )),
+              type: 'table'
+            },
+            classes: 'group' + node.group
+          }));
+          this.cy.add(formattedNodes);
+        }
 
-      this.cy.on('click', 'node', function (evt) {
-        if (evt.originalEvent) {
-          const element = document.elementFromPoint(evt.originalEvent.clientX, evt.originalEvent.clientY);
-          if(element.dataset.cgid) {
-            let edge = this.cy().edges().filter(( ele ) => ele.data('cgid') === element.dataset.cgid)
-            setTimeout(() => {edge.select()}, 1)
-          }
+        if (this.new_edges && this.new_edges.length > 0) {
+          const formattedEdges = this.new_edges.map(edge => ({
+            group: 'edges',
+            data: {
+              source: edge.from,
+                target: edge.to,
+                source_col: edge.from_col,
+                target_col: edge.to_col,
+                label: edge.label,
+                cgid: edge.cgid
+            }
+          }));
+          this.cy.add(formattedEdges);
         }
-      })
+        
+      } else {
+        this.cy = cytoscape({
+          container: this.$refs.cyContainer,
+          ...this.options,
+          elements: {
+            selectable: true,
+            grabbable: false,
+            nodes: [...this.nodes],
+            edges: [...this.edges]
+          }
+        })
+        this.layout = this.cy.layout({
+          name: "grid",
+          padding: 50,
+          spacingFactor: 0.85,
+        })
+        
+        setTimeout(() => {
+          this.adjustSizes()
+        }, 100)
+      }
+    
+      this.setupEvents();
 
       this.cy.nodeHtmlLabel(
         [{
@@ -209,28 +283,81 @@ export default {
         }],
       )
 
-      this.cy.on("resize", () => {
-        if(!(tabsStore.selectedPrimaryTab.metaData.selectedTab.id === this.tabId)) return;
-        this.cy.fit()
-      })
-
-
-      setTimeout(() => {
-        this.adjustSizes()
-      }, 100)
+      this.$refs.cyContainer.style.visibility = 'visible';
     },
     adjustSizes() {
       const padding = 2;
-        this.cy.nodes().forEach((node) => {
-          let el = document.querySelector(`#${this.instance_uid}-${node.data().html_id}`)
-          if (el) {
-            node.style('width', el.parentElement.clientWidth + padding)
-            node.style('height', el.parentElement.clientHeight + padding)
+      this.cy.nodes().forEach((node) => {
+        let el = document.querySelector(`#${this.instance_uid}-${node.data().html_id}`)
+        if (el) {
+          node.style('width', el.parentElement.clientWidth + padding)
+          node.style('height', el.parentElement.clientHeight + padding)
+        }
+      })
+      this.layout.run()
+      this.cy.fit()
+    },
+    saveGraphState() {
+      const layoutData = this.cy.json(); 
+
+      axios.post('/save_graph_state/', {
+        workspace_id: this.workspaceId,
+        schema: this.schema,
+        database_name: this.databaseName,
+        database_index: this.databaseIndex,
+        layout: layoutData,
+      }).catch((error) => {
+        handleError(error);
+      });
+    },
+    setupEvents() {
+      this.cy.on('select unselect', 'edge', function(evt) {
+        let should_highlight = evt.type == 'select'
+        let {source_col, target_col} = evt.target.data()
+        let edge = evt.target
+        let srccols = edge.source().data('columns')
+        srccols.find((c) => c.name === source_col).is_highlighted = should_highlight
+        edge.source().data('columns', srccols)
+        let dstcols = edge.target().data('columns')
+        dstcols.find((c) => c.name === target_col).is_highlighted = should_highlight
+        edge.target().data('columns', dstcols)
+      });
+
+      this.cy.on('click', 'node', function (evt) {
+        if (evt.originalEvent) {
+          const element = document.elementFromPoint(evt.originalEvent.clientX, evt.originalEvent.clientY);
+          if(element.dataset.cgid) {
+            let edge = this.cy().edges().filter(( ele ) => ele.data('cgid') === element.dataset.cgid)
+            setTimeout(() => {edge.select()}, 1)
           }
-        })
-        this.layout.run()
-        this.cy.fit()
-        this.$refs.cyContainer.style.visibility = 'visible'
+        }
+      });
+
+      this.cy.on("dragfree", () => {
+        this.saveGraphState();
+      });
+
+      this.cy.on('viewport', debounce(() => {
+        this.saveGraphState();
+      }, 500));
+    },
+    zoomIn() {
+      if (this.cy) {
+        const currentZoom = this.cy.zoom();
+        this.cy.zoom({
+          level: currentZoom * 1.2,
+          renderedPosition: { x: this.cy.width() / 2, y: this.cy.height() / 2 }
+        });
+      }
+    },
+    zoomOut() {
+      if (this.cy) {
+        const currentZoom = this.cy.zoom();
+        this.cy.zoom({
+          level: currentZoom * 0.8,
+          renderedPosition: { x: this.cy.width() / 2, y: this.cy.height() / 2 }
+        });
+      }
     },
   },
 };
diff --git a/pgmanage/app/static/pgmanage_frontend/src/stores/tabs.js b/pgmanage/app/static/pgmanage_frontend/src/stores/tabs.js
index e34bd0f01..09db7ff3c 100644
--- a/pgmanage/app/static/pgmanage_frontend/src/stores/tabs.js
+++ b/pgmanage/app/static/pgmanage_frontend/src/stores/tabs.js
@@ -593,7 +593,21 @@ const useTabsStore = defineStore("tabs", {
       this.selectTab(tab);
     },
     createERDTab(schema = "") {
-      let tabName = schema ? `ERD: ${schema}` : "ERD";
+      let secondaryTabs = this.selectedPrimaryTab.metaData.secondaryTabs;
+      let existingTabs = secondaryTabs.filter((t) => {
+        return t.component === "ERDTab";
+      });
+
+      let tabName = schema
+        ? `ERD: ${this.selectedPrimaryTab?.metaData?.selectedDatabase}@${schema}`
+        : "ERD";
+      if (existingTabs) {
+        let existingSameTab = existingTabs.find((t) => t.name == tabName);
+        if (!!existingSameTab) {
+          this.selectTab(existingSameTab);
+          return;
+        }
+      }
 
       const tab = this.addTab({
         parentId: this.selectedPrimaryTab.id,
diff --git a/pgmanage/app/urls.py b/pgmanage/app/urls.py
index c4a386dda..1c04128b7 100644
--- a/pgmanage/app/urls.py
+++ b/pgmanage/app/urls.py
@@ -39,6 +39,7 @@
     path('master_password/', views.workspace.master_password, name='master_password'),
     path('reset_master_password/', views.workspace.reset_master_password, name='reset_master_password'),
     path('draw_graph/', views.workspace.draw_graph, name='draw_graph'),
+    path('save_graph_state/', views.workspace.save_graph_state, name='save_graph_state'),
     path('get_table_columns/', views.workspace.get_table_columns, name='get_table_columns'),
     path('refresh_monitoring/', views.workspace.refresh_monitoring, name='refresh_monitoring'),
     # path('delete_plugin/', views.plugins.delete_plugin, name='delete_plugin'),
diff --git a/pgmanage/app/views/workspace.py b/pgmanage/app/views/workspace.py
index fbfc37a4f..25fbfea91 100644
--- a/pgmanage/app/views/workspace.py
+++ b/pgmanage/app/views/workspace.py
@@ -5,7 +5,7 @@
 from datetime import datetime, timezone
 
 from app.client_manager import client_manager
-from app.models.main import Connection, Shortcut, Tab, UserDetails
+from app.models.main import Connection, Shortcut, Tab, UserDetails, ERDLayout
 from app.utils.crypto import make_hash
 from app.utils.decorators import database_required, user_authenticated
 from app.utils.key_manager import key_manager
@@ -225,7 +225,8 @@ def renew_password(request, session):
 @user_authenticated
 @database_required(check_timeout=True, open_connection=True)
 def draw_graph(request, database):
-    schema = request.data.get("schema", '')
+    data = request.data
+    schema = data.get("schema", '')
     edge_dict = {}
     node_dict = {}
 
@@ -293,14 +294,81 @@ def draw_graph(request, database):
                         col['is_pk'] = True
                         col['cgid'] = f"{fkcol['r_table_name']}-{fkcol['r_column_name']}"
 
-        response_data = {"nodes": list(node_dict.values()), "edges": list(edge_dict.values())}
+
+        database_name = (
+            "sqlite3" if database.v_db_type == "sqlite" else database.v_service
+        )
+        layout_name = f"{database_name}@{data.get('schema')}"
+
+        layout_obj = ERDLayout.objects.filter(name=layout_name, connection=Connection.objects.get(id=data.get("database_index"))).first()
+
+        if layout_obj:
+            layout_data = layout_obj.layout
+
+            layout_nodes = {node["data"]["id"]: node for node in layout_data.get('elements', {}).get('nodes', [])}
+            layout_edges = {edge["data"]["cgid"]: edge for edge in layout_data.get("elements", {}).get("edges", []) if edge["data"]["cgid"] is not None}
+
+
+            current_node_ids = set(node_dict.keys())
+            current_edge_ids = set(edge_dict.keys())
+
+            filtered_nodes = [node for id_, node in layout_nodes.items() if id_ in current_node_ids]
+
+
+            new_nodes = [v for k, v in node_dict.items() if k not in layout_nodes.keys()]
+
+            filtered_edges = [edge for id_, edge in layout_edges.items() if id_ in current_edge_ids]
+
+            new_edges = [
+                edge for edge in edge_dict.values()
+                if  edge['cgid'] not in layout_edges.keys()
+            ]
+
+            layout_data["elements"] = {
+                "nodes": filtered_nodes,
+                "edges": filtered_edges
+            }
+
+            return JsonResponse(data={
+                "layout": layout_data,
+                "new_nodes": new_nodes,
+                "new_edges": new_edges,
+            })
+
+        response_data = {
+            "nodes": list(node_dict.values()),
+            "edges": list(edge_dict.values()),
+        }
 
     except Exception as exc:
         return JsonResponse(data={'data': str(exc)}, status=400)
-
     return JsonResponse(response_data)
 
 
+@user_authenticated
+def save_graph_state(request):
+    try:
+        data = request.data
+        database_index = data.get("database_index")
+        layout = data.get("layout")
+        database_name = (
+            "sqlite3"
+            if os.path.isfile(data.get("database_name"))
+            else data.get("database_name")
+        )
+        layout_name = f"{database_name}@{data.get('schema')}"
+        conn = Connection.objects.get(id=database_index)
+
+        layout_obj, _ = ERDLayout.objects.update_or_create(
+                connection=conn,
+                name=layout_name,
+                defaults={"layout": layout},
+            )
+    except Exception as exc:
+        return JsonResponse(data={'data': str(exc)}, status=400)
+
+    return JsonResponse({"status": "saved"})
+
 
 @user_authenticated
 @database_required(check_timeout=True, open_connection=True)