diff --git a/src/pages/Map.scss b/src/pages/Map.scss
index d203f97a..a5ef9446 100644
--- a/src/pages/Map.scss
+++ b/src/pages/Map.scss
@@ -32,22 +32,28 @@ main > div,
       align-items: center;
 
       &-config {
+        display: flex;
         align-items: center;
+        justify-content: center;
+        position: relative;
         margin-left: 1em;
       }
 
       &-line {
+        z-index: -1;
+        position: absolute;
         width: 25px;
         height: 4px;
       }
 
       &-icon {
-        width: 20px;
-        height: 20px;
-        margin: 0 auto;
-        background-size: contain;
-        background-position: center;
-        background-repeat: no-repeat;
+        display: flex;
+
+        img {
+          width: 20px;
+          height: 20px;
+      }
+
       }
 
       &-title {
diff --git a/src/pages/components/map-related/MapIndex.tsx b/src/pages/components/map-related/MapIndex.tsx
index d5f7bd72..0ec86789 100644
--- a/src/pages/components/map-related/MapIndex.tsx
+++ b/src/pages/components/map-related/MapIndex.tsx
@@ -10,10 +10,10 @@ export function MapIndex({
   return (
     <div className="map-index-item">
       <div className="map-index-item-config">
-        <p className="map-index-item-line" style={{ backgroundColor: lineColor }}></p>
-        <p className="map-index-item-icon" style={{ backgroundImage: `url(${imgSrc})` }}>
-          {/* <img src={imgSrc} alt="planned route stop icon" /> */}
-        </p>
+        <div className="map-index-item-icon">
+          <img src={imgSrc} alt="planned route stop icon" />
+        </div>
+        <div className="map-index-item-line" style={{ backgroundColor: lineColor }} />
       </div>
       <div className="map-index-item-title">
         <h3>{title}</h3>