diff --git a/service/mbtiles.go b/service/mbtiles.go
index 3dff532..d7eeb77 100644
--- a/service/mbtiles.go
+++ b/service/mbtiles.go
@@ -30,7 +30,7 @@ func (s *MapService) GetMBTilesByName(c echo.Context) error {
 		return c.String(http.StatusBadRequest, "Failed to get metadata")
 	}
 
-	data.Tiles = []string{fmt.Sprintf("http://localhost:8080/api/v1/mbtiles/%s/{z}/{x}/{y}", name)}
+	data.Tiles = []string{fmt.Sprintf("http://localhost:8080/map/mbtiles/%s/{z}/{x}/{y}", name)}
 
 	return c.JSON(http.StatusOK, data)
 }
diff --git a/service/pmtiles.go b/service/pmtiles.go
index 880d5d6..7c759d1 100644
--- a/service/pmtiles.go
+++ b/service/pmtiles.go
@@ -30,7 +30,7 @@ func (s *MapService) GetPMTilesByName(c echo.Context) error {
 		return c.String(http.StatusBadRequest, "Failed to get metadata")
 	}
 
-	data.Tiles = []string{fmt.Sprintf("http://localhost:8080/api/v1/pmtiles/%s/{z}/{x}/{y}", name)}
+	data.Tiles = []string{fmt.Sprintf("http://localhost:8080/map/pmtiles/%s/{z}/{x}/{y}", name)}
 
 	return c.JSON(http.StatusOK, data)
 }
diff --git a/web/components/maplibre/CustomNavigationControl.ts b/web/components/maplibre/CustomNavigationControl.ts
new file mode 100644
index 0000000..661241e
--- /dev/null
+++ b/web/components/maplibre/CustomNavigationControl.ts
@@ -0,0 +1,47 @@
+import {
+  Map,
+  NavigationControl,
+  type NavigationControlOptions,
+} from "maplibre-gl";
+
+export class CustomNavigationControl extends NavigationControl {
+  _zoomLevel: HTMLButtonElement | undefined;
+
+  constructor(options: NavigationControlOptions) {
+    super(options);
+
+    if (this.options.showZoom) {
+      this._zoomLevel = document.createElement("button");
+      this._zoomLevel.textContent = "0.0";
+      this._zoomLevel.setAttribute("aria-label", "Zoom level");
+      this._zoomLevel.setAttribute("title", "Zoom level");
+      this._zoomLevel.setAttribute("aria-disabled", "false");
+      this._container.insertBefore(this._zoomLevel, this._zoomInButton);
+    }
+  }
+
+  override onAdd(map: Map) {
+    super.onAdd(map);
+
+    if (this.options.showZoom) {
+      this._updateZoomLevel();
+      this._map.on("zoom", () => this._updateZoomLevel());
+    }
+
+    return this._container;
+  }
+
+  override onRemove() {
+    if (this.options.showZoom) {
+      this._map.off("zoom", () => this._updateZoomLevel());
+    }
+
+    super.onRemove();
+  }
+
+  _updateZoomLevel() {
+    if (this._zoomLevel && this._map) {
+      this._zoomLevel.textContent = this._map.getZoom().toFixed(1);
+    }
+  }
+}
diff --git a/web/components/maplibre/editor.vue b/web/components/maplibre/editor.vue
index edcdb0f..bf224c9 100644
--- a/web/components/maplibre/editor.vue
+++ b/web/components/maplibre/editor.vue
@@ -41,6 +41,7 @@ const sprite = computed(() => {
         </div>
       </div>
     </div>
+    <div class="divider"></div>
     <div v-for="(layer, name) in layers" class="flex flex-col">
       <h4>{{ name.toString() }}-{{ layer.type }}</h4>
       <div class="flex flex-col" v-for="(value, key) in layer">