diff --git a/src/teleoperation/backend/consumers.py b/src/teleoperation/backend/consumers.py
index b8ca3964c..4534d30bd 100644
--- a/src/teleoperation/backend/consumers.py
+++ b/src/teleoperation/backend/consumers.py
@@ -7,6 +7,8 @@
 from channels.generic.websocket import JsonWebsocketConsumer
 import rospy
 import tf2_ros
+import cv2
+from cv_bridge import CvBridge
 from geometry_msgs.msg import Twist
 from mrover.msg import (
     PDLB,
@@ -17,12 +19,15 @@
     StateMachineStateUpdate,
     Throttle,
     CalibrationStatus,
-    Calibrated,
     MotorsStatus,
+    CameraCmd,
+    Calibrated,
     Velocity,
     Position,
     IK,
 )
+from mrover.srv import EnableAuton, ChangeCameras, CapturePanorama
+from sensor_msgs.msg import NavSatFix, Temperature, RelativeHumidity, Image
 from mrover.srv import EnableAuton
 from sensor_msgs.msg import NavSatFix, Temperature, RelativeHumidity
 from std_msgs.msg import String, Bool
@@ -88,11 +93,6 @@ def connect(self):
                 "/sa_humidity_data", RelativeHumidity, self.sa_humidity_data_callback
             )
 
-            # Services
-            self.laser_service = rospy.ServiceProxy("enable_mosfet_device", SetBool)
-            self.calibrate_service = rospy.ServiceProxy("arm_calibrate", Trigger)
-            self.enable_auton = rospy.ServiceProxy("enable_auton", EnableAuton)
-
             # Services
             self.laser_service = rospy.ServiceProxy("enable_arm_laser", SetBool)
             self.enable_auton = rospy.ServiceProxy("enable_auton", EnableAuton)
@@ -100,6 +100,8 @@ def connect(self):
             self.calibrate_cache_srv = rospy.ServiceProxy("cache_calibrate", Trigger)
             self.cache_enable_limit = rospy.ServiceProxy("cache_enable_limit_switches", SetBool)
             self.calibrate_service = rospy.ServiceProxy("arm_calibrate", Trigger)
+            self.change_cameras_srv = rospy.ServiceProxy("change_cameras", ChangeCameras)
+            self.capture_panorama_srv: Any = rospy.ServiceProxy("capture_panorama", CapturePanorama)
 
             # ROS Parameters
             self.mappings = rospy.get_param("teleop/joystick_mappings")
@@ -119,6 +121,7 @@ def connect(self):
             self.tf_listener = tf2_ros.TransformListener(self.tf_buffer)
             self.flight_thread = threading.Thread(target=self.flight_attitude_listener)
             self.flight_thread.start()
+
         except rospy.ROSException as e:
             rospy.logerr(e)
 
@@ -160,6 +163,12 @@ def receive(self, text_data):
                 self.auton_bearing()
             elif message["type"] == "mast_gimbal":
                 self.mast_gimbal(message)
+            elif message["type"] == "max_streams":
+                self.send_res_streams()
+            elif message["type"] == "sendCameras":
+                self.change_cameras(msg=message)
+            elif message["type"] == "center_map":
+                self.send_center()
             elif message["type"] == "enable_limit_switch":
                 self.limit_switch(message)
             elif message["type"] == "center_map":
@@ -588,10 +597,45 @@ def mast_gimbal(self, msg):
         up_down_pwr = msg["throttles"][1] * pwr["up_down_pwr"]
         self.mast_gimbal_pub.publish(Throttle(["mast_gimbal_x", "mast_gimbal_y"], [rot_pwr, up_down_pwr]))
 
-    def send_center(self):
-        lat = rospy.get_param("gps_linearization/reference_point_latitude")
-        long = rospy.get_param("gps_linearization/reference_point_longitude")
-        self.send(text_data=json.dumps({"type": "center_map", "latitude": lat, "longitude": long}))
+    def change_cameras(self, msg):
+        try:
+            camera_cmd = CameraCmd(msg["device"], msg["resolution"])
+            rospy.logerr(camera_cmd)
+            result = self.change_cameras_srv(primary=msg["primary"], camera_cmd=camera_cmd)
+            rospy.logerr(result)
+        except rospy.ServiceException as e:
+            print(f"Service call failed: {e}")
+
+    def send_res_streams(self):
+        res = rospy.get_param("cameras/max_num_resolutions")
+        streams = rospy.get_param("cameras/max_streams")
+        self.send(text_data=json.dumps({"type": "max_resolution", "res": res}))
+        self.send(text_data=json.dumps({"type": "max_streams", "streams": streams}))
+
+    def capture_panorama(self) -> None:
+        try:
+            response = self.capture_panorama_srv()
+            image = response.panorama
+            self.image_callback(image)
+        except rospy.ServiceException as e:
+            print(f"Service call failed: {e}")
+
+    def image_callback(self, msg):
+        bridge = CvBridge()
+        try:
+            # Convert the image to OpenCV standard format
+            cv_image = bridge.imgmsg_to_cv2(msg, desired_encoding="passthrough")
+        except Exception as e:
+            rospy.logerr("Could not convert image message to OpenCV image: " + str(e))
+            return
+
+        # Save the image to a file (you could change 'png' to 'jpg' or other formats)
+        image_filename = "panorama.png"
+        try:
+            cv2.imwrite(image_filename, cv_image)
+            rospy.loginfo("Saved image to {}".format(image_filename))
+        except Exception as e:
+            rospy.logerr("Could not save image: " + str(e))
 
     def send_center(self):
         lat = rospy.get_param("gps_linearization/reference_point_latitude")
diff --git a/src/teleoperation/frontend/src/components/AutonTask.vue b/src/teleoperation/frontend/src/components/AutonTask.vue
index ce334a5cb..d5856eade 100644
--- a/src/teleoperation/frontend/src/components/AutonTask.vue
+++ b/src/teleoperation/frontend/src/components/AutonTask.vue
@@ -212,7 +212,6 @@ export default defineComponent({
 }
 
 @keyframes blinkAnimation {
-
   0%,
   100% {
     background-color: var(--bs-success);
@@ -282,8 +281,8 @@ h2 {
   cursor: pointer;
 }
 
-.help:hover~.helpscreen,
-.help:hover~.helpimages {
+.help:hover ~ .helpscreen,
+.help:hover ~ .helpimages {
   visibility: visible;
 }
 
diff --git a/src/teleoperation/frontend/src/components/AutonWaypointEditor.vue b/src/teleoperation/frontend/src/components/AutonWaypointEditor.vue
index 0165573a2..e680e1dff 100644
--- a/src/teleoperation/frontend/src/components/AutonWaypointEditor.vue
+++ b/src/teleoperation/frontend/src/components/AutonWaypointEditor.vue
@@ -9,25 +9,9 @@
           </div>
           <div class="form-group col-md-6">
             <label for="waypointid">Tag ID:</label>
-            <input
-              v-if="type == 1"
-              class="form-control"
-              id="waypointid"
-              v-model="id"
-              type="number"
-              max="249"
-              min="0"
-              step="1"
-            />
-            <input
-              v-else
-              class="form-control"
-              id="waypointid"
-              type="number"
-              placeholder="-1"
-              step="1"
-              disabled
-            />
+            <input v-if="type == 1" class="form-control" id="waypointid" v-model="id" type="number" max="249" min="0"
+              step="1" />
+            <input v-else class="form-control" id="waypointid" type="number" placeholder="-1" step="1" disabled />
           </div>
         </div>
 
@@ -39,33 +23,15 @@
         </select>
 
         <div class="form-check form-check-inline">
-          <input
-            v-model="odom_format_in"
-            class="form-check-input"
-            type="radio"
-            id="radioD"
-            value="D"
-          />
+          <input v-model="odom_format_in" class="form-check-input" type="radio" id="radioD" value="D" />
           <label class="form-check-label" for="radioD">D</label>
         </div>
         <div class="form-check form-check-inline">
-          <input
-            v-model="odom_format_in"
-            class="form-check-input"
-            type="radio"
-            id="radioDM"
-            value="DM"
-          />
+          <input v-model="odom_format_in" class="form-check-input" type="radio" id="radioDM" value="DM" />
           <label class="form-check-label" for="radioDM">DM</label>
         </div>
         <div class="form-check form-check-inline">
-          <input
-            v-model="odom_format_in"
-            class="form-check-input"
-            type="radio"
-            id="radioDMS"
-            value="DMS"
-          />
+          <input v-model="odom_format_in" class="form-check-input" type="radio" id="radioDMS" value="DMS" />
           <label class="form-check-label" for="radioDMS">DMS</label>
         </div>
 
@@ -119,55 +85,28 @@
             class="dragArea"
             draggable=".item'"
           > -->
-          <WaypointItem
-            v-for="(waypoint, i) in storedWaypoints"
-            :key="i"
-            :waypoint="waypoint"
-            :in_route="false"
-            :index="i"
-            @delete="deleteItem($event)"
-            @togglePost="togglePost($event)"
-            @add="addItem($event)"
-          />
+          <WaypointItem v-for="(waypoint, i) in storedWaypoints" :key="i" :waypoint="waypoint" :in_route="false"
+            :index="i" @delete="deleteItem($event)" @togglePost="togglePost($event)" @add="addItem($event)" />
           <!-- </draggable> -->
         </div>
       </div>
     </div>
     <div class="col-wrap" style="left: 50%">
       <!-- <div class="auton-check"> -->
-      <AutonModeCheckbox
-        ref="autonCheckbox"
-        class="auton-checkbox"
-        :name="autonButtonText"
-        :color="autonButtonColor"
-        @toggle="toggleAutonMode($event)"
-      />
+      <AutonModeCheckbox ref="autonCheckbox" class="auton-checkbox" :name="autonButtonText" :color="autonButtonColor"
+        @toggle="toggleAutonMode($event)" />
       <div class="stats">
         <VelocityCommand />
       </div>
-      <Checkbox
-        ref="teleopCheckbox"
-        class="teleop-checkbox"
-        :name="'Teleop Controls'"
-        @toggle="toggleTeleopMode($event)"
-      />
+      <Checkbox ref="teleopCheckbox" class="teleop-checkbox" :name="'Teleop Controls'"
+        @toggle="toggleTeleopMode($event)" />
       <!-- </div> -->
       <Checkbox class="stuck-checkbox" name="Stuck" @toggle="roverStuck = !roverStuck"></Checkbox>
       <h4 class="waypoint-headers">Current Course</h4>
       <div class="box route">
         <!-- <draggable v-model="route" class="dragArea" draggable=".item'"> -->
-        <WaypointItem
-          v-for="(waypoint, i) in route"
-          :id="id"
-          :key="i"
-          :waypoint="waypoint"
-          :in_route="true"
-          :index="i"
-          :name="name"
-          @delete="deleteItem($event)"
-          @togglePost="togglePost($event)"
-          @add="addItem($event)"
-        />
+        <WaypointItem v-for="(waypoint, i) in route" :id="id" :key="i" :waypoint="waypoint" :in_route="true" :index="i"
+          :name="name" @delete="deleteItem($event)" @togglePost="togglePost($event)" @add="addItem($event)" />
         <!-- </draggable> -->
       </div>
     </div>
@@ -186,94 +125,36 @@
                 <div class="modal-odom-format">
                   <h5>Waypoint format:</h5>
                   <div class="form-check form-check-inline">
-                    <input
-                      v-model="odom_format_in"
-                      class="form-check-input"
-                      type="radio"
-                      id="radioD"
-                      value="D"
-                    />
+                    <input v-model="odom_format_in" class="form-check-input" type="radio" id="radioD" value="D" />
                     <label class="form-check-label" for="radioD">D</label>
                   </div>
                   <div class="form-check form-check-inline">
-                    <input
-                      v-model="odom_format_in"
-                      class="form-check-input"
-                      type="radio"
-                      id="radioDM"
-                      value="DM"
-                    />
+                    <input v-model="odom_format_in" class="form-check-input" type="radio" id="radioDM" value="DM" />
                     <label class="form-check-label" for="radioDM">DM</label>
                   </div>
                   <div class="form-check form-check-inline">
-                    <input
-                      v-model="odom_format_in"
-                      class="form-check-input"
-                      type="radio"
-                      id="radioDMS"
-                      value="DMS"
-                    />
+                    <input v-model="odom_format_in" class="form-check-input" type="radio" id="radioDMS" value="DMS" />
                     <label class="form-check-label" for="radioDMS">DMS</label>
                   </div>
                 </div>
-                <div
-                  v-for="(header, index) in compModalHeaders"
-                  :key="header"
-                  class="comp-modal-inputs"
-                >
+                <div v-for="(header, index) in compModalHeaders" :key="header" class="comp-modal-inputs">
                   <h5>{{ header }}</h5>
-                  <input
-                    id="lat_deg"
-                    v-model.number="compModalLatDeg[index]"
-                    type="number"
-                    min="-90"
-                    max="90"
-                  />
+                  <input id="lat_deg" v-model.number="compModalLatDeg[index]" type="number" min="-90" max="90" />
                   <label>º</label>
-                  <input
-                    v-if="min_enabled"
-                    id="lat_min"
-                    v-model.number="compModalLatMin[index]"
-                    type="number"
-                    min="0"
-                    max="60"
-                  />
+                  <input v-if="min_enabled" id="lat_min" v-model.number="compModalLatMin[index]" type="number" min="0"
+                    max="60" />
                   <label v-if="min_enabled">'</label>
-                  <input
-                    v-if="sec_enabled"
-                    id="lat_sec"
-                    v-model.number="compModalLatSec[index]"
-                    type="number"
-                    min="0"
-                    max="3600"
-                  />
+                  <input v-if="sec_enabled" id="lat_sec" v-model.number="compModalLatSec[index]" type="number" min="0"
+                    max="3600" />
                   <label v-if="sec_enabled">"</label>
                   <label>N &nbsp; &nbsp;</label>
-                  <input
-                    id="lon_deg"
-                    v-model.number="compModalLonDeg[index]"
-                    type="number"
-                    min="-180"
-                    max="180"
-                  />
+                  <input id="lon_deg" v-model.number="compModalLonDeg[index]" type="number" min="-180" max="180" />
                   <label>º</label>
-                  <input
-                    v-if="min_enabled"
-                    id="lon_min"
-                    v-model.number="compModalLonMin[index]"
-                    type="number"
-                    min="0"
-                    max="60"
-                  />
+                  <input v-if="min_enabled" id="lon_min" v-model.number="compModalLonMin[index]" type="number" min="0"
+                    max="60" />
                   <label v-if="min_enabled">'</label>
-                  <input
-                    v-if="sec_enabled"
-                    id="lon_sec"
-                    v-model.number="compModalLonSec[index]"
-                    type="number"
-                    min="0"
-                    max="3600"
-                  />
+                  <input v-if="sec_enabled" id="lon_sec" v-model.number="compModalLonSec[index]" type="number" min="0"
+                    max="3600" />
                   <label v-if="sec_enabled">"</label>
                   <label>E</label>
                 </div>
diff --git a/src/teleoperation/frontend/src/components/CameraFeed.vue b/src/teleoperation/frontend/src/components/CameraFeed.vue
index eb2782aea..b374dba6a 100644
--- a/src/teleoperation/frontend/src/components/CameraFeed.vue
+++ b/src/teleoperation/frontend/src/components/CameraFeed.vue
@@ -7,7 +7,7 @@
 <!-- <script src="../../../streaming/embuild/stream_client.js"></script> -->
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import '/streaming/stream_client.js?url'
 
 export default defineComponent({
@@ -15,11 +15,12 @@ export default defineComponent({
     return {}
   },
   mounted: function () {
-    const canvas: HTMLCanvasElement = document.getElementById('canvas') as HTMLCanvasElement
-
-    const context = canvas.getContext('2d') ?? new CanvasRenderingContext2D()
-    context.fillStyle = 'black'
-    context.fillRect(0, 0, canvas.width, canvas.height)
+    this.$nextTick(() => {
+      const canvas: HTMLCanvasElement = document.getElementById('canvas') as HTMLCanvasElement
+      const context = canvas.getContext('2d') ?? new CanvasRenderingContext2D()
+      context.fillStyle = 'black'
+      context.fillRect(0, 0, canvas.width, canvas.height)
+    })
   }
 })
 </script>
diff --git a/src/teleoperation/frontend/src/components/CameraInfo.vue b/src/teleoperation/frontend/src/components/CameraInfo.vue
index f4d96efc0..9be0cf008 100644
--- a/src/teleoperation/frontend/src/components/CameraInfo.vue
+++ b/src/teleoperation/frontend/src/components/CameraInfo.vue
@@ -1,17 +1,42 @@
 <template>
-  <div class="wrap box">
-    <p>{{ name }} ID: {{ id }}</p>
-    Stream:
-    <input v-model="selectedStream" class="box" type="Number" min="0" max="3" />
-    <button class="box" @click="swapStream()">Change stream</button>
-    <label for="quality">Quality:</label>
-    <select id="quality" v-model="selectedQuality" class="box" @change="changeQuality()">
-      <option v-for="i in numQuality" :key="i">{{ i - 1 }}</option>
-    </select>
+  <div class="shadow my-1 p-3 rounded">
+    <p>{{ name }} • ID: {{ id }}</p>
+    <div class="row justify-content-md-left">
+      <div class="form-group col-md-4">
+        Stream:
+        <input
+          v-model="selectedStream"
+          type="Number"
+          min="0"
+          max="3"
+          class="form-control"
+          @change="swapStream"
+        />
+        <!-- <input v-model="selectedStream" class="box" type="Number" min="0" max="3" /> -->
+        <!-- <button class="box" @click="swapStream()">Change stream</button> -->
+      </div>
+      <div class="form-group col-md-4">
+        <label for="quality">Quality:</label>
+        <select
+          v-model="selectedQuality"
+          type="Number"
+          min="0"
+          max="4"
+          class="form-control"
+          id="quality"
+          @change="changeQuality()"
+        >
+          <!-- <select id="quality" v-model="selectedQuality" class="box" @change="changeQuality()"> -->
+          <option v-for="i in numQuality" :key="i">{{ i - 1 }}</option>
+        </select>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
+import { mapActions, mapState } from 'vuex'
+
 export default {
   props: {
     name: {
@@ -37,23 +62,24 @@ export default {
   },
 
   watch: {
+    message(msg) {
+      if (msg.type == 'max_resolution') {
+        this.numQuality = msg.res
+      }
+    },
     stream: function () {
       this.prevStream = this.stream
       this.selectedStream = this.stream
     }
   },
 
-  created: function () {
-    //   var arg = new ROSLIB.Param({
-    //     ros: this.$ros,
-    //     name: "cameras/max_num_resolutions"
-    //   });
-    //   arg.get((value) => {
-    //     this.numQuality = value;
-    //   });
+  computed: {
+    ...mapState('websocket', ['message'])
   },
 
   methods: {
+    ...mapActions('websocket', ['sendMessage']),
+
     changeQuality: function () {
       this.$emit('newQuality', {
         index: this.id,
@@ -72,18 +98,4 @@ export default {
 }
 </script>
 
-<style scoped>
-/* .box {
-    border-radius: 5px;
-    padding: 10px;
-    border: 1px solid black;
-  }
-  .wrap {
-    margin: 10px;
-    padding: 10px;
-  }
-  
-  .wrap > * {
-    margin: 5px 0 5px 0;
-  } */
-</style>
+<style scoped></style>
diff --git a/src/teleoperation/frontend/src/components/CameraSelection.vue b/src/teleoperation/frontend/src/components/CameraSelection.vue
index de6ce7735..909dff7c7 100644
--- a/src/teleoperation/frontend/src/components/CameraSelection.vue
+++ b/src/teleoperation/frontend/src/components/CameraSelection.vue
@@ -3,13 +3,12 @@
     <div v-for="j in 3" :key="j" class="buttons">
       <template v-for="i in 3" :key="i">
         <button
-          class="btn btn-secondary mx-1 my-1"
+          :class="['btn', color(i, j), 'mx-1', 'my-1']"
           :disabled="maxedOut && !camsEnabled[i - 1 + 3 * (j - 1)]"
           @click="$emit('cam_index', i - 1 + 3 * (j - 1))"
         >
           <span>{{ names[i - 1 + 3 * (j - 1)] }}</span>
         </button>
-        <!-- <div class="fixed-spacer"></div> -->
       </template>
     </div>
   </div>
@@ -37,6 +36,12 @@ export default {
     }
   },
 
+  methods: {
+    color: function (i: number, j: number) {
+      return this.camsEnabled[i - 1 + 3 * (j - 1)] ? 'btn-success' : 'btn-secondary'
+    }
+  },
+
   computed: {
     maxedOut() {
       let num_enabled = 0
@@ -64,21 +69,5 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  /* margin: 10px; */
 }
-/* .cam_buttons {
-    height: 25px;
-    width: 100px;
-    border: 1px solid black;
-    border-radius: 5px;
-  }
-  .fixed-spacer {
-    width: 10px;
-    height: auto;
-  }
-  
-  .active_cam_button {
-    background-color: green;
-    color: white;
-  } */
 </style>
diff --git a/src/teleoperation/frontend/src/components/Cameras.vue b/src/teleoperation/frontend/src/components/Cameras.vue
index 42bc8a76f..4f6bb3418 100644
--- a/src/teleoperation/frontend/src/components/Cameras.vue
+++ b/src/teleoperation/frontend/src/components/Cameras.vue
@@ -1,32 +1,36 @@
 <template>
   <div class="wrap">
     <h3>Cameras ({{ num_available }} available)</h3>
-    <div class="input">
-      Camera name:
-      <input v-model="cameraName" type="message" /> Camera number:
-      <input v-model="cameraIdx" type="Number" min="0" max="8" />
-      <button class="btn btn-primary mx-2" @click="addCameraName()">Change name</button>
+    <div class="row justify-content-md-left">
+      <div class="form-group col-md-4">
+        <label for="Camera Name">Camera name</label>
+        <input v-model="cameraName" type="message" class="form-control" id="CameraName" placeholder="Enter Camera Name" />
+        <small id="cameraDescrip" class="form-text text-muted"></small>
+      </div>
+      <div class="form-group col-md-4">
+        <label for="Camera ID">Camera ID</label>
+        <input v-model="cameraIdx" type="Number" min="0" max="8" class="form-control" id="CameraIdx"
+          placeholder="Camera ID" />
+      </div>
+      <button class="btn btn-primary custom-btn" @click="addCameraName()">Change Name</button>
     </div>
     <div class="cameraselection">
-      <CameraSelection
-        :cams-enabled="camsEnabled"
-        :names="names"
-        :capacity="capacity"
-        @cam_index="setCamIndex($event)"
-      />
+      <CameraSelection :cams-enabled="camsEnabled" :names="names" :capacity="capacity" @cam_index="setCamIndex($event)" />
     </div>
     <h3>All Cameras</h3>
     Capacity:
-    <input v-model="capacity" type="Number" min="2" max="4" />
+    <div class="row justify-content-md-left">
+      <div class="form-group col-md-4">
+        <input v-model="capacity" type="Number" min="2" max="streamOrder.length" class="form-control" />
+      </div>
+    </div>
+    <!-- <input v-model="capacity" type="Number" min="2" :max="streamOrder.length" /> -->
     <div v-for="i in camsEnabled.length" :key="i">
-      <CameraInfo
-        v-if="camsEnabled[i - 1]"
-        :id="i - 1"
-        :name="names[i - 1]"
-        :stream="getStreamNum(i - 1)"
-        @newQuality="changeQuality($event)"
-        @swapStream="swapStream($event)"
-      ></CameraInfo>
+      <CameraInfo v-if="camsEnabled[i - 1]" :id="i - 1" :name="names[i - 1]" :stream="getStreamNum(i - 1)"
+        @newQuality="changeQuality($event)" @swapStream="swapStream($event)"></CameraInfo>
+    </div>
+    <div class="d-flex justify-content-end" v-if="isSA">
+      <button class="btn btn-primary btn-lg cutstom-btn" @click="takePanorama()">Take Panorama</button>
     </div>
   </div>
 </template>
@@ -34,7 +38,8 @@
 <script lang="ts">
 import CameraSelection from '../components/CameraSelection.vue'
 import CameraInfo from '../components/CameraInfo.vue'
-//   import { mapGetters, mapMutations } from "vuex";
+import { mapActions, mapState } from 'vuex'
+import { reactive } from 'vue'
 
 export default {
   components: {
@@ -46,17 +51,21 @@ export default {
     primary: {
       type: Boolean,
       required: true
+    },
+    isSA: {
+      type: Boolean,
+      required: true
     }
   },
   data() {
     return {
-      camsEnabled: new Array(9).fill(false),
-      names: Array.from({ length: 9 }, (_, i) => 'Camera: ' + i),
-      cameraIdx: 1,
+      camsEnabled: reactive(new Array(9).fill(false)),
+      names: reactive(Array.from({ length: 9 }, (_, i) => 'Camera: ' + i)),
+      cameraIdx: 0,
       cameraName: '',
       capacity: 2,
-      qualities: new Array(9).fill(-1),
-      streamOrder: [-1, -1, -1, -1],
+      qualities: reactive(new Array(9).fill(-1)),
+      streamOrder: reactive([]),
 
       available_sub: null,
       num_available: -1
@@ -64,6 +73,11 @@ export default {
   },
 
   watch: {
+    message(msg) {
+      if (msg.type == 'max_streams') {
+        this.streamOrder = new Array(msg.streams).fill(-1)
+      }
+    },
     capacity: function (newCap, oldCap) {
       if (newCap < oldCap) {
         var numStreaming = this.streamOrder.filter((index) => index != -1)
@@ -73,97 +87,83 @@ export default {
     }
   },
 
+  computed: {
+    ...mapState('websocket', ['message']),
+    color: function () {
+      return this.camsEnabled ? 'btn-success' : 'btn-secondary'
+    }
+  },
+
   created: function () {
-    //   var resetService = new ROSLIB.Service({
-    //     ros: this.$ros,
-    //     name: "reset_cameras",
-    //     serviceType: "ResetCameras"
-    //   });
-    //   var request = new ROSLIB.ServiceRequest({
-    //     primary: this.primary
-    //   });
-    //   resetService.callService(request, (result) => {});
-    //   this.available_sub = new ROSLIB.Topic({
-    //     ros: this.$ros,
-    //     name: "available_cameras",
-    //     messageType: "mrover/AvailableCameras"
-    //   });
-    //   this.available_sub.subscribe((msg) => {
-    //     this.num_available = msg.num_available;
-    //   });
+    window.setTimeout(() => {
+      this.sendMessage({ type: 'max_streams' })
+    }, 250)
   },
 
   methods: {
+    ...mapActions('websocket', ['sendMessage']),
+
     setCamIndex: function (index: number) {
-      //     //every time a button is pressed, it changes cam status and adds/removes from stream
-      //     Vue.set(this.camsEnabled, index, !this.camsEnabled[index]);
-      //     if (this.camsEnabled[index]) this.qualities[index] = 2; //if enabling camera, turn on medium quality
-      //     this.changeStream(index);
+      // every time a button is pressed, it changes cam status and adds/removes from stream
+      this.camsEnabled[index] = !this.camsEnabled[index]
+      if (this.camsEnabled[index]) this.qualities[index] = 2 //if enabling camera, turn on medium quality
+      this.changeStream(index)
     },
 
-    sendCameras: function (inde: number) {
-      //     //sends cameras to a service to display on screen
-      //     var res = this.qualities[index];
-      //     var msg = new ROSLIB.Message({ device: index, resolution: res }); //CameraCmd msg
-      //     var changeCamsService = new ROSLIB.Service({
-      //       ros: this.$ros,
-      //       name: "change_cameras",
-      //       serviceType: "ChangeCameras"
-      //     });
-      //     var request = new ROSLIB.ServiceRequest({
-      //       primary: this.primary,
-      //       camera_cmd: msg
-      //     });
-      //     changeCamsService.callService(request, (result) => {});
+    sendCameras: function (index: number) {
+      this.sendMessage({
+        type: 'sendCameras',
+        primary: this.primary,
+        device: index,
+        resolution: this.qualities[index]
+      })
     },
 
     addCameraName: function () {
-      //     Vue.set(this.names, this.cameraIdx, this.cameraName);
+      this.names[this.cameraIdx] = this.cameraName
     },
 
     changeQuality({ index, value }) {
-      //     Vue.set(this.qualities, index, value);
-      //     this.sendCameras(index);
+      this.qualities[index] = value
+      this.sendCameras(index)
     },
 
     swapStream({ prev, newest }) {
-      //     var temp = this.streamOrder[prev];
-      //     Vue.set(this.streamOrder, prev, this.streamOrder[newest]);
-      //     Vue.set(this.streamOrder, newest, temp);
+      var temp = this.streamOrder[prev]
+      // Vue.set(this.streamOrder, prev, this.streamOrder[newest]);
+      this.streamOrder[prev] = this.streamOrder[newest]
+      this.streamOrder[newest] = temp
     },
 
     changeStream(index: number) {
-      //     const found = this.streamOrder.includes(index);
-      //     if (found) {
-      //       this.streamOrder.splice(this.streamOrder.indexOf(index), 1);
-      //       this.streamOrder.push(-1);
-      //       this.qualities[index] = -1; //close the stream when sending it to comms
-      //     } else Vue.set(this.streamOrder, this.streamOrder.indexOf(-1), index);
-      //     this.sendCameras(index);
+      const found = this.streamOrder.includes(index)
+      if (found) {
+        this.streamOrder.splice(this.streamOrder.indexOf(index), 1)
+        this.streamOrder.push(-1)
+        this.qualities[index] = -1 //close the stream when sending it to comms
+      } else this.streamOrder[this.streamOrder.indexOf(-1)] = index
+      this.sendCameras(index)
     },
 
     getStreamNum(index: number) {
+      //TODO: check this out
       return this.streamOrder.indexOf(index)
+    },
+
+    takePanorama() {
+      //TODO: take panorama
     }
   }
 }
 </script>
 
 <style scoped>
-/* .rounded {
-    border: 1px solid black;
-    border-radius: 5px;
-  }
-  
-  .button {
-    height: 25px;
-  } */
-
-/* .input > * {
-    margin: 5px 0 5px 0;
-  } */
-
 .cameraselection {
   margin: 10px;
 }
+
+.custom-btn {
+  width: 150px;
+  height: 50px;
+}
 </style>
diff --git a/src/teleoperation/frontend/src/components/ISHTask.vue b/src/teleoperation/frontend/src/components/ISHTask.vue
index 2b17cec9f..2f625daeb 100644
--- a/src/teleoperation/frontend/src/components/ISHTask.vue
+++ b/src/teleoperation/frontend/src/components/ISHTask.vue
@@ -9,16 +9,9 @@
         <img src="/help.png" alt="Help" title="Help" width="48" height="48" />
       </div>
       <div class="helpscreen"></div>
-      <div
-        class="helpimages"
-        style="display: flex; align-items: center; justify-content: space-evenly"
-      >
-        <img
-          src="/joystick.png"
-          alt="Joystick"
-          title="Joystick Controls"
-          style="width: auto; height: 70%; display: inline-block"
-        />
+      <div class="helpimages" style="display: flex; align-items: center; justify-content: space-evenly">
+        <img src="/joystick.png" alt="Joystick" title="Joystick Controls"
+          style="width: auto; height: 70%; display: inline-block" />
       </div>
     </div>
     <!-- <div class="shadow p-3 rounded siteSelect">
@@ -178,8 +171,8 @@ export default {
   cursor: pointer;
 }
 
-.help:hover ~ .helpscreen,
-.help:hover ~ .helpimages {
+.help:hover~.helpscreen,
+.help:hover~.helpimages {
   visibility: visible;
 }
 
diff --git a/src/teleoperation/frontend/src/components/SATask.vue b/src/teleoperation/frontend/src/components/SATask.vue
index 1088d8251..d73ff57a7 100644
--- a/src/teleoperation/frontend/src/components/SATask.vue
+++ b/src/teleoperation/frontend/src/components/SATask.vue
@@ -28,7 +28,7 @@
       <BasicWaypointEditor :odom="odom" />
     </div>
     <div class="shadow p-3 rounded cameras">
-      <Cameras :primary="true" />
+      <Cameras :primary="true" :isSA="true" />
     </div>
     <div class="shadow p-3 rounded soildata">
       <SoilData />