diff --git a/umdloop_gui_web/app/GUI functions/CameraManagerModal.js b/umdloop_gui_web/app/GUI functions/CameraManagerModal.js
index 64ac478..b1d0bbe 100644
--- a/umdloop_gui_web/app/GUI functions/CameraManagerModal.js	
+++ b/umdloop_gui_web/app/GUI functions/CameraManagerModal.js	
@@ -7,7 +7,26 @@ import CameraFeed from "./CameraFeed";
 
 const ROLE_OPTIONS = [
   { value: "", label: "Unassigned" },
-  ...Object.entries(CAMERA_ROLES).map(([, value]) => ({ value, label: value })),
+  { value: CAMERA_ROLES.FRONT, label: "Front Camera" },
+  { value: CAMERA_ROLES.BACK, label: "Back Camera" },
+  { value: CAMERA_ROLES.LEFT_SIDE, label: "Left Side Camera" },
+  { value: CAMERA_ROLES.RIGHT_SIDE, label: "Right Side Camera" },
+  { value: CAMERA_ROLES.RADIO_VIEW, label: "Radio View" },
+  { value: CAMERA_ROLES.WHEEL_TL_A, label: "TL Wheel A" },
+  { value: CAMERA_ROLES.WHEEL_TL_B, label: "TL Wheel B" },
+  { value: CAMERA_ROLES.WHEEL_TR_A, label: "TR Wheel A" },
+  { value: CAMERA_ROLES.WHEEL_TR_B, label: "TR Wheel B" },
+  { value: CAMERA_ROLES.WHEEL_BL_A, label: "BL Wheel A" },
+  { value: CAMERA_ROLES.WHEEL_BL_B, label: "BL Wheel B" },
+  { value: CAMERA_ROLES.WHEEL_BR_A, label: "BR Wheel A" },
+  { value: CAMERA_ROLES.WHEEL_BR_B, label: "BR Wheel B" },
+  { value: CAMERA_ROLES.ARM_BASE, label: "Arm Base" },
+  { value: CAMERA_ROLES.ARM_JOINT, label: "Arm Joint" },
+  { value: CAMERA_ROLES.ARM_EE, label: "Arm End Effector" },
+  { value: CAMERA_ROLES.ARM_GRIPPER, label: "Arm Gripper" },
+  { value: CAMERA_ROLES.SCIENCE_1, label: "Science Cam 1 / Overhead Scoops / Nightvision" },
+  { value: CAMERA_ROLES.SCIENCE_2, label: "Science Cam 2 / View of Scoops" },
+  { value: CAMERA_ROLES.SCIENCE_3, label: "Science Cam 3 / View of Sampler / Rover Field View" },
 ];
 
 const QUALITY_OPTIONS = ["low", "medium", "high", "ultra"];
diff --git a/umdloop_gui_web/app/GUI functions/Navigation.js b/umdloop_gui_web/app/GUI functions/Navigation.js
index 7aac68e..6783a3f 100644
--- a/umdloop_gui_web/app/GUI functions/Navigation.js	
+++ b/umdloop_gui_web/app/GUI functions/Navigation.js	
@@ -10,6 +10,8 @@ export default function Navigation({ selectedNavItem }) {
   const [longitude, setLongitude] = useState("");
   const [navMode, setNavMode] = useState("GNSS");
   const [pathPlanStatus, setPathPlanStatus] = useState("");
+  const [rosCommand, setRosCommand] = useState("");
+  const [rosCommandStatus, setRosCommandStatus] = useState("");
 
   const fetchStatus = async () => {
     try {
@@ -77,6 +79,17 @@ export default function Navigation({ selectedNavItem }) {
     }
   };
 
+  const onRosCommandSubmit = () => {
+    const command = rosCommand.trim();
+
+    if (!command) {
+      setRosCommandStatus("Enter a ROS2 command first");
+      return;
+    }
+
+    setRosCommandStatus(`Ready to send: ${command}`);
+  };
+
   useEffect(() => {
     if (selectedNavItem !== "Object Detection") return undefined;
 
@@ -221,6 +234,66 @@ export default function Navigation({ selectedNavItem }) {
           </div>
         </div>
       )}
+
+      {selectedNavItem === "Placeholder2" && (
+        <div style={{ display: "flex", justifyContent: "center" }}>
+          <div
+            style={{
+              width: "min(760px, 100%)",
+              padding: "18px 20px",
+              borderRadius: "14px",
+              border: "2px solid #1f1e1eff",
+              background: "#2b2b2b",
+              color: "white",
+              display: "grid",
+              gap: "12px",
+            }}
+          >
+            <h2 style={{ margin: 0 }}>ROS2 Command</h2>
+            <textarea
+              value={rosCommand}
+              onChange={(e) => {
+                setRosCommand(e.target.value);
+                setRosCommandStatus("");
+              }}
+              placeholder="ros2 topic pub /cmd_vel geometry_msgs/msg/Twist '{linear: {x: 0.0}, angular: {z: 0.0}}'"
+              rows={8}
+              style={{
+                width: "100%",
+                resize: "vertical",
+                minHeight: "160px",
+                padding: "12px",
+                borderRadius: "10px",
+                border: "2px solid #1f1e1eff",
+                background: "#3d3d3d",
+                color: "white",
+                outline: "none",
+                fontFamily: "monospace",
+                fontSize: "14px",
+              }}
+            />
+            <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: "10px", alignItems: "center" }}>
+              <div style={{ color: rosCommandStatus.startsWith("Ready") ? "#d8d8d8" : "#ffb3b3", fontWeight: 700 }}>
+                {rosCommandStatus}
+              </div>
+              <button
+                onClick={onRosCommandSubmit}
+                style={{
+                  padding: "10px 16px",
+                  borderRadius: "10px",
+                  border: "2px solid #1f1e1eff",
+                  background: "#3d3d3d",
+                  color: "white",
+                  fontWeight: 900,
+                  cursor: "pointer",
+                }}
+              >
+                Send Command
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/umdloop_gui_web/app/GUI functions/NavigationBar.js b/umdloop_gui_web/app/GUI functions/NavigationBar.js
index 3121dbc..f85b043 100644
--- a/umdloop_gui_web/app/GUI functions/NavigationBar.js	
+++ b/umdloop_gui_web/app/GUI functions/NavigationBar.js	
@@ -1,11 +1,11 @@
 "use client";
 
 import React, { useState } from "react";
-import { MODE_ICONS, MODES } from "./pageConstants";
+import { NAV_MODE_ICONS, NAV_MODES } from "./pageConstants";
 
 export default function NavigationBar({ selectedMode, setSelectedMode }) {
   const [hoveredButtonId, setHoveredButtonId] = useState(null);
-  const [selectedButton, setSelectedButton] = useState(MODES.indexOf(selectedMode));
+  const [selectedButton, setSelectedButton] = useState(NAV_MODES.indexOf(selectedMode));
 
   return (
     <nav
@@ -15,11 +15,11 @@ export default function NavigationBar({ selectedMode, setSelectedMode }) {
         justifyContent: "center",
         alignItems: "center",
         gap: "6px",
-        padding: "12px 8px",
+        padding: "8px 8px",
         background: "#3d3d3d",
       }}
     >
-      {MODE_ICONS.map((mode, idx) => {
+      {NAV_MODE_ICONS.map((mode, idx) => {
         const buttonColor =
           hoveredButtonId === idx
             ? "#353535ff"
@@ -34,24 +34,24 @@ export default function NavigationBar({ selectedMode, setSelectedMode }) {
               background: buttonColor,
               border: "2px solid #1f1e1eff",
               borderRadius: "10px",
-              padding: "12px 8px",
+              padding: "8px 8px",
               cursor: "pointer",
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
-              gap: "6px",
+              gap: "4px",
               flex: 1,
               minWidth: "0",
             }}
             onMouseEnter={() => setHoveredButtonId(idx)}
             onMouseLeave={() => setHoveredButtonId(null)}
             onClick={() => {
-              setSelectedMode(MODES[idx]);
+              setSelectedMode(NAV_MODES[idx]);
               setSelectedButton(idx);
             }}
           >
-            {mode && <img src={`/${mode}`} alt={mode.replace(".png", "")} style={{ width: "36px", height: "36px" }} />}
-            <span style={{ color: "white", fontSize: "10px", whiteSpace: "nowrap" }}>{MODES[idx]}</span>
+            {mode && <img src={`/${mode}`} alt={mode.replace(".png", "")} style={{ width: "30px", height: "30px" }} />}
+            <span style={{ color: "white", fontSize: "10px", whiteSpace: "nowrap" }}>{NAV_MODES[idx]}</span>
           </button>
         );
       })}
diff --git a/umdloop_gui_web/app/GUI functions/OperatorTab.js b/umdloop_gui_web/app/GUI functions/OperatorTab.js
index 65dfd8e..3f812bd 100644
--- a/umdloop_gui_web/app/GUI functions/OperatorTab.js	
+++ b/umdloop_gui_web/app/GUI functions/OperatorTab.js	
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import RamanPlot from "../../spectrometer/RamanPlot";
 import CameraFeed from "./CameraFeed";
 import CameraManagerModal from "./CameraManagerModal";
@@ -19,18 +19,71 @@ export default function OperatorTab({ selectedSubsystem, setSelectedSubsystem })
   const [lastPanoramaLabel, setLastPanoramaLabel] = useState("No panorama captured yet.");
   const [sciencePopup, setSciencePopup] = useState(null);
   const [showCameraManager, setShowCameraManager] = useState(false);
+  const [stopwatchRunning, setStopwatchRunning] = useState(false);
+  const [stopwatchElapsedMs, setStopwatchElapsedMs] = useState(0);
+  const [locationReached, setLocationReached] = useState(false);
+  const stopwatchStartRef = useRef(null);
+  const driveRosCommandPlaceholders = ["ROS2 Command 1", "ROS2 Command 2", "ROS2 Command 3", "ROS2 Command 4"];
+  const confettiPieces = Array.from({ length: 42 }, (_, index) => ({
+    id: index,
+    color: ["#ff4d4d", "#ffd166", "#06d6a0", "#4cc9f0", "#f72585", "#ffffff"][index % 6],
+    delay: `${(index % 7) * 0.08}s`,
+    duration: `${1.55 + (index % 5) * 0.16}s`,
+    rotation: `${(index * 37) % 360}deg`,
+    burstX: `${((index % 10) - 4.5) * 10}px`,
+    burstY: `${-185 - (index % 7) * 24}px`,
+    fallX: `${((index % 12) - 5.5) * 24}px`,
+    fallY: `${300 + (index % 8) * 36}px`,
+  }));
 
   useEffect(() => {
     const handleKey = (e) => {
       if (e.key === "Escape") {
         setFullscreenCam(null);
         setSciencePopup(null);
+        setLocationReached(false);
       }
     };
     window.addEventListener("keydown", handleKey);
     return () => window.removeEventListener("keydown", handleKey);
   }, []);
 
+  useEffect(() => {
+    if (!stopwatchRunning) return undefined;
+
+    const intervalId = window.setInterval(() => {
+      const startedAt = stopwatchStartRef.current ?? Date.now();
+      setStopwatchElapsedMs(Date.now() - startedAt);
+    }, 100);
+
+    return () => window.clearInterval(intervalId);
+  }, [stopwatchRunning]);
+
+  const formatStopwatch = (elapsedMs) => {
+    const totalTenths = Math.floor(elapsedMs / 100);
+    const minutes = String(Math.floor(totalTenths / 600)).padStart(2, "0");
+    const seconds = String(Math.floor((totalTenths % 600) / 10)).padStart(2, "0");
+    const tenths = totalTenths % 10;
+    return `${minutes}:${seconds}.${tenths}`;
+  };
+
+  const startStopwatch = () => {
+    stopwatchStartRef.current = Date.now() - stopwatchElapsedMs;
+    setStopwatchRunning(true);
+  };
+
+  const pauseStopwatch = () => {
+    const startedAt = stopwatchStartRef.current ?? Date.now();
+    setStopwatchElapsedMs(Date.now() - startedAt);
+    setStopwatchRunning(false);
+  };
+
+  const resetStopwatch = () => {
+    stopwatchStartRef.current = Date.now();
+    setStopwatchElapsedMs(0);
+    setStopwatchRunning(false);
+  };
+
   const FullscreenOverlay = () =>
     fullscreenCam && (
       <div
@@ -164,19 +217,103 @@ export default function OperatorTab({ selectedSubsystem, setSelectedSubsystem })
       <button onClick={() => setCameraRotateDeg(0)} style={{ borderRadius: "6px", border: "1px solid #555", background: "#303030", color: "white", cursor: "pointer", padding: "4px 10px", fontSize: "11px" }}>Reset</button>
       <div style={{ width: "1px", height: "18px", background: "#4a4a4a" }} />
       <span style={{ fontSize: "11px", color: "#ddd", fontWeight: 800 }}>View:</span>
-      <button onClick={() => setSelectedSubsystem?.("Drive")} style={{ borderRadius: "6px", border: "1px solid #555", background: selectedSubsystem === "Drive" ? "#7c1919" : "#303030", color: "white", cursor: "pointer", padding: "4px 10px", fontSize: "11px" }}>Drive</button>
+      <button onClick={() => setSelectedSubsystem?.("Drive (Default)")} style={{ borderRadius: "6px", border: "1px solid #555", background: selectedSubsystem === "Drive (Default)" ? "#7c1919" : "#303030", color: "white", cursor: "pointer", padding: "4px 10px", fontSize: "11px" }}>Drive</button>
+      <button onClick={() => setSelectedSubsystem?.("Drive (Science)")} style={{ borderRadius: "6px", border: "1px solid #555", background: selectedSubsystem === "Drive (Science)" ? "#7c1919" : "#303030", color: "white", cursor: "pointer", padding: "4px 10px", fontSize: "11px" }}>Drive Science</button>
       <button onClick={() => setSelectedSubsystem?.("Arm")} style={{ borderRadius: "6px", border: "1px solid #555", background: selectedSubsystem === "Arm" ? "#7c1919" : "#303030", color: "white", cursor: "pointer", padding: "4px 10px", fontSize: "11px" }}>Arm</button>
-      <button onClick={() => setSelectedSubsystem?.("Science")} style={{ borderRadius: "6px", border: "1px solid #555", background: selectedSubsystem === "Science" ? "#7c1919" : "#303030", color: "white", cursor: "pointer", padding: "4px 10px", fontSize: "11px" }}>Science</button>
       <button onClick={() => setShowCameraManager(true)} style={{ borderRadius: "6px", border: "1px solid #555", background: "#1a3f6f", color: "white", cursor: "pointer", padding: "4px 10px", fontSize: "11px", fontWeight: 700 }}>Camera Manager</button>
+      {(selectedSubsystem === "Drive (Default)" || selectedSubsystem === "Drive") ? (
+        <button
+          onClick={() => setLocationReached(true)}
+          style={{
+            marginLeft: "auto",
+            borderRadius: "8px",
+            border: locationReached ? "1px solid #2f7d3a" : "1px solid #803737",
+            background: locationReached ? "#1f8f35" : "#8a1f1f",
+            color: "white",
+            cursor: "pointer",
+            padding: "6px 14px",
+            fontSize: "12px",
+            fontWeight: 900,
+          }}
+        >
+          Location Reached
+        </button>
+      ) : null}
     </div>
   );
 
-  if (selectedSubsystem === "Drive") {
+  if (selectedSubsystem === "Drive (Science)") {
+    const scienceDrivePanels = [
+      { title: "Wide-Angle Panorama Image", tone: "#2d4f62" },
+      { title: "Stratigraphic Profile Image", tone: "#6a5234" },
+      { title: "Close-Up High Res. Image", tone: "#5c3f2d" },
+      { title: "GNSS Coords. / Elevation", tone: "#2d3b4f" },
+    ];
+
+    return (
+      <div style={{ padding: "12px", minHeight: 0, height: "100%", background: "#1a1a1a", overflow: "auto" }}>
+        <div style={{ width: "100%", border: "2px solid #3d3d3d", borderRadius: "14px", background: "#202020", padding: "16px", display: "grid", gridTemplateRows: "auto auto repeat(4, minmax(0, 1fr))", gap: "12px", minHeight: "100%" }}>
+          <div style={{ color: "white", fontWeight: 900, fontSize: "18px", textAlign: "center", letterSpacing: "0.03em" }}>
+            Rover Operator (Driver)
+          </div>
+          <div style={{ border: "2px solid #4a4a4a", borderRadius: "10px", background: "#262626", padding: "10px 12px", display: "grid", gap: "8px" }}>
+            <div style={{ color: "#d9d9d9", fontSize: "11px", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.08em" }}>
+              Stopwatch
+            </div>
+            <div style={{ color: "white", fontSize: "28px", fontWeight: 900, textAlign: "center", fontVariantNumeric: "tabular-nums", lineHeight: 1.1 }}>
+              {formatStopwatch(stopwatchElapsedMs)}
+            </div>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: "8px" }}>
+              <button
+                onClick={stopwatchRunning ? pauseStopwatch : startStopwatch}
+                style={{ borderRadius: "8px", border: "1px solid #555", background: stopwatchRunning ? "#6d1111" : "#303030", color: "white", cursor: "pointer", fontWeight: 700, padding: "6px 10px" }}
+              >
+                {stopwatchRunning ? "Pause" : "Start"}
+              </button>
+              <button
+                onClick={resetStopwatch}
+                style={{ borderRadius: "8px", border: "1px solid #555", background: "#303030", color: "white", cursor: "pointer", fontWeight: 700, padding: "6px 10px" }}
+              >
+                Reset
+              </button>
+            </div>
+          </div>
+          {scienceDrivePanels.map((panel) => (
+            <div key={panel.title} style={{ background: "#232323", border: "2px solid #3d3d3d", borderRadius: "10px", padding: "10px", display: "grid", gridTemplateRows: "auto minmax(0, 1fr)", gap: "8px", minHeight: 0 }}>
+              <div style={{ color: "#e8e8e8", fontSize: "11px", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.06em" }}>
+                {panel.title}
+              </div>
+              <div
+                style={{
+                  borderRadius: "8px",
+                  border: "1px solid #4a4a4a",
+                  background: `linear-gradient(180deg, ${panel.tone} 0%, #1b1b1b 100%)`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "rgba(255,255,255,0.82)",
+                  fontWeight: 800,
+                  fontSize: panel.title === "GNSS Coords. / Elevation" ? "18px" : "20px",
+                  textAlign: "center",
+                  padding: "12px",
+                  minHeight: 0,
+                }}
+              >
+                {panel.title === "GNSS Coords. / Elevation" ? "GNSS Coords. / Elevation" : panel.title}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (selectedSubsystem === "Drive (Default)" || selectedSubsystem === "Drive") {
     const wheelGroups = [
-      { label: "Top Left Wheel", roles: [CAMERA_ROLES.WHEEL_TL_A, CAMERA_ROLES.WHEEL_TL_B] },
-      { label: "Top Right Wheel", roles: [CAMERA_ROLES.WHEEL_TR_A, CAMERA_ROLES.WHEEL_TR_B] },
-      { label: "Bottom Left Wheel", roles: [CAMERA_ROLES.WHEEL_BL_A, CAMERA_ROLES.WHEEL_BL_B] },
-      { label: "Bottom Right Wheel", roles: [CAMERA_ROLES.WHEEL_BR_A, CAMERA_ROLES.WHEEL_BR_B] },
+      { label: "Top Left Wheel", role: CAMERA_ROLES.WHEEL_TL_A },
+      { label: "Top Right Wheel", role: CAMERA_ROLES.WHEEL_TR_A },
+      { label: "Bottom Left Wheel", role: CAMERA_ROLES.WHEEL_BL_A },
+      { label: "Bottom Right Wheel", role: CAMERA_ROLES.WHEEL_BR_A },
     ];
 
     return (
@@ -189,6 +326,27 @@ export default function OperatorTab({ selectedSubsystem, setSelectedSubsystem })
           >
             {emergencyStop ? "EMERGENCY STOP ACTIVE" : "Emergency Stop"}
           </button>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: "6px", marginTop: "8px" }}>
+            {driveRosCommandPlaceholders.map((commandLabel) => (
+              <button
+                key={commandLabel}
+                type="button"
+                style={{
+                  minHeight: "42px",
+                  borderRadius: "8px",
+                  border: "1px solid #555",
+                  background: "#303030",
+                  color: "#d8d8d8",
+                  cursor: "pointer",
+                  fontWeight: 800,
+                  fontSize: "10px",
+                  padding: "6px",
+                }}
+              >
+                {commandLabel}
+              </button>
+            ))}
+          </div>
         </div>
 
         <ControlRow />
@@ -205,26 +363,22 @@ export default function OperatorTab({ selectedSubsystem, setSelectedSubsystem })
             {wheelGroups.map((wheel) => (
               <div key={wheel.label} style={{ background: "#2b2b2b", borderRadius: "10px", border: "1px solid #3d3d3d", padding: "4px", display: "flex", flexDirection: "column", minHeight: 0 }}>
                 <div style={{ color: "white", fontSize: "8px", fontWeight: 700, textAlign: "center", marginBottom: "2px" }}>{wheel.label}</div>
-                <div style={{ display: "flex", gap: "3px", flex: 1, minHeight: 0 }}>
-                  {wheel.roles.map((role) => (
-                    <CameraFeed
-                      key={role}
-                      role={role}
-                      label={role}
-                      rotateDeg={cameraRotateDeg}
-                      onClick={() => setFullscreenCam({ label: `${wheel.label} - ${role}`, role })}
-                      style={{ flex: 1, borderRadius: 4, border: "1px solid #3d3d3d", cursor: "pointer" }}
-                    />
-                  ))}
-                </div>
+                <CameraFeed
+                  role={wheel.role}
+                  label={wheel.label}
+                  rotateDeg={cameraRotateDeg}
+                  onClick={() => setFullscreenCam({ label: wheel.label, role: wheel.role })}
+                  style={{ flex: 1, borderRadius: 4, border: "1px solid #3d3d3d", cursor: "pointer" }}
+                />
               </div>
             ))}
           </div>
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "6px", minHeight: 0 }}>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: "6px", minHeight: 0 }}>
             {[
               { label: "Back Camera", role: CAMERA_ROLES.BACK },
               { label: "Left Side", role: CAMERA_ROLES.LEFT_SIDE },
               { label: "Right Side", role: CAMERA_ROLES.RIGHT_SIDE },
+              { label: "Radio View", role: CAMERA_ROLES.RADIO_VIEW },
             ].map((cam) => (
               <CameraFeed
                 key={cam.role}
@@ -238,6 +392,87 @@ export default function OperatorTab({ selectedSubsystem, setSelectedSubsystem })
           </div>
         </div>
         <FullscreenOverlay />
+        {locationReached ? (
+          <div
+            tabIndex={-1}
+            onClick={() => setLocationReached(false)}
+            style={{
+              position: "fixed",
+              inset: 0,
+              zIndex: 1200,
+              background: "rgba(0,0,0,0.86)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "24px",
+              overflow: "hidden",
+            }}
+          >
+            <style>
+              {`
+                @keyframes locationReachedConfetti {
+                  0% {
+                    opacity: 0;
+                    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(0.65);
+                  }
+                  10% {
+                    opacity: 1;
+                  }
+                  36% {
+                    opacity: 1;
+                    transform: translate3d(calc(-50% + var(--confetti-burst-x)), calc(-50% + var(--confetti-burst-y)), 0) rotate(260deg) scale(1);
+                  }
+                  100% {
+                    opacity: 0;
+                    transform: translate3d(calc(-50% + var(--confetti-fall-x)), calc(-50% + var(--confetti-fall-y)), 0) rotate(780deg) scale(0.95);
+                  }
+                }
+              `}
+            </style>
+            {confettiPieces.map((piece) => (
+              <div
+                key={piece.id}
+                style={{
+                  position: "absolute",
+                  left: "50%",
+                  top: "50%",
+                  width: piece.id % 3 === 0 ? "7px" : "10px",
+                  height: piece.id % 3 === 0 ? "16px" : "8px",
+                  borderRadius: piece.id % 4 === 0 ? "9999px" : "2px",
+                  background: piece.color,
+                  transform: `rotate(${piece.rotation})`,
+                  opacity: 0,
+                  animation: `locationReachedConfetti ${piece.duration} cubic-bezier(0.18, 0.82, 0.28, 1) ${piece.delay} 2`,
+                  "--confetti-burst-x": piece.burstX,
+                  "--confetti-burst-y": piece.burstY,
+                  "--confetti-fall-x": piece.fallX,
+                  "--confetti-fall-y": piece.fallY,
+                }}
+              />
+            ))}
+            <div
+              onClick={(event) => event.stopPropagation()}
+              style={{
+                width: "min(900px, 92vw)",
+                minHeight: "min(360px, 70vh)",
+                borderRadius: "14px",
+                border: "3px solid #2f7d3a",
+                background: "#102215",
+                boxShadow: "0 18px 60px rgba(0,0,0,0.55)",
+                color: "white",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                textAlign: "center",
+                fontSize: "clamp(44px, 8vw, 96px)",
+                fontWeight: 1000,
+                letterSpacing: "0.04em",
+              }}
+            >
+              LOCATION REACHED
+            </div>
+          </div>
+        ) : null}
         {showCameraManager && <CameraManagerModal onClose={() => setShowCameraManager(false)} />}
       </div>
     );
@@ -270,6 +505,26 @@ export default function OperatorTab({ selectedSubsystem, setSelectedSubsystem })
               <input type="range" min={0} max={100} value={armClampDistance} onChange={(e) => setArmClampDistance(Number(e.target.value))} style={{ width: "100%" }} />
               <div style={{ color: "white", fontSize: "12px" }}>{armClampDistance}%</div>
             </div>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }}>
+              {["Cylindrical Control", "Joint By Joint"].map((controlMode) => (
+                <button
+                  key={controlMode}
+                  type="button"
+                  style={{
+                    minHeight: "46px",
+                    borderRadius: "8px",
+                    border: "1px solid #555",
+                    background: "#303030",
+                    color: "#d8d8d8",
+                    cursor: "pointer",
+                    fontWeight: 900,
+                    padding: "8px",
+                  }}
+                >
+                  {controlMode}
+                </button>
+              ))}
+            </div>
           </div>
         </div>
 
diff --git a/umdloop_gui_web/app/GUI functions/PageContent.js b/umdloop_gui_web/app/GUI functions/PageContent.js
index 5bf568c..ca0d164 100644
--- a/umdloop_gui_web/app/GUI functions/PageContent.js	
+++ b/umdloop_gui_web/app/GUI functions/PageContent.js	
@@ -5,6 +5,7 @@ import MapView from "./MapView";
 import OperationsWall from "./OperationsWall";
 import OperatorTab from "./OperatorTab";
 import Navigation from "./Navigation";
+import ScienceMonitor from "./ScienceMonitor";
 import TechnicianDashboard from "./TechnicianDashboard";
 import SubsystemBar from "./SubsystemBar";
 import { NAVIGATION_BUTTONS } from "./pageConstants";
@@ -32,6 +33,14 @@ export default function PageContent({
     );
   }
 
+  if (selectedMode === "Science") {
+    return (
+      <div style={{ height: "100%", minHeight: 0 }}>
+        <ScienceMonitor />
+      </div>
+    );
+  }
+
   if (selectedMode === "Drone") {
     return (
       <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: "12px", height: "100%", padding: "10px" }}>
diff --git a/umdloop_gui_web/app/GUI functions/ScienceMonitor.js b/umdloop_gui_web/app/GUI functions/ScienceMonitor.js
new file mode 100644
index 0000000..0c67399
--- /dev/null
+++ b/umdloop_gui_web/app/GUI functions/ScienceMonitor.js	
@@ -0,0 +1,590 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import RamanPlot from "../../spectrometer/RamanPlot";
+import CameraFeed from "./CameraFeed";
+import CameraManagerModal from "./CameraManagerModal";
+import { CAMERA_ROLES, SCIENCE_SUBSYSTEMS } from "./pageConstants";
+import SubsystemBar from "./SubsystemBar";
+
+const RAMAN_WS_URL = "ws://localhost:5001/ws/spectrum";
+const SCIENCE_CAMERA_ROLES = [CAMERA_ROLES.SCIENCE_1, CAMERA_ROLES.SCIENCE_2, CAMERA_ROLES.SCIENCE_3];
+
+export default function ScienceMonitor() {
+  const [selectedScienceTab, setSelectedScienceTab] = useState(SCIENCE_SUBSYSTEMS[0]);
+  const [fullscreenCam, setFullscreenCam] = useState(null);
+  const [lastPanoramaLabel, setLastPanoramaLabel] = useState("No panorama captured yet.");
+  const [panoramaShots, setPanoramaShots] = useState(0);
+  const [sciencePhotos, setSciencePhotos] = useState(0);
+  const [sciencePopup, setSciencePopup] = useState(null);
+  const [showCameraManager, setShowCameraManager] = useState(false);
+  const [stopwatchRunning, setStopwatchRunning] = useState(false);
+  const [stopwatchElapsedMs, setStopwatchElapsedMs] = useState(0);
+  const [cameraRotateDeg] = useState(0);
+  const stopwatchStartRef = useRef(null);
+  const isEquipmentSpecialistTab = selectedScienceTab.startsWith("Equipment Specialist");
+  const isScientist1Tab1 = selectedScienceTab === "Scientist 1 Tab 1";
+  const isScientist1Tab2 = selectedScienceTab === "Scientist 1 Tab 2";
+  const isScientist2Tab2 = selectedScienceTab === "Scientist 2 Tab 2";
+
+  const cameraBySlot = (slot) => {
+    if (slot >= 7 && slot <= 9) return SCIENCE_CAMERA_ROLES[slot - 7];
+    return SCIENCE_CAMERA_ROLES[slot % SCIENCE_CAMERA_ROLES.length];
+  };
+
+  useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        setFullscreenCam(null);
+        setSciencePopup(null);
+      }
+    };
+
+    window.addEventListener("keydown", handleKey);
+    return () => {
+      window.removeEventListener("keydown", handleKey);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!stopwatchRunning) return undefined;
+
+    const intervalId = window.setInterval(() => {
+      const startedAt = stopwatchStartRef.current ?? Date.now();
+      setStopwatchElapsedMs(Date.now() - startedAt);
+    }, 100);
+
+    return () => window.clearInterval(intervalId);
+  }, [stopwatchRunning]);
+
+  const CameraImage = ({ cameraId, alt, style, ...imageProps }) => (
+    <CameraFeed
+      role={cameraId}
+      label={alt}
+      rotateDeg={cameraRotateDeg}
+      style={style}
+      {...imageProps}
+    />
+  );
+
+  const CameraCard = ({ camera }) => (
+    <div
+      onClick={() => setFullscreenCam(camera)}
+      style={{
+        background: "#2b2b2b",
+        borderRadius: "10px",
+        border: "1px solid #3d3d3d",
+        padding: "5px",
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        height: "100%",
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = "#c90202";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = "#3d3d3d";
+      }}
+    >
+      <h4 style={{ color: "white", fontSize: "10px", fontWeight: "bold", textAlign: "center", marginBottom: "3px" }}>
+        {camera.label} {camera.id ? `(${camera.id})` : "(No Cam)"}
+      </h4>
+      <CameraImage
+        cameraId={camera.id}
+        alt={camera.label}
+        style={{
+          width: "100%",
+          flex: 1,
+          objectFit: "cover",
+          borderRadius: "6px",
+          background: "black",
+          minHeight: 0,
+          transform: `rotate(${cameraRotateDeg}deg)`,
+          transformOrigin: "center center",
+        }}
+        pausedStyle={{ fontSize: "12px" }}
+      />
+    </div>
+  );
+
+  const formatStopwatch = (elapsedMs) => {
+    const totalTenths = Math.floor(elapsedMs / 100);
+    const minutes = String(Math.floor(totalTenths / 600)).padStart(2, "0");
+    const seconds = String(Math.floor((totalTenths % 600) / 10)).padStart(2, "0");
+    const tenths = totalTenths % 10;
+    return `${minutes}:${seconds}.${tenths}`;
+  };
+
+  const startStopwatch = () => {
+    stopwatchStartRef.current = Date.now() - stopwatchElapsedMs;
+    setStopwatchRunning(true);
+  };
+
+  const pauseStopwatch = () => {
+    const startedAt = stopwatchStartRef.current ?? Date.now();
+    setStopwatchElapsedMs(Date.now() - startedAt);
+    setStopwatchRunning(false);
+  };
+
+  const resetStopwatch = () => {
+    stopwatchStartRef.current = Date.now();
+    setStopwatchElapsedMs(0);
+    setStopwatchRunning(false);
+  };
+
+  const FullscreenOverlay = () =>
+    fullscreenCam && (
+      <div
+        onClick={() => setFullscreenCam(null)}
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: "rgba(0, 0, 0, 0.95)",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 1000,
+          padding: "20px",
+        }}
+      >
+        <h2 style={{ color: "white", fontSize: "22px", fontWeight: "bold", marginBottom: "12px" }}>{fullscreenCam.label}</h2>
+        <CameraImage
+          cameraId={fullscreenCam.id}
+          alt={fullscreenCam.label}
+          style={{
+            maxWidth: "100%",
+            maxHeight: "80vh",
+            objectFit: "contain",
+            borderRadius: "12px",
+            background: "black",
+            transform: `rotate(${cameraRotateDeg}deg)`,
+            transformOrigin: "center center",
+          }}
+          pausedStyle={{ width: "min(900px, 90vw)", height: "60vh", fontSize: "18px" }}
+        />
+      </div>
+    );
+
+  const SciencePopupOverlay = () => {
+    if (!sciencePopup) return null;
+
+    let title = "";
+    let body = null;
+
+    if (sciencePopup === "panorama") {
+      title = "Panorama Preview";
+      body = (
+        <div style={{ display: "grid", gap: "10px" }}>
+          <CameraImage
+            cameraId={CAMERA_ROLES.SCIENCE_1}
+            alt="Latest panorama preview"
+            style={{ width: "100%", maxHeight: "50vh", objectFit: "cover", borderRadius: "10px", border: "1px solid #444", background: "#111" }}
+            pausedStyle={{ height: "40vh" }}
+          />
+          <div style={{ color: "#d8d8d8", fontSize: "13px" }}>{lastPanoramaLabel}</div>
+          <div style={{ color: "#a9a9a9", fontSize: "12px" }}>Placeholder preview panel. Stitching/export will be wired later.</div>
+        </div>
+      );
+    } else if (sciencePopup === "tasks") {
+      title = "Additional Science Tasks";
+      const taskItems = [
+        "Soil Core Collection",
+        "Rock Face Classification",
+        "Sample Bag Labeling",
+        "Drill Site Annotation",
+        "Spectrometer Calibration",
+      ];
+      body = (
+        <div style={{ display: "grid", gap: "8px" }}>
+          {taskItems.map((task) => (
+            <button
+              key={task}
+              style={{ textAlign: "left", borderRadius: "8px", border: "1px solid #555", background: "#2d2d2d", color: "white", padding: "10px 12px", cursor: "pointer", fontWeight: 700 }}
+            >
+              {task}
+            </button>
+          ))}
+          <div style={{ color: "#a9a9a9", fontSize: "12px" }}>Task actions are UI placeholders for now.</div>
+        </div>
+      );
+    } else if (sciencePopup === "soil") {
+      title = "Soil Moisture Analysis";
+      const points = [28, 34, 41, 39, 44, 48, 52];
+      body = (
+        <div style={{ display: "grid", gap: "8px" }}>
+          <div style={{ color: "#d8d8d8", fontSize: "13px" }}>Probe trend over last 7 reads</div>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "6px", alignItems: "end", height: "150px", background: "#171717", border: "1px solid #444", borderRadius: "8px", padding: "10px" }}>
+            {points.map((p, i) => (
+              <div key={`soil-${i}`} style={{ height: `${p * 2}px`, background: "#16a34a", borderRadius: "4px 4px 0 0" }} title={`T${i + 1}: ${p}%`} />
+            ))}
+          </div>
+          <div style={{ color: "#a9a9a9", fontSize: "12px" }}>Graph is a placeholder UI panel.</div>
+        </div>
+      );
+    } else if (sciencePopup === "spectral") {
+      title = "Raman Spectrum Analysis";
+      body = (
+        <div style={{ display: "grid", gap: "8px" }}>
+          <div style={{ color: "#d8d8d8", fontSize: "13px" }}>
+            Live Raman spectrum from spectrometer backend on port 5001
+          </div>
+          <RamanPlot wsUrl={RAMAN_WS_URL} width={700} height={400} />
+          <div style={{ color: "#a9a9a9", fontSize: "12px" }}>
+            Start with: <code>python3 spectrometer/raman_backend.py</code>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        onClick={() => setSciencePopup(null)}
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: "rgba(0, 0, 0, 0.75)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 1100,
+          padding: "20px",
+        }}
+      >
+        <div
+          onClick={(e) => e.stopPropagation()}
+          style={{ width: "min(760px, 96vw)", maxHeight: "85vh", overflowY: "auto", background: "#222", border: "1px solid #4a4a4a", borderRadius: "12px", padding: "14px" }}
+        >
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "12px" }}>
+            <div style={{ color: "white", fontWeight: 900, fontSize: "20px" }}>{title}</div>
+            <button onClick={() => setSciencePopup(null)} style={{ borderRadius: "8px", border: "1px solid #666", background: "#333", color: "white", cursor: "pointer", padding: "6px 10px", fontWeight: 800 }}>Close</button>
+          </div>
+          {body}
+        </div>
+      </div>
+    );
+  };
+
+  const scienceCameras = [
+    { label: `${selectedScienceTab} Cam 1`, id: cameraBySlot(7) },
+    { label: `${selectedScienceTab} Cam 2`, id: cameraBySlot(8) },
+    { label: `${selectedScienceTab} Cam 3`, id: cameraBySlot(9) },
+  ];
+
+  const graphBar = (value, color) => (
+    <div style={{ height: "8px", background: "#252525", borderRadius: "999px", overflow: "hidden" }}>
+      <div style={{ width: `${value}%`, height: "100%", background: color }} />
+    </div>
+  );
+
+  const equipmentSpecialistCameras = [
+    { label: "Overhead of Scoops / Sampler", id: cameraBySlot(7) },
+    { label: "View of Scoops", id: cameraBySlot(8) },
+    { label: "View of Sampler", id: cameraBySlot(9) },
+  ];
+  const scientist1Cameras = [
+    { label: "Nightvision Camera", id: cameraBySlot(7) },
+    { label: "Rover Field View", id: cameraBySlot(9) },
+  ];
+  const isEquipmentSpecialistTab2 = selectedScienceTab === "Equipment Specialist Tab 2";
+  const visibleEquipmentSpecialistCameras = isEquipmentSpecialistTab2
+    ? [
+        equipmentSpecialistCameras[0],
+        { ...equipmentSpecialistCameras[2], label: "NightVision Camera" },
+      ]
+    : equipmentSpecialistCameras;
+  const visibleVerticalLayoutCameras = isScientist1Tab1 ? scientist1Cameras : visibleEquipmentSpecialistCameras;
+  const tab2NightVisionCamera = { label: "Nightvision Camera", id: cameraBySlot(7) };
+
+  return (
+    <div style={{ minHeight: 0, height: "100%", padding: "10px" }}>
+      <div style={{ border: "1px solid #333", borderRadius: "10px", overflow: "hidden", background: "#1f1f1f", height: "100%", display: "flex", flexDirection: "column" }}>
+        <div style={{ display: "flex", alignItems: "stretch", background: "#2b2b2b", borderBottom: "2px solid #1f1e1eff" }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <SubsystemBar buttons={SCIENCE_SUBSYSTEMS} selected={selectedScienceTab} setSelected={setSelectedScienceTab} compact />
+          </div>
+          <div style={{ display: "flex", alignItems: "center", padding: "8px 12px 8px 0" }}>
+            <button
+              onClick={() => setShowCameraManager(true)}
+              style={{
+                borderRadius: "9999px",
+                border: "2px solid #0f2f55",
+                background: "#1a3f6f",
+                color: "white",
+                cursor: "pointer",
+                padding: "7px 14px",
+                fontSize: "12px",
+                fontWeight: 900,
+                whiteSpace: "nowrap",
+              }}
+            >
+              Camera Manager
+            </button>
+          </div>
+        </div>
+        {isEquipmentSpecialistTab || isScientist1Tab1 ? (
+          <div style={{ padding: "12px", height: "100%", minHeight: 0, background: "#1a1a1a", overflow: "auto" }}>
+            <div style={{ width: "100%", border: "2px solid #3d3d3d", borderRadius: "14px", background: "#202020", padding: "12px", display: "grid", gridTemplateRows: "auto auto minmax(0, 1fr)", gap: "10px", minHeight: "100%" }}>
+              <div style={{ color: "white", fontWeight: 900, fontSize: "20px", textAlign: "center", letterSpacing: "0.02em" }}>
+                {selectedScienceTab}
+              </div>
+              <div style={{ border: "2px solid #4a4a4a", borderRadius: "10px", background: "#262626", padding: "10px 12px", display: "grid", gap: "8px" }}>
+                <div style={{ color: "#d9d9d9", fontSize: "11px", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.08em" }}>
+                  Stopwatch
+                </div>
+                <div style={{ color: "white", fontSize: "28px", fontWeight: 900, textAlign: "center", fontVariantNumeric: "tabular-nums", lineHeight: 1.1 }}>
+                  {formatStopwatch(stopwatchElapsedMs)}
+                </div>
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "8px" }}>
+                  <button
+                    onClick={stopwatchRunning ? pauseStopwatch : startStopwatch}
+                    style={{ borderRadius: "8px", border: "1px solid #555", background: stopwatchRunning ? "#6d1111" : "#303030", color: "white", cursor: "pointer", fontWeight: 700, padding: "6px 10px" }}
+                  >
+                    {stopwatchRunning ? "Pause" : "Start"}
+                  </button>
+                  <button
+                    onClick={resetStopwatch}
+                    style={{ borderRadius: "8px", border: "1px solid #555", background: "#303030", color: "white", cursor: "pointer", fontWeight: 700, padding: "6px 10px" }}
+                  >
+                    Reset
+                  </button>
+                  <button
+                    onClick={() => setFullscreenCam(visibleVerticalLayoutCameras[0])}
+                    style={{ borderRadius: "8px", border: "1px solid #555", background: "#303030", color: "white", cursor: "pointer", fontWeight: 700, padding: "6px 10px" }}
+                  >
+                    Expand Top
+                  </button>
+                </div>
+              </div>
+              <div style={{ display: "grid", gridTemplateRows: `repeat(${visibleVerticalLayoutCameras.length}, minmax(220px, 1fr))`, gap: "10px", minHeight: 0 }}>
+                {visibleVerticalLayoutCameras.map((camera) => (
+                  <div key={camera.label} style={{ background: "#232323", border: "2px solid #3d3d3d", borderRadius: "10px", padding: "8px", display: "grid", gridTemplateRows: "auto auto minmax(0, 1fr)", gap: "6px", minHeight: 0 }}>
+                    <div style={{ color: "#e8e8e8", fontSize: "11px", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.06em" }}>
+                      Camera Feed
+                    </div>
+                    <div style={{ color: "white", fontSize: "20px", fontWeight: 800, lineHeight: 1.15 }}>
+                      {camera.label}
+                    </div>
+                    <CameraImage
+                      cameraId={camera.id}
+                      alt={camera.label}
+                      onClick={() => setFullscreenCam(camera)}
+                      style={{
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                        borderRadius: "8px",
+                        background: "black",
+                        cursor: "pointer",
+                        transform: `rotate(${cameraRotateDeg}deg)`,
+                        transformOrigin: "center center",
+                      }}
+                      pausedStyle={{ fontSize: "12px" }}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : isScientist1Tab2 ? (
+          <div style={{ padding: "12px", height: "100%", minHeight: 0, background: "#1a1a1a", overflow: "auto" }}>
+            <div style={{ width: "100%", border: "2px solid #3d3d3d", borderRadius: "14px", background: "#202020", padding: "12px", display: "grid", gridTemplateRows: "auto repeat(4, minmax(0, 1fr))", gap: "10px", minHeight: "100%" }}>
+              <div style={{ color: "white", fontWeight: 900, fontSize: "20px", textAlign: "center", letterSpacing: "0.02em" }}>
+                {selectedScienceTab}
+              </div>
+              <div style={{ background: "#232323", border: "2px solid #3d3d3d", borderRadius: "10px", padding: "10px", display: "grid", gridTemplateRows: "auto minmax(0, 1fr)", gap: "8px", minHeight: 0 }}>
+                <div style={{ color: "#e8e8e8", fontSize: "11px", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.06em" }}>
+                  Stratigraphic Profile Image
+                </div>
+                <div style={{ borderRadius: "8px", border: "1px solid #4a4a4a", background: "linear-gradient(180deg, #6b5636 0%, #8a6b40 24%, #b48a55 24%, #b48a55 42%, #6e5230 42%, #6e5230 58%, #a17a4b 58%, #a17a4b 74%, #54412a 74%, #54412a 100%)", display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.78)", fontWeight: 800, minHeight: 0 }}>
+                  Profile placeholder
+                </div>
+              </div>
+              <div style={{ background: "#232323", border: "2px solid #3d3d3d", borderRadius: "10px", padding: "10px", display: "grid", gridTemplateRows: "auto auto minmax(0, 1fr)", gap: "8px", minHeight: 0 }}>
+                <div style={{ color: "#e8e8e8", fontSize: "11px", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.06em" }}>
+                  Spectro Data
+                </div>
+                <div style={{ color: "white", fontSize: "18px", fontWeight: 800 }}>
+                  Site 1
+                </div>
+                <div style={{ minHeight: 0, borderRadius: "8px", overflow: "hidden", border: "1px solid #444", background: "#171717", padding: "8px" }}>
+                  <RamanPlot wsUrl={RAMAN_WS_URL} width={1200} height={220} fillContainer />
+                </div>
+              </div>
+              <div style={{ background: "#232323", border: "2px solid #3d3d3d", borderRadius: "10px", padding: "10px", display: "grid", gridTemplateRows: "auto auto minmax(0, 1fr)", gap: "8px", minHeight: 0 }}>
+                <div style={{ color: "#e8e8e8", fontSize: "11px", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.06em" }}>
+                  Spectro Data
+                </div>
+                <div style={{ color: "white", fontSize: "18px", fontWeight: 800 }}>
+                  Site 2
+                </div>
+                <div style={{ minHeight: 0, borderRadius: "8px", overflow: "hidden", border: "1px solid #444", background: "#171717", padding: "8px" }}>
+                  <RamanPlot wsUrl={RAMAN_WS_URL} width={1200} height={220} fillContainer />
+                </div>
+              </div>
+              <div style={{ background: "#232323", border: "2px solid #3d3d3d", borderRadius: "10px", padding: "8px", display: "grid", gridTemplateRows: "auto auto minmax(0, 1fr)", gap: "6px", minHeight: 0 }}>
+                <div style={{ color: "#e8e8e8", fontSize: "11px", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.06em" }}>
+                  Camera Feed
+                </div>
+                <div style={{ color: "white", fontSize: "20px", fontWeight: 800, lineHeight: 1.15 }}>
+                  Nightvision Camera
+                </div>
+                <CameraImage
+                  cameraId={tab2NightVisionCamera.id}
+                  alt={tab2NightVisionCamera.label}
+                  onClick={() => setFullscreenCam(tab2NightVisionCamera)}
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    borderRadius: "8px",
+                    background: "black",
+                    cursor: "pointer",
+                    transform: `rotate(${cameraRotateDeg}deg)`,
+                    transformOrigin: "center center",
+                  }}
+                  pausedStyle={{ fontSize: "12px" }}
+                />
+              </div>
+            </div>
+          </div>
+        ) : isScientist2Tab2 ? (
+          <div style={{ padding: "12px", height: "100%", minHeight: 0, background: "#1a1a1a", overflow: "auto" }}>
+            <div style={{ width: "100%", border: "2px solid #3d3d3d", borderRadius: "14px", background: "#202020", padding: "12px", display: "grid", gridTemplateRows: "auto auto repeat(3, minmax(0, 1fr))", gap: "10px", minHeight: "100%" }}>
+              <div style={{ color: "white", fontWeight: 900, fontSize: "20px", textAlign: "center", letterSpacing: "0.02em" }}>
+                {selectedScienceTab}
+              </div>
+              <div style={{ border: "2px solid #4a4a4a", borderRadius: "10px", background: "#262626", padding: "10px 12px", display: "grid", gap: "8px" }}>
+                <div style={{ color: "#d9d9d9", fontSize: "11px", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.08em" }}>
+                  Stopwatch
+                </div>
+                <div style={{ color: "white", fontSize: "28px", fontWeight: 900, textAlign: "center", fontVariantNumeric: "tabular-nums", lineHeight: 1.1 }}>
+                  {formatStopwatch(stopwatchElapsedMs)}
+                </div>
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: "8px" }}>
+                  <button
+                    onClick={stopwatchRunning ? pauseStopwatch : startStopwatch}
+                    style={{ borderRadius: "8px", border: "1px solid #555", background: stopwatchRunning ? "#6d1111" : "#303030", color: "white", cursor: "pointer", fontWeight: 700, padding: "6px 10px" }}
+                  >
+                    {stopwatchRunning ? "Pause" : "Start"}
+                  </button>
+                  <button
+                    onClick={resetStopwatch}
+                    style={{ borderRadius: "8px", border: "1px solid #555", background: "#303030", color: "white", cursor: "pointer", fontWeight: 700, padding: "6px 10px" }}
+                  >
+                    Reset
+                  </button>
+                </div>
+              </div>
+              {["Site 1", "Site 2"].map((siteLabel) => (
+                <div key={siteLabel} style={{ background: "#232323", border: "2px solid #3d3d3d", borderRadius: "10px", padding: "10px", display: "grid", gridTemplateRows: "auto auto minmax(0, 1fr)", gap: "8px", minHeight: 0 }}>
+                  <div style={{ color: "#e8e8e8", fontSize: "11px", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.06em" }}>
+                    Fluoro Data
+                  </div>
+                  <div style={{ color: "white", fontSize: "18px", fontWeight: 800 }}>
+                    {siteLabel}
+                  </div>
+                  <div style={{ borderRadius: "8px", border: "1px solid #444", background: "#171717", display: "grid", placeItems: "center", color: "#b7b7b7", fontWeight: 700, minHeight: 0 }}>
+                    Fluorescence analysis placeholder
+                  </div>
+                </div>
+              ))}
+              <div style={{ background: "#232323", border: "2px solid #3d3d3d", borderRadius: "10px", padding: "8px", display: "grid", gridTemplateRows: "auto auto minmax(0, 1fr)", gap: "6px", minHeight: 0 }}>
+                <div style={{ color: "#e8e8e8", fontSize: "11px", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.06em" }}>
+                  Camera Feed
+                </div>
+                <div style={{ color: "white", fontSize: "20px", fontWeight: 800, lineHeight: 1.15 }}>
+                  Nightvision Camera inside science box
+                </div>
+                <CameraImage
+                  cameraId={tab2NightVisionCamera.id}
+                  alt={tab2NightVisionCamera.label}
+                  onClick={() => setFullscreenCam(tab2NightVisionCamera)}
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    borderRadius: "8px",
+                    background: "black",
+                    cursor: "pointer",
+                    transform: `rotate(${cameraRotateDeg}deg)`,
+                    transformOrigin: "center center",
+                  }}
+                  pausedStyle={{ fontSize: "12px" }}
+                />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div style={{ display: "grid", gridTemplateRows: "auto minmax(0, 1fr)", gap: "8px", padding: "8px", height: "100%", minHeight: 0, background: "#1a1a1a" }}>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }}>
+              <div style={{ background: "#232323", border: "1px solid #3d3d3d", borderRadius: "10px", padding: "8px" }}>
+                <div style={{ fontSize: "11px", color: "#ddd", marginBottom: "6px", fontWeight: 800 }}>{selectedScienceTab} Imaging / Capture</div>
+                <div style={{ display: "flex", gap: "6px" }}>
+                  <button
+                    onClick={() => setPanoramaShots((n) => {
+                      const next = n + 1;
+                      setLastPanoramaLabel(`Panorama #${next} captured at ${new Date().toLocaleTimeString()}`);
+                      return next;
+                    })}
+                    style={{ flex: 1, borderRadius: "6px", border: "1px solid #555", background: "#303030", color: "white", cursor: "pointer", fontWeight: 700 }}
+                  >
+                    Panorama
+                  </button>
+                  <button onClick={() => setSciencePhotos((n) => n + 1)} style={{ flex: 1, borderRadius: "6px", border: "1px solid #555", background: "#303030", color: "white", cursor: "pointer", fontWeight: 700 }}>Take Picture</button>
+                </div>
+                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "6px", marginTop: "6px" }}>
+                  <button onClick={() => setSciencePopup("panorama")} style={{ borderRadius: "6px", border: "1px solid #555", background: "#2f2f2f", color: "white", cursor: "pointer", fontWeight: 700 }}>
+                    Open Panorama Popup
+                  </button>
+                  <button onClick={() => setSciencePopup("tasks")} style={{ borderRadius: "6px", border: "1px solid #555", background: "#2f2f2f", color: "white", cursor: "pointer", fontWeight: 700 }}>
+                    Additional Science Tasks
+                  </button>
+                </div>
+                <div style={{ marginTop: "6px", color: "#ddd", fontSize: "11px" }}>
+                  Panoramas: {panoramaShots} | Photos: {sciencePhotos}
+                </div>
+                <div style={{ marginTop: "4px", color: "#8f8f8f", fontSize: "10px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                  {lastPanoramaLabel}
+                </div>
+              </div>
+              <div style={{ background: "#232323", border: "1px solid #3d3d3d", borderRadius: "10px", padding: "8px" }}>
+                <div style={{ fontSize: "11px", color: "#ddd", marginBottom: "6px", fontWeight: 800 }}>{selectedScienceTab} Data Graphs</div>
+                <div style={{ display: "grid", gap: "6px" }}>
+                  <button onClick={() => setSciencePopup("soil")} style={{ textAlign: "left", borderRadius: "6px", border: "1px solid #4d4d4d", background: "#2d2d2d", color: "#cfcfcf", fontSize: "10px", padding: "6px", cursor: "pointer" }}>
+                    Soil Moisture (Open Popup)
+                    <div style={{ marginTop: "5px" }}>{graphBar(72, "#16a34a")}</div>
+                  </button>
+                  <button onClick={() => setSciencePopup("spectral")} style={{ textAlign: "left", borderRadius: "6px", border: "1px solid #4d4d4d", background: "#2d2d2d", color: "#cfcfcf", fontSize: "10px", padding: "6px", cursor: "pointer" }}>
+                    Spectral Intensity (Open Popup)
+                    <div style={{ marginTop: "5px" }}>{graphBar(48, "#2563eb")}</div>
+                  </button>
+                  <div style={{ fontSize: "10px", color: "#cfcfcf" }}>Thermal Delta</div>
+                  {graphBar(35, "#f97316")}
+                </div>
+              </div>
+            </div>
+            <div style={{ display: "grid", gridTemplateRows: "minmax(0, 1fr) minmax(0, 1fr)", gap: "6px", minHeight: 0 }}>
+              <CameraCard camera={scienceCameras[0]} />
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "6px", minHeight: 0 }}>
+                <CameraCard camera={scienceCameras[1]} />
+                <CameraCard camera={scienceCameras[2]} />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+      <FullscreenOverlay />
+      <SciencePopupOverlay />
+      {showCameraManager && <CameraManagerModal onClose={() => setShowCameraManager(false)} />}
+    </div>
+  );
+}
diff --git a/umdloop_gui_web/app/GUI functions/SubsystemBar.js b/umdloop_gui_web/app/GUI functions/SubsystemBar.js
index d7b25be..a584cb7 100644
--- a/umdloop_gui_web/app/GUI functions/SubsystemBar.js	
+++ b/umdloop_gui_web/app/GUI functions/SubsystemBar.js	
@@ -2,18 +2,19 @@
 
 import React, { useState } from "react";
 
-export default function SubsystemBar({ buttons, selected, setSelected }) {
+export default function SubsystemBar({ buttons, selected, setSelected, compact = false }) {
   const [hoveredButtonId, setHoveredButtonId] = useState(null);
 
   return (
     <div
       style={{
         display: "flex",
+        flexWrap: "wrap",
         flexDirection: "row",
         justifyContent: "center",
         alignItems: "center",
-        gap: "12px",
-        padding: "12px 20px",
+        gap: compact ? "8px" : "12px",
+        padding: compact ? "8px 12px" : "12px 20px",
         background: "#2b2b2b",
         borderBottom: "2px solid #1f1e1eff",
       }}
@@ -32,7 +33,7 @@ export default function SubsystemBar({ buttons, selected, setSelected }) {
             style={{
               background: buttonColor,
               border: "2px solid #360101ff",
-              padding: "10px 32px",
+              padding: compact ? "7px 16px" : "10px 32px",
               borderRadius: "9999px",
               display: "flex",
               alignItems: "center",
@@ -44,7 +45,7 @@ export default function SubsystemBar({ buttons, selected, setSelected }) {
             onMouseLeave={() => setHoveredButtonId(null)}
             onClick={() => setSelected(label)}
           >
-            <span style={{ fontFamily: "Arial Black", color: "white", fontSize: "14px" }}>{label}</span>
+            <span style={{ fontFamily: "Arial Black", color: "white", fontSize: compact ? "12px" : "14px" }}>{label}</span>
           </div>
         );
       })}
diff --git a/umdloop_gui_web/app/GUI functions/pageConstants.js b/umdloop_gui_web/app/GUI functions/pageConstants.js
index 0bcaeb8..bbeef9b 100644
--- a/umdloop_gui_web/app/GUI functions/pageConstants.js	
+++ b/umdloop_gui_web/app/GUI functions/pageConstants.js	
@@ -1,8 +1,18 @@
 "use client";
 
-export const MODES = ["Operator", "Technician", "Drone", "Navigation", "Map"];
-export const MODE_ICONS = ["camera.png", "sensor.png", "camera.png", "navigation.png", "map.png"];
-export const SUBSYSTEMS = ["Drive", "Arm", "Science"];
+export const MODES = ["Operator", "Science", "Technician", "Drone", "Navigation", "Map"];
+export const MODE_ICONS = ["camera.png", "test-tube.png", "sensor.png", "camera.png", "navigation.png", "map.png"];
+export const NAV_MODES = MODES.filter((mode) => mode !== "Drone");
+export const NAV_MODE_ICONS = NAV_MODES.map((mode) => MODE_ICONS[MODES.indexOf(mode)]);
+export const SUBSYSTEMS = ["Drive (Default)", "Drive (Science)", "Arm"];
+export const SCIENCE_SUBSYSTEMS = [
+  "Scientist 1 Tab 1",
+  "Scientist 2 Tab 1",
+  "Scientist 1 Tab 2",
+  "Scientist 2 Tab 2",
+  "Equipment Specialist Tab 1",
+  "Equipment Specialist Tab 2",
+];
 export const NAVIGATION_BUTTONS = ["Object Detection", "Control Panel", "Placeholder2"];
 
 export const CAMERA_ROLES = {
@@ -10,6 +20,7 @@ export const CAMERA_ROLES = {
   BACK:        "back",
   LEFT_SIDE:   "left_side",
   RIGHT_SIDE:  "right_side",
+  RADIO_VIEW:  "radio_view",
   WHEEL_TL_A:  "wheel_tl_a",
   WHEEL_TL_B:  "wheel_tl_b",
   WHEEL_TR_A:  "wheel_tr_a",
diff --git a/umdloop_gui_web/app/hooks/useWebRTCCameras.js b/umdloop_gui_web/app/hooks/useWebRTCCameras.js
index c8fb024..d872e27 100644
--- a/umdloop_gui_web/app/hooks/useWebRTCCameras.js
+++ b/umdloop_gui_web/app/hooks/useWebRTCCameras.js
@@ -3,10 +3,80 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
 const RECONNECT_DELAY_MS = 2000;
+const DEFAULT_CAMERAS = [
+  { id: "0", name: "TL Wheel A", role: "wheel_tl_a" },
+  { id: "1", name: "TL Wheel B", role: "wheel_tl_b" },
+  { id: "2", name: "TR Wheel A", role: "wheel_tr_a" },
+  { id: "3", name: "TR Wheel B", role: "wheel_tr_b" },
+  { id: "4", name: "BL Wheel A", role: "wheel_bl_a" },
+  { id: "5", name: "BL Wheel B", role: "wheel_bl_b" },
+  { id: "6", name: "BR Wheel A", role: "wheel_br_a" },
+  { id: "7", name: "BR Wheel B", role: "wheel_br_b" },
+  { id: "8", name: "Arm Base", role: "arm_base" },
+  { id: "9", name: "Arm Joint", role: "arm_joint" },
+  { id: "10", name: "Arm End Effector", role: "arm_ee" },
+  { id: "11", name: "Arm Gripper", role: "arm_gripper" },
+  { id: "12", name: "Science Cam 1 / Overhead Scoops / Nightvision", role: "science_1" },
+  { id: "13", name: "Science Cam 2 / View of Scoops", role: "science_2" },
+  { id: "14", name: "Science Cam 3 / View of Sampler / Rover Field View", role: "science_3" },
+  { id: "15", name: "Front Camera", role: "front" },
+].map((camera) => ({
+  ...camera,
+  device: "default camera slot",
+  enabled: false,
+  synthetic: true,
+}));
+
+function getCameraId(message) {
+  return message?.id ?? message?.cam_id ?? message?.cameraId ?? message?.camera_id ?? message?.camera;
+}
+
+function normalizeCamera(camera, index) {
+  const rawId = getCameraId(camera) ?? camera;
+  if (rawId == null) return null;
+
+  const id = String(rawId).trim();
+  if (!id) return null;
+
+  const defaults = DEFAULT_CAMERAS.find((defaultCamera) => defaultCamera.id === id);
+  const cameraConfig = typeof camera === "object" && camera != null ? camera : {};
+  const config = cameraConfig.config ?? {};
+
+  return {
+    ...defaults,
+    ...cameraConfig,
+    ...config,
+    id,
+    name: cameraConfig.name ?? config.name ?? defaults?.name ?? `Camera ${id}`,
+    role: cameraConfig.role ?? config.role ?? defaults?.role ?? null,
+    device: cameraConfig.device ?? cameraConfig.path ?? defaults?.device ?? `camera ${index + 1}`,
+    capabilities: cameraConfig.capabilities ?? defaults?.capabilities ?? [],
+    enabled: Boolean(cameraConfig.enabled ?? config.enabled ?? defaults?.enabled),
+    synthetic: Boolean(cameraConfig.synthetic ?? defaults?.synthetic),
+  };
+}
+
+function normalizeCameras(message) {
+  const source =
+    message?.cameras ??
+    message?.camera_ids ??
+    message?.cameraIds ??
+    message?.devices ??
+    message?.available_cameras ??
+    [];
+
+  if (!Array.isArray(source)) return DEFAULT_CAMERAS;
+
+  const normalized = source
+    .map((camera, index) => normalizeCamera(camera, index))
+    .filter(Boolean);
+
+  return normalized.length ? normalized : DEFAULT_CAMERAS;
+}
 
 export default function useWebRTCCameras(url) {
   const [connected, setConnected] = useState(false);
-  const [cameras, setCameras] = useState([]);
+  const [cameras, setCameras] = useState(DEFAULT_CAMERAS);
   const [streams, setStreams] = useState({});
   const [stats, setStats] = useState({});
   const [missions, setMissions] = useState([]);
@@ -31,7 +101,17 @@ export default function useWebRTCCameras(url) {
     }
   }, []);
 
-  const handleOffer = useCallback(async ({ id, sdp }) => {
+  const updateCamera = useCallback((id, changes) => {
+    setCameras((prev) => prev.map((camera) => (
+      camera.id === String(id) ? { ...camera, ...changes } : camera
+    )));
+  }, []);
+
+  const handleOffer = useCallback(async (message) => {
+    const id = String(getCameraId(message) ?? "");
+    const sdp = typeof message?.sdp === "string" ? message.sdp : message?.description?.sdp;
+    if (!id || !sdp) return;
+
     pcsRef.current.get(id)?.close();
 
     const pc = new RTCPeerConnection({ iceServers: [] });
@@ -92,7 +172,9 @@ export default function useWebRTCCameras(url) {
 
       switch (msg.type) {
         case "state":
-          setCameras(msg.cameras ?? []);
+        case "camera_state":
+        case "camera_list":
+          setCameras(normalizeCameras(msg));
           break;
         case "missions_state":
           setMissions(msg.missions ?? []);
@@ -102,15 +184,22 @@ export default function useWebRTCCameras(url) {
           await handleOffer(msg).catch((err) => console.error("WebRTC offer handling failed:", err));
           break;
         case "ice": {
-          const pc = pcsRef.current.get(msg.id);
+          const pc = pcsRef.current.get(String(getCameraId(msg) ?? ""));
           if (pc) {
-            pc.addIceCandidate({ candidate: msg.candidate, sdpMLineIndex: msg.sdpMLineIndex }).catch(() => {});
+            pc.addIceCandidate({
+              candidate: msg.candidate,
+              sdpMLineIndex: msg.sdpMLineIndex ?? msg.mlineIndex ?? 0,
+            }).catch(() => {});
           }
           break;
         }
-        case "stats":
-          setStats((prev) => ({ ...prev, [msg.camera_id]: { fps: msg.fps, bitrate: msg.bitrate } }));
+        case "stats": {
+          const id = String(getCameraId(msg) ?? "");
+          if (id) {
+            setStats((prev) => ({ ...prev, [id]: { fps: msg.fps, bitrate: msg.bitrate } }));
+          }
           break;
+        }
       }
     };
   }, [url, closeAllPeerConnections, handleOffer]);
@@ -126,11 +215,26 @@ export default function useWebRTCCameras(url) {
     };
   }, [connect, closeAllPeerConnections]);
 
-  const enableCamera  = useCallback((id) => send({ type: "enable",  camera_id: id }), [send]);
-  const disableCamera = useCallback((id) => send({ type: "disable", camera_id: id }), [send]);
-  const renameCamera  = useCallback((id, name) => send({ type: "rename", camera_id: id, name }), [send]);
-  const setRole       = useCallback((id, role) => send({ type: "set_config", camera_id: id, config: { role } }), [send]);
-  const setConfig     = useCallback((id, config) => send({ type: "set_config", camera_id: id, config }), [send]);
+  const enableCamera = useCallback((id) => {
+    updateCamera(id, { enabled: true });
+    send({ type: "enable", camera_id: id });
+  }, [send, updateCamera]);
+  const disableCamera = useCallback((id) => {
+    updateCamera(id, { enabled: false });
+    send({ type: "disable", camera_id: id });
+  }, [send, updateCamera]);
+  const renameCamera = useCallback((id, name) => {
+    updateCamera(id, { name });
+    send({ type: "rename", camera_id: id, name });
+  }, [send, updateCamera]);
+  const setRole = useCallback((id, role) => {
+    updateCamera(id, { role });
+    send({ type: "set_config", camera_id: id, config: { role } });
+  }, [send, updateCamera]);
+  const setConfig = useCallback((id, config) => {
+    updateCamera(id, config);
+    send({ type: "set_config", camera_id: id, config });
+  }, [send, updateCamera]);
   const saveMission   = useCallback((name, id) => send({ type: "save_mission", name, ...(id != null ? { id } : {}) }), [send]);
   const loadMission   = useCallback((id) => send({ type: "load_mission", id }), [send]);
   const deleteMission = useCallback((id) => send({ type: "delete_mission", id }), [send]);
diff --git a/umdloop_gui_web/app/page.js b/umdloop_gui_web/app/page.js
index 8c45d31..9f8fffa 100644
--- a/umdloop_gui_web/app/page.js
+++ b/umdloop_gui_web/app/page.js
@@ -15,6 +15,7 @@ export default function LoopGui() {
   const [selectedNavItem, setSelectedNavItem] = useState(NAVIGATION_BUTTONS[0]);
 
   const showSubsystemBar =
+    selectedMode !== "Science" &&
     selectedMode !== "Navigation" &&
     selectedMode !== "Drone" &&
     selectedMode !== "Technician" &&
diff --git a/umdloop_gui_web/public/test-tube.png b/umdloop_gui_web/public/test-tube.png
new file mode 100644
index 0000000..39ba04a
Binary files /dev/null and b/umdloop_gui_web/public/test-tube.png differ
diff --git a/umdloop_gui_web/spectrometer/RamanPlot.jsx b/umdloop_gui_web/spectrometer/RamanPlot.jsx
index 3ea3b9d..3a9b650 100644
--- a/umdloop_gui_web/spectrometer/RamanPlot.jsx
+++ b/umdloop_gui_web/spectrometer/RamanPlot.jsx
@@ -53,6 +53,7 @@ const RamanPlot = ({
   wsUrl = "ws://localhost:5000/ws/spectrum",
   width = 900,
   height = 400,
+  fillContainer = false,
   testMode = false,
 }) => {
   const canvasRef = useRef(null);
@@ -186,7 +187,14 @@ const RamanPlot = ({
   }, [wsUrl, testMode, updatePlotData]);
 
   return (
-    <div style={{ position: "relative", display: "inline-block", fontFamily: "monospace" }}>
+    <div
+      style={{
+        position: "relative",
+        display: fillContainer ? "block" : "inline-block",
+        width: fillContainer ? "100%" : "auto",
+        fontFamily: "monospace",
+      }}
+    >
       <div
         style={{
           display: "flex",
@@ -220,7 +228,7 @@ const RamanPlot = ({
         width={width}
         height={height}
         style={{
-          width,
+          width: fillContainer ? "100%" : width,
           height,
           background: "#0a0a1a",
           display: "block",