diff --git a/packages/tools/src/diagramTools.ts b/packages/tools/src/diagramTools.ts
index 5f8d0606d..2c4f28895 100644
--- a/packages/tools/src/diagramTools.ts
+++ b/packages/tools/src/diagramTools.ts
@@ -40,4 +40,4 @@ export function chooseTopTables(tables: TableInfo[], count: number) {
   return sorted.slice(0, count);
 }
 
-export const DIAGRAM_ZOOMS = [0.1, 0.15, 0.2, 0.4, 0.6, 0.8, 1, 1.2, 1.4, 1.6, 1.8, 2];
+export const DIAGRAM_ZOOMS = [0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.8, 1, 1.25, 1.5, 1.75, 2];
diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte
index 078c5b87b..83611004a 100644
--- a/packages/web/src/designer/Designer.svelte
+++ b/packages/web/src/designer/Designer.svelte
@@ -908,6 +908,20 @@
     domWrapper.scrollLeft -= x;
     domWrapper.scrollTop -= y;
   }
+
+  const oldZoomKoefRef = createRef(value?.style?.zoomKoef || 1);
+  $: {
+    if (
+      domWrapper &&
+      value?.style?.zoomKoef != oldZoomKoefRef.get() &&
+      value?.style?.zoomKoef > 0 &&
+      oldZoomKoefRef.get() > 0
+    ) {
+      domWrapper.scrollLeft = Math.round((domWrapper.scrollLeft / oldZoomKoefRef.get()) * value?.style?.zoomKoef);
+      domWrapper.scrollTop = Math.round((domWrapper.scrollTop / oldZoomKoefRef.get()) * value?.style?.zoomKoef);
+    }
+    oldZoomKoefRef.set(value?.style?.zoomKoef);
+  }
 </script>
 
 <div
@@ -926,7 +940,7 @@
     bind:this={domCanvas}
     on:dragover={e => e.preventDefault()}
     on:drop={handleDrop}
-    style={`width:${canvasWidth}px;height:${canvasHeight}px;
+    style={`width:${canvasWidth / zoomKoef}px;height:${canvasHeight / zoomKoef}px;
       ${settings?.customizeStyle && value?.style?.zoomKoef ? `zoom:${value?.style?.zoomKoef};` : ''}
     `}
     on:mousedown={e => {