diff --git a/js/Startup.js b/js/Startup.js
index 13c7677..a8f2c1b 100644
--- a/js/Startup.js
+++ b/js/Startup.js
@@ -123,9 +123,9 @@ const Startup = (() => {
             currFile.layers.push(currFile.checkerBoard);
             currFile.layers.push(currFile.currentLayer);
             currFile.layers.push(currFile.TMPLayer);
-            currFile.layers.push(currFile.pixelGrid);
             currFile.layers.push(currFile.hSymmetricLayer);
             currFile.layers.push(currFile.vSymmetricLayer);
+            currFile.layers.push(currFile.pixelGrid);
             currFile.layers.push(currFile.VFXLayer);
         }
     }
diff --git a/js/layers/HSymmetryLayer.js b/js/layers/HSymmetryLayer.js
index bd98de0..488ce2c 100644
--- a/js/layers/HSymmetryLayer.js
+++ b/js/layers/HSymmetryLayer.js
@@ -28,15 +28,26 @@ class HSymmetryLayer extends Layer {
         // get toggle h axis button
         let toggleButton = document.getElementById("toggle-h-symmetry-button");
         toggleButton.innerHTML = "Hide Horizontal Symmetry";
+
         this.isEnabled = true;
         this.canvas.style.display = "inline-block";
     }
 
+    initPaint() {
+        this.lineDistance = 5;
+        this.fillAxis();
+    }
+
     repaint(factor) {
         this.lineDistance += factor;
         this.fillAxis();
     }
 
+    normalPaint() {
+        this.lineDistance = 10;
+        this.fillAxis();
+    }
+
     /**
      * Shows or hides axis depending on its current visibility
      * (triggered by the show h symmetry button in the top menu)
diff --git a/js/layers/VSymmetryLayer.js b/js/layers/VSymmetryLayer.js
index 601a4bd..711d240 100644
--- a/js/layers/VSymmetryLayer.js
+++ b/js/layers/VSymmetryLayer.js
@@ -30,6 +30,12 @@ class VSymmetryLayer extends Layer {
         toggleButton.innerHTML = "Hide Vertical Axis";
         this.isEnabled = true;
         this.canvas.style.display = "inline-block";
+        this.initPaint();
+    }
+
+    initPaint() {
+        this.lineDistance = 5;
+        this.fillAxis();
     }
 
     repaint(factor) {
@@ -37,6 +43,11 @@ class VSymmetryLayer extends Layer {
         this.fillAxis();
     }
 
+    normalPaint() {
+        this.lineDistance = 10;
+        this.fillAxis();
+    }
+
     /**
      * Shows or hides axis depending on its current visibility
      * (triggered by the show h symmetry button in the top menu)
diff --git a/js/tools/ZoomTool.js b/js/tools/ZoomTool.js
index a945bb6..b2782ba 100644
--- a/js/tools/ZoomTool.js
+++ b/js/tools/ZoomTool.js
@@ -60,18 +60,28 @@ class ZoomTool extends Tool {
 
         // Adjust pixel grid thickness
         if (zoomed) {
-            if (currFile.zoom <= 7)
+
+            if (currFile.zoom <= 7) {
                 currFile.pixelGrid.disablePixelGrid();
+                currFile.hSymmetricLayer.repaint((currFile.zoom - prevZoom) * 1.8);
+                currFile.vSymmetricLayer.repaint((currFile.zoom - prevZoom) * 1.8);
+            }
             else if (currFile.zoom >= 20 && mode == 'in') {
                 currFile.pixelGrid.enablePixelGrid();
                 currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
+                currFile.hSymmetricLayer.normalPaint();
+                currFile.vSymmetricLayer.normalPaint();
             }
             else if (prevZoom >= 20 && mode == 'out') {
                 currFile.pixelGrid.enablePixelGrid();
                 currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
+                currFile.hSymmetricLayer.normalPaint();
+                currFile.vSymmetricLayer.normalPaint();
             }
             else {
                 currFile.pixelGrid.enablePixelGrid();
+                currFile.hSymmetricLayer.normalPaint();
+                currFile.vSymmetricLayer.normalPaint();
             }
         }