diff --git a/src/app/dashboard/api/route.ts b/src/app/dashboard/api/route.ts
index 798182e..9f75430 100644
--- a/src/app/dashboard/api/route.ts
+++ b/src/app/dashboard/api/route.ts
@@ -1,4 +1,6 @@
-const hosts = ['192.168.0.2', '192.168.0.3', '192.168.0.55']; // Add more hosts here as needed
+import { BASE_AP_IP, ROVER_AP_IP, ROVER_IP } from '@/constants';
+
+const hosts = [BASE_AP_IP, ROVER_AP_IP, ROVER_IP];
 
 const ping = require('ping');
 
diff --git a/src/components/ConnectionStatusDisplay.tsx b/src/components/ConnectionStatusDisplay.tsx
index 0432fd1..ec90092 100644
--- a/src/components/ConnectionStatusDisplay.tsx
+++ b/src/components/ConnectionStatusDisplay.tsx
@@ -2,10 +2,11 @@
 import React, { useState, useEffect } from 'react';
 import Cookies from 'js-cookie';
 import { useROS } from '@/ros/ROSContext';
+import { ROVER_IP } from '@/constants';
 
 const ConnectionStatusDisplay: React.FC = () => {
   const { connectionStatus, connect, disconnect } = useROS();
-  const [url, setUrl] = useState('ws://localhost:9090');
+  const [url, setUrl] = useState(`ws://${ROVER_IP}:9090`);
 
   // Load url from cookie on mount
   useEffect(() => {
diff --git a/src/components/ContainerCard.tsx b/src/components/ContainerCard.tsx
index 49d08d3..c5b6a9b 100644
--- a/src/components/ContainerCard.tsx
+++ b/src/components/ContainerCard.tsx
@@ -1,7 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useEnvContext } from 'next-runtime-env';
-
-
 
 export interface ContainerOption {
   key: string;
@@ -32,8 +29,6 @@ const ContainerCard: React.FC<ContainerCardProps> = ({
   const [eventMsg, setEventMsg] = useState<string | null>(externalEventMsg);
   const socketRef = useRef<WebSocket | null>(null);
   const logBoxRef = useRef<HTMLPreElement>(null);
-  const { NEXT_PUBLIC_LAUNCHSERVER } = useEnvContext();
-  const apiBase = NEXT_PUBLIC_LAUNCHSERVER || 'localhost:8080';
 
   // Sync status and clear logs/eventMsg when container ID changes (new container after restart)
   useEffect(() => {
diff --git a/src/components/ContainerList.tsx b/src/components/ContainerList.tsx
index ce991c0..2c8f9f9 100644
--- a/src/components/ContainerList.tsx
+++ b/src/components/ContainerList.tsx
@@ -3,15 +3,16 @@ import React, { useEffect, useState, useRef } from 'react';
 import ContainerCard, { ContainerOption } from './ContainerCard';
 import SetResetPanel from './SetResetPanel';
 import toast from "react-hot-toast";
+import { ROVER_IP } from '@/constants';
 
 
 const dockersToPull = [
-  'cprtsoftware/rover:arm64',
+  'cprtsoftware/rover:latest',
   'cprtsoftware/web-ui:latest',
   'cprtsoftware/container-launcher:latest',
 ];
 
-const DEFAULT_API_BASE = 'http://localhost:8080';
+const DEFAULT_API_BASE = `http://${ROVER_IP}:8080`;
 
 const ContainerList: React.FC = () => {
   const [options, setOptions] = useState<ContainerOption[]>([]);
diff --git a/src/components/panels/ArmControlPanel.tsx b/src/components/panels/ArmControlPanel.tsx
index a690a53..50e866d 100644
--- a/src/components/panels/ArmControlPanel.tsx
+++ b/src/components/panels/ArmControlPanel.tsx
@@ -9,33 +9,127 @@ const ArmControlPanel: React.FC = () => {
 
   const [poseNames, setPoseNames] = useState<string[]>([]);
   const [selectedPose, setSelectedPose] = useState('');
+  const [presetName, setPresetName] = useState('');
+  const [armState, setArmState] = useState<string | null>(null);
+  const [servoStatus, setServoStatus] = useState<string | null>(null);
   const [distance, setDistance] = useState<number | null>(null);
   const [distanceStatus, setDistanceStatus] = useState<number | null>(null);
+  const [checkCollisions, setCheckCollisions] = useState(false);
+  const [collisionParameterLoaded, setCollisionParameterLoaded] = useState(false);
+  const [collisionParameterUpdating, setCollisionParameterUpdating] = useState(false);
   const [response, setResponse] = useState<{ success: boolean; message: string } | null>(null);
 
-  const refreshPoseNames = () => {
+  const refreshPoseNames = (preferredPose?: string) => {
     if (!ros) return;
 
     const service = new ROSLIB.Service({
       ros,
-      name: '/get_names_poses',
-      serviceType: 'interfaces/srv/GetPoses',
+      name: '/move_group_interface/get_named_targets',
+      serviceType: 'interfaces/srv/GetNamedTargets',
     });
 
     const request = new ROSLIB.ServiceRequest({});
 
     service.callService(request, (result: any) => {
-      const names = result.pose_names ?? [];
+      const success = result.success ?? false;
+      const msg = result.message ?? '';
+      if (!success) {
+        setPoseNames([]);
+        setSelectedPose('');
+        setResponse({ success: false, message: `Failed to get named targets: ${msg}` });
+        return;
+      }
+
+      const names = result.names ?? [];
       setPoseNames(names);
 
-      if (names.length > 0 && !selectedPose) {
+      if (preferredPose && names.includes(preferredPose)) {
+        setSelectedPose(preferredPose);
+      } else if (names.length > 0 && !selectedPose) {
         setSelectedPose(names[0]);
+      } else if (selectedPose && !names.includes(selectedPose)) {
+        setSelectedPose(names[0] ?? '');
+      }
+    });
+  };
+
+  const refreshCollisionChecking = () => {
+    if (!ros) return;
+
+    setCollisionParameterLoaded(false);
+
+    const service = new ROSLIB.Service({
+      ros,
+      name: '/servo_node/get_parameters',
+      serviceType: 'rcl_interfaces/srv/GetParameters',
+    });
+
+    const request = new ROSLIB.ServiceRequest({
+      names: ['moveit_servo.check_collisions'],
+    });
+
+    service.callService(request, (result: any) => {
+      const value = result.values?.[0];
+
+      if (!value || value.type !== 1) {
+        setCollisionParameterLoaded(false);
+        setResponse({
+          success: false,
+          message: 'Failed to read /servo_node check_collisions parameter',
+        });
+        return;
       }
+
+      setCheckCollisions(value.bool_value ?? false);
+      setCollisionParameterLoaded(true);
     });
   };
 
   useEffect(() => {
     refreshPoseNames();
+    refreshCollisionChecking();
+  }, [ros]);
+
+  useEffect(() => {
+    if (!ros) return;
+
+    const stateTopic = new ROSLIB.Topic({
+      ros,
+      name: '/arm_teleop_node/state',
+      messageType: 'std_msgs/msg/String',
+      queue_size: 1,
+    });
+
+    const handleState = (msg: any) => {
+      setArmState(msg.data);
+    };
+
+    stateTopic.subscribe(handleState);
+
+    return () => {
+      stateTopic.unsubscribe(handleState);
+    };
+  }, [ros]);
+
+  useEffect(() => {
+    if (!ros) return;
+
+    const statusTopic = new ROSLIB.Topic({
+      ros,
+      name: '/servo_node/status',
+      messageType: 'moveit_msgs/msg/ServoStatus',
+      queue_size: 1,
+    });
+
+    const handleServoStatus = (msg: any) => {
+      setServoStatus(msg.message);
+    };
+
+    statusTopic.subscribe(handleServoStatus);
+
+    return () => {
+      statusTopic.unsubscribe(handleServoStatus);
+    };
   }, [ros]);
 
   useEffect(() => {
@@ -70,6 +164,95 @@ const ArmControlPanel: React.FC = () => {
     return distance_with_offset.toFixed(3);
   };
 
+  const handleCollisionCheckingChange = (enabled: boolean) => {
+    if (!ros) {
+      alert('ROS is not connected');
+      return;
+    }
+
+    setCollisionParameterUpdating(true);
+
+    const service = new ROSLIB.Service({
+      ros,
+      name: '/servo_node/set_parameters',
+      serviceType: 'rcl_interfaces/srv/SetParameters',
+    });
+
+    const request = new ROSLIB.ServiceRequest({
+      parameters: [
+        {
+          name: 'moveit_servo.check_collisions',
+          value: {
+            type: 1,
+            bool_value: enabled,
+          },
+        },
+      ],
+    });
+
+    service.callService(request, (result: any) => {
+      const parameterResult = result.results?.[0];
+      const success = parameterResult?.successful ?? false;
+      const reason = parameterResult?.reason ?? '';
+
+      setCollisionParameterUpdating(false);
+
+      if (!success) {
+        setResponse({
+          success: false,
+          message: reason || 'Failed to update collision checking',
+        });
+        refreshCollisionChecking();
+        return;
+      }
+
+      setCheckCollisions(enabled);
+      setResponse({
+        success: true,
+        message: `Collision checking ${enabled ? 'enabled' : 'disabled'}`,
+      });
+    });
+  };
+
+  const handleSavePreset = () => {
+    if (!ros) {
+      alert('ROS is not connected');
+      return;
+    }
+
+    const name = presetName.trim();
+
+    if (!name) {
+      setResponse({ success: false, message: 'Preset name cannot be empty' });
+      return;
+    }
+
+    const service = new ROSLIB.Service({
+      ros,
+      name: '/move_group_interface/save_current_pose',
+      serviceType: 'interfaces/srv/SaveCurrentPose',
+    });
+
+    const request = new ROSLIB.ServiceRequest({
+      name,
+    });
+
+    service.callService(request, (result: any) => {
+      const success = result.success ?? false;
+      const message = result.message ?? '';
+
+      setResponse({
+        success,
+        message,
+      });
+
+      if (success) {
+        setPresetName('');
+        refreshPoseNames(name);
+      }
+    });
+  };
+
   const handleGo = () => {
     if (!ros) {
       alert('ROS is not connected');
@@ -83,8 +266,8 @@ const ArmControlPanel: React.FC = () => {
 
     const service = new ROSLIB.Service({
       ros,
-      name: '/go_to_pose',
-      serviceType: 'interfaces/srv/GoToPose',
+      name: '/move_group_interface/go_to_named_pose',
+      serviceType: 'interfaces/srv/GoToNamedPose',
     });
 
     const request = new ROSLIB.ServiceRequest({
@@ -123,6 +306,13 @@ const ArmControlPanel: React.FC = () => {
 
   return (
     <div className="arm-panel">
+      <div className="display-row">
+        <span>State:</span>
+        <strong>{armState ?? 'No data'}</strong>
+        <span>Servo Status:</span>
+        <strong>{servoStatus ?? 'No data'}</strong>
+      </div>
+
       <div className="input-group">
         <label>Named State:</label>
         <select
@@ -142,12 +332,48 @@ const ArmControlPanel: React.FC = () => {
         </select>
       </div>
 
+      <div className="preset-group">
+        <input
+          type="text"
+          value={presetName}
+          onChange={(e) => setPresetName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              handleSavePreset();
+            }
+          }}
+          placeholder="New preset name"
+        />
+
+        <button
+          className="save-button"
+          onClick={handleSavePreset}
+          disabled={!presetName.trim()}
+        >
+          Save Current Pose
+        </button>
+      </div>
+
       <div className="display-row">
         <span>Distance:</span>
         <strong>{getDistanceDisplay()}</strong>
       </div>
 
-      <button onClick={handleGo} disabled={!selectedPose}>
+      <label className="toggle-row">
+        <span>
+          Collision Checking
+          <small>/servo_node</small>
+        </span>
+
+        <input
+          type="checkbox"
+          checked={checkCollisions}
+          onChange={(e) => handleCollisionCheckingChange(e.target.checked)}
+          disabled={!collisionParameterLoaded || collisionParameterUpdating}
+        />
+      </label>
+
+      <button onClick={handleGo} disabled={!selectedPose || armState !== 'Idle'}>
         Go
       </button>
 
@@ -183,7 +409,8 @@ const ArmControlPanel: React.FC = () => {
           margin-bottom: 0.25rem;
         }
 
-        select {
+        select,
+        input {
           padding: 0.5rem;
           border: 1px solid #333;
           border-radius: 4px;
@@ -191,6 +418,16 @@ const ArmControlPanel: React.FC = () => {
           color: #f1f1f1;
         }
 
+        input::placeholder {
+          color: #999;
+        }
+
+        .preset-group {
+          display: flex;
+          flex-direction: column;
+          margin-bottom: 0.75rem;
+        }
+
         .display-row {
           display: flex;
           justify-content: space-between;
@@ -211,6 +448,40 @@ const ArmControlPanel: React.FC = () => {
           font-weight: 600;
         }
 
+        .toggle-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 0.75rem;
+          padding: 0.5rem;
+          border: 1px solid #333;
+          border-radius: 4px;
+          background: #2b2b2b;
+          cursor: pointer;
+        }
+
+        .toggle-row span {
+          display: flex;
+          flex-direction: column;
+          color: #ccc;
+        }
+
+        .toggle-row small {
+          margin-top: 0.15rem;
+          color: #888;
+          font-size: 0.7rem;
+        }
+
+        .toggle-row input {
+          width: 1.1rem;
+          height: 1.1rem;
+          cursor: pointer;
+        }
+
+        .toggle-row input:disabled {
+          cursor: not-allowed;
+        }
+
         button {
           background: #0070f3;
           color: #f1f1f1;
@@ -230,6 +501,18 @@ const ArmControlPanel: React.FC = () => {
           cursor: not-allowed;
         }
 
+        .save-button {
+          background: #198754;
+        }
+
+        .save-button:hover {
+          background: #146c43;
+        }
+
+        .save-button:disabled {
+          background: #555;
+        }
+
         .stop-button {
           background: #dc3545;
         }
@@ -256,4 +539,4 @@ const ArmControlPanel: React.FC = () => {
   );
 };
 
-export default ArmControlPanel;
\ No newline at end of file
+export default ArmControlPanel;
diff --git a/src/components/panels/MapView.tsx b/src/components/panels/MapView.tsx
index 4ea70ca..e95b47d 100644
--- a/src/components/panels/MapView.tsx
+++ b/src/components/panels/MapView.tsx
@@ -9,9 +9,9 @@ import BreadcrumbTrail from '../BreadCrumbTrail';
 import WaypointCreatorWindow from '../WaypointCreatorWindow';
 import MapInteractionHandler from '../MapInteractionHandler';
 import MapCompass from '../MapCompass';
-import { useEnvContext } from 'next-runtime-env';
 import { useROS } from '@/ros/ROSContext';
 import ROSLIB from 'roslib';
+import { TILING_SERVER } from '@/constants';
 
 const DEFAULT_MAP_CENTER: LatLngTuple = [38.405884, -110.791719];
 
@@ -50,8 +50,6 @@ const MapView: React.FC<MapViewProps> = ({offline}) => {
   const [antennaLoc, setAntennaLoc] = useState<LatLngTuple>(DEFAULT_MAP_CENTER);
   const [antennaHead, setAntennaHead] = useState<number>(0);
   const { waypoints } = useWaypoints();
-  const { NEXT_PUBLIC_TILE_SERVER } = useEnvContext();
-  const tileServer = NEXT_PUBLIC_TILE_SERVER || "localhost:80";
 
   useEffect(() => {
     if (!ros) return;
@@ -112,7 +110,7 @@ const MapView: React.FC<MapViewProps> = ({offline}) => {
     >
       <TileLayer
         maxZoom = {22}
-        url={offline? `http://${tileServer}/{z}/{x}/{y}.png` : "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}
+        url={offline? `http://${TILING_SERVER}/{z}/{x}/{y}.png` : "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}
         attribution="&copy; Maptiler server"
       />
       <MapInteractionHandler />
diff --git a/src/components/panels/MosaicDashboard.tsx b/src/components/panels/MosaicDashboard.tsx
index 4638018..9b4eced 100644
--- a/src/components/panels/MosaicDashboard.tsx
+++ b/src/components/panels/MosaicDashboard.tsx
@@ -25,6 +25,9 @@ import EspSensorPanel from './EspSensorPanel';
 import PDBRailsPanel from './PDBRails';
 import ArmControlPanel from './ArmControlPanel';
 import WebRTCClient from './WebRTCClient';
+import TimerPanel from './TimerPanel';
+
+import { ROVER_IP } from '@/constants';
 
 type TileType =
   | 'mapView'
@@ -43,6 +46,7 @@ type TileType =
   | 'pdbRails'
   | 'armControlPanel'
   | 'webRTCClient'
+  | 'timerPanel'
   ;
 
 type TileId = `${TileType}:${number}`;
@@ -64,6 +68,7 @@ const TILE_DISPLAY_NAMES: Record<TileType, string> = {
   pdbRails: 'PDB Rails',
   armControlPanel: 'Arm Control',
   webRTCClient: 'WebRTC Client',
+  timerPanel: 'Multi-Timer',
 };
 
 const ALL_TILE_TYPES: TileType[] = [
@@ -83,6 +88,7 @@ const ALL_TILE_TYPES: TileType[] = [
   'pdbRails',
   'armControlPanel',
   'webRTCClient',
+  'timerPanel',
 ];
 
 function tileTypeOf(id: TileId): TileType {
@@ -438,10 +444,18 @@ const MosaicDashboard: React.FC = () => {
       case 'webRTCClient':
         return(
           <MosaicWindow {...windowProps}>
-            <WebRTCClient />
+            <WebRTCClient
+              config={{ signalingUrl: `ws://${ROVER_IP}:8444` }}
+            />
           </MosaicWindow>
         );
 
+      case 'timerPanel':
+        return (
+          <MosaicWindow {...windowProps}>
+            <TimerPanel />
+          </MosaicWindow>
+        );
       default:
         return <div>Unknown tile</div>;
     }
diff --git a/src/components/panels/MotorStatusPanel.tsx b/src/components/panels/MotorStatusPanel.tsx
index 1f4ef08..e45261a 100644
--- a/src/components/panels/MotorStatusPanel.tsx
+++ b/src/components/panels/MotorStatusPanel.tsx
@@ -8,6 +8,7 @@ type MotorStatus = {
   velocity: number;
   output_current: number;
   active_errors: number;
+  remaining: number;
 };
 
 const MOTORS = {
@@ -121,6 +122,12 @@ const MotorStatusPanel: React.FC = () => {
     );
   };
 
+  const handleResetAll = () => {
+    (Object.entries(MOTORS) as [MotorKey, typeof MOTORS[MotorKey]][]).forEach(
+      ([key, { topic }]) => handleResetErrors(key, topic),
+    );
+  };
+
   useEffect(() => {
     if (!ros) return;
 
@@ -140,7 +147,8 @@ const MotorStatusPanel: React.FC = () => {
           [key]: {
             velocity: msg.velocity,
             output_current: msg.output_current,
-            active_errors: msg.active_errors
+            active_errors: msg.active_errors,
+            remaining: 2
           },
         }));
       };
@@ -152,8 +160,30 @@ const MotorStatusPanel: React.FC = () => {
     return () => unsubscribers.forEach(unsub => unsub());
   }, [ros]);
 
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      setMotorStats(prev => {
+        const next = { ...prev };
+        (Object.keys(prev) as MotorKey[]).forEach(key => {
+          const stat = prev[key];
+          if (!stat) return;
+          next[key] = { ...stat, remaining: stat.remaining - 0.1 };
+        });
+        return next;
+      });
+    }, 100);
+
+    return () => window.clearInterval(interval);
+  }, []);
   return (
     <div className="motor-panel">
+      <button
+        className="reset-button"
+        disabled={!ros}
+        onClick={handleResetAll}
+      >
+        Reset All
+      </button>
       <table className="motor-table">
         <thead>
           <tr>
@@ -169,10 +199,16 @@ const MotorStatusPanel: React.FC = () => {
             ([key, { label, topic }]) => {
               const stat = motorStats[key];
               var errorStr = '-';
+              var color = "#6c757d";
               if (stat) {
                 var errNames: string[] = [];
                 Object.keys(MotorError).forEach((key: string) => { if (stat.active_errors & MotorError[key]) errNames.push(key) })
                 errorStr = errNames.length ? errNames.join(', ') : "NONE";
+                color = errNames.length ? "#ef4444" : "#22c55e";
+                if (stat.remaining < 0) {
+                  errorStr = "STALE";
+                  color = "#ffc107";
+                }
               }
 
               return (
@@ -180,7 +216,7 @@ const MotorStatusPanel: React.FC = () => {
                   <td>{label}</td>
                   <td>{stat && Number.isFinite(stat.velocity) ? stat.velocity.toFixed(2) : '-'}</td>
                   <td>{stat && Number.isFinite(stat.output_current) ? `${stat.output_current.toFixed(2)}A` : '-'}</td>
-                  <td><span className="status-led" style={{ backgroundColor: errorStr == "NONE" ? "#22c55e" : "#ef4444" }}/><span style={{ paddingLeft: "8px" }}>{errorStr}</span></td>
+                  <td><span className="status-led" style={{ backgroundColor: color }}/><span style={{ paddingLeft: "8px" }}>{errorStr}</span></td>
                   <td>
                     <button
                       className="reset-button"
@@ -262,4 +298,4 @@ const MotorStatusPanel: React.FC = () => {
   );
 };
 
-export default MotorStatusPanel;
\ No newline at end of file
+export default MotorStatusPanel;
diff --git a/src/components/panels/NodeStatusPanel.tsx b/src/components/panels/NodeStatusPanel.tsx
index 56b361a..3ce2501 100644
--- a/src/components/panels/NodeStatusPanel.tsx
+++ b/src/components/panels/NodeStatusPanel.tsx
@@ -13,6 +13,7 @@ const NodeStatusPanel: React.FC = () => {
   const { ros } = useROS();
 
   const [nodes, setNodes] = useState<Map<string, NodeInfo>>(new Map());
+  const [staleTime, setStaleTime] = useState<number>(0);
 
   useEffect(() => {
     if (!ros) return;
@@ -20,12 +21,11 @@ const NodeStatusPanel: React.FC = () => {
     const topic = new ROSLIB.Topic({
       ros,
       name: '/system/nodes',
-      messageType: 'std_msgs/msg/String',
+      messageType: 'interfaces/msg/NodeList',
     });
 
     const handleMsg = (msg: any) => {
       try {
-        const data = JSON.parse(msg.data) as { nodes: string[] };
         const now = Date.now();
 
         setNodes(prev => {
@@ -40,7 +40,7 @@ const NodeStatusPanel: React.FC = () => {
           }
 
           // mark active nodes online
-          for (const name of data.nodes) {
+          for (const name of msg.nodes) {
             updated.set(name, {
               online: true,
               lastSeen: now,
@@ -49,6 +49,7 @@ const NodeStatusPanel: React.FC = () => {
 
           return updated;
         });
+        setStaleTime(2);
       } catch (e) {
         console.error('Failed to parse node list:', e);
       }
@@ -61,10 +62,20 @@ const NodeStatusPanel: React.FC = () => {
     };
   }, [ros]);
 
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      setStaleTime(prev => Math.max(-1, prev - 0.1));
+    }, 100);
+
+    return () => window.clearInterval(interval);
+  }, []);
+
   const sortedNodes = Array.from(nodes.entries()).sort(([a], [b]) =>
     a.localeCompare(b)
   );
 
+  const stale = staleTime < 0;
+
   return (
     <div className="node-panel">
       <table className="node-table">
@@ -89,15 +100,17 @@ const NodeStatusPanel: React.FC = () => {
                   <span
                     className="status-led"
                     style={{
-                      backgroundColor: info.online
-                        ? '#22c55e'
-                        : offline
-                          ? '#ef4444'
-                          : '#6b7280',
+                      backgroundColor: stale
+                        ? '#ffc107'
+                        : info.online
+                          ? '#22c55e'
+                          : offline
+                            ? '#ef4444'
+                            : '#6b7280',
                     }}
                   />
                   <span style={{ paddingLeft: 8 }}>
-                    {info.online ? 'Online' : offline ? 'Offline' : 'Unknown'}
+                    {stale ? 'Stale' : info.online ? 'Online' : offline ? 'Offline' : 'Unknown'}
                   </span>
                 </td>
 
@@ -154,4 +167,4 @@ const NodeStatusPanel: React.FC = () => {
   );
 };
 
-export default NodeStatusPanel;
\ No newline at end of file
+export default NodeStatusPanel;
diff --git a/src/components/panels/TimerCard.tsx b/src/components/panels/TimerCard.tsx
new file mode 100644
index 0000000..f0cea50
--- /dev/null
+++ b/src/components/panels/TimerCard.tsx
@@ -0,0 +1,237 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useCountdown } from '@/hooks/useCountdown';
+
+const DEFAULT_PRESET_MS = 4 * 60 * 1000;
+
+function formatMmSs(ms: number): string {
+  const totalSeconds = Math.max(0, Math.round(ms / 1000));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}
+
+function parseMmSs(text: string): number | null {
+  const match = /^(\d{1,2}):(\d{2})$/.exec(text.trim());
+  if (!match) return null;
+
+  const minutes = Number(match[1]);
+  const seconds = Number(match[2]);
+  if (seconds > 59) return null;
+
+  const totalMs = (minutes * 60 + seconds) * 1000;
+  return totalMs > 0 ? totalMs : null;
+}
+
+interface TimerCardProps {
+  label: string;
+  onRemove?: () => void;
+}
+
+const TimerCard: React.FC<TimerCardProps> = ({ label, onRemove }) => {
+  const { status, remainingMs, start, reset } = useCountdown();
+
+  const [presetMs, setPresetMs] = useState(DEFAULT_PRESET_MS);
+  const [inputText, setInputText] = useState(formatMmSs(DEFAULT_PRESET_MS));
+  const [inputInvalid, setInputInvalid] = useState(false);
+
+  const isIdle = status === 'idle';
+  const isFinished = status === 'finished';
+
+  const countdownColor = isFinished
+    ? '#ff5566'
+    : remainingMs <= 30 * 1000
+      ? '#ff5566'
+      : remainingMs <= 60 * 1000
+        ? '#ffcc00'
+        : '#00ffcc';
+
+  const handleGo = () => {
+    const parsedMs = parseMmSs(inputText);
+    if (parsedMs === null) {
+      setInputInvalid(true);
+      return;
+    }
+
+    setInputInvalid(false);
+    setPresetMs(parsedMs);
+    start(parsedMs);
+  };
+
+  const handleReset = () => {
+    reset();
+    setInputText(formatMmSs(presetMs));
+    setInputInvalid(false);
+  };
+
+  return (
+    <div className={`timer-card${isFinished ? ' finished' : ''}`}>
+      <div className="header">
+        <h4>{label}</h4>
+        {onRemove && (
+          <button
+            type="button"
+            className="remove-btn"
+            onClick={onRemove}
+            title="Remove timer"
+            aria-label={`Remove ${label}`}
+          >
+            ×
+          </button>
+        )}
+      </div>
+
+      {!isIdle && <div className="countdown">{formatMmSs(remainingMs)}</div>}
+
+      <input
+        type="text"
+        inputMode="numeric"
+        value={isIdle ? inputText : formatMmSs(presetMs)}
+        disabled={!isIdle}
+        placeholder="mm:ss"
+        className={inputInvalid ? 'invalid' : ''}
+        onChange={(e) => {
+          setInputText(e.target.value);
+          setInputInvalid(false);
+        }}
+      />
+
+      <div className="buttons">
+        {isIdle ? (
+          <button type="button" onClick={handleGo}>
+            Go
+          </button>
+        ) : (
+          <button type="button" className="reset" onClick={handleReset}>
+            Reset
+          </button>
+        )}
+      </div>
+
+      <style jsx>{`
+        .timer-card {
+          background: linear-gradient(145deg, #2b2b2b, #202020);
+          border: 1px solid #3a3a3a;
+          border-radius: 10px;
+          padding: 0.75rem;
+          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+        }
+
+        .timer-card.finished {
+          border-color: #dc3545;
+          animation: pulse 1s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+          0%,
+          100% {
+            box-shadow: 0 0 6px rgba(220, 53, 69, 0.4);
+          }
+          50% {
+            box-shadow: 0 0 16px rgba(220, 53, 69, 0.9);
+          }
+        }
+
+        .header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        h4 {
+          margin: 0;
+          font-size: 0.95rem;
+          font-weight: 600;
+          color: #eaeaea;
+        }
+
+        .remove-btn {
+          background: transparent;
+          border: none;
+          color: #888;
+          font-size: 1rem;
+          line-height: 1;
+          padding: 0 0.25rem;
+          cursor: pointer;
+        }
+
+        .remove-btn:hover {
+          color: #dc3545;
+        }
+
+        .countdown {
+          font-family: 'Courier New', monospace;
+          font-size: 1.8rem;
+          font-weight: 700;
+          text-align: center;
+          letter-spacing: 1px;
+          color: ${countdownColor};
+          transition: color 0.2s ease;
+        }
+
+        input {
+          padding: 0.35rem;
+          border-radius: 6px;
+          border: 1px solid #444;
+          background: #111;
+          color: #fff;
+          font-size: 0.85rem;
+          width: 100%;
+          box-sizing: border-box;
+          text-align: center;
+          font-family: 'Courier New', monospace;
+        }
+
+        input:disabled {
+          color: #999;
+          cursor: not-allowed;
+        }
+
+        input.invalid {
+          border-color: #dc3545;
+        }
+
+        input:focus {
+          outline: none;
+          border-color: #0070f3;
+          box-shadow: 0 0 5px rgba(0, 112, 243, 0.4);
+        }
+
+        .buttons {
+          display: flex;
+        }
+
+        button {
+          flex: 1;
+          padding: 0.4rem;
+          border: none;
+          border-radius: 6px;
+          font-size: 0.8rem;
+          cursor: pointer;
+          font-weight: 500;
+          transition: 0.15s ease;
+          color: white;
+          background: #0070f3;
+        }
+
+        button:hover {
+          background: #005fcc;
+        }
+
+        button.reset {
+          background: #555;
+        }
+
+        button.reset:hover {
+          background: #666;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default TimerCard;
diff --git a/src/components/panels/TimerPanel.tsx b/src/components/panels/TimerPanel.tsx
new file mode 100644
index 0000000..6151929
--- /dev/null
+++ b/src/components/panels/TimerPanel.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import React, { useState } from 'react';
+import TimerCard from './TimerCard';
+
+const DEFAULT_TIMER_COUNT = 5;
+const MIN_TIMERS = 1;
+const MAX_TIMERS = 8;
+
+function smallestFreeId(ids: number[]): number {
+  const used = new Set(ids);
+  let id = 1;
+  while (used.has(id)) id += 1;
+  return id;
+}
+
+const TimerPanel: React.FC = () => {
+  const [timerIds, setTimerIds] = useState<number[]>(
+    Array.from({ length: DEFAULT_TIMER_COUNT }, (_, i) => i + 1),
+  );
+
+  const addTimer = () => {
+    setTimerIds((prev) => {
+      if (prev.length >= MAX_TIMERS) return prev;
+      const id = smallestFreeId(prev);
+      return [...prev, id].sort((a, b) => a - b);
+    });
+  };
+
+  const removeTimer = (id: number) => {
+    setTimerIds((prev) => (prev.length > MIN_TIMERS ? prev.filter((t) => t !== id) : prev));
+  };
+
+  return (
+    <div className="panel">
+      <div className="panel-header">
+        <h3>Multi-Timer</h3>
+        <button
+          type="button"
+          className="add-btn"
+          onClick={addTimer}
+          disabled={timerIds.length >= MAX_TIMERS}
+        >
+          + Add Timer
+        </button>
+      </div>
+
+      <div className="timer-grid">
+        {timerIds.map((id) => (
+          <TimerCard
+            key={id}
+            label={`Timer ${id}`}
+            onRemove={timerIds.length > MIN_TIMERS ? () => removeTimer(id) : undefined}
+          />
+        ))}
+      </div>
+
+      <style jsx>{`
+        .panel {
+          background: radial-gradient(circle at top, #2a2a2a, #151515);
+          color: #f1f1f1;
+          padding: 1rem;
+          border-radius: 12px;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .panel-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid #444;
+          padding-bottom: 0.6rem;
+          margin-bottom: 1rem;
+        }
+
+        h3 {
+          margin: 0;
+          font-size: 1.3rem;
+          letter-spacing: 0.5px;
+        }
+
+        .add-btn {
+          padding: 0.4rem 0.75rem;
+          border: none;
+          border-radius: 6px;
+          font-size: 0.8rem;
+          cursor: pointer;
+          font-weight: 500;
+          color: white;
+          background: #0070f3;
+        }
+
+        .add-btn:hover:enabled {
+          background: #005fcc;
+        }
+
+        .add-btn:disabled {
+          background: #2f2f2f;
+          color: #777;
+          cursor: not-allowed;
+        }
+
+        .timer-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+          gap: 1rem;
+          overflow-y: auto;
+          padding-right: 0.25rem;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default TimerPanel;
diff --git a/src/components/panels/VideoControls.tsx b/src/components/panels/VideoControls.tsx
index a830969..ca1c735 100644
--- a/src/components/panels/VideoControls.tsx
+++ b/src/components/panels/VideoControls.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React from "react";
+import React, { useEffect } from "react";
 import VideoCustomPresetForm from "../VideoCustomPresetForm";
 import ROSLIB from "roslib";
 import { useROS } from "@/ros/ROSContext";
@@ -156,6 +156,30 @@ const VideoControls: React.FC = () => {
   };
 
   const connected = !!ros && rosStatus === "connected";
+  // Shift + s for snapshot 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const isSnapshotShortcut =
+        event.shiftKey && event.key.toLowerCase() === "s";
+
+      if (!isSnapshotShortcut) return;
+      if (event.repeat) return;
+
+      const target = event.target as HTMLElement | null;
+      const isEditableTarget =
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        !!target?.isContentEditable;
+
+      if (isEditableTarget || !connected) return;
+
+      event.preventDefault();
+      onSnapshot();
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [connected]);
 
   const buttonStyle = (enabled: boolean) => ({
     border: "1px solid #444",
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000..3ea48cd
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,9 @@
+// src/constants.ts
+
+export const ROVER_IP = '192.168.0.55';
+export const BASE_AP_IP = '192.168.0.2';
+export const ROVER_AP_IP = '192.168.0.3';
+export const RPI_IP = '192.168.0.25';
+export const BASE_IP = '192.168.0.20';
+export const TILING_SERVER_PORT = 80;
+export const TILING_SERVER = `${BASE_IP}:${TILING_SERVER_PORT}`;
diff --git a/src/hooks/useCountdown.ts b/src/hooks/useCountdown.ts
new file mode 100644
index 0000000..225f323
--- /dev/null
+++ b/src/hooks/useCountdown.ts
@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+export type CountdownStatus = 'idle' | 'running' | 'finished';
+
+const TICK_INTERVAL_MS = 200;
+
+export interface UseCountdownResult {
+  status: CountdownStatus;
+  remainingMs: number;
+  start: (durationMs: number) => void;
+  reset: () => void;
+}
+
+//Avoid inaccurate countdowns when switching to the background
+export function useCountdown(): UseCountdownResult {
+  const [status, setStatus] = useState<CountdownStatus>('idle');
+  const [remainingMs, setRemainingMs] = useState(0);
+  const endTimeRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (status !== 'running') return;
+
+    const tick = () => {
+      const remaining = Math.max(0, (endTimeRef.current ?? 0) - Date.now());
+      setRemainingMs(remaining);
+
+      if (remaining <= 0) {
+        setStatus('finished');
+      }
+    };
+
+    tick();
+    const intervalId = window.setInterval(tick, TICK_INTERVAL_MS);
+
+    return () => window.clearInterval(intervalId);
+  }, [status]);
+
+  const start = (durationMs: number) => {
+    endTimeRef.current = Date.now() + durationMs;
+    setRemainingMs(durationMs);
+    setStatus('running');
+  };
+
+  const reset = () => {
+    endTimeRef.current = null;
+    setRemainingMs(0);
+    setStatus('idle');
+  };
+
+  return { status, remainingMs, start, reset };
+}
diff --git a/start.sh b/start.sh
index 9ad8a70..5f55242 100755
--- a/start.sh
+++ b/start.sh
@@ -1,13 +1,5 @@
 #!/bin/bash
-
-LOCAL_IP=""
-while [ -z "$LOCAL_IP" ]; do
-  LOCAL_IP=$(ip addr show enP8p1s0 | grep -oP '(?<=inet )([0-9\.]+)' || hostname -I | awk '{print $1}')
-  sleep 1
-done
-LOCAL_IP="192.168.0.20"
 TILING_SERVER_PORT=80
-echo "Local IP address: $LOCAL_IP"
 
 if docker ps -a --format '{{.Names}}' | grep -wq "tiling-server-container"; then
   echo "Tiling container exists, removing..."
@@ -21,6 +13,5 @@ docker run --rm --name tiling-server-container -d \
 
 docker run --rm --name cprt-webserver \
   -p 3000:3000 \
-  -e NEXT_PUBLIC_TILE_SERVER="$LOCAL_IP:$TILING_SERVER_PORT" \
   cprtsoftware/web-ui:latest