diff --git a/.env.production b/.env.production
index a7e4527..e05e86c 100644
--- a/.env.production
+++ b/.env.production
@@ -1,3 +1,3 @@
 VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
 VITE_FILE_API_BASEURL = "https://ibms-cvilux.production.mjmtech.com.tw"
-VITE_FORGE_BASEURL = "http://202.39.218.221:8080/file/netzero"
\ No newline at end of file
+VITE_FORGE_BASEURL = "https://cgems.cvilux-group.com:8088/dist"
\ No newline at end of file
diff --git a/src/hooks/forge/useForgeHeatmap.js b/src/hooks/forge/useForgeHeatmap.js
index d540dfb..f494438 100644
--- a/src/hooks/forge/useForgeHeatmap.js
+++ b/src/hooks/forge/useForgeHeatmap.js
@@ -1,36 +1,75 @@
 import { watch, inject, markRaw, ref } from "vue";
+import { useRoute } from "vue-router";
 
-export default function useForgeHeatmap(dataVizExtn, forgeViewer){
-  const { subscribeData } = inject("system_deviceList");
+export default function useForgeHeatmap() {
+  const route = useRoute();
+  const { subscribeData, realtimeData } = inject("system_deviceList");
 
-  const createHeatMap = async (heatMapName) => {
+  // const data = computed(()=>)
+
+  const forgeViewer = ref(null);
+  const dataVizExtn = ref(null);
+  const updateViewExtension = (viewer, dataVisualization) => {
+    forgeViewer.value = viewer;
+    dataVizExtn.value = dataVisualization;
+  };
+
+  //create the heatmap
+  function getSensorValue(device, sensorType, pointData) {
+    const dev = realtimeData.value.find(
+      ({ device_number }) => device_number === device.id
+    );
+    const point = dev.data.find(({ point }) => point === route.query?.gas);
+    console.log(9, device, dev, point);
+
+    return (point?.value || 0) / 40;
+  }
+
+  watch(
+    () => realtimeData,
+    () => {
+      Object.keys(dataVizExtn.value?.surfaceShading).length &&
+        dataVizExtn.value.updateSurfaceShading(getSensorValue);
+    },
+    {
+      deep: true,
+    }
+  );
+
+  const createHeatMap = async () => {
+    const heatMapName = `iot_heatmap_${route.query?.gas}`;
+    console.log("createHeatMap", heatMapName);
     const {
       SurfaceShadingData,
       SurfaceShadingPoint,
       SurfaceShadingNode,
       SurfaceShadingGroup,
     } = Autodesk.DataVisualization.Core;
-    const shadingGroup = new SurfaceShadingGroup(`iot_heatmap_${heatMapName}`);
+    const shadingGroup = new SurfaceShadingGroup(`${heatMapName}_group`);
     const rooms = new Map();
 
-    for (const { id, roomDbId, position, sensorTypes } of subscribeData.value) {
-      if (!id || roomDbId == -1 || !roomDbId) {
-        continue;
+    subscribeData.value.forEach(
+      ({
+        device_number: id,
+        room_dbid: roomDbId,
+        device_coordinate_3d: position,
+        sensorTypes,
+      }) => {
+        if (!id || roomDbId == -1 || !roomDbId) {
+          return;
+        }
+        if (!rooms.has(roomDbId)) {
+          const room = new SurfaceShadingNode(id, roomDbId);
+          shadingGroup.addChild(room);
+          rooms.set(roomDbId, room);
+        }
+        const room = rooms.get(roomDbId);
+        room.addPoint(new SurfaceShadingPoint(id, position, sensorTypes));
       }
-
-      if (!rooms.has(roomDbId)) {
-        const room = new SurfaceShadingNode(id, roomDbId);
-        shadingGroup.addChild(room);
-        rooms.set(roomDbId, room);
-      }
-      const room = rooms.get(roomDbId);
-      room.addPoint(new SurfaceShadingPoint(id, position, sensorTypes));
-    }
-
-    const shadingData = new SurfaceShadingData();
+    );
+    const shadingData = new SurfaceShadingData(`${heatMapName}_data`);
     shadingData.addChild(shadingGroup);
     shadingData.initialize(forgeViewer.value?.model);
-
     await dataVizExtn.value.setupSurfaceShading(
       forgeViewer.value.model,
       shadingData
@@ -40,10 +79,22 @@ export default function useForgeHeatmap(dataVizExtn, forgeViewer){
       [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]
     );
     dataVizExtn.value.renderSurfaceShading(
-      `iot_heatmap_${heatMapName}`,
       heatMapName,
+      route.query.gas.shading,
       getSensorValue
     );
-
   };
-}
\ No newline at end of file
+
+  watch(
+    () => route.query,
+    (newValue, oldValue) => {
+      if (newValue.gas !== oldValue.gas) {
+        createHeatMap(newValue.gas);
+      } else if (!newValue.gas) {
+        dataVizExtn.value?.removeSurfaceShading();
+      }
+    }
+  );
+
+  return { createHeatMap, updateViewExtension };
+}
diff --git a/src/hooks/forge/useForgeSprite.js b/src/hooks/forge/useForgeSprite.js
index 6a6678c..716a253 100644
--- a/src/hooks/forge/useForgeSprite.js
+++ b/src/hooks/forge/useForgeSprite.js
@@ -1,8 +1,8 @@
-import { watch, inject, markRaw, ref, computed } from "vue";
+import { watch, inject, markRaw, ref, computed, provide } from "vue";
 import useAlarmStore from "@/stores/useAlarmStore";
 import hexToRgb from "@/util/hexToRgb";
-import { useRoute } from "vue-router";
 import useSelectedFloor from "@/hooks/useSelectedFloor";
+import useForgeHeatmap from "./useForgeHeatmap";
 
 export default function useForgeSprite() {
   const store = useAlarmStore();
@@ -12,6 +12,9 @@ export default function useForgeSprite() {
   );
   const forgeViewer = ref(null);
   const dataVizExtn = ref(null);
+
+  const { createHeatMap, updateViewExtension } = useForgeHeatmap();
+
   const updateDataVisualization = async (viewer) => {
     if (!forgeViewer.value) {
       forgeViewer.value = markRaw(viewer);
@@ -21,6 +24,7 @@ export default function useForgeSprite() {
       "Autodesk.DataVisualization"
     );
     dataVizExtn.value = markRaw(dataVisualization);
+    updateViewExtension(markRaw(viewer), markRaw(dataVisualization));
   };
 
   function onSpriteClicked(event) {
@@ -72,7 +76,6 @@ export default function useForgeSprite() {
       viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
       showData.value?.forEach((d, index) => {
         if (d.device_coordinate_3d) {
-          console.log(d.device_coordinate_3d);
           const position = d.device_coordinate_3d;
           style.color = new THREE.Color(hexToRgb(d.device_normal_color));
           const viewable = new DataVizCore.SpriteViewable(
@@ -89,6 +92,7 @@ export default function useForgeSprite() {
       viewableData.finish().then(
         () => {
           dataVizExtn.value.addViewables(viewableData);
+          createHeatMap();
         },
         (error) => {
           console.log(error);
@@ -171,6 +175,6 @@ export default function useForgeSprite() {
     updateDataVisualization,
     hideAllObjects,
     forgeClickListener,
-    clear
+    clear,
   };
 }