diff --git a/src/App.scss b/src/App.scss
index 6be11b2..33706e1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -61,7 +61,6 @@ body {
 }
 
 // customize zoom button styles
-$background-size: 64px;
 $border-radius: 6px;
 
 .leaflet-bottom .leaflet-control {
@@ -75,20 +74,20 @@ $border-radius: 6px;
   border-bottom: none;
   background-color: unset;
 }
+
+.leaflet-touch .leaflet-bar a {
+  background-size: 64px;
+}
 .leaflet-touch .leaflet-bar a:first-child {
   border-top-left-radius: $border-radius;
   border-top-right-radius: $border-radius;
 
-  background-image: url(http://localhost:3000//LUTI_Zoom_Icon.svg);
-  background-size: $background-size;
   background-position: top -10px left -15px;
 }
 .leaflet-touch .leaflet-bar a:last-child {
   border-bottom-left-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
 
-  background-image: url(http://localhost:3000//LUTI_Zoom_Icon.svg);
-  background-size: $background-size;
   background-position: bottom -11px left -15px;
 }
 .leaflet-touch .leaflet-bar a:hover {
diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js
index 10703cc..7320978 100644
--- a/src/components/InfoBox.js
+++ b/src/components/InfoBox.js
@@ -17,7 +17,16 @@ export default function InfoBox({ desc, displayMode, title, url }) {
   const ref = useRef(null);
 
   useEffect(() => {
-    const intro = document.querySelector(".leaflet-control-zoom"); // this except use the new buttons
+    const controlLinks = document.querySelector(
+      ".leaflet-touch .leaflet-bar a:last-child"
+    );
+    if (!controlLinks) return;
+
+    controlLinks.style.backgroundImage = "url(/LUTI_Zoom_Icon.svg)";
+  }, []);
+
+  useEffect(() => {
+    const intro = document.querySelector(".leaflet-control-zoom");
     const height = ref.current.clientHeight;
 
     if (!height || !intro) return;