diff --git a/src/modules/KmMarks.ts b/src/modules/KmMarks.ts
index b39958d..8c64fdd 100644
--- a/src/modules/KmMarks.ts
+++ b/src/modules/KmMarks.ts
@@ -77,10 +77,10 @@ class Component extends LayerGroup {
 
   createMiddleMarker = (latlng: LatLngLiteral, angle: number, distance: number): Marker => marker(latlng, {
     draggable: false,
-    interactive: false,
+    interactive: true,
     icon: divIcon({
       html: `
-        <div class="leaflet-km-dist" style="transform: translate(0, 0) rotate(${allwaysPositiveAngleDeg(angle)}deg);">
+        <div class="leaflet-km-dist" style="transform: translate(-50%, -50%) rotate(${allwaysPositiveAngleDeg(angle)}deg);">
           ${distance}
         </div>
       `,
diff --git a/src/modules/Sticker.tsx b/src/modules/Sticker.tsx
index fc69eb0..2ffff77 100644
--- a/src/modules/Sticker.tsx
+++ b/src/modules/Sticker.tsx
@@ -55,6 +55,8 @@ export class Sticker {
     this.deleteSticker = deleteSticker;
     this.lockMapClicks = lockMapClicks;
 
+    console.log({ set, sticker });
+
     ReactDOM.render(
       <React.Fragment>
         <div
diff --git a/src/styles/map.less b/src/styles/map.less
index e39374f..0528ad4 100644
--- a/src/styles/map.less
+++ b/src/styles/map.less
@@ -121,8 +121,8 @@
     align-items: center;
     justify-content: center;
     position: relative;
-    top: 0;
-    left: -4px;
+    top: 50%;
+    left: 50%;
     font-weight: bold;
     padding: 0 2px;
   }
diff --git a/webpack.config.js b/webpack.config.js
index 4f3d145..4b085ce 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -143,6 +143,7 @@ module.exports = () => {
     devServer: {
       historyApiFallback: true,
       port: 8000,
+      host: '192.168.88.40',
       contentBase: 'dist',
       publicPath: '/',
       hot: true,