diff --git a/nerfactory/viewer/app/src/modules/Scene/Scene.jsx b/nerfactory/viewer/app/src/modules/Scene/Scene.jsx
index 7013fb408..fdb540d99 100644
--- a/nerfactory/viewer/app/src/modules/Scene/Scene.jsx
+++ b/nerfactory/viewer/app/src/modules/Scene/Scene.jsx
@@ -3,6 +3,8 @@ import * as THREE from 'three';
 
 import { useContext, useEffect } from 'react';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
+
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls';
 import { useDispatch } from 'react-redux';
 import { drawCamera, drawSceneBounds } from './drawing';
@@ -12,6 +14,7 @@ import SceneNode from '../../SceneNode';
 import { WebSocketContext } from '../WebSocket/WebSocket';
 import { subscribe_to_changes } from '../../subscriber';
 
+
 const msgpack = require('msgpack-lite');
 
 const SCENE_BOUNDS_NAME = 'Scene Bounds';
@@ -51,6 +54,13 @@ export function get_scene_tree() {
   renderer.setPixelRatio(window.devicePixelRatio);
   sceneTree.metadata.renderer = renderer;
 
+  const labelRenderer = new CSS2DRenderer();
+  labelRenderer.setSize( window.innerWidth, window.innerHeight );
+  labelRenderer.domElement.style.position = 'absolute';
+  labelRenderer.domElement.style.top = '0px';
+  document.body.appendChild( labelRenderer.domElement );
+  sceneTree.metadata.labelRenderer = labelRenderer;
+
   // Camera Controls
   const camera_controls = new OrbitControls(main_camera, renderer.domElement);
   camera_controls.rotateSpeed = 2.0;
diff --git a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx b/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
index 62e200e5e..e59343b0e 100644
--- a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
+++ b/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
@@ -18,6 +18,7 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import VisibilityIcon from '@mui/icons-material/Visibility';
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
 import { CameraHelper } from './CameraHelper';
 import { get_curve_object_from_cameras, get_transform_matrix } from './curve';
 import { WebSocketContext } from '../../WebSocket/WebSocket';
@@ -172,11 +173,27 @@ export default function CameraPanel(props) {
   // draw cameras and curve to the scene
   useEffect(() => {
     // draw the cameras
+
+    const labels = Array.from(document.getElementsByClassName('label'));
+    labels.forEach(label => {
+      label.remove();
+    });
+
     sceneTree.delete(['Camera Path', 'Cameras']); // delete old cameras, which is important
     for (let i = 0; i < cameras.length; i += 1) {
       const camera = cameras[i];
       // camera.aspect = render_width / render_height;
       const camera_helper = new CameraHelper(camera, 0x393e46);
+
+      const labelDiv = document.createElement( 'div' );
+      labelDiv.className = 'label';
+      labelDiv.textContent = i;
+      labelDiv.style.color = "black";
+      const camera_label = new CSS2DObject( labelDiv );
+      camera_label.position.set( 0, -0.1, -0.1 );
+      camera_helper.add( camera_label );
+      camera_label.layers.set( 0 );
+
       // camera
       sceneTree.set_object_from_path(
         ['Camera Path', 'Cameras', i.toString(), 'Camera'],
diff --git a/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx b/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx
index 4abf2a82d..55b599f76 100644
--- a/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx
+++ b/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx
@@ -104,6 +104,7 @@ export default function ViewerWindow(props) {
   const sceneTree = props.sceneTree;
   const scene = sceneTree.object;
   const renderer = sceneTree.metadata.renderer;
+  const labelRenderer = sceneTree.metadata.labelRenderer;
 
   const myRef = useRef(null);
   const websocket = useContext(WebSocketContext).socket;
@@ -145,6 +146,7 @@ export default function ViewerWindow(props) {
     sceneTree.metadata.camera.aspect = viewportWidth / viewportHeight;
     sceneTree.metadata.camera.updateProjectionMatrix();
     renderer.setSize(viewportWidth, viewportHeight);
+    labelRenderer.setSize(viewportWidth, viewportHeight);
   };
 
   // update the camera information in the python server
@@ -202,6 +204,7 @@ export default function ViewerWindow(props) {
     sceneTree.metadata.camera.updateProjectionMatrix();
     sceneTree.metadata.camera_controls.update();
     renderer.render(scene, sceneTree.metadata.camera);
+    labelRenderer.render(scene, sceneTree.metadata.camera);
     stats.update();
   };