diff --git a/mobile/asa-go/src/FBAMap.tsx b/mobile/asa-go/src/FBAMap.tsx
index b7a208f94..9e8968509 100644
--- a/mobile/asa-go/src/FBAMap.tsx
+++ b/mobile/asa-go/src/FBAMap.tsx
@@ -1,4 +1,3 @@
-import { PMTilesVectorSource } from "ol-pmtiles";
 import { Map, View } from "ol";
 import "ol/ol.css";
 import { defaults as defaultControls, FullScreen } from "ol/control";
@@ -12,16 +11,13 @@ import { source as baseMapSource, BC_EXTENT } from "utils/constants";
 import TileLayer from "ol/layer/Tile";
 import { FireCenter, FireShape, FireShapeArea, RunType } from "api/fbaAPI";
 import {
-  fireCentreStyler,
   fireCentreLabelStyler,
-  fireShapeStyler,
   fireShapeLineStyler,
   fireShapeLabelStyler,
   fireCentreLineStyler,
   hfiStyler,
 } from "@/featureStylers";
 import { DateTime } from "luxon";
-import { PMTILES_BUCKET } from "utils/env";
 import { isUndefined, cloneDeep } from "lodash";
 import { Box } from "@mui/material";
 // import Legend from "@/Legend";
@@ -54,8 +50,6 @@ export interface FBAMapProps {
 }
 
 const FBAMap = (props: FBAMapProps) => {
-  const [showShapeStatus] = useState(true);
-  // const [showHFI, setShowHFI] = useState(false);
   const [map, setMap] = useState<Map | null>(null);
   const mapRef = useRef<HTMLDivElement | null>(
     null
@@ -64,105 +58,6 @@ const FBAMap = (props: FBAMapProps) => {
     null
   ) as React.MutableRefObject<HTMLElement>;
 
-  const fireCentreVectorSource = new PMTilesVectorSource({
-    url: `${PMTILES_BUCKET}fireCentres.pmtiles`,
-  });
-  const fireShapeVectorSource = new PMTilesVectorSource({
-    url: `${PMTILES_BUCKET}fireZoneUnits.pmtiles`,
-  });
-  const fireCentreLabelVectorSource = new PMTilesVectorSource({
-    url: `${PMTILES_BUCKET}fireCentreLabels.pmtiles`,
-  });
-  const fireShapeLabelVectorSource = new PMTilesVectorSource({
-    url: `${PMTILES_BUCKET}fireZoneUnitLabels.pmtiles`,
-  });
-
-  const [fireCentreVTL] = useState(
-    new VectorTileLayer({
-      source: fireCentreVectorSource,
-      style: fireCentreStyler(props.selectedFireCenter),
-      zIndex: 51,
-    })
-  );
-
-  const [fireCentreLineVTL] = useState(
-    new VectorTileLayer({
-      source: fireCentreVectorSource,
-      style: fireCentreLineStyler(props.selectedFireCenter),
-      zIndex: 52,
-    })
-  );
-
-  const [fireShapeVTL] = useState(
-    new VectorTileLayer({
-      source: fireShapeVectorSource,
-      style: fireShapeStyler(
-        cloneDeep(props.fireShapeAreas),
-        props.advisoryThreshold,
-        showShapeStatus
-      ),
-      zIndex: 50,
-      properties: { name: "fireShapeVector" },
-    })
-  );
-  const [fireShapeHighlightVTL] = useState(
-    new VectorTileLayer({
-      source: fireShapeVectorSource,
-      style: fireShapeLineStyler(
-        cloneDeep(props.fireShapeAreas),
-        props.advisoryThreshold,
-        props.selectedFireShape
-      ),
-      zIndex: 53,
-      properties: { name: "fireShapeVector" },
-    })
-  );
-  // Seperate layer for polygons and for labels, to avoid duplicate labels.
-  const [fireCentreLabelVTL] = useState(
-    new VectorTileLayer({
-      source: fireCentreLabelVectorSource,
-      style: fireCentreLabelStyler,
-      zIndex: 100,
-      maxZoom: 6,
-    })
-  );
-  // Seperate layer for polygons and for labels, to avoid duplicate labels.
-  const [fireShapeLabelVTL] = useState(
-    new VectorTileLayer({
-      declutter: true,
-      source: fireShapeLabelVectorSource,
-      style: fireShapeLabelStyler(props.selectedFireShape),
-      zIndex: 99,
-      minZoom: 6,
-    })
-  );
-
-  useEffect(() => {
-    if (map) {
-      map.on("click", (event) => {
-        fireShapeVTL.getFeatures(event.pixel).then((features) => {
-          if (!features.length) {
-            props.setSelectedFireShape(undefined);
-            return;
-          }
-          const feature = features[0];
-          if (!feature) {
-            return;
-          }
-
-          const fireZone: FireShape = {
-            fire_shape_id: feature.getProperties().OBJECTID,
-            mof_fire_zone_name: feature.getProperties().FIRE_ZONE,
-            mof_fire_centre_name: feature.getProperties().FIRE_CENTR,
-            area_sqm: feature.getProperties().Shape_Area,
-          };
-          props.setZoomSource("fireShape");
-          props.setSelectedFireShape(fireZone);
-        });
-      });
-    }
-  }, [map]); // eslint-disable-line react-hooks/exhaustive-deps
-
   useEffect(() => {
     // zoom to fire center or whole province
     if (!map) return;
@@ -202,29 +97,6 @@ const FBAMap = (props: FBAMapProps) => {
   useEffect(() => {
     if (!map) return;
 
-    fireCentreVTL.setStyle(fireCentreStyler(props.selectedFireCenter));
-    fireShapeVTL.setStyle(
-      fireShapeStyler(
-        cloneDeep(props.fireShapeAreas),
-        props.advisoryThreshold,
-        showShapeStatus
-      )
-    );
-    fireShapeLabelVTL.setStyle(fireShapeLabelStyler(props.selectedFireShape));
-    fireShapeHighlightVTL.setStyle(
-      fireShapeLineStyler(
-        cloneDeep(props.fireShapeAreas),
-        props.advisoryThreshold,
-        props.selectedFireShape
-      )
-    );
-    fireCentreLineVTL.setStyle(fireCentreLineStyler(props.selectedFireCenter));
-
-    fireShapeVTL.changed();
-    fireShapeHighlightVTL.changed();
-    fireShapeLabelVTL.changed();
-    fireCentreLineVTL.changed();
-    fireCentreVTL.changed();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     props.selectedFireCenter,
@@ -252,10 +124,6 @@ const FBAMap = (props: FBAMapProps) => {
         new TileLayer({
           source: baseMapSource,
         }),
-        fireShapeVTL,
-        fireShapeHighlightVTL,
-        fireCentreLabelVTL,
-        fireShapeLabelVTL,
       ],
       overlays: [],
       controls: defaultControls().extend([new FullScreen()]),
@@ -274,27 +142,93 @@ const FBAMap = (props: FBAMapProps) => {
 
     setMap(mapObject);
 
-    const load = async () => {
-      const fireCentreFileVectorSource =
-        await PMTilesFileVectorSource.createHFILayer(
+    const loadPMTiles = async () => {
+      // TODO make for date, run type, run date configurable from UI
+      const hfiVectorSource = await PMTilesFileVectorSource.createHFILayer(
+        new PMTilesCache(Filesystem),
+        {
+          filename: "hfi.pmtiles",
+          for_date: DateTime.fromFormat("2024/08/08", "yyyy/MM/dd"),
+          run_type: RunType.FORECAST,
+          run_date: DateTime.fromFormat("2024/08/08", "yyyy/MM/dd"),
+        }
+      );
+
+      const fireCentresSource = await PMTilesFileVectorSource.createStaticLayer(
+        new PMTilesCache(Filesystem),
+        {
+          filename: "fireCentres.pmtiles",
+        }
+      );
+
+      const fireCentreLabelVectorSource =
+        await PMTilesFileVectorSource.createStaticLayer(
+          new PMTilesCache(Filesystem),
+          {
+            filename: "fireCentreLabels.pmtiles",
+          }
+        );
+
+      const fireZoneSource = await PMTilesFileVectorSource.createStaticLayer(
+        new PMTilesCache(Filesystem),
+        {
+          filename: "fireZoneUnits.pmtiles",
+        }
+      );
+
+      const fireZoneLabelVectorSource =
+        await PMTilesFileVectorSource.createStaticLayer(
           new PMTilesCache(Filesystem),
           {
-            filename: "hfi.pmtiles",
-            for_date: DateTime.fromFormat("2024/08/08", "yyyy/MM/dd"),
-            run_type: RunType.FORECAST,
-            run_date: DateTime.fromFormat("2024/08/08", "yyyy/MM/dd"),
+            filename: "fireZoneUnitLabels.pmtiles",
           }
         );
       if (mapObject) {
-        const fileLayer = new VectorTileLayer({
-          source: fireCentreFileVectorSource,
+        const fireCentreFileLayer = new VectorTileLayer({
+          source: fireCentresSource,
+          style: fireCentreLineStyler(props.selectedFireCenter),
+          zIndex: 52,
+        });
+
+        const fireCentreLabelsFileLayer = new VectorTileLayer({
+          source: fireCentreLabelVectorSource,
+          style: fireCentreLabelStyler,
+          zIndex: 100,
+          maxZoom: 6,
+        });
+
+        const fireZoneFileLayer = new VectorTileLayer({
+          source: fireZoneSource,
+          style: fireShapeLineStyler(
+            cloneDeep(props.fireShapeAreas),
+            props.advisoryThreshold,
+            props.selectedFireShape
+          ),
+          zIndex: 53,
+          properties: { name: "fireShapeVector" },
+        });
+
+        const fireZoneLabelFileLayer = new VectorTileLayer({
+          source: fireZoneLabelVectorSource,
+          declutter: true,
+          style: fireShapeLabelStyler(props.selectedFireShape),
+          zIndex: 99,
+          minZoom: 6,
+        });
+
+        const hfiFileLayer = new VectorTileLayer({
+          source: hfiVectorSource,
           style: hfiStyler,
           zIndex: 52,
         });
-        mapObject.addLayer(fileLayer);
+        mapObject.addLayer(hfiFileLayer);
+        mapObject.addLayer(fireCentreFileLayer);
+        mapObject.addLayer(fireCentreLabelsFileLayer);
+        mapObject.addLayer(fireZoneFileLayer);
+        mapObject.addLayer(fireZoneLabelFileLayer);
       }
     };
-    load();
+    loadPMTiles();
     return () => {
       mapObject.setTarget("");
     };