diff --git a/app/src/components/layout/controls/ControlsPlayer.tsx b/app/src/components/layout/controls/ControlsPlayer.tsx
index 248c466..4f897d2 100644
--- a/app/src/components/layout/controls/ControlsPlayer.tsx
+++ b/app/src/components/layout/controls/ControlsPlayer.tsx
@@ -10,6 +10,7 @@ const ControlsPlayer = () => {
   const { setIsPlaying } = usePlayButtonStore();
   const { activeModule } = useModuleStore();
   const [walkMode, setWalkMode] = useState(false);
+  const [hidePlayer, setHidePlayer] = useState(false);
 
   const changeCamMode = () => {
     setWalkMode(!walkMode);
@@ -17,37 +18,47 @@ const ControlsPlayer = () => {
   };
   return (
     <div className="controls-player-container">
-      <div className="controls-left">
-        <PlayIcon />
-        <div className="label">Running {activeModule}...</div>
-      </div>
+      {!hidePlayer && (
+        <div className="controls-left">
+          <PlayIcon />
+          <div className="label">Running {activeModule}...</div>
+        </div>
+      )}
 
       <div className="controls-right">
-        <div className="walkMode-wrapper">
-          <WalkIcon />
-          <InputToggle
-            value={walkMode}
-            inputKey="1"
-            label="Walk Mode"
-            onClick={changeCamMode}
-          />
-        </div>
+        {!hidePlayer && (
+          <div className="walkMode-wrapper">
+            <WalkIcon />
+            <InputToggle
+              value={walkMode}
+              inputKey="1"
+              label="Walk Mode"
+              onClick={changeCamMode}
+            />
+          </div>
+        )}
         <button
           id="controls-player-play-button"
-          className="btn-wrapper"
+          className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
           onClick={() => setIsPlaying(false)}
         >
           <div className="icon">
             <ExitIcon />
           </div>
-          Exit
+          {!hidePlayer && "Exit"}
         </button>
-        <div className="btn-wrapper">
+        <button
+          className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
+          id="hide-btn"
+          onClick={() => {
+            setHidePlayer(!hidePlayer);
+          }}
+        >
           <div className="icon">
             <EyeCloseIcon />
           </div>
-          Hide
-        </div>
+          {!hidePlayer && "Hide"}
+        </button>
       </div>
     </div>
   );
diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx
index d88dcae..de1652f 100644
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -11,6 +11,7 @@ import {
   DailyProductionIcon,
   EndIcon,
   ExpandIcon,
+  EyeCloseIcon,
   HourlySimulationIcon,
   InfoIcon,
   MonthlyROI,
@@ -30,6 +31,7 @@ const SimulationPlayer: React.FC = () => {
   const sliderRef = useRef<HTMLDivElement>(null);
   const [expand, setExpand] = useState(true);
   const [playSimulation, setPlaySimulation] = useState(false);
+  const [hidePlayer, setHidePlayer] = useState(false);
 
   const { speed, setSpeed } = useAnimationPlaySpeed();
   const { setIsPlaying } = usePlayButtonStore();
@@ -161,10 +163,10 @@ const SimulationPlayer: React.FC = () => {
 
   return (
     <>
-      <div className="simulation-player-wrapper">
+      <div className={`simulation-player-wrapper${hidePlayer ? " hide" : ""}`}>
         <div className={`simulation-player-container ${expand ? "open" : ""}`}>
           <div className="controls-container">
-            {subModule === "analysis" && (
+            {!hidePlayer && subModule === "analysis" && (
               <div className="production-details">
                 {/* hourlySimulation */}
                 <div className="hourly-wrapper production-wrapper">
@@ -213,7 +215,7 @@ const SimulationPlayer: React.FC = () => {
                 </div>
               </div>
             )}
-            {subModule !== "analysis" && (
+            {!hidePlayer && subModule !== "analysis" && (
               <div className="header">
                 <InfoIcon />
                 {playSimulation
@@ -222,26 +224,30 @@ const SimulationPlayer: React.FC = () => {
               </div>
             )}
             <div className="controls-wrapper">
-              <button
-                id="simulation-reset-button"
-                className="simulation-button-container"
-                onClick={() => {
-                  handleReset();
-                }}
-              >
-                <ResetIcon />
-                Reset
-              </button>
-              <button
-                id="simulation-play-button"
-                className="simulation-button-container"
-                onClick={() => {
-                  handlePlayStop();
-                }}
-              >
-                <PlayStopIcon />
-                {playSimulation ? "Play" : "Stop"}
-              </button>
+              {!hidePlayer && (
+                <button
+                  id="simulation-reset-button"
+                  className="simulation-button-container"
+                  onClick={() => {
+                    handleReset();
+                  }}
+                >
+                  <ResetIcon />
+                  Reset
+                </button>
+              )}
+              {!hidePlayer && (
+                <button
+                  id="simulation-play-button"
+                  className="simulation-button-container"
+                  onClick={() => {
+                    handlePlayStop();
+                  }}
+                >
+                  <PlayStopIcon />
+                  {playSimulation ? "Play" : "Stop"}
+                </button>
+              )}
               <button
                 id="simulation-reset-button"
                 className="simulation-button-container"
@@ -250,7 +256,17 @@ const SimulationPlayer: React.FC = () => {
                 }}
               >
                 <ExitIcon />
-                Exit
+                {!hidePlayer && "Exit"}
+              </button>
+              <button
+                id="simulation-reset-button"
+                className="simulation-button-container"
+                onClick={() => {
+                  setHidePlayer(!hidePlayer);
+                }}
+              >
+                <EyeCloseIcon />
+                {!hidePlayer && "Hide"}
               </button>
               {subModule === "analysis" && (
                 <button
@@ -263,100 +279,102 @@ const SimulationPlayer: React.FC = () => {
               )}
             </div>
           </div>
-          <div className="progresser-wrapper">
-            <div className="time-displayer">
-              <div className="start-time-wrappper">
-                <div className="icon">
-                  <StartIcon />
-                </div>
-                <div className="time-wrapper">
-                  <div className="date">23 April ,25</div>
-                  <div className="time">04:41 PM</div>
-                </div>
-              </div>
-              <div className="time-progresser">
-                <div className="timeline">
-                  {intervals.map((label, index) => {
-                    const segmentProgress = (index / totalSegments) * 100;
-                    const isFilled = progress >= segmentProgress;
-                    return (
-                      <React.Fragment key={`${index}-${label}`}>
-                        <div className="label-dot-wrapper">
-                          <div className="label">{label} mins</div>
-                          <div
-                            className={`dot ${isFilled ? "filled" : ""}`}
-                          ></div>
-                        </div>
-                        {index < intervals.length - 1 && (
-                          <div
-                            className={`line ${
-                              progress >= ((index + 1) / totalSegments) * 100
-                                ? "filled"
-                                : ""
-                            }`}
-                          ></div>
-                        )}
-                      </React.Fragment>
-                    );
-                  })}
-                </div>
-              </div>
-
-              <div className="end-time-wrappper">
-                <div className="time-wrapper">
-                  <div className="time">00:10:20</div>
-                </div>
-                <div className="icon">
-                  <EndIcon />
-                </div>
-              </div>
-            </div>
-            <div className="speed-control-container">
-              <div className="min-value">
-                <div className="icon">
-                  <SpeedIcon />
-                </div>
-                Speed
-              </div>
-              <div className="slider-container" ref={sliderRef}>
-                <div className="speed-label mix-value">0.5X</div>
-                <div className="marker marker-10"></div>
-                <div className="marker marker-20"></div>
-                <div className="marker marker-30"></div>
-                <div className="marker marker-40"></div>
-                <div className="marker marker-50"></div>
-                <div className="marker marker-60"></div>
-                <div className="marker marker-70"></div>
-                <div className="marker marker-80"></div>
-                <div className="marker marker-90"></div>
-                <div className="custom-slider-wrapper">
-                  <div className="custom-slider">
-                    <button
-                      id="slider-handle"
-                      className={`slider-handle ${
-                        isDragging ? "dragging" : ""
-                      }`}
-                      style={{ left: `${calculateHandlePosition()}%` }}
-                      onMouseDown={handleMouseDown}
-                    >
-                      {speed.toFixed(1)}x
-                    </button>
-                    <input
-                      type="range"
-                      min="0.5"
-                      max={MAX_SPEED}
-                      step="0.1"
-                      value={speed}
-                      onChange={handleSpeedChange}
-                      className="slider-input"
-                    />
+          {!hidePlayer && (
+            <div className="progresser-wrapper">
+              <div className="time-displayer">
+                <div className="start-time-wrappper">
+                  <div className="icon">
+                    <StartIcon />
+                  </div>
+                  <div className="time-wrapper">
+                    <div className="date">23 April ,25</div>
+                    <div className="time">04:41 PM</div>
+                  </div>
+                </div>
+                <div className="time-progresser">
+                  <div className="timeline">
+                    {intervals.map((label, index) => {
+                      const segmentProgress = (index / totalSegments) * 100;
+                      const isFilled = progress >= segmentProgress;
+                      return (
+                        <React.Fragment key={`${index}-${label}`}>
+                          <div className="label-dot-wrapper">
+                            <div className="label">{label} mins</div>
+                            <div
+                              className={`dot ${isFilled ? "filled" : ""}`}
+                            ></div>
+                          </div>
+                          {index < intervals.length - 1 && (
+                            <div
+                              className={`line ${
+                                progress >= ((index + 1) / totalSegments) * 100
+                                  ? "filled"
+                                  : ""
+                              }`}
+                            ></div>
+                          )}
+                        </React.Fragment>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                <div className="end-time-wrappper">
+                  <div className="time-wrapper">
+                    <div className="time">00:10:20</div>
+                  </div>
+                  <div className="icon">
+                    <EndIcon />
+                  </div>
+                </div>
+              </div>
+              <div className="speed-control-container">
+                <div className="min-value">
+                  <div className="icon">
+                    <SpeedIcon />
+                  </div>
+                  Speed
+                </div>
+                <div className="slider-container" ref={sliderRef}>
+                  <div className="speed-label mix-value">0.5X</div>
+                  <div className="marker marker-10"></div>
+                  <div className="marker marker-20"></div>
+                  <div className="marker marker-30"></div>
+                  <div className="marker marker-40"></div>
+                  <div className="marker marker-50"></div>
+                  <div className="marker marker-60"></div>
+                  <div className="marker marker-70"></div>
+                  <div className="marker marker-80"></div>
+                  <div className="marker marker-90"></div>
+                  <div className="custom-slider-wrapper">
+                    <div className="custom-slider">
+                      <button
+                        id="slider-handle"
+                        className={`slider-handle ${
+                          isDragging ? "dragging" : ""
+                        }`}
+                        style={{ left: `${calculateHandlePosition()}%` }}
+                        onMouseDown={handleMouseDown}
+                      >
+                        {speed.toFixed(1)}x
+                      </button>
+                      <input
+                        type="range"
+                        min="0.5"
+                        max={MAX_SPEED}
+                        step="0.1"
+                        value={speed}
+                        onChange={handleSpeedChange}
+                        className="slider-input"
+                      />
+                    </div>
+                    <div className="speed-label max-value">{MAX_SPEED}x</div>
                   </div>
-                  <div className="speed-label max-value">{MAX_SPEED}x</div>
                 </div>
               </div>
             </div>
-          </div>
-          {subModule === "analysis" && (
+          )}
+          {!hidePlayer && subModule === "analysis" && (
             <div className="processDisplayer">
               <div className="start-displayer timmer">00:00</div>
               <div className="end-displayer timmer">24:00</div>
diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss
index b664b37..f95518e 100644
--- a/app/src/styles/components/simulation/simulation.scss
+++ b/app/src/styles/components/simulation/simulation.scss
@@ -8,7 +8,16 @@
   z-index: 2;
   transform: translate(-50%, 0);
   width: 70vw;
-
+  transition: all 0.3s;
+  &.hide {
+    width: fit-content;
+    .simulation-player-container
+      .controls-container
+      .simulation-button-container {
+      width: 32px;
+      height: 24px;
+    }
+  }
   .simulation-player-container {
     background: var(--background-color);
     padding: 7px;
@@ -90,11 +99,12 @@
         @include flex-center;
         gap: 2px;
         padding: 4px 8px;
-        min-width: 64px;
+        width: 64px;
         background: var(--background-color);
         border-radius: #{$border-radius-extra-large};
         height: fit-content;
         cursor: pointer;
+        transition: all 0.2s;
 
         &:hover {
           outline: 1px solid var(--border-color);
@@ -357,7 +367,7 @@
   @include flex-center;
   justify-content: space-between;
   position: fixed;
-  bottom: 40px;
+  bottom: 32px;
   left: 50%;
   transform: translate(-50%, 0);
   color: var(--accent-color);
@@ -394,21 +404,23 @@
     }
 
     .btn-wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      @include flex-center;
       gap: 2px;
       padding: 4px 8px;
-      min-width: 64px;
+      width: 64px;
       background: var(--background-color);
       border-radius: 20px;
       height: fit-content;
       cursor: pointer;
-      transition: color .2s;
+      transition: all 0.2s;
+      outline: 1px solid transparent;
       &:hover {
         outline: 1px solid var(--border-color);
         color: var(--accent-color);
       }
+      &.hide{
+        width: 32px;
+      }
       .icon {
         width: 16px;
         height: 16px;
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index 5c7ba27..3140802 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -22,7 +22,6 @@
 
   .floating {
     // width: calc(var(--realTimeViz-container-width) * 0.2px);
-
     // transform: scale(min(1, calc(var(--realTimeViz-container-width) / 1000)));
 
     min-width: 230px;
@@ -63,7 +62,6 @@
     left: 50%;
     gap: 6px;
     border-radius: #{$border-radius-medium};
-
     overflow: auto;
     max-width: calc(100% - 500px);
     z-index: 3;
@@ -71,6 +69,10 @@
     pointer-events: all;
     transition: all 0.3s linear;
 
+    &.bottom{
+      bottom: var(--bottomWidth);
+    }
+
     &::-webkit-scrollbar {
       display: none;
     }
@@ -118,7 +120,10 @@
   }
 
   .zone-container.visualization-playing {
-    bottom: 70px;
+    bottom: 74px;
+    &.bottom{
+      bottom: var(--bottomWidth);
+    }
   }
 
   .zone-wrapper.bottom {