diff --git a/config/teleop.yaml b/config/teleop.yaml
index 27158d2ee..5b59dad0e 100644
--- a/config/teleop.yaml
+++ b/config/teleop.yaml
@@ -124,4 +124,24 @@ teleop:
   ik_multipliers:
     x: 0.1
     y: 0.1
-    z: 0.1
\ No newline at end of file
+    z: 0.1
+
+  cameras:
+    - name: "ZED"
+      port: 0
+    - name: "Long Range Camera"
+      port: 1
+    - name: "Mast Gimbal Camera"
+      port: 2
+    - name: "Suspension Camera"
+      port: 3
+    - name: "ISH Camera 1"
+      port: 4
+    - name: "ISH Camera 2"
+      port: 5
+    - name: "ISH Camera 3"
+      port: 6
+    - name: "SA Camera 1"
+      port: 7
+    - name: "SA Camera 2"
+      port: 8
diff --git a/src/teleoperation/backend/consumers.py b/src/teleoperation/backend/consumers.py
index eb9ab9941..a46d1cfb1 100644
--- a/src/teleoperation/backend/consumers.py
+++ b/src/teleoperation/backend/consumers.py
@@ -81,6 +81,7 @@ def connect(self):
             self.brushed_motors = rospy.get_param("brushed_motors/controllers")
             self.xbox_mappings = rospy.get_param("teleop/xbox_mappings")
             self.sa_config = rospy.get_param("teleop/sa_controls")
+            self.camera_info = rospy.get_param("teleop/cameras")
 
             # Publishers
             self.twist_pub = rospy.Publisher("/cmd_vel", Twist, queue_size=1)
@@ -193,6 +194,8 @@ def receive(self, text_data):
                 self.mast_gimbal(message)
             elif message["type"] == "max_streams":
                 self.send_res_streams()
+            elif message["type"] == "camera_info":
+                self.send_camera_info()
             elif message["type"] == "sendCameras":
                 self.change_cameras(message)
             elif message["type"] == "takePanorama":
@@ -683,6 +686,11 @@ def send_res_streams(self):
         self.send(text_data=json.dumps({"type": "max_resolution", "res": res}))
         self.send(text_data=json.dumps({"type": "max_streams", "streams": streams}))
 
+    def send_camera_info(self):
+        names = [x["name"] for x in self.camera_info]
+        ports = [x["port"] for x in self.camera_info]
+        self.send(text_data=json.dumps({"type": "camera_info", "names": names, "ports": ports}))
+
     def capture_panorama(self) -> None:
         try:
             response = self.capture_panorama_srv()
diff --git a/src/teleoperation/db.sqlite3 b/src/teleoperation/db.sqlite3
index b8faa9063..afc827954 100644
Binary files a/src/teleoperation/db.sqlite3 and b/src/teleoperation/db.sqlite3 differ
diff --git a/src/teleoperation/frontend/src/components/CameraDisplay.vue b/src/teleoperation/frontend/src/components/CameraDisplay.vue
index 532d7b1d5..9f1feab27 100644
--- a/src/teleoperation/frontend/src/components/CameraDisplay.vue
+++ b/src/teleoperation/frontend/src/components/CameraDisplay.vue
@@ -3,7 +3,7 @@
     <div class="grid-container">
       <div v-for="i in 4" :key="i" :class="'feed' + i">
         <div v-if="i <= numStreams">
-          <CameraFeed :mission="mission" :id="getID(i)" :name="names[getID(i)]"></CameraFeed>
+          <CameraFeed :mission="mission" :id="ports[getID(i)]" :name="names[getID(i)]"></CameraFeed>
         </div>
       </div>
     </div>
@@ -23,6 +23,10 @@ export default defineComponent({
       type: Array,
       required: true
     },
+    ports: {
+      type: Array,
+      required: true
+    },
     streamOrder: {
       //array of camera indices to stream. -1 indicates not used
       type: Array,
diff --git a/src/teleoperation/frontend/src/components/CameraFeed.vue b/src/teleoperation/frontend/src/components/CameraFeed.vue
index 3765c00b6..599e8bd62 100644
--- a/src/teleoperation/frontend/src/components/CameraFeed.vue
+++ b/src/teleoperation/frontend/src/components/CameraFeed.vue
@@ -11,6 +11,7 @@
 import {defineComponent} from 'vue'
 import {mapActions} from 'vuex'
 import Checkbox from './Checkbox.vue'
+import CameraSelection from './CameraSelection.vue'
 
 export default defineComponent({
   props: {
@@ -28,7 +29,8 @@ export default defineComponent({
     }
   },
   components: {
-    Checkbox
+    Checkbox,
+    CameraSelection
   },
 
   data() {
diff --git a/src/teleoperation/frontend/src/components/CameraSelection.vue b/src/teleoperation/frontend/src/components/CameraSelection.vue
index 909dff7c7..27257a907 100644
--- a/src/teleoperation/frontend/src/components/CameraSelection.vue
+++ b/src/teleoperation/frontend/src/components/CameraSelection.vue
@@ -28,7 +28,7 @@ export default {
     names: {
       type: Array,
       required: true
-    }
+    },
   },
   data() {
     return {
diff --git a/src/teleoperation/frontend/src/components/Cameras.vue b/src/teleoperation/frontend/src/components/Cameras.vue
index 55f8be2cd..34c71c5e5 100644
--- a/src/teleoperation/frontend/src/components/Cameras.vue
+++ b/src/teleoperation/frontend/src/components/Cameras.vue
@@ -1,33 +1,7 @@
 <template>
   <div class="wrap row">
     <div class="col">
-      <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">
+      <div class="cameraselection"> 
         <CameraSelection
           :cams-enabled="camsEnabled"
           :names="names"
@@ -44,7 +18,7 @@
         </button>
       </div>
     </div>
-    <CameraDisplay :streamOrder="streamOrder" :mission="mission" :names="names"></CameraDisplay>
+    <CameraDisplay :streamOrder="streamOrder" :mission="mission" :names="names" :ports="ports" :qualities="qualities"></CameraDisplay>
   </div>
 </template>
 
@@ -68,12 +42,13 @@ export default {
     mission: {
       type: String, // {'sa', 'ik', 'other'}
       required: true
-    }
+    },
   },
   data() {
     return {
       camsEnabled: reactive(new Array(9).fill(false)),
-      names: reactive(Array.from({ length: 9 }, (_, i) => 'Camera: ' + i)),
+      names: reactive([]),
+      ports: reactive([]),
       cameraIdx: 0,
       cameraName: '',
       capacity: 4,
@@ -86,6 +61,10 @@ export default {
       if (msg.type == 'max_streams') {
         this.streamOrder = new Array(msg.streams).fill(-1)
       }
+      if (msg.type == 'camera_info') {
+        this.names = msg.names
+        this.ports = msg.ports
+      }
     },
     capacity: function (newCap, oldCap) {
       if (newCap < oldCap) {
@@ -105,7 +84,8 @@ export default {
 
   created: function () {
     window.setTimeout(() => {
-      this.sendMessage({ type: 'max_streams' })
+      this.sendMessage({ type: 'max_streams' }),
+      this.sendMessage({ type: 'camera_info' })
     }, 250)
   },