diff --git a/package-lock.json b/package-lock.json
index 0ed97b18..87ee2bf8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@storybook/html": "^7.6.17",
         "@storybook/html-webpack5": "^7.6.17",
         "@storybook/test": "^7.6.17",
+        "boosted": "^5.3.3",
         "iotmapmanager": "file:src/iotMapManager",
         "ods-storybook-theme": "^1.1.0",
         "react": "^18.2.0",
@@ -2772,6 +2773,17 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true,
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
@@ -6623,6 +6635,15 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/boosted": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/boosted/-/boosted-5.3.3.tgz",
+      "integrity": "sha512-5ORSWY7ZWhvG9b/TbgkM4zaeRu0tp+Dnv1DZ4l//Q1jX3VyazCAnbklO6MlDv5BJ0FASsK0WubG16PBHIjw3UA==",
+      "dev": true,
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/bplist-parser": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
@@ -14901,7 +14922,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
       "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
       "dev": true,
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/package.json b/package.json
index 1fa120a8..5d756f74 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "@storybook/html": "^7.6.17",
     "@storybook/html-webpack5": "^7.6.17",
     "@storybook/test": "^7.6.17",
+    "boosted": "^5.3.3",
     "iotmapmanager": "file:src/iotMapManager",
     "ods-storybook-theme": "^1.1.0",
     "react": "^18.2.0",
diff --git a/src/iotMapManager/css/map.css b/src/iotMapManager/css/map.css
index 801be4d5..14dafb8e 100644
--- a/src/iotMapManager/css/map.css
+++ b/src/iotMapManager/css/map.css
@@ -13,6 +13,9 @@
 */
 
 /* map.css */
+.leaflet-container {
+  font-family: HelvNeueOrange, "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
 
 /* layers icon */
 .leaflet-top.leaflet-right .leaflet-control-layers:nth-child(1) .leaflet-control-layers-toggle {
@@ -43,4 +46,3 @@
   color: black;
 }
 
-
diff --git a/src/iotMapManager/css/markers.css b/src/iotMapManager/css/markers.css
index 8b1f27d7..61fadc59 100644
--- a/src/iotMapManager/css/markers.css
+++ b/src/iotMapManager/css/markers.css
@@ -51,24 +51,23 @@
   top: 5px;
   left: 5px;
   z-index: 25;
+  line-height:1;
+  font-weight: bold;
   text-align: center;
-  font-family: "Helvetica Neue", 'helvetica';
 }
 
 .iotmap-markericon .iotmap-labelUnselected{
   width:20px;
   height:20px;
+  padding: 1px 0;
   font-size:18px;
-  line-height: 20px;
-  font-weight: bold;
 }
 
 .iotmap-markericon .iotmap-labelSelected{
   width:40px;
   height:40px;
+  padding: 4px 0 6px;
   font-size:30px;
-  line-height:45px;
-  font-weight: bold;
 }
 
 .iotmap-markericon .iotmap-iconUnselected{
@@ -123,10 +122,10 @@
   width:50px;
   height:50px;
   z-index: 25;
+  padding: 15px 0 17px;
   font-size: 18px;
-  font-family: "Helvetica Neue", 'helvetica';
   font-weight: bold;
-  line-height:50px;
+  line-height:1;
   text-align: center;
 }
 
@@ -137,10 +136,10 @@
   width:50px;
   height:50px;
   z-index: 25;
+  padding: 17px 0 19px;
   font-size: 14px;
-  font-family: "Helvetica Neue", 'helvetica';
   font-weight: bold;
-  line-height:50px;
+  line-height:1;
   text-align: center;
 }
 
@@ -151,10 +150,10 @@
   width:50px;
   height:50px;
   z-index: 25;
+  padding: 17px 0 20px;
   font-size: 13px;
-  font-family: "Helvetica Neue", 'helvetica';
   font-weight: bold;
-  line-height:50px;
+  line-height:1;
   text-align: center;
 }
 
diff --git a/src/stories/stories.css b/src/stories/stories.css
index b29c0446..93bb61f5 100644
--- a/src/stories/stories.css
+++ b/src/stories/stories.css
@@ -1 +1,2 @@
+@import "../../node_modules/boosted/dist/css/orange-helvetica.min.css";
 @import '~iotMapManager/iot-map-manager.css';
diff --git a/test/angular/src/styles.scss b/test/angular/src/styles.scss
index 23712b10..4de20091 100644
--- a/test/angular/src/styles.scss
+++ b/test/angular/src/styles.scss
@@ -1,3 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
-@import '~iotmapmanager/iot-map-manager.css';
+@import "~boosted/dist/css/orange-helvetica.min.css";
 @import "~boosted/dist/css/boosted.min.css";
+@import '~iotmapmanager/iot-map-manager.css';