diff --git a/src/components/map/WorldMap.tsx b/src/components/map/WorldMap.tsx
index afe3618..350acd2 100644
--- a/src/components/map/WorldMap.tsx
+++ b/src/components/map/WorldMap.tsx
@@ -16,6 +16,9 @@ import { useLocation, useSearchParams } from 'react-router-dom';
 import { useEffect } from 'react';
 import { getGranules, getSpatialSearchGranuleVariables } from '../../constants/graphqlQueries';
 
+const REACT_APP_MAPBOX_STYLE = process.env.REACT_APP_MAPBOX_STYLE;
+const REACT_APP_MAPBOX_ACCESS_TOKEN = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;
+
 let DefaultIcon = L.icon({
     iconUrl: icon,
     shadowUrl: iconShadow
@@ -214,8 +217,8 @@ const WorldMap = () => {
           }
           <div style={{float:'right', width:'49%', height:'100%'}} id='map-tutorial-target'/>
           <TileLayer
-            url='https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
-            attribution='Esri, Maxar, Earthstar Geographics, and the GIS User Community'
+            url={`https://api.mapbox.com/styles/v1/${REACT_APP_MAPBOX_STYLE}/tiles/256/{z}/{x}/{y}@2x?access_token=${REACT_APP_MAPBOX_ACCESS_TOKEN}`}
+            attribution='© Mapbox, © OpenStreetMap'
             maxZoom = {18}
             noWrap
             bounds={