diff --git a/src/components/Common/BlueRect/index.module.css b/src/components/Common/BlueRect/index.module.css
index b830ebc..4e139d5 100644
--- a/src/components/Common/BlueRect/index.module.css
+++ b/src/components/Common/BlueRect/index.module.css
@@ -94,69 +94,69 @@
 /** center top **/
 .TE227 {
   top: 128px;
-  left: 660px;
+  left: 630px;
 }
 .TE229 {
   top: 128px;
-  left: 776px; /* +120px */
+  left: 746px; /* +120px */
 }
 .TE231 {
   top: 128px;
-  left: 896px;
+  left: 866px;
 }
 .TE233 {
   top: 128px;
-  left: 1006px;
+  left: 980px;
 }
 .TE235 {
   top: 128px;
-  left: 1119px;
+  left: 1100px;
 }
 .TE237 {
   top: 128px;
-  left: 1236px;
+  left: 1220px;
 }
 .TE239 {
   top: 128px;
-  left: 1346px;
+  left: 1330px;
 }
 .TE241 {
   top: 128px;
-  left: 1456px;
+  left: 1450px;
 }
 
 /** center bottom **/
 .TE228 {
   top: 620px;
-  left: 628px;
+  left: 600px;
 }
 .TE230 {
   top: 620px;
-  left: 750px;
+  left: 720px;
 }
 .TE232 {
   top: 620px;
-  left: 870px;
+  left: 850px;
 }
 .TE234 {
   top: 620px;
-  left: 995px;
+  left: 970px;
 }
 .TE236 {
   top: 620px;
-  left: 1120px;
+  left: 1100px;
 }
 .TE238 {
   top: 620px;
-  left: 1245px;
+  left: 1225px;
 }
 .TE240 {
   top: 620px;
-  left: 1370px;
+  left: 1350px;
 }
 .TE242 {
   top: 620px;
-  left: 1480px;
+  left: 1470px;
 }
 
 /** center middle **/
@@ -244,7 +244,7 @@
   left: 2070px;
 }
 .TE218 {
-  top: 640px;
+  top: 660px;
   left: 2090px;
 }
 .TE219 {
@@ -264,7 +264,7 @@
   left: 2180px;
 }
 .TE223 {
-  top: 640px;
+  top: 660px;
   left: 2200px;
 }
 .TE224 {
@@ -309,69 +309,69 @@
 /** center top **/
 .TE333 {
   top: 128px;
-  left: 620px;
+  left: 670px;
 }
 .TE335 {
   top: 128px;
-  left: 735px;
+  left: 785px;
 }
 .TE337 {
   top: 128px;
-  left: 855px;
+  left: 890px;
 }
 .TE339 {
   top: 128px;
-  left: 975px;
+  left: 1010px;
 }
 .TE341 {
   top: 128px;
-  left: 1090px;
+  left: 1120px;
 }
 .TE343 {
   top: 128px;
-  left: 1205px;
+  left: 1235px;
 }
 .TE345 {
   top: 128px;
-  left: 1325px;
+  left: 1345px;
 }
 .TE347 {
   top: 128px;
-  left: 1440px;
+  left: 1450px;
 }
 
 /** center bottom **/
 .TE334 {
   top: 620px;
-  left: 588px;
+  left: 620px;
 }
 .TE336 {
   top: 620px;
-  left: 710px;
+  left: 740px;
 }
 .TE338 {
   top: 620px;
-  left: 840px;
+  left: 860px;
 }
 .TE340 {
   top: 620px;
-  left: 965px;
+  left: 1000px;
 }
 .TE342 {
   top: 620px;
-  left: 1090px;
+  left: 1120px;
 }
 .TE344 {
   top: 620px;
-  left: 1215px;
+  left: 1245px;
 }
 .TE346 {
   top: 620px;
-  left: 1340px;
+  left: 1370px;
 }
 .TE348 {
   top: 620px;
-  left: 1460px;
+  left: 1490px;
 }
 
 /** center middle **/
diff --git a/src/components/Common/Feeder/index.jsx b/src/components/Common/Feeder/index.jsx
index 564bf28..007b14b 100644
--- a/src/components/Common/Feeder/index.jsx
+++ b/src/components/Common/Feeder/index.jsx
@@ -11,7 +11,7 @@ function FeederStatus(props) {
       style={{
         position: "absolute",
         bottom: "128px",
-        left: "800px",
+        left: "740px",
         width: "300px",
         height: "80px",
         zIndex: "-1",
diff --git a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx
index 8c755d5..5d27719 100644
--- a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx
+++ b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx
@@ -2,12 +2,13 @@ import { motion, AnimatePresence } from "framer-motion";
 import { useRef, useEffect, useMemo, useCallback, useState } from "react";
 import FeederStatus from "../../../../Common/Feeder";
 import TemperatureBottom from "../../../../Common/TemperatureBottom";
+import TemperatureTop from "../../../../Common/TemperatureTop";
+import { useSelector, useDispatch } from "react-redux";
 
 function EnterToFloorOne(props) {
-  // const ctx = useContext(SocketContext);
-  const ctx = null;
+  const fireInfo = useSelector((state) => state.fireInfo);
+  const fireDir = fireInfo?.fireDirection || null;
 
-  const fireDir = ctx?.runState?.fireDirection || null;
   const [fireCanPlay, setFireCanPlay] = useState(false);
   const vd = useRef(null);
   const show = props.opacity || 0;
@@ -69,10 +70,10 @@ function EnterToFloorOne(props) {
             ></video>
           )}
 
-          <TemperatureBottom
+          <TemperatureTop
             style={{
               top: "218px",
-              left: "688px",
+              left: "678px",
               width: "2380px",
               zIndex: 0,
             }}
diff --git a/src/components/Modules/KilnInner/Center/videoComponents/Floor1To2.jsx b/src/components/Modules/KilnInner/Center/videoComponents/Floor1To2.jsx
index 6ba7cfc..23d6852 100644
--- a/src/components/Modules/KilnInner/Center/videoComponents/Floor1To2.jsx
+++ b/src/components/Modules/KilnInner/Center/videoComponents/Floor1To2.jsx
@@ -2,12 +2,13 @@ import { motion, AnimatePresence } from "framer-motion";
 import { useRef, useEffect, useMemo, useState } from "react";
 import FeederStatus from "../../../../Common/Feeder";
 import TemperatureTop from "../../../../../components/Common/TemperatureTop";
-
+import TemperatureBottom from "../../../../Common/TemperatureBottom";
+import { useSelector, useDispatch } from "react-redux";
 
 function FloorOneToTwo(props) {
-  const ctx = null;
+  const fireInfo = useSelector((state) => state.fireInfo);
+  const fireDir = fireInfo?.fireDirection || null;
 
-  const fireDir = ctx?.runState?.fireDirection || null;
   const [fireCanPlay, setFireCanPlay] = useState(false);
 
   const vd = useRef(null);
@@ -72,7 +73,7 @@ function FloorOneToTwo(props) {
             ></video>
           )}
 
-          <TemperatureTop
+          <TemperatureBottom
             style={{
               top: "208px",
               left: "638px",
diff --git a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx
index f5ee630..597a2d1 100644
--- a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx
+++ b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx
@@ -2,11 +2,12 @@ import { motion, AnimatePresence } from "framer-motion";
 import { useRef, useEffect, useMemo, useState } from "react";
 import FeederStatus from "../../../../Common/Feeder";
 import TemperatureBottom from "../../../../Common/TemperatureBottom";
+import TemperatureTop from "../../../../Common/TemperatureTop";
+import { useSelector, useDispatch } from "react-redux";
 
 function FloorTwoToOne(props) {
-  const ctx = null;
-
-  const fireDir = ctx?.runState?.fireDirection || null;
+  const fireInfo = useSelector((state) => state.fireInfo);
+  const fireDir = fireInfo?.fireDirection || null;
   const [fireCanPlay, setFireCanPlay] = useState(false);
 
   const vd = useRef(null);
@@ -72,15 +73,15 @@ function FloorTwoToOne(props) {
             ></video>
           )}
 
-          <TemperatureBottom
+          <TemperatureTop
             style={{
-              top: "208px",
-              left: "638px",
+              top: "200px",
+              left: "628px",
               width: "2380px",
               zIndex: 0,
             }}
           />
-          <FeederStatus />
+          <FeederStatus style={{ left: "680px" }} />
         </motion.div>
       )}
     </AnimatePresence>