diff --git a/app/client/src/components/layers/edit/Edit.vue b/app/client/src/components/layers/edit/Edit.vue
index e04da3e80..a20fbd5fb 100644
--- a/app/client/src/components/layers/edit/Edit.vue
+++ b/app/client/src/components/layers/edit/Edit.vue
@@ -879,7 +879,7 @@ export default {
         name: "Edit Layer",
         displayInLayerList: false,
         source: new VectorSource({ wrapX: false }),
-        zIndex: 10,
+        // zIndex: 10,
         style: getEditStyle("editable"),
         queryable: true
       });
@@ -896,7 +896,6 @@ export default {
         displayInLayerList: false,
         source: new VectorSource({ wrapX: false }),
         style: getEditStyle("visualization"),
-        zIndex: 10,
         queryable: true
       });
       visualizationEditLayer
@@ -1039,30 +1038,41 @@ export default {
                 if (layer === "other") {
                   features.forEach(feature => {
                     if (feature.get("oneway") !== undefined) {
+                      this.visualizationEditLayer.setZIndex(9);
                       feature.setId(`way_${feature.getId()}`);
                       feature.set("layerName", "way");
                     } else if (feature.get("building_id") !== undefined) {
+                      this.visualizationEditLayer.setZIndex(9);
                       feature.setId(`building_${feature.getId()}`);
                       feature.set("layerName", "building");
                     } else if (feature.get("opening_hours") !== undefined) {
+                      this.visualizationEditLayer.setZIndex(10);
                       feature.setId(`poi_${feature.getId()}`);
                       feature.set("layerName", "poi");
                     }
                   });
                   this.visualizationEditLayer.getSource().addFeatures(features);
                 } else {
+                  console.log(index);
                   if (index === 1 && layer === "building") {
+                    this.editLayer.setZIndex(9);
                     layer = "population";
                     this.bldEntranceLayer.getSource().clear();
                     this.bldEntranceLayer.getSource().addFeatures(features);
                     return;
                   }
+
+                  if (layer === "way") {
+                    this.editLayer.setZIndex(9);
+                  }
+
                   features.forEach(feature => {
                     feature.setId(`${layer}_${feature.getId()}`);
                     feature.set("layerName", layer);
                   });
                   this.editLayer.getSource().addFeatures(features);
                   if (layer === "poi") {
+                    this.editLayer.setZIndex(10);
                     this.poiModifiedFeatures = features;
                     this.turnOnAndLockPoiTreeNode(features, "add");
                   }
diff --git a/app/client/src/style/OlStyleDefs.js b/app/client/src/style/OlStyleDefs.js
index 3310e3b34..ad64c1c39 100644
--- a/app/client/src/style/OlStyleDefs.js
+++ b/app/client/src/style/OlStyleDefs.js
@@ -518,7 +518,8 @@ export function poisEditStyle(feature, resolution, type) {
           color: color,
           width: 2
         })
-      })
+      }),
+      zIndex: 10
     });
   }
 
@@ -550,7 +551,8 @@ export function waysNewRoadStyle(type) {
     stroke: new OlStroke({
       color: type === "visualization" ? "rgba(79, 79, 79, 0.64)" : "#6495ED",
       width: 4
-    })
+    }),
+    zIndex: 8
   });
   return [style];
 }
@@ -560,23 +562,26 @@ export function waysNewBridgeStyle(type) {
     stroke: new OlStroke({
       color: type === "visualization" ? "rgba(79, 79, 79, 0.64)" : "#FFA500",
       width: 4
-    })
+    }),
+    zIndex: 8
   });
   return [style];
 }
 
-export function buildingStyleWithPopulation() {
+export function buildingStyleWithPopulation(type) {
   return new OlStyle({
     fill: new OlFill({
-      color: "rgb(0,128,0, 0.7)"
-    })
+      color: type === "visualization" ? "rgb(0,128,0, 0.7)" : "#FFA500"
+    }),
+    zIndex: 9
   });
 }
 export function buildingStyleWithNoPopulation() {
   return new OlStyle({
     fill: new OlFill({
       color: "#FF0000"
-    })
+    }),
+    zIndex: 9
   });
 }
 
@@ -661,7 +666,17 @@ export function editStyleFn(type) {
       if (isCompleted === true && hasEntranceFeature === true) {
         strokeOpt.color = "rgb(0,128,0, 0.7)";
         fillOpt.color = "rgb(0,128,0, 0.7)";
+      } else {
+        strokeOpt.color =
+          type === "visualization"
+            ? "rgba(79, 79, 79, 0.64)"
+            : "rgb(235, 64, 52, 0.7)";
+        fillOpt.color =
+          type === "visualization"
+            ? "rgba(79, 79, 79, 0.64)"
+            : "rgb(235, 64, 52, 0.7)";
       }
+
       const area = getArea(feature.getGeometry());
       const building_levels = feature.get("building_levels") || 0;
       const population = feature.get("population");