diff --git a/frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetEditor.js b/frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetEditor.js
index 7968727c..99fe203d 100644
--- a/frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetEditor.js
+++ b/frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetEditor.js
@@ -9,6 +9,7 @@ import MapActions from "./MapActions";
 import axios from "../../../../axios";
 import { useMutation } from "react-query";
 import { useParams } from "react-router-dom";
+import DatasetEditorHeader from "./DatasetEditorHeader";
 
 function DatasetEditor() {
   const [mapLayers, setMapLayers] = useState([]);
@@ -54,7 +55,7 @@ function DatasetEditor() {
 
     return () => {};
   }, []);
-
+  const [zoom, setZoom] = useState(15);
   return (
     <>
       {isLoading && "Loading ............"}
@@ -77,9 +78,20 @@ function DatasetEditor() {
                 setgeoJSON(null);
               }}
               dataset={dataset}
+              setZoom={setZoom}
             ></DatasetMap>
           </Grid>
-          <Grid item xs={6} md={3} className="column2">
+          <Grid item xs={6} md={3}>
+            <DatasetEditorHeader
+              dsId={dataset.id}
+              dsName={dataset.name}
+              zoom={zoom}
+              // editMode={editMode}
+              oamImagery={oamImagery}
+              // setEditMode={setEditMode}
+              mapLayersLength={mapLayers.length}
+            ></DatasetEditorHeader>
+
             <TileServerList
               navigateToCenter={navigateToCenter}
               addImagery={addImageryHandler}
diff --git a/frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetEditorHeader.js b/frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetEditorHeader.js
index d037f747..30d6ab52 100644
--- a/frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetEditorHeader.js
+++ b/frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetEditorHeader.js
@@ -14,107 +14,51 @@ import MapActions from "./MapActions";
 const DatasetEditorHeader = (props) => {
   return (
     <>
-      <AppBar
-        position="fixed"
-        className="dataset-editor-header MuiAppBar-root2"
-      >
-        <Grid container padding={2}>
-          <Grid item xs={3} height={50}>
-            <Typography variant="h6" component="h2">
-              Dataset {props.dsId} : {props.dsName}
-            </Typography>
-          </Grid>
+      <Grid className="card">
+        <Typography variant="h6" component="h2">
+          Dataset {props.dsId} : {props.dsName}
+        </Typography>
 
-          <Grid item xs={3}>
-            <Typography variant="body1" component="h2">
-              Zoom: {props.zoom && +props.zoom.toFixed(1)}
-              <br />
-              {"Editing " + props.editMode}
-            </Typography>
-          </Grid>
-          <Grid item xs={3} className="switcher-margin">
-            <FormControl component="fieldset">
-              <RadioGroup
-                row
-                aria-label="position"
-                name="selectedLayer"
-                defaultValue="aoi"
-                onChange={(e) => {
-                  console.log("changed", e);
-                  props.setEditMode(e.target.value);
-                  if (e.target.value === "aoi") {
-                    // console.log("leaflet-bar a",document.querySelectorAll(".leaflet-bar a"))
+        <Typography variant="body1" component="h2">
+          Zoom: {props.zoom && +props.zoom.toFixed(1)}
+        </Typography>
+        {/* <Grid item xs={3}>
+          <FormControl component="fieldset">
+            <RadioGroup
+              row
+              aria-label="position"
+              name="selectedLayer"
+              defaultValue="aoi"
+              onChange={(e) => {
+                console.log("changed", e);
+                props.setEditMode(e.target.value);
+                if (e.target.value === "aoi") {
+                  // console.log("leaflet-bar a",document.querySelectorAll(".leaflet-bar a"))
 
-                    document.querySelectorAll(".leaflet-bar a").forEach((e) => {
-                      e.style.backgroundColor = "rgb(51, 136, 255)";
-                      console.log("leaflet-bar a", e.style);
-                    });
-                  } else {
-                    console.log(
-                      "leaflet-bar a",
-                      document.querySelectorAll(".leaflet-bar a")
-                    );
+                  document.querySelectorAll(".leaflet-bar a").forEach((e) => {
+                    e.style.backgroundColor = "rgb(51, 136, 255)";
+                    console.log("leaflet-bar a", e.style);
+                  });
+                } else {
+                  console.log(
+                    "leaflet-bar a",
+                    document.querySelectorAll(".leaflet-bar a")
+                  );
 
-                    document.querySelectorAll(".leaflet-bar a").forEach((e) => {
-                      e.style.backgroundColor = "#D73434";
-                      console.log("leaflet-bar a", e.style);
-                    });
-                  }
-                }}
-              >
-                <FormControlLabel
-                  value="aoi"
-                  control={
-                    <Radio color="primary" className="small-radio-aoi" />
-                  }
-                  label="AOIs"
-                  labelPlacement="top"
-                />
-                {/* <FormControlLabel
-                  value="label"
-                  control={
-                    <Radio color="primary" className="small-radio-label" />
-                  }
-                  label="Labels"
-                  labelPlacement="top"
-                /> */}
-              </RadioGroup>
-            </FormControl>
+                  document.querySelectorAll(".leaflet-bar a").forEach((e) => {
+                    e.style.backgroundColor = "#D73434";
+                    console.log("leaflet-bar a", e.style);
+                  });
+                }
+              }}
+            >
+           
+            </RadioGroup>
+          </FormControl>
+        </Grid> */}
 
-            {/* <select defaultValue="aoi" id="selectedLayer" onChange={
-                        (e) => {
-                            props.setEditMode(e.target.value)
-                            if (e.target.value === "aoi") {
-                                // console.log("leaflet-bar a",document.querySelectorAll(".leaflet-bar a"))
-
-                                document.querySelectorAll(".leaflet-bar a").forEach(e => {
-                                    e.style.backgroundColor = "rgb(51, 136, 255)"
-                                    console.log("leaflet-bar a", e.style)
-
-                                })
-                            }
-                            else {
-                                console.log("leaflet-bar a", document.querySelectorAll(".leaflet-bar a"))
-
-                                document.querySelectorAll(".leaflet-bar a").forEach(e => {
-                                    e.style.backgroundColor = "#D73434"
-                                    console.log("leaflet-bar a", e.style)
-                                })
-                            }
-                        }
-                    }>
-                        <option value="label">Labels</option>
-                        <option value="aoi">AOIs</option>
-                    </select> */}
-          </Grid>
-          <Grid item xs={3}>
-            <MapActions
-              oamImagery={props.oamImagery}
-              mapLayersLength={props.mapLayersLength}
-            ></MapActions>
-          </Grid>
-        </Grid>
-      </AppBar>
+        <MapActions></MapActions>
+      </Grid>
     </>
   );
 };
diff --git a/frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetMap.js b/frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetMap.js
index 11ce4017..01eb0db8 100644
--- a/frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetMap.js
+++ b/frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetMap.js
@@ -564,6 +564,7 @@ const DatasetMap = (props) => {
         const { _animateToZoom } = e.target;
         console.log("zoomend", e, _animateToZoom);
         setZoom(_animateToZoom);
+        props.setZoom(_animateToZoom);
       },
       moveend: (e) => {
         const { _animateToZoom, _layers } = e.target;
@@ -597,16 +598,6 @@ const DatasetMap = (props) => {
 
   return (
     <>
-      <DatasetEditorHeader
-        dsId={props.dataset.id}
-        dsName={props.dataset.name}
-        zoom={zoom}
-        editMode={editMode}
-        oamImagery={props.oamImagery}
-        setEditMode={setEditMode}
-        mapLayersLength={mapLayers.length}
-      ></DatasetEditorHeader>
-
       {mapError && <span style={{ color: "red" }}> Error: {mapError} </span>}
 
       <MapContainer
@@ -615,9 +606,13 @@ const DatasetMap = (props) => {
         style={{
           height: "800px",
           width: "100%",
-          marginTop: "75px",
         }}
         zoom={zoom}
+        zoomDelta={0.25}
+        wheelPxPerZoomLevel={Math.round(36 / 0.5)}
+        zoomSnap={0}
+        scrollWheelZoom={true}
+        // inertia={true}
         whenCreated={setMap}
       >
         <MyComponent />
@@ -683,16 +678,12 @@ const DatasetMap = (props) => {
           <EditControl
             position="topleft"
             onCreated={(e) => {
-              console.log(
-                "selectedLayer",
-                document.querySelector('input[name="selectedLayer"]:checked')
-                  .value
-              );
-              _onCreate(
-                e,
-                document.querySelector('input[name="selectedLayer"]:checked')
-                  .value
-              );
+              // console.log(
+              //   "selectedLayer",
+              //   document.querySelector('input[name="selectedLayer"]:checked')
+              //     .value
+              // );
+              _onCreate(e, "aoi");
             }}
             onEdited={_onEdited}
             onDeleted={_onDeleted}