diff --git a/client/dive-common/apispec.ts b/client/dive-common/apispec.ts
index 0297a6ec1..7f2d896e1 100644
--- a/client/dive-common/apispec.ts
+++ b/client/dive-common/apispec.ts
@@ -7,6 +7,7 @@ import { TrackData } from 'vue-media-annotator/track';
 import { Attribute } from 'vue-media-annotator/use/AttributeTypes';
 import { CustomStyle } from 'vue-media-annotator/StyleManager';
 import { AttributeTrackFilter } from 'vue-media-annotator/AttributeTrackFilterControls';
+import { MultiCamDesktop } from 'platform/desktop/constants';
 
 type DatasetType = 'image-sequence' | 'video' | 'multi' | 'large-image';
 type MultiTrackRecord = Record<string, TrackData>;
@@ -84,7 +85,7 @@ export interface MultiCamImportFolderArgs {
     sourcePath: string;
     trackFile: string;
   }>; // path/track file per camera
-  calibrationFile?: string; // NPZ calibation matrix file
+  calibrationFile?: string; // NPZ calibation matrix file or kwivier *.conf file
   type: 'image-sequence' | 'video';
 }
 
@@ -95,7 +96,7 @@ export interface MultiCamImportKeywordArgs {
     glob: string;
     trackFile: string;
   }>; // glob pattern for base folder
-  calibrationFile?: string; // NPZ calibation matrix file
+  calibrationFile?: string; // NPZ calibation matrix file or kwiver *.conf file
   type: 'image-sequence'; // Always image-sequence type for glob matching
 }
 
@@ -140,6 +141,8 @@ interface DatasetMeta extends DatasetMetaMutable {
   originalFps?: Readonly<number>;
   subType: Readonly<SubType>; // In future this could have stuff like IR/EO
   multiCamMedia: Readonly<MultiCamMedia | null>;
+  multiCam: Readonly<MultiCamDesktop | null>;
+  //calibrationFile?: Readonly<string>;
 }
 
 interface Api {
@@ -166,7 +169,7 @@ interface Api {
   saveAttributeTrackFilters(datasetId: string,
     args: SaveAttributeTrackFilterArgs): Promise<unknown>;
   // Non-Endpoint shared functions
-  openFromDisk(datasetType: DatasetType | 'bulk' | 'calibration' | 'annotation' | 'text' | 'zip', directory?: boolean):
+  openFromDisk(datasetType: DatasetType | 'bulk' | 'calibration' | 'annotation' | 'text' | 'zip' | 'stereoConfiguration', directory?: boolean):
     Promise<{canceled?: boolean; filePaths: string[]; fileList?: File[]; root?: string}>;
   getTiles?(itemId: string, projection?: string): Promise<StringKeyObject>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/client/dive-common/components/ImportButton.vue b/client/dive-common/components/ImportButton.vue
index 739fe2640..abb61ae5f 100644
--- a/client/dive-common/components/ImportButton.vue
+++ b/client/dive-common/components/ImportButton.vue
@@ -49,7 +49,7 @@ export default defineComponent({
       offset-y
       offset-x
       nudge-left="180"
-      max-width="180"
+      max-width="250"
     >
       <template #activator="{ on }">
         <v-btn
@@ -112,6 +112,7 @@ export default defineComponent({
               <v-list-item-title>Image List</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
+
           <v-list-item
             style="align-items':'center"
             @click="$emit('multi-cam', { stereo: true, openType })"
diff --git a/client/dive-common/components/ImportMultiCamDialog.vue b/client/dive-common/components/ImportMultiCamDialog.vue
index d63ac03ff..8cb4264d9 100644
--- a/client/dive-common/components/ImportMultiCamDialog.vue
+++ b/client/dive-common/components/ImportMultiCamDialog.vue
@@ -31,6 +31,10 @@ export default defineComponent({
       type: Boolean as PropType<boolean>,
       required: false,
     },
+    calibration: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+    },
     dataType: {
       type: String as PropType<typeof VideoType | typeof ImageSequenceType>,
       default: ImageSequenceType,
@@ -187,7 +191,7 @@ export default defineComponent({
       }
     }
 
-    async function open(dstype: DatasetType | 'calibration' | 'text', folder: string | 'calibration') {
+    async function open(dstype: DatasetType | 'calibration' | 'text' | 'stereoConfiguration', folder: string | 'calibration' | 'stereoConfiguration') {
       const ret = await openFromDisk(dstype, dstype === 'image-sequence');
       if (!ret.canceled) {
         const path = ret.filePaths[0];
@@ -245,6 +249,7 @@ export default defineComponent({
           calibrationFile: calibrationFile.value,
           type: props.dataType,
         };
+
         emit('begin-multicam-import', args);
       } else if (importType.value === 'keyword') {
         const args: MultiCamImportKeywordArgs = {
@@ -271,6 +276,7 @@ export default defineComponent({
       defaultDisplay,
       displayKeys,
       importAnnotationFilesCheck,
+      // stereoConfigurationFile,
       //Methods
       open,
       prepForImport,
@@ -441,7 +447,7 @@ export default defineComponent({
             </v-radio-group>
           </div>
           <v-row
-            v-if="stereo"
+            v-if="stereo && !calibration"
             no-gutters
             class="align-center"
           >
@@ -491,7 +497,7 @@ export default defineComponent({
         </v-btn>
         <v-btn
           color="primary"
-          :disabled="!nextSteps || (stereo && !calibrationFile)"
+          :disabled="!nextSteps || (stereo && (!calibrationFile))"
           @click="prepForImport"
         >
           Begin Import
diff --git a/client/dive-common/components/RunPipelineMenu.vue b/client/dive-common/components/RunPipelineMenu.vue
index 55a0629cc..d36d93ff8 100644
--- a/client/dive-common/components/RunPipelineMenu.vue
+++ b/client/dive-common/components/RunPipelineMenu.vue
@@ -161,6 +161,8 @@ export default defineComponent({
         case 'utility':
         case 'generate':
           return 'utilities';
+        case 'estimates':
+          return 'estimators';
         case 'transcode':
           return 'transcoders';
         default:
diff --git a/client/dive-common/components/Sidebar.vue b/client/dive-common/components/Sidebar.vue
index 9d76ff2d8..19cf70f96 100644
--- a/client/dive-common/components/Sidebar.vue
+++ b/client/dive-common/components/Sidebar.vue
@@ -152,6 +152,7 @@ export default defineComponent({
             :hotkeys-disabled="visible() || readOnlyMode"
             :height="bottomHeight"
             @track-seek="$emit('track-seek', $event)"
+            @track-added="$emit('track-added', $event)"
           >
             <template slot="settings">
               <TrackSettingsPanel
diff --git a/client/dive-common/components/TrackSettingsPanel.vue b/client/dive-common/components/TrackSettingsPanel.vue
index 90ed67ed9..31a08bacb 100644
--- a/client/dive-common/components/TrackSettingsPanel.vue
+++ b/client/dive-common/components/TrackSettingsPanel.vue
@@ -7,6 +7,7 @@ import {
   computed,
 } from 'vue';
 import { clientSettings } from 'dive-common/store/settings';
+import { useCameraStore } from '../../src/provides';
 
 export default defineComponent({
   name: 'TrackSettingsPanel',
@@ -30,12 +31,15 @@ export default defineComponent({
       interpolate: 'Whether new tracks should have interpolation enabled by default',
       continuous: 'Immediately stay in detection creation mode after creating a new track.  Hit Esc to exit.',
       prompt: 'Prompt user before deleting a track?',
+      stereoMatching: 'When manually adding detections, control whether to create a mirror feature in other cameras.',
       filterTracksByFrame: 'Filter the track list by those with detections in the current frame',
       autoZoom: 'Automatically zoom to the track when selected',
     });
     const modes = ref(['Track', 'Detection']);
     // Add unknown as the default type to the typeList
     const typeList = computed(() => ['unknown'].concat(props.allTypes));
+    const cameraStore = useCameraStore();
+    const multiCam = ref(cameraStore.camMap.value.size > 1);
 
     return {
       clientSettings,
@@ -43,6 +47,7 @@ export default defineComponent({
       help,
       modes,
       typeList,
+      multiCam,
     };
   },
 });
@@ -209,6 +214,38 @@ export default defineComponent({
             </v-tooltip>
           </v-col>
         </v-row>
+
+        <v-row v-if="multiCam">
+          <v-col class="py-1">
+            <v-switch
+              v-model="
+                clientSettings.trackSettings.newTrackSettings.modeSettings.Track.stereoMatching"
+              class="my-0 ml-1 pt-0"
+              dense
+              label="Stereo Matching"
+              hide-details
+            />
+          </v-col>
+          <v-col
+            class="py-1 shrink"
+            align="right"
+          >
+            <v-tooltip
+              open-delay="200"
+              bottom
+            >
+              <template #activator="{ on }">
+                <v-icon
+                  small
+                  v-on="on"
+                >
+                  mdi-help
+                </v-icon>
+              </template>
+              <span>{{ help.stereoMatching }}</span>
+            </v-tooltip>
+          </v-col>
+        </v-row>
       </template>
       <v-row
         v-if="clientSettings.trackSettings.newTrackSettings.mode === 'Detection'"
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index d15e5c64c..0472ec6d0 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable max-len -->
 <script lang="ts">
 import {
   defineComponent, ref, toRef, computed, Ref,
@@ -30,7 +31,7 @@ import {
   useMediaController,
 } from 'vue-media-annotator/components';
 import type { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
-import { getResponseError } from 'vue-media-annotator/utils';
+import { geojsonToBound, getResponseError } from 'vue-media-annotator/utils';
 
 /* DIVE COMMON */
 import PolygonBase from 'dive-common/recipes/polygonbase';
@@ -46,7 +47,12 @@ import clientSettingsSetup, { clientSettings } from 'dive-common/store/settings'
 import { useApi, FrameImage, DatasetType } from 'dive-common/apispec';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import context from 'dive-common/store/context';
-import { MarkChangesPendingFilter } from 'vue-media-annotator/BaseFilterControls';
+import { MarkChangesPendingFilter, TrackWithContext } from 'vue-media-annotator/BaseFilterControls';
+import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
+import TrackViewer from 'vue-media-annotator/components/track_3d_viewer/TrackViewer.vue';
+import { isStereo3dReady } from 'vue-media-annotator/components/track_3d_viewer/misc';
+import TrackViewerSettingsStore from 'vue-media-annotator/components/track_3d_viewer/TrackViewerSettingsStore';
+import TrackViewerSettings from 'vue-media-annotator/components/track_3d_viewer/TrackViewerSettings.vue';
 import GroupSidebarVue from './GroupSidebar.vue';
 import MultiCamToolsVue from './MultiCamTools.vue';
 import PrimaryAttributeTrackFilter from './PrimaryAttributeTrackFilter.vue';
@@ -69,6 +75,8 @@ export default defineComponent({
     UserGuideButton,
     EditorMenu,
     PrimaryAttributeTrackFilter,
+    TrackViewer,
+    TrackViewerSettings,
   },
 
   // TODO: remove this in vue 3
@@ -97,6 +105,11 @@ export default defineComponent({
   setup(props, { emit }) {
     const { prompt } = usePrompt();
     const loadError = ref('');
+
+    const showTrack3dViewer = ref(false);
+    const isStereoConfigMode = ref(false);
+    const hasStereo3dAttributes = ref(false);
+
     const baseMulticamDatasetId = ref(null as string | null);
     const datasetId = toRef(props, 'id');
     const multiCamList: Ref<string[]> = ref(['singleCam']);
@@ -180,6 +193,7 @@ export default defineComponent({
     const groupStyleManager = new StyleManager({ markChangesPending, vuetify });
 
     const cameraStore = new CameraStore({ markChangesPending });
+    const trackViewerSettingsStore = new TrackViewerSettingsStore();
     // This context for removal
     const removeGroups = (id: AnnotationId) => {
       cameraStore.removeGroups(id);
@@ -531,12 +545,35 @@ export default defineComponent({
       selectCamera(camera, event?.button === 2);
       emit('change-camera', camera);
     };
+    const trackSettings = toRef(clientSettings, 'trackSettings');
+
+    function onTrackAdded(trackId: AnnotationId) {
+      if (!clientSettings.trackSettings.newTrackSettings.modeSettings.Track.stereoMatching) {
+        return;
+      }
+
+      const { frame } = aggregateController.value;
+      const trackType = trackSettings.value.newTrackSettings.type;
+
+      multiCamList.value.filter((camera) => camera !== selectedCamera.value)
+        .forEach((camera) => {
+          const trackStore = cameraStore.camMap.value.get(camera)?.trackStore;
+          if (!trackStore) {
+            return;
+          }
+          trackStore.add(frame.value, trackType, undefined, trackId);
+        });
+    }
+
     /** Trigger data load */
     const loadData = async () => {
       try {
         // Close and reset sideBar
         context.resetActive();
         const meta = await loadMetadata(datasetId.value);
+
+        isStereoConfigMode.value = meta.multiCam?.calibration != null;
+
         const defaultCameraMeta = meta.multiCamMedia?.cameras[meta.multiCamMedia.defaultDisplay];
         baseMulticamDatasetId.value = datasetId.value;
         if (defaultCameraMeta !== undefined && meta.multiCamMedia) {
@@ -553,6 +590,7 @@ export default defineComponent({
         /* Otherwise, complete loading of the dataset */
         trackStyleManager.populateTypeStyles(meta.customTypeStyling);
         groupStyleManager.populateTypeStyles(meta.customGroupStyling);
+
         if (meta.customTypeStyling) {
           trackFilters.importTypes(Object.keys(meta.customTypeStyling), false);
         }
@@ -705,6 +743,18 @@ export default defineComponent({
             component: GroupSidebarVue,
           });
         }
+
+        if (meta.multiCam?.calibration) {
+          context.register({
+            component: TrackViewerSettings,
+            description: 'Track Viewer Settings',
+          });
+        } else {
+          context.unregister({
+            component: TrackViewerSettings,
+            description: 'Track Viewer Settings',
+          });
+        }
       } catch (err) {
         progress.loaded = false;
         console.error(err);
@@ -748,6 +798,9 @@ export default defineComponent({
       await nextTick();
       handleResize();
     });
+    watch(attributes, (attrs) => {
+      hasStereo3dAttributes.value = isStereo3dReady(attrs);
+    });
     onBeforeUnmount(() => {
       if (controlsRef.value) observer.unobserve(controlsRef.value.$el);
     });
@@ -779,12 +832,78 @@ export default defineComponent({
       timelineEnabled,
 
     };
+    function onGeometryAdded({
+      data, type, update, frameNumber,
+    }: {
+      data: GeoJSON.Feature<GeoJSON.Polygon | GeoJSON.LineString | GeoJSON.Point>;
+      type: EditAnnotationTypes;
+      update: {
+        updateLayers: (
+          frame: number,
+          editingTrack: false | EditAnnotationTypes,
+          selectedTrackId: AnnotationId | null,
+          multiSeletListRef: readonly AnnotationId[],
+          enabledTracks: readonly TrackWithContext[],
+          visibleModes: readonly VisibleAnnotationTypes[],
+          selectedKey: string,
+        ) => void;
+        editingModeRef: Ref<false | EditAnnotationTypes>;
+        selectedTrackIdRef: Ref<AnnotationId | null>;
+        multiSeletListRef: Ref<readonly AnnotationId[]>;
+        enabledTracksRef: Ref<readonly TrackWithContext[]>;
+        visibleModesRef: Ref<readonly VisibleAnnotationTypes[]>;
+        selectedKeyRef: Ref<string>;
+      };
+      frameNumber: number;
+    }) {
+      if (type !== 'rectangle' || !clientSettings.trackSettings.newTrackSettings.modeSettings.Track.stereoMatching) {
+        return;
+      }
+
+      const trackId = selectedTrackId.value;
+
+      if (!trackId) {
+        return;
+      }
+
+      const pairedTracks = cameraStore.getTrackAll(trackId);
+      const bounds = geojsonToBound(data as GeoJSON.Feature<GeoJSON.Polygon>);
+
+      pairedTracks.forEach((trackData) => {
+        trackData.setFeature({
+          frame: frameNumber,
+          bounds,
+          keyframe: true,
+          interpolate: false,
+        });
+        update.updateLayers(
+          frameNumber,
+          update.editingModeRef.value,
+          trackData.id,
+          update.multiSeletListRef.value,
+          update.enabledTracksRef.value,
+          update.visibleModesRef.value,
+          update.selectedKeyRef.value,
+        );
+        handler.newTrackSettingsAfterLogic(trackData, {
+          skipAdvanceNextFrame: true,
+          keepCreating: true,
+        });
+      });
+    }
+
+    // trigger resize of the annotator on track 3d viewer toggling
+    watch(showTrack3dViewer, async () => {
+      await nextTick();
+      onResize();
+    });
 
     provideAnnotator(
       {
         annotatorPreferences: toRef(clientSettings, 'annotatorPreferences'),
         attributes,
         cameraStore,
+        trackViewerSettingsStore,
         datasetId,
         editingMode,
         groupFilters,
@@ -874,6 +993,12 @@ export default defineComponent({
       selectedSet,
       displayComparisons,
       annotationSetColor: trackStyleManager.typeStyling.value.annotationSetColor,
+      onTrackAdded,
+      onGeometryAdded,
+      datasetId,
+      showTrack3dViewer,
+      isStereoConfigMode,
+      hasStereo3dAttributes,
     };
   },
 });
@@ -1006,6 +1131,22 @@ export default defineComponent({
             {{ item }} {{ item === defaultCamera ? '(Default)' : '' }}
           </template>
         </v-select>
+
+        <template v-if="isStereoConfigMode">
+          <v-divider
+            vertical
+            class="mx-2"
+          />
+
+          <v-switch
+            v-model="showTrack3dViewer"
+            label="Track 3D Viewer"
+            color="primary"
+            :disabled="!hasStereo3dAttributes"
+            hide-details
+          />
+        </template>
+
         <v-divider
           vertical
           class="mx-2"
@@ -1071,6 +1212,7 @@ export default defineComponent({
         v-if="!sideBarCollapsed"
         @import-types="trackFilters.importTypes($event)"
         @track-seek="aggregateController.seek($event)"
+        @track-added="onTrackAdded"
       >
         <template>
           <v-divider />
@@ -1106,12 +1248,22 @@ export default defineComponent({
           ]"
           class="d-flex flex-column grow"
         >
-          <div class="d-flex grow">
+          <div
+            class="d-flex grow flex-wrap"
+            :style="{ 'max-height': `calc(100% - ${controlsHeight}px)` }"
+          >
+            <div
+              v-if="showTrack3dViewer"
+              :style="{ height: '50%', width: '100%', 'flex-basis': '100%' }"
+            >
+              <track-viewer :controls-height="controlsHeight" />
+            </div>
+
             <div
               v-for="camera in multiCamList"
               :key="camera"
               class="d-flex flex-column grow"
-              :style="{ height: `calc(100% - ${controlsHeight}px)` }"
+              :style="showTrack3dViewer ? { height: '50%' } : { height: '100%' }"
               @mousedown.left="changeCamera(camera, $event)"
               @mouseup.right="changeCamera(camera, $event)"
             >
@@ -1136,7 +1288,10 @@ export default defineComponent({
                 }"
                 @large-image-warning="$emit('large-image-warning', true)"
               >
-                <LayerManager :camera="camera" />
+                <LayerManager
+                  :camera="camera"
+                  @geometry-added="onGeometryAdded"
+                />
               </component>
             </div>
           </div>
diff --git a/client/dive-common/constants.ts b/client/dive-common/constants.ts
index 67a85cce0..0519ba93f 100644
--- a/client/dive-common/constants.ts
+++ b/client/dive-common/constants.ts
@@ -54,6 +54,7 @@ const otherVideoTypes = [
 
 const calibrationFileTypes = [
   'npz',
+  'conf',
 ];
 
 const fileVideoTypes = [
@@ -118,6 +119,10 @@ const zipFileTypes = [
   'zip',
 ];
 
+const stereoCalibrationConfigurationFileTypes = [
+  'conf',
+];
+
 const stereoPipelineMarker = 'measurement';
 const multiCamPipelineMarkers = ['2-cam', '3-cam'];
 
@@ -151,4 +156,5 @@ export {
   multiCamPipelineMarkers,
   JsonMetaRegEx,
   simplifyTrainingName,
+  stereoCalibrationConfigurationFileTypes,
 };
diff --git a/client/dive-common/store/context.ts b/client/dive-common/store/context.ts
index fa2a6f2f2..a91592229 100644
--- a/client/dive-common/store/context.ts
+++ b/client/dive-common/store/context.ts
@@ -6,6 +6,7 @@ import GroupSidebar from 'dive-common/components/GroupSidebar.vue';
 import AttributesSideBar from 'dive-common/components/Attributes/AttributesSideBar.vue';
 import MultiCamTools from 'dive-common/components/MultiCamTools.vue';
 import AttributeTrackFilters from 'vue-media-annotator/components/AttributeTrackFilters.vue';
+import TrackViewerSettings from 'vue-media-annotator/components/track_3d_viewer/TrackViewerSettings.vue';
 
 interface ContextState {
   last: string;
@@ -49,6 +50,10 @@ const componentMap: Record<string, ComponentMapItem> = {
     description: 'Attribute Track Filters',
     component: AttributeTrackFilters,
   },
+  [TrackViewerSettings.name]: {
+    description: 'Track Viewer Settings',
+    component: TrackViewerSettings,
+  },
 };
 
 function register(item: ComponentMapItem) {
diff --git a/client/dive-common/store/settings.ts b/client/dive-common/store/settings.ts
index 61f390872..4c4b4df29 100644
--- a/client/dive-common/store/settings.ts
+++ b/client/dive-common/store/settings.ts
@@ -19,6 +19,7 @@ interface AnnotationSettings {
         Track: {
           autoAdvanceFrame: boolean;
           interpolate: boolean;
+          stereoMatching: boolean;
         };
         Detection: {
           continuous: boolean;
@@ -56,6 +57,7 @@ const defaultSettings: AnnotationSettings = {
         Track: {
           autoAdvanceFrame: false,
           interpolate: false,
+          stereoMatching: false,
         },
         Detection: {
           continuous: false,
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index 49ed8f546..ea9b562ef 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -340,13 +340,20 @@ export default function useModeManager({
     throw Error(`Could not find trackStore for Camera: ${selectedCamera.value}`);
   }
 
-  function newTrackSettingsAfterLogic(addedTrack: Track) {
+  function newTrackSettingsAfterLogic(
+    addedTrack: Track,
+    options: {
+      skipAdvanceNextFrame: boolean;
+      keepCreating: boolean;
+    } = { skipAdvanceNextFrame: false, keepCreating: false },
+  ) {
     // Default settings which are updated by the TrackSettings component
     let newCreatingValue = false; // by default, disable creating at the end of this function
     if (creating) {
       if (addedTrack && trackSettings.value.newTrackSettings !== null) {
         if (trackSettings.value.newTrackSettings.mode === 'Track'
         && trackSettings.value.newTrackSettings.modeSettings.Track.autoAdvanceFrame
+        && !options.skipAdvanceNextFrame
         ) {
           aggregateController.value.nextFrame();
           newCreatingValue = true;
@@ -359,6 +366,11 @@ export default function useModeManager({
         }
       }
     }
+
+    if (options.keepCreating) {
+      newCreatingValue = true;
+    }
+
     _nudgeEditingCanary();
     creating = newCreatingValue;
   }
@@ -784,6 +796,7 @@ export default function useModeManager({
       unstageFromMerge: handleUnstageFromMerge,
       startLinking: handleStartLinking,
       stopLinking: handleStopLinking,
+      newTrackSettingsAfterLogic,
       seekFrame,
     },
   };
diff --git a/client/package.json b/client/package.json
index 611854291..a9f4ba67b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -38,6 +38,7 @@
     "@flatten-js/interval-tree": "^1.0.11",
     "@girder/components": "^3.2.0",
     "@mdi/font": "^6.2.95",
+    "@kitware/vtk.js": "^25.6.0",
     "@sentry/browser": "^5.24.2",
     "@sentry/integrations": "^5.24.2",
     "axios": "^0.21.1",
diff --git a/client/platform/desktop/backend/native/multiCamImport.ts b/client/platform/desktop/backend/native/multiCamImport.ts
index b15b7ad59..6b60113c5 100644
--- a/client/platform/desktop/backend/native/multiCamImport.ts
+++ b/client/platform/desktop/backend/native/multiCamImport.ts
@@ -63,6 +63,7 @@ async function beginMultiCamImport(args: MultiCamImportArgs): Promise<DesktopMed
         transcodedImageFiles: [],
         transcodedVideoFile: '',
       };
+
       if (args.type === 'video') {
         // Reset the base path to a folder for videos
         cameras[key].originalBasePath = npath.dirname(cameras[key].originalBasePath);
@@ -202,7 +203,9 @@ async function beginMultiCamImport(args: MultiCamImportArgs): Promise<DesktopMed
   }
 
   if (jsonMeta.multiCam?.cameras && jsonMeta.multiCam.cameras.left
-    && jsonMeta.multiCam.cameras.right && jsonMeta.multiCam.calibration) {
+    && jsonMeta.multiCam.cameras.right && (
+      jsonMeta.multiCam.calibration
+    )) {
     jsonMeta.subType = 'stereo';
   } else if (jsonMeta.multiCam) {
     jsonMeta.subType = 'multicam';
diff --git a/client/platform/desktop/backend/native/viame.ts b/client/platform/desktop/backend/native/viame.ts
index c51132958..3c7741d2e 100644
--- a/client/platform/desktop/backend/native/viame.ts
+++ b/client/platform/desktop/backend/native/viame.ts
@@ -157,11 +157,36 @@ async function runPipeline(
 
     if (meta.multiCam.calibration) {
       command.push(`-s measurer:calibration_file="${meta.multiCam.calibration}"`);
+      command.push(`-c "${meta.multiCam.calibration}"`);
     }
   } else if (pipeline.type === stereoPipelineMarker) {
     throw new Error('Attempting to run a multicam pipeline on non multicam data');
   }
 
+  if (meta.multiCam?.calibration) {
+    command.push(`-c "${meta.multiCam.calibration}"`);
+
+    if (meta.multiCam) {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const camKey of Object.keys(meta.multiCam.cameras)) {
+        const trackFilename = `tracks_${camKey}.csv`;
+        const trackFileStream = fs.createWriteStream(
+          npath.join(jobWorkDir, trackFilename),
+        );
+        // eslint-disable-next-line no-await-in-loop
+        const { trackFileAbsPath } = await common.getValidatedProjectDir(settings, `${datasetId}/${camKey}`);
+        // eslint-disable-next-line no-await-in-loop
+        const inputData = await common.loadAnnotationFile(trackFileAbsPath);
+        // eslint-disable-next-line no-await-in-loop
+        await serialize(trackFileStream, inputData, meta);
+        trackFileStream.end();
+        const fullFilePath = npath.join(jobWorkDir, trackFilename);
+
+        command.push(`-s cameras_calibration:tracks_${camKey}="${fullFilePath}"`);
+      }
+    }
+  }
+
   const job = observeChild(spawn(command.join(' '), {
     shell: viameConstants.shell,
     cwd: jobWorkDir,
diff --git a/client/platform/desktop/constants.ts b/client/platform/desktop/constants.ts
index b46a2a489..1387b7c0c 100644
--- a/client/platform/desktop/constants.ts
+++ b/client/platform/desktop/constants.ts
@@ -41,6 +41,7 @@ export interface Camera {
   transcodedVideoFile: string;
   transcodedMisalign?: boolean;
   imageListPath?: string;
+  calibrationFile?: string;
 }
 
 export interface MultiCamDesktop {
@@ -123,6 +124,8 @@ export interface JsonMeta extends DatasetMetaMutable {
   // Stereo or multi-camera datasets with uniform type (all images, all video)
   subType: SubType;
 
+  calibrationFile?: string; // kwiver *.conf file or *.npz
+
   // execTime is athe execution time for desktop runs
   execTime?: number
 }
diff --git a/client/platform/desktop/frontend/api.ts b/client/platform/desktop/frontend/api.ts
index b1c88ad08..f4c41ae87 100644
--- a/client/platform/desktop/frontend/api.ts
+++ b/client/platform/desktop/frontend/api.ts
@@ -15,6 +15,7 @@ import type {
 import {
   fileVideoTypes, calibrationFileTypes,
   inputAnnotationFileTypes, listFileTypes, inputAnnotationTypes,
+  stereoCalibrationConfigurationFileTypes,
 } from 'dive-common/constants';
 import {
   DesktopJob, DesktopMetadata, JsonMeta, NvidiaSmiReply,
@@ -26,7 +27,7 @@ import {
  * Native functions that run entirely in the renderer
  */
 
-async function openFromDisk(datasetType: DatasetType | 'bulk' | 'calibration' | 'annotation' | 'text', directory = false) {
+async function openFromDisk(datasetType: DatasetType | 'bulk' | 'calibration' | 'annotation' | 'text' | 'stereoConfiguration', directory = false) {
   let filters: FileFilter[] = [];
   const allFiles = { name: 'All Files', extensions: ['*'] };
   if (datasetType === 'video') {
@@ -53,6 +54,12 @@ async function openFromDisk(datasetType: DatasetType | 'bulk' | 'calibration' |
       allFiles,
     ];
   }
+  if (datasetType === 'stereoConfiguration') {
+    filters = [
+      { name: 'configuration', extensions: stereoCalibrationConfigurationFileTypes },
+      allFiles,
+    ];
+  }
   const props = (['image-sequence', 'bulk'].includes(datasetType) || directory) ? 'openDirectory' : 'openFile';
   const results = await dialog.showOpenDialog({
     properties: [props],
diff --git a/client/platform/desktop/frontend/components/ImportDialog.vue b/client/platform/desktop/frontend/components/ImportDialog.vue
index a7b6882ea..be990af05 100644
--- a/client/platform/desktop/frontend/components/ImportDialog.vue
+++ b/client/platform/desktop/frontend/components/ImportDialog.vue
@@ -10,6 +10,7 @@ import { DesktopMediaImportResponse } from 'platform/desktop/constants';
 import { locateDuplicates } from 'platform/desktop/frontend/store/dataset';
 import { useApi } from 'dive-common/apispec';
 import { clientSettings } from 'dive-common/store/settings';
+import { Attribute } from 'vue-media-annotator/use/AttributeTypes';
 
 export default defineComponent({
   name: 'ImportDialog',
@@ -41,6 +42,23 @@ export default defineComponent({
       argCopy.value.jsonMeta.fps = clientSettings.annotationFPS;
     }
 
+    // Set default attributes for a stereo calibration configuration
+    if (argCopy.value.jsonMeta.multiCam?.calibration) {
+      argCopy.value.jsonMeta.attributes = {};
+
+      // Create x, y, z attributes
+      ['stereo3d_x', 'stereo3d_y', 'stereo3d_z'].forEach((attributeKey) => {
+        // ugly but necessary to avoid typescript error
+        (argCopy.value.jsonMeta.attributes as Record<string, Attribute>)[attributeKey] = {
+          belongs: 'detection',
+          datatype: 'number',
+          key: `detection_${attributeKey}`,
+          name: attributeKey,
+          values: [],
+        };
+      });
+    }
+
     watch(toRef(props, 'importData'), (val) => {
       duplicates.value = locateDuplicates(val.jsonMeta);
       argCopy.value = cloneDeep(val);
diff --git a/client/platform/desktop/frontend/components/Recent.vue b/client/platform/desktop/frontend/components/Recent.vue
index 28b4c8355..6b624c832 100644
--- a/client/platform/desktop/frontend/components/Recent.vue
+++ b/client/platform/desktop/frontend/components/Recent.vue
@@ -46,6 +46,7 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const importMultiCamDialog = ref(false);
+    const calibration = ref(false);
     const pendingImportPayload: Ref<DesktopMediaImportResponse[] | null> = ref(null);
     const bulkImport = ref(false);
     const searchText: Ref<string | null> = ref('');
@@ -116,8 +117,9 @@ export default defineComponent({
       importing.value = false;
     }
 
-    function openMultiCamDialog(args: {stereo: boolean; openType: 'image-sequence' | 'video'}) {
+    function openMultiCamDialog(args: {stereo: boolean; openType: 'image-sequence' | 'video'; calibration: boolean}) {
       stereo.value = args.stereo;
+      calibration.value = args.calibration;
       multiCamOpenType.value = args.openType;
       importMultiCamDialog.value = true;
     }
@@ -244,6 +246,7 @@ export default defineComponent({
       checkingMedia,
       clientSettings,
       itemsPerPageOptions,
+      calibration,
     };
   },
 });
@@ -272,6 +275,7 @@ export default defineComponent({
         :stereo="stereo"
         :data-type="multiCamOpenType"
         :import-media="importMedia"
+        :calibration="calibration"
         @begin-multicam-import="multiCamImport($event)"
         @abort="importMultiCamDialog = false"
       />
diff --git a/client/platform/web-girder/store/Dataset.ts b/client/platform/web-girder/store/Dataset.ts
index 21637d08e..6f028b3cd 100644
--- a/client/platform/web-girder/store/Dataset.ts
+++ b/client/platform/web-girder/store/Dataset.ts
@@ -24,6 +24,7 @@ const datasetModule: Module<DatasetState, RootState> = {
       const dsMeta = {
         ...metaStatic.data,
         ...media.data,
+        multiCam: null,
         videoUrl: media.data.video?.url,
       };
       // TODO remove when multi is supported in web
diff --git a/client/platform/web-girder/utils.ts b/client/platform/web-girder/utils.ts
index 98bfead2c..53b495093 100644
--- a/client/platform/web-girder/utils.ts
+++ b/client/platform/web-girder/utils.ts
@@ -36,7 +36,7 @@ function getRouteFromLocation(location: LocationType): string {
   return `/${location._modelType}/${location._id}`;
 }
 
-async function openFromDisk(datasetType: DatasetType | 'calibration' | 'annotation' | 'zip'):
+async function openFromDisk(datasetType: DatasetType | 'calibration' | 'annotation' | 'zip' | 'stereoConfiguration'):
 Promise<{ canceled: boolean; filePaths: string[]; fileList?: File[]}> {
   const input: HTMLInputElement = document.createElement('input');
   input.type = 'file';
diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index 443892ee5..f47888d0f 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -62,7 +62,7 @@ export default defineComponent({
     },
 
   },
-  setup(props) {
+  setup(props, ctx) {
     const handler = useHandler();
     const cameraStore = useCameraStore();
     const selectedCamera = useSelectedCamera();
@@ -461,6 +461,7 @@ export default defineComponent({
       key = '',
       cb: () => void = () => (undefined),
     ) => {
+      const originalFrameNumber = frameNumberRef.value;
       if (type === 'rectangle') {
         const bounds = geojsonToBound(data as GeoJSON.Feature<GeoJSON.Polygon>);
         cb();
@@ -480,6 +481,20 @@ export default defineComponent({
           selectedKeyRef.value,
           props.colorBy,
         );
+        ctx.emit('geometry-added', {
+          data,
+          type,
+          frameNumber: originalFrameNumber,
+          update: {
+            updateLayers,
+            editingModeRef,
+            selectedTrackIdRef,
+            multiSeletListRef,
+            enabledTracksRef,
+            visibleModesRef,
+            selectedKeyRef,
+          },
+        });
       }
     });
     editAnnotationLayer.bus.$on(
diff --git a/client/src/components/TrackList.vue b/client/src/components/TrackList.vue
index 825c2dddc..70f7ac234 100644
--- a/client/src/components/TrackList.vue
+++ b/client/src/components/TrackList.vue
@@ -53,7 +53,7 @@ export default defineComponent({
     },
   },
 
-  setup(props) {
+  setup(props, ctx) {
     const { prompt } = usePrompt();
     const readOnlyMode = useReadOnlyMode();
     const trackFilters = useTrackFilters();
@@ -226,6 +226,12 @@ export default defineComponent({
     });
 
     const virtualHeight = computed(() => props.height - TrackListHeaderHeight);
+
+    function addTrackAndNotify() {
+      const trackId = trackAdd();
+      ctx.emit('track-added', trackId);
+    }
+
     return {
       allTypes: allTypesRef,
       data,
@@ -239,6 +245,7 @@ export default defineComponent({
       virtualListItems,
       virtualList: virtualScroll.virtualList,
       multiDelete,
+      addTrackAndNotify,
     };
   },
 });
@@ -313,7 +320,7 @@ export default defineComponent({
                 class="mr-2"
                 :color="newTrackColor"
                 v-on="on"
-                @click="trackAdd()"
+                @click="addTrackAndNotify()"
               >
                 <v-icon small>
                   mdi-plus
diff --git a/client/src/components/track_3d_viewer/TrackManager.ts b/client/src/components/track_3d_viewer/TrackManager.ts
new file mode 100644
index 000000000..b59070f74
--- /dev/null
+++ b/client/src/components/track_3d_viewer/TrackManager.ts
@@ -0,0 +1,111 @@
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
+import { RGBColor } from './lookupTable';
+
+export type FrameNumber = number;
+
+export type TrackTracker = {
+  trackActor: vtkActor;
+  hidden: boolean; // true if the track should remain hidden whatever happens
+  detectionsMap: Map<FrameNumber, vtkActor>;
+  trackColor: RGBColor;
+  trackType: string;
+};
+
+export type TracksMap = Map<AnnotationId, TrackTracker>;
+
+export type FramesMap = Map<FrameNumber, {
+  trackIds: AnnotationId[];
+  detectionActors: vtkActor[];
+}>;
+
+export default class TrackManager {
+  tracksMap: TracksMap;
+
+  framesMap: FramesMap;
+
+  constructor() {
+    this.tracksMap = new Map();
+    this.framesMap = new Map();
+  }
+
+  registerTrack(
+    trackId: AnnotationId,
+    trackActor: vtkActor,
+    frameDetections: Array<[FrameNumber, vtkActor]>,
+    trackColor: RGBColor,
+    trackType: string,
+  ) {
+    const detectionsMap = new Map<FrameNumber, vtkActor>();
+
+    frameDetections.forEach(([frameNumber, actor]) => {
+      actor.getProperty().setDiffuse(0.6);
+      actor.getProperty().setAmbient(0.6);
+      detectionsMap.set(frameNumber, actor);
+
+      const frameTracker = this.framesMap.get(frameNumber);
+
+      if (frameTracker) {
+        frameTracker.trackIds.push(trackId);
+        frameTracker.detectionActors.push(actor);
+      } else {
+        this.framesMap.set(frameNumber, {
+          trackIds: [trackId],
+          detectionActors: [actor],
+        });
+      }
+    });
+
+    this.tracksMap.set(trackId, {
+      trackActor,
+      detectionsMap,
+      hidden: false, // track should not be hidden by default
+      trackColor,
+      trackType,
+    });
+  }
+
+  getFrameTracker(frameNumber: FrameNumber) {
+    return this.framesMap.get(frameNumber);
+  }
+
+  getTrackFrameDetection(trackId: AnnotationId, frameNumber: FrameNumber) {
+    return this.tracksMap.get(trackId)?.detectionsMap.get(frameNumber);
+  }
+
+  forEachTrack(cb: (track: TrackTracker, trackId: AnnotationId) => void) {
+    this.tracksMap.forEach(cb);
+  }
+
+  getTrack(trackId: AnnotationId) {
+    return this.tracksMap.get(trackId);
+  }
+
+  getAllTracks() {
+    return this.tracksMap;
+  }
+
+  hasTrack(trackId: AnnotationId) {
+    return this.tracksMap.has(trackId);
+  }
+
+  getTrackActorsInFrameRange(frameStart: number, frameCount: number) {
+    const trackActors: Set<vtkActor> = new Set();
+
+    // eslint-disable-next-line no-plusplus
+    for (let frame = frameStart; frame < frameStart + frameCount; frame++) {
+      const frameTracker = this.framesMap.get(frame);
+
+      if (frameTracker && frameTracker.trackIds.length > 0) {
+        frameTracker.trackIds.forEach((trackId) => {
+          trackActors.add(
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this.tracksMap.get(trackId)!.trackActor,
+          );
+        });
+      }
+    }
+
+    return trackActors;
+  }
+}
diff --git a/client/src/components/track_3d_viewer/TrackViewer.vue b/client/src/components/track_3d_viewer/TrackViewer.vue
new file mode 100644
index 000000000..a0fd3343f
--- /dev/null
+++ b/client/src/components/track_3d_viewer/TrackViewer.vue
@@ -0,0 +1,282 @@
+<script lang="ts">
+import {
+  ref, onMounted, onBeforeUnmount, defineComponent, watch,
+} from 'vue';
+
+import '@kitware/vtk.js/Rendering/Profiles/Glyph';
+import '@kitware/vtk.js/Rendering/Profiles/Geometry';
+
+// @ts-expect-error no declaration file
+import vtkCubeAxesActor from '@kitware/vtk.js/Rendering/Core/CubeAxesActor';
+import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
+import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
+import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
+// @ts-expect-error no declaration file
+import vtkInteractorStyleTrackballCamera from '@kitware/vtk.js/Interaction/Style/InteractorStyleTrackballCamera';
+import { debounce } from '@kitware/vtk.js/macros';
+import {
+  useTrackViewerSettingsStore,
+  useSelectedTrackId,
+} from 'vue-media-annotator/provides';
+import { ViewUtils } from './trackUtils';
+import TrackManager from './TrackManager';
+import useTrackDrawer from './useTrackDrawer';
+import { smoothBounds } from './utils';
+import { noOp } from './misc';
+import { useOrientationMarkerWidget } from './useOrientationMarkerWidget';
+import { useLabelDrawer } from './useLabelDrawer';
+import { injectAggregateController } from '../annotators/useMediaController';
+
+export default defineComponent({
+  name: 'TrackViewer',
+
+  props: {
+    controlsHeight: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  setup() {
+    const orientationMarkerWidget = useOrientationMarkerWidget();
+    const trackViewerSettingsStore = useTrackViewerSettingsStore();
+
+    const {
+      onlyShowSelectedTrack,
+      cameraParallelProjection,
+      detectionGlyphSize,
+      cubeAxesBounds,
+      adjustCubeAxesBoundsManually,
+    } = trackViewerSettingsStore;
+
+    const renderer = ref<vtkRenderer>();
+    const viewportDimensions = ref({
+      height: 0,
+      width: 0,
+    });
+
+    // Initialize the data structure to keep track of every tracks present in the 3d view
+    const trackManager = new TrackManager();
+    const vtkContainer = ref<HTMLDivElement>();
+
+    let renderWindow: vtkRenderWindow | undefined;
+    let renderWindowInteractor: vtkRenderWindowInteractor | undefined;
+    const openglRenderWindow = ref<vtkOpenGLRenderWindow>();
+
+    const viewUtils: ViewUtils = {
+      rerender: noOp,
+    };
+
+    const mediaController = injectAggregateController();
+
+    const selectedTrackIdRef = useSelectedTrackId();
+    const { frame: frameRef } = mediaController.value;
+
+    let vtkContainerResizeObserver: ResizeObserver | null = null;
+
+    const { initialize: initializeTrackDrawer } = useTrackDrawer({
+      trackManager,
+      onlyShowSelectedTrack,
+      detectionGlyphSize,
+      viewUtils,
+      renderer,
+    });
+
+    const { initialize: initializeLabelDrawer, drawLabels, clearLabelContext } = useLabelDrawer({
+      renderer,
+      viewportDimensions,
+      openglRenderWindow,
+    });
+
+    const drawCurrentFrameDetectionLabels = function drawCurrentFrameDetectionLabels() {
+      clearLabelContext();
+
+      if (!onlyShowSelectedTrack.value) {
+        const frameTracker = trackManager.getFrameTracker(frameRef.value);
+        if (frameTracker) {
+          const positionToLabel = new Map();
+          frameTracker.detectionActors.forEach((actor, idx) => {
+            positionToLabel.set(actor.getPosition(), frameTracker.trackIds[idx]);
+          });
+          drawLabels(positionToLabel);
+        }
+      } else if (selectedTrackIdRef.value) {
+        const trackTracker = trackManager.getTrack(selectedTrackIdRef.value);
+        if (trackTracker) {
+          const frameDetectionActor = trackTracker.detectionsMap.get(frameRef.value);
+          if (frameDetectionActor) {
+            const positionToLabel = new Map();
+            positionToLabel.set(frameDetectionActor.getPosition(), selectedTrackIdRef.value);
+            drawLabels(positionToLabel);
+          }
+        }
+      }
+    };
+
+    onMounted(() => {
+      renderWindow = vtkRenderWindow.newInstance();
+
+      openglRenderWindow.value = vtkOpenGLRenderWindow.newInstance();
+      renderWindow.addView(openglRenderWindow.value);
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      openglRenderWindow.value.setContainer(vtkContainer.value!);
+
+      // Initialize the openglRenderWindow original size
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const { width, height } = vtkContainer.value!.getBoundingClientRect();
+      openglRenderWindow.value.setSize(width, height);
+      viewportDimensions.value.width = width;
+      viewportDimensions.value.height = height;
+      renderWindowInteractor = vtkRenderWindowInteractor.newInstance();
+      renderWindowInteractor.setView(openglRenderWindow.value);
+      renderWindowInteractor.initialize();
+      renderWindowInteractor.bindEvents(vtkContainer.value);
+      renderWindowInteractor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());
+
+      renderWindowInteractor.onAnimation(drawCurrentFrameDetectionLabels);
+
+      renderer.value = vtkRenderer.newInstance({
+        background: [0.5, 0.5, 0.5],
+      });
+      const { labelTextCanvas } = initializeLabelDrawer();
+      // Initialize the openglRenderWindow original size
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      vtkContainer.value!.appendChild(labelTextCanvas);
+      renderWindow.addRenderer(renderer.value);
+
+      const camera = renderer.value.getActiveCamera();
+
+      watch(cameraParallelProjection, (parProjection) => {
+        if (!renderer.value) {
+          throw new Error('vtkRenderer instance not found.');
+        }
+        renderer.value.getActiveCamera().setParallelProjection(parProjection);
+        // renderer.value.resetCamera();
+        viewUtils.rerender();
+      }, {
+        immediate: true,
+      });
+
+      // trying to turn off shadows
+      const light = renderer.value.getLights()[0];
+
+      if (light) {
+        light.setShadowAttenuation(0);
+      }
+
+      const cubeAxes = vtkCubeAxesActor.newInstance();
+      cubeAxes.setCamera(camera);
+
+      viewUtils.rerender = debounce((resetCamera = false) => {
+        if (!renderWindow || renderWindow.isDeleted() || !renderer.value) {
+          // pass
+        } else {
+          if (!adjustCubeAxesBoundsManually.value) {
+            renderer.value.removeActor(cubeAxes);
+            const bounds = renderer.value.computeVisiblePropBounds();
+            const smoothedBounds = smoothBounds(bounds);
+            cubeAxes.setDataBounds(smoothedBounds);
+            renderer.value.addActor(cubeAxes);
+          }
+          drawCurrentFrameDetectionLabels();
+          if (resetCamera) {
+            renderer.value.resetCamera();
+          }
+          renderWindow.render();
+        }
+      }, 10);
+
+      orientationMarkerWidget.enable(
+        renderWindow.getInteractor(),
+        renderer.value.getActiveCamera(),
+        viewUtils.rerender,
+      );
+
+      // Initial track drawing
+      initializeTrackDrawer();
+
+      const bounds = renderer.value.computeVisiblePropBounds();
+      // Always override the default bounds value on initialize
+      const smoothedBounds = smoothBounds(bounds);
+      cubeAxes.setDataBounds(smoothedBounds);
+
+      cubeAxesBounds.value = {
+        xrange: smoothedBounds.slice(0, 2) as [number, number],
+        yrange: smoothedBounds.slice(2, 4) as [number, number],
+        zrange: smoothedBounds.slice(4, 6) as [number, number],
+      };
+
+      watch(cubeAxesBounds, (newRanges) => {
+        cubeAxes.setDataBounds([
+          ...newRanges.xrange,
+          ...newRanges.yrange,
+          ...newRanges.zrange,
+        ]);
+        viewUtils.rerender();
+      }, {
+        deep: true,
+      });
+
+      renderer.value.addActor(cubeAxes);
+
+      vtkContainerResizeObserver = new ResizeObserver((entries: readonly ResizeObserverEntry[]) => {
+        const vtkContainerEntry = entries[0];
+        // eslint-disable-next-line no-shadow
+        const { width, height } = vtkContainerEntry.contentRect;
+        if (openglRenderWindow.value) openglRenderWindow.value.setSize(width, height);
+
+        viewportDimensions.value.width = width;
+        viewportDimensions.value.height = height;
+
+        labelTextCanvas.setAttribute('width', String(width));
+        labelTextCanvas.setAttribute('height', String(height));
+        viewUtils.rerender();
+      });
+      // Observe the renderWindow container so we automatically resize the openglRenderWindow
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      vtkContainerResizeObserver.observe(vtkContainer.value!);
+      renderer.value.resetCamera();
+      viewUtils.rerender();
+    });
+
+    onBeforeUnmount(() => {
+      viewUtils.rerender = noOp;
+      // Stop observing for resize
+      if (vtkContainerResizeObserver) vtkContainerResizeObserver.disconnect();
+      orientationMarkerWidget.disable();
+
+      if (renderer.value) renderer.value.delete();
+      if (openglRenderWindow.value) openglRenderWindow.value.delete();
+      if (renderWindow) renderWindow.delete();
+
+      if (renderWindowInteractor) {
+        renderWindowInteractor.unbindEvents();
+        renderWindowInteractor.delete();
+      }
+      openglRenderWindow.value = undefined;
+      renderWindow = undefined;
+      renderWindowInteractor = undefined;
+    });
+
+    return {
+      vtkContainer,
+    };
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="vtkContainer"
+    class="vtk-container"
+    :style="`--controls-height: ${controlsHeight}px`"
+  />
+</template>
+
+<style>
+.vtk-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/client/src/components/track_3d_viewer/TrackViewerSettings.vue b/client/src/components/track_3d_viewer/TrackViewerSettings.vue
new file mode 100644
index 000000000..cc72c1edc
--- /dev/null
+++ b/client/src/components/track_3d_viewer/TrackViewerSettings.vue
@@ -0,0 +1,132 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  useTrackViewerSettingsStore,
+} from 'vue-media-annotator/provides';
+
+export default defineComponent({
+  name: 'TrackViewerSettings',
+
+  setup() {
+    const trackViewerSettingsStore = useTrackViewerSettingsStore();
+    const {
+      onlyShowSelectedTrack,
+      cameraParallelProjection,
+      detectionGlyphSize,
+      adjustCubeAxesBoundsManually,
+      cubeAxesBounds,
+    } = trackViewerSettingsStore;
+    return {
+      onlyShowSelectedTrack,
+      cameraParallelProjection,
+      detectionGlyphSize,
+      adjustCubeAxesBoundsManually,
+      cubeAxesBounds,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card>
+    <v-card-text>
+      <v-list>
+        <v-list-item>
+          <v-list-item-action>
+            <v-switch
+              v-model="onlyShowSelectedTrack"
+              color="purple"
+            />
+          </v-list-item-action>
+          <v-list-item-title>Only show selected track</v-list-item-title>
+        </v-list-item>
+
+        <v-list-item>
+          <v-list-item-action>
+            <v-switch
+              v-model="cameraParallelProjection"
+              color="purple"
+            />
+          </v-list-item-action>
+          <v-list-item-title>Camera parallel Projection</v-list-item-title>
+        </v-list-item>
+      </v-list>
+
+      <v-text-field
+        v-model="detectionGlyphSize"
+        type="number"
+        step="0.001"
+        label="Detection Glyph Size"
+      />
+
+      <v-checkbox
+        v-model="adjustCubeAxesBoundsManually"
+        label="Adjust Axes Range manually"
+      />
+
+      <div v-if="adjustCubeAxesBoundsManually">
+        <div class="d-flex flex-grow-1">
+          <v-text-field
+            :value="cubeAxesBounds.xrange[0]"
+            label="minX"
+            type="number"
+            step="0.01"
+            variant="outlined"
+            density="compact"
+            class="mr-2"
+            @input="$set(cubeAxesBounds.xrange, 0, Number($event))"
+          />
+
+          <v-text-field
+            :value="cubeAxesBounds.xrange[1]"
+            label="maxX"
+            type="number"
+            variant="outlined"
+            step="0.01"
+            @input="$set(cubeAxesBounds.xrange, 1, Number($event))"
+          />
+        </div>
+
+        <div class="d-flex">
+          <v-text-field
+            :value="cubeAxesBounds.yrange[0]"
+            label="minY"
+            type="number"
+            step="0.01"
+            class="mr-2"
+            variant="outlined"
+            @input="$set(cubeAxesBounds.yrange, 0, Number($event))"
+          />
+          <v-text-field
+            :value="cubeAxesBounds.yrange[1]"
+            label="maxY"
+            type="number"
+            variant="outlined"
+            step="0.01"
+            @input="$set(cubeAxesBounds.yrange, 1, Number($event))"
+          />
+        </div>
+
+        <div class="d-flex">
+          <v-text-field
+            :value="cubeAxesBounds.zrange[0]"
+            label="minZ"
+            type="number"
+            step="0.01"
+            variant="outlined"
+            class="mr-2"
+            @input="$set(cubeAxesBounds.zrange, 0, Number($event))"
+          />
+          <v-text-field
+            :value="cubeAxesBounds.zrange[1]"
+            label="maxZ"
+            type="number"
+            variant="outlined"
+            step="0.01"
+            @input="$set(cubeAxesBounds.zrange, 1, Number($event))"
+          />
+        </div>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
diff --git a/client/src/components/track_3d_viewer/TrackViewerSettingsStore.ts b/client/src/components/track_3d_viewer/TrackViewerSettingsStore.ts
new file mode 100644
index 000000000..4c5247cde
--- /dev/null
+++ b/client/src/components/track_3d_viewer/TrackViewerSettingsStore.ts
@@ -0,0 +1,30 @@
+import { ref, Ref } from 'vue';
+
+export default class TrackViewerSettingsStore {
+  cameraParallelProjection: Ref<boolean>;
+
+  onlyShowSelectedTrack: Ref<boolean>;
+
+  detectionGlyphSize: Ref<number>;
+
+  cubeAxesBounds: Ref<{
+    xrange: [number, number];
+    yrange: [number, number];
+    zrange: [number, number];
+  }>;
+
+  adjustCubeAxesBoundsManually: Ref<boolean>;
+
+  constructor() {
+    this.cameraParallelProjection = ref(true);
+    this.onlyShowSelectedTrack = ref(false);
+    this.detectionGlyphSize = ref(0.003);
+
+    this.cubeAxesBounds = ref({
+      xrange: [-1, 1],
+      yrange: [-1, 1],
+      zrange: [-1, 1],
+    });
+    this.adjustCubeAxesBoundsManually = ref(false);
+  }
+}
diff --git a/client/src/components/track_3d_viewer/lookupTable.ts b/client/src/components/track_3d_viewer/lookupTable.ts
new file mode 100644
index 000000000..ca8fcc739
--- /dev/null
+++ b/client/src/components/track_3d_viewer/lookupTable.ts
@@ -0,0 +1,46 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable no-console */
+/* eslint-disable no-plusplus */
+
+import vtkLookupTable from '@kitware/vtk.js/Common/Core/LookupTable';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import { float2rgb } from './utils';
+
+export type RGBColor = [number, number, number];
+
+export function buildLookupTable(color: RGBColor, currentFrame: number, frameCount = 10) {
+  // if outside of range, opacity = 0
+  const lookupTable = vtkLookupTable.newInstance();
+
+  lookupTable.setUseBelowRangeColor(true);
+  lookupTable.setBelowRangeColor([...color, 0]);
+  lookupTable.setUseAboveRangeColor(true);
+  lookupTable.setAboveRangeColor([...color, 0]);
+
+  const size = Math.min(currentFrame + 1, frameCount);
+
+  const range = {
+    min: currentFrame - size + 1,
+    max: currentFrame,
+  };
+
+  const dataArray = vtkDataArray.newInstance({
+    numberOfComponents: 4,
+    size: 4 * size,
+    dataType: 'Uint8Array',
+  });
+
+  // if range.min === range.max there is some weird things happening
+  // in the mapper during texture map generation. adding 0.01 is a hack to prevent this.
+  lookupTable.setRange(range.min, range.max + 0.01);
+
+  let alpha = 255;
+  for (let i = size - 1; i >= 0; i--) {
+    const tuple = [...float2rgb(color), alpha];
+    dataArray.setTuple(i, tuple);
+    alpha -= 20;
+  }
+  lookupTable.setTable(dataArray);
+
+  return lookupTable;
+}
diff --git a/client/src/components/track_3d_viewer/misc.ts b/client/src/components/track_3d_viewer/misc.ts
new file mode 100644
index 000000000..262e75f20
--- /dev/null
+++ b/client/src/components/track_3d_viewer/misc.ts
@@ -0,0 +1,33 @@
+import { Attribute } from 'vue-media-annotator/use/AttributeTypes';
+
+const EXPECTED_ATTRIBUTE_NAMES = [
+  'stereo3d_x',
+  'stereo3d_y',
+  'stereo3d_z',
+];
+
+export const noOp = () => undefined;
+
+export function isStereo3dReady(attrs: Attribute[]) {
+  const attributeNamesToFind = [...EXPECTED_ATTRIBUTE_NAMES];
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const attr of attrs) {
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < attributeNamesToFind.length; i++) {
+      if (attr.name === attributeNamesToFind[i]) {
+        if (attr.belongs === 'detection' && attr.datatype === 'number') {
+          attributeNamesToFind.splice(i, 1);
+        } else {
+          return false;
+        }
+      }
+    }
+
+    if (attributeNamesToFind.length === 0) {
+      return true;
+    }
+  }
+
+  return false;
+}
diff --git a/client/src/components/track_3d_viewer/trackUtils.ts b/client/src/components/track_3d_viewer/trackUtils.ts
new file mode 100644
index 000000000..1de0542ce
--- /dev/null
+++ b/client/src/components/track_3d_viewer/trackUtils.ts
@@ -0,0 +1,34 @@
+import { TrackWithContext } from 'vue-media-annotator/BaseFilterControls';
+import StyleManager from 'vue-media-annotator/StyleManager';
+import * as vtkMath from '@kitware/vtk.js/Common/Core/Math';
+
+export interface ViewUtils {
+  rerender: (resetCamera?: boolean) => void;
+}
+
+export interface Feature {
+  x: number;
+  y: number;
+  z: number;
+  frameNumber: number;
+}
+
+export type TrackType = string;
+
+export function getTrackType(trackWithContext: TrackWithContext) {
+  const track = trackWithContext.annotation;
+  return track.getType(
+    trackWithContext.context.confidencePairIndex,
+  );
+}
+
+export function getTrackTypeColor(trackType: TrackType, styleManager: StyleManager) {
+  return vtkMath.hex2float(
+    styleManager.typeStyling.value.color(trackType),
+  ) as [number, number, number];
+}
+
+export function getTrackColor(trackWithContext: TrackWithContext, styleManager: StyleManager) {
+  const trackType = getTrackType(trackWithContext);
+  return getTrackTypeColor(trackType, styleManager);
+}
diff --git a/client/src/components/track_3d_viewer/useLabelDrawer.ts b/client/src/components/track_3d_viewer/useLabelDrawer.ts
new file mode 100644
index 000000000..ee33a4cf1
--- /dev/null
+++ b/client/src/components/track_3d_viewer/useLabelDrawer.ts
@@ -0,0 +1,78 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
+import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
+import { Ref } from 'vue';
+
+interface LabelDrawerParams {
+  renderer: Ref<vtkRenderer | undefined>;
+  viewportDimensions: Ref<{
+    width: number;
+    height: number;
+  }>;
+  openglRenderWindow: Ref<vtkOpenGLRenderWindow | undefined>;
+}
+
+export function useLabelDrawer({
+  renderer,
+  viewportDimensions,
+  openglRenderWindow,
+}: LabelDrawerParams) {
+  let labelTextCanvas: HTMLCanvasElement | null = null;
+  let labelTextContext: CanvasRenderingContext2D | null = null;
+
+  const initialize = function initialize() {
+    labelTextCanvas = document.createElement('canvas');
+    labelTextCanvas.style.position = 'absolute';
+    labelTextCanvas.style.top = '0';
+    labelTextCanvas.style.right = '0';
+    labelTextCanvas.style.bottom = '0';
+    labelTextCanvas.style.left = '0';
+    labelTextContext = labelTextCanvas.getContext('2d');
+
+    return {
+      labelTextCanvas,
+    };
+  };
+  const clearLabelContext = function clearLabelContext() {
+    if (!labelTextContext) {
+      throw new Error('Please initialize the drawer first.');
+    }
+
+    labelTextContext.clearRect(
+      0,
+      0,
+      viewportDimensions.value.width,
+      viewportDimensions.value.height,
+    );
+  };
+  const drawLabels = function drawLabels(positionToLabel: Map<[number, number, number], string>) {
+    if (!labelTextContext) {
+      throw new Error('Please initialize the drawer first.');
+    }
+
+    clearLabelContext();
+
+    positionToLabel.forEach((label, position) => {
+      const displayCoordinates = openglRenderWindow.value!.worldToDisplay(
+        ...position,
+        renderer.value!,
+      );
+      labelTextContext!.font = 'bold 14px serif';
+      labelTextContext!.textAlign = 'center';
+      labelTextContext!.textBaseline = 'middle';
+
+      labelTextContext!.fillText(
+        label,
+        displayCoordinates[0],
+        viewportDimensions.value.height - displayCoordinates[1],
+      );
+    });
+  };
+
+  return {
+    initialize,
+    drawLabels,
+    clearLabelContext,
+  };
+}
diff --git a/client/src/components/track_3d_viewer/useOrientationMarkerWidget.ts b/client/src/components/track_3d_viewer/useOrientationMarkerWidget.ts
new file mode 100644
index 000000000..3295d08fe
--- /dev/null
+++ b/client/src/components/track_3d_viewer/useOrientationMarkerWidget.ts
@@ -0,0 +1,105 @@
+/* eslint-disable import/prefer-default-export */
+import vtkAxesActor from '@kitware/vtk.js/Rendering/Core/AxesActor';
+import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
+import vtkInteractiveOrientationWidget from '@kitware/vtk.js/Widgets/Widgets3D/InteractiveOrientationWidget';
+import vtkOrientationMarkerWidget from '@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget';
+import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import * as vtkMath from '@kitware/vtk.js/Common/Core/Math';
+import type { Vector3 } from '@kitware/vtk.js/types';
+import { ref } from 'vue';
+
+const getMajorAxisFromViewUp = function getMajorAxisFromViewUp(
+  viewUp: Vector3,
+  idxA: number,
+  idxB: number,
+): Vector3 {
+  const axis: Vector3 = [0, 0, 0];
+  const idx = Math.abs(viewUp[idxA]) > Math.abs(viewUp[idxB]) ? idxA : idxB;
+  const value = viewUp[idx] > 0 ? 1 : -1;
+  axis[idx] = value;
+  return axis;
+};
+
+export function useOrientationMarkerWidget() {
+  const previousVisibility = ref(false);
+
+  const widgetManager = vtkWidgetManager.newInstance();
+  const axes = vtkAxesActor.newInstance();
+  const orientationMarkerWidget = vtkOrientationMarkerWidget.newInstance({
+    actor: axes,
+  });
+
+  const interactiveOrientationWidget = vtkInteractiveOrientationWidget.newInstance();
+
+  const enable = function enable(
+    interactor: vtkRenderWindowInteractor,
+    camera: vtkCamera,
+    onOrientationChanged: () => void,
+  ) {
+    orientationMarkerWidget.setInteractor(interactor);
+    orientationMarkerWidget.setEnabled(true);
+    orientationMarkerWidget.setViewportCorner(vtkOrientationMarkerWidget.Corners.BOTTOM_LEFT);
+    orientationMarkerWidget.setViewportSize(0.15);
+    orientationMarkerWidget.setMinPixelSize(100);
+    orientationMarkerWidget.setMaxPixelSize(300);
+
+    const widgetRenderer = orientationMarkerWidget.getRenderer();
+    widgetManager.setRenderer(widgetRenderer);
+
+    interactiveOrientationWidget.placeWidget(axes.getBounds());
+    interactiveOrientationWidget.setBounds(axes.getBounds());
+    interactiveOrientationWidget.setPlaceFactor(1);
+
+    const viewWidget = widgetManager.addWidget(interactiveOrientationWidget);
+
+    if (!viewWidget) {
+      throw new Error('Failed to add widget to view.');
+    }
+
+    // @ts-expect-error it exists
+    viewWidget.onOrientationChange(({ direction }) => {
+      const focalPoint = camera.getFocalPoint();
+      const position = camera.getPosition();
+      const viewUp = camera.getViewUp();
+
+      const distance = Math.sqrt(vtkMath.distance2BetweenPoints(position, focalPoint));
+
+      // Put the camera orthogonally compared with the clicked cube's face
+      camera.setPosition(
+        focalPoint[0] + direction[0] * distance,
+        focalPoint[1] + direction[1] * distance,
+        focalPoint[2] + direction[2] * distance,
+      );
+
+      // Set the viewup on the camera so the cube appears aligned with the ground
+      if (direction[0]) {
+        camera.setViewUp(getMajorAxisFromViewUp(viewUp, 1, 2));
+      }
+      if (direction[1]) {
+        camera.setViewUp(getMajorAxisFromViewUp(viewUp, 0, 2));
+      }
+      if (direction[2]) {
+        camera.setViewUp(getMajorAxisFromViewUp(viewUp, 0, 1));
+      }
+
+      orientationMarkerWidget.updateMarkerOrientation();
+      widgetManager.enablePicking();
+      onOrientationChanged();
+    });
+
+    previousVisibility.value = true;
+  };
+
+  const disable = function disable() {
+    orientationMarkerWidget.delete();
+    widgetManager.removeWidget(interactiveOrientationWidget);
+    widgetManager.delete();
+    axes.delete();
+  };
+
+  return {
+    enable,
+    disable,
+  };
+}
diff --git a/client/src/components/track_3d_viewer/useTrackDrawer.ts b/client/src/components/track_3d_viewer/useTrackDrawer.ts
new file mode 100644
index 000000000..875aa6823
--- /dev/null
+++ b/client/src/components/track_3d_viewer/useTrackDrawer.ts
@@ -0,0 +1,446 @@
+/* eslint-disable consistent-return */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { Ref, watch } from 'vue';
+import {
+  useTrackFilters,
+  useSelectedTrackId,
+  useTrackStyleManager,
+  useCameraStore,
+} from 'vue-media-annotator/provides';
+import * as vtkMath from '@kitware/vtk.js/Common/Core/Math';
+import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
+import { AnnotationWithContext, TrackWithContext } from 'vue-media-annotator/BaseFilterControls';
+import Track from 'vue-media-annotator/track';
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
+import vtkPoints from '@kitware/vtk.js/Common/Core/Points';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+import vtkSphereSource from '@kitware/vtk.js/Filters/Sources/SphereSource';
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
+import vtkCellArray from '@kitware/vtk.js/Common/Core/CellArray';
+import vtkLookupTable from '@kitware/vtk.js/Common/Core/LookupTable';
+import TrackManager, { TrackTracker } from './TrackManager';
+import { injectAggregateController } from '../annotators/useMediaController';
+import {
+  getTrackColor, getTrackType, getTrackTypeColor, ViewUtils, Feature,
+} from './trackUtils';
+import { buildLookupTable } from './lookupTable';
+
+export interface TrackDrawerParams {
+  trackManager: TrackManager;
+  onlyShowSelectedTrack: Ref<boolean>;
+  detectionGlyphSize: Ref<number>;
+  viewUtils: ViewUtils;
+  renderer: Ref<vtkRenderer | undefined>;
+}
+
+export default function useTrackDrawer({
+  trackManager,
+  onlyShowSelectedTrack,
+  detectionGlyphSize,
+  viewUtils,
+  renderer,
+}: TrackDrawerParams) {
+  const selectedTrackIdRef = useSelectedTrackId();
+  const mediaController = injectAggregateController();
+  const trackStyleManager = useTrackStyleManager();
+  const filteredTracksRef = useTrackFilters();
+  const cameraStore = useCameraStore();
+  const { frame: frameRef } = mediaController.value;
+  const trackTypes: string[] = [];
+
+  // We uses a sphere to represents a detection in space
+  const detectionGlyphSource = vtkSphereSource.newInstance();
+
+  watch(detectionGlyphSize, (newSize) => {
+    detectionGlyphSource.setRadius(newSize);
+    viewUtils.rerender();
+  }, {
+    immediate: true,
+  });
+
+  detectionGlyphSource.setThetaResolution(20);
+
+  const drawFeature = function drawFeature(
+    points: vtkPoints,
+    lines: vtkCellArray,
+    trackColor: [number, number, number],
+    { x, y, z }: { x: number; y: number; z: number},
+    idx: number,
+    frameDataArray: vtkDataArray,
+    frameNumber: number,
+  ) {
+    points.setPoint(
+      idx,
+      x,
+      y,
+      z,
+    );
+
+    frameDataArray.setTuple(idx, [frameNumber]);
+
+    if (idx > 0) {
+      // eslint-disable-next-line no-param-reassign
+      lines.getData()[idx] = idx - 1;
+      // eslint-disable-next-line no-param-reassign
+      lines.getData()[idx + 1] = idx;
+    }
+
+    const pointMapper = vtkMapper.newInstance();
+    pointMapper.setInputConnection(detectionGlyphSource.getOutputPort());
+
+    const pointActor = vtkActor.newInstance();
+
+    pointActor.setPosition(Number(x), Number(y), Number(z));
+    pointActor.setMapper(pointMapper);
+    pointActor.getProperty().setColor(...trackColor);
+    pointActor.setVisibility(false);
+
+    if (renderer.value) {
+      renderer.value.addActor(pointActor);
+    }
+
+    return pointActor;
+  };
+
+  /**
+   * A 3D track is vtkPolyData made of one single line.
+   * Each point in this line represents a single detection.
+   * The points are ordered by frame number.
+   * We also store a point data field array to store the exact frame number of each point.
+   */
+  const drawTrack = function drawTrack(
+    mapper: vtkMapper,
+    trackColor: [number, number, number],
+    features: Array<{x: number; y: number; z: number; frameNumber: number}>,
+  ) {
+    const numberOfFeatures = features.length;
+    // One point stands for one detection
+    const points = vtkPoints.newInstance();
+    const trackPolyData = vtkPolyData.newInstance();
+
+    const frameDataArray = vtkDataArray.newInstance({
+      numberOfComponents: 1,
+      size: numberOfFeatures,
+      dataType: 'Uint32Array',
+      name: 'frames',
+    });
+
+    const trackActor = vtkActor.newInstance();
+    const trackActorProperty = trackActor.getProperty();
+    points.setNumberOfPoints(numberOfFeatures);
+
+    const lines = vtkCellArray.newInstance({ size: numberOfFeatures + 1 });
+    lines.getData()[0] = numberOfFeatures;
+
+    const frameDetections: [number, vtkActor][] = features
+      .map((feature, idx) => {
+        const featureActor = drawFeature(
+          points,
+          lines,
+          trackColor,
+          feature,
+          idx,
+          frameDataArray,
+          feature.frameNumber,
+        );
+        return [feature.frameNumber, featureActor];
+      });
+
+    trackPolyData.setPoints(points);
+
+    // store the frame number of each point
+    trackPolyData.getPointData().setScalars(frameDataArray);
+
+    mapper.setInputData(trackPolyData);
+    trackPolyData.setLines(lines);
+
+    // trackActorProperty.setColor(...trackColor);
+    trackActorProperty.setLineWidth(3);
+    trackActor.setMapper(mapper);
+
+    if (renderer.value) {
+      renderer.value.addActor(trackActor);
+    }
+
+    return {
+      trackActor,
+      frameDetections,
+    };
+  };
+
+  /**
+   * Emphasize on a specific track: make sure it is visible, increase its line width and
+   * set its color to selected
+   */
+  const emphasizeTrack = function emphasizeTrack(trackId: AnnotationId) {
+    const trackActor = trackManager.getTrack(trackId)?.trackActor;
+
+    if (!trackActor) {
+      return;
+    }
+
+    trackActor.setVisibility(true);
+    trackActor.getProperty().setLineWidth(5);
+
+    const selectedColor = vtkMath.hex2float(
+      trackStyleManager.stateStyles.selected.color,
+    ) as [number, number, number];
+
+    trackActor.getProperty().setColor(...selectedColor);
+  };
+
+  const deEmphasizeTrack = function deEmphasizeTrack(trackId: AnnotationId, trackActor: vtkActor) {
+    // Restore line width
+    trackActor.getProperty().setLineWidth(3);
+
+    const trackWithContext = filteredTracksRef
+      .filteredAnnotations
+      .value
+      .find((track) => track.annotation.id === trackId);
+
+    // If we do not find the track anymore in the list,
+    // this is because the track has been filtered out in the meantime
+    // In this case we cannot get the color, so we do nothing as the track will be hidden anyway
+    if (trackWithContext) {
+      const trackColor = getTrackColor(trackWithContext, trackStyleManager);
+      trackActor.getProperty().setColor(...trackColor);
+    }
+  };
+
+  const hideTrack = function hideTrack(trackMap: TrackTracker) {
+    trackMap.trackActor.setVisibility(false);
+    trackMap.detectionsMap.forEach((actor) => actor.setVisibility(false));
+  };
+
+  /**
+   * Hide all tracks except the one matching the track id passed in the except param.
+   */
+  const hideAllTracks = function hideAllTracks(except?: AnnotationId | null) {
+    trackManager.forEachTrack(({ trackActor, detectionsMap }, trackId) => {
+      if (trackId !== except) {
+        trackActor.setVisibility(false);
+        detectionsMap.forEach((sphereActor) => {
+          sphereActor.setVisibility(false);
+        });
+      }
+    });
+  };
+
+  /**
+   * Show all tracks, except the ones that are explicitly flagged as hidden
+   */
+  const showAllTracks = function showAllTracks() {
+    trackManager.forEachTrack(({ trackActor, detectionsMap, hidden }) => {
+      if (hidden) {
+        return;
+      }
+
+      trackActor.setVisibility(true);
+      detectionsMap.forEach((sphereActor, frameNumber) => {
+        if (frameNumber === frameRef.value) {
+          sphereActor.setVisibility(true);
+        }
+      });
+    });
+  };
+
+  const initializeTrack = function initializeTrack(trackWithContext: TrackWithContext) {
+    const annotation = cameraStore.getTracksMerged(trackWithContext.annotation.id);
+
+    // pre-process features in order to represent them
+    const features: Feature[] = annotation.features
+      .filter((feature) => feature !== undefined)
+      .map((feature) => {
+        const { attributes } = feature;
+
+        if (!attributes) {
+          return;
+        }
+
+        const { stereo3d_x: x, stereo3d_y: y, stereo3d_z: z } = attributes;
+
+        if (x === undefined || y === undefined || z === undefined) {
+          return;
+        }
+
+        return {
+          x: Number(x),
+          y: Number(y),
+          z: Number(z),
+          frameNumber: feature.frame,
+        };
+      })
+      .filter((feature) => feature !== undefined) as Feature[];
+
+    if (features.length > 0) {
+      const trackColor = getTrackColor(trackWithContext, trackStyleManager);
+      const mapper = vtkMapper.newInstance({
+        useLookupTableScalarRange: true,
+      });
+      mapper.setColorByArrayName('frames');
+      mapper.setScalarVisibility(true);
+      mapper.setColorModeToMapScalars();
+      mapper.setInterpolateScalarsBeforeMapping(true);
+
+      const { trackActor, frameDetections } = drawTrack(mapper, trackColor, features);
+
+      const trackType = getTrackType(trackWithContext);
+      trackTypes.push(trackType);
+      trackManager.registerTrack(annotation.id, trackActor, frameDetections, trackColor, trackType);
+    }
+  };
+
+  /**
+   * Build one lookup table per track type.
+   * Then, assign the correct lookup table to the track actor mapper.
+   */
+  const updateLookupTables = function updateLookupTables(currentFrame: number) {
+    const trackTypeToLut: Map<string, vtkLookupTable> = new Map();
+    trackTypes.forEach((trackType) => {
+      if (!trackTypeToLut.get(trackType)) {
+        const trackTypeColor = getTrackTypeColor(trackType, trackStyleManager);
+        trackTypeToLut.set(trackType, buildLookupTable(trackTypeColor, currentFrame));
+      }
+    });
+
+    trackManager.forEachTrack((trackTracker) => {
+      const { trackType } = trackTracker;
+      const lut = trackTypeToLut.get(trackType);
+      const mapper = trackTracker.trackActor.getMapper();
+      if (mapper) { mapper.setLookupTable(lut); }
+    });
+  };
+
+  /**
+   * Show the detections representation for the current frame and hide others.
+   * If onlyShowSelectedTrack is true, only detections from this track will be shown.
+   */
+  const onFrameChange = function onFrameChange(
+    newFrameNumber: number,
+    oldFrameNumber?: number,
+  ) {
+    updateLookupTables(newFrameNumber);
+
+    if (onlyShowSelectedTrack.value && selectedTrackIdRef.value !== null) {
+      // Draw only detection from this frame and the selected track
+      const actor = trackManager.getTrackFrameDetection(selectedTrackIdRef.value, newFrameNumber);
+
+      if (actor) {
+        actor.setVisibility(true);
+      }
+    } else {
+      // Draw all frame actors if there are some.
+      const frameTracker = trackManager.getFrameTracker(newFrameNumber);
+
+      if (frameTracker) {
+        frameTracker.detectionActors.forEach((detectionActor) => {
+          detectionActor.setVisibility(true);
+        });
+      }
+    }
+
+    if (oldFrameNumber !== undefined) {
+      const frameTracker = trackManager.getFrameTracker(oldFrameNumber);
+
+      if (frameTracker) {
+        frameTracker.detectionActors.forEach((sphereActor) => sphereActor.setVisibility(false));
+      }
+    }
+    viewUtils.rerender();
+  };
+
+  /**
+   * Emphasize on the new selected track and de-emphasize the previous one.
+   */
+  const onSelectedTrackChange = function onSelectedTrackChange(
+    newTrackId: number|null,
+    oldTrackId: number|null,
+  ) {
+    if (newTrackId) {
+      emphasizeTrack(newTrackId);
+    }
+
+    if (oldTrackId) {
+      const trackTracker = trackManager.getTrack(oldTrackId);
+
+      if (!trackTracker) {
+        return;
+      }
+
+      deEmphasizeTrack(oldTrackId, trackTracker.trackActor);
+
+      if (onlyShowSelectedTrack.value) {
+        hideTrack(trackTracker);
+      }
+    }
+
+    viewUtils.rerender();
+  };
+
+  const onOnlyShowSelectedTrackChange = function onOnlyShowSelectedTrackChange(
+    newOnlyShowSelectedTrack: boolean,
+  ) {
+    if (newOnlyShowSelectedTrack) {
+      // Hide all tracks except the one that is selected (if there is one)
+      hideAllTracks(selectedTrackIdRef.value);
+    } else {
+      showAllTracks();
+    }
+
+    viewUtils.rerender(true);
+  };
+
+  const onFilteredAnnotationsChange = function onFilteredAnnotationsChange(
+    annotations: AnnotationWithContext<Track>[],
+  ) {
+    const trackIds: AnnotationId[] = [];
+
+    annotations.forEach((trackWithContext) => {
+      const trackId = trackWithContext.annotation.id;
+      trackIds.push(trackId);
+
+      const trackTracker = trackManager.getTrack(trackId);
+
+      // New track, so initialize it
+      if (!trackTracker) {
+        initializeTrack(trackWithContext);
+      } else {
+        // The track exists, so just show it
+        trackTracker.hidden = false;
+        trackTracker.trackActor.setVisibility(true);
+      }
+    });
+
+    // All tracks that we have should be hidden
+    trackManager.forEachTrack((track, trackId) => {
+      if (!trackIds.includes(trackId)) {
+        // eslint-disable-next-line no-param-reassign
+        track.hidden = true;
+        track.trackActor.setVisibility(false);
+      }
+    });
+
+    viewUtils.rerender();
+  };
+
+  const initializeTracks = function drawTracks() {
+    filteredTracksRef.filteredAnnotations.value.forEach(initializeTrack);
+
+    onFrameChange(frameRef.value, undefined);
+    onSelectedTrackChange(selectedTrackIdRef.value, null);
+  };
+
+  watch(selectedTrackIdRef, onSelectedTrackChange);
+  watch(frameRef, onFrameChange);
+  watch(onlyShowSelectedTrack, onOnlyShowSelectedTrackChange);
+  watch(filteredTracksRef.filteredAnnotations, onFilteredAnnotationsChange);
+
+  return {
+    onSelectedTrackChange,
+    onFrameChange,
+    initializeTracks,
+    initialize: initializeTracks,
+  };
+}
diff --git a/client/src/components/track_3d_viewer/utils.ts b/client/src/components/track_3d_viewer/utils.ts
new file mode 100644
index 000000000..008623a59
--- /dev/null
+++ b/client/src/components/track_3d_viewer/utils.ts
@@ -0,0 +1,20 @@
+/* eslint-disable import/prefer-default-export */
+
+import { Bounds, RGBColor } from '@kitware/vtk.js/types';
+
+export function float2rgb(color: RGBColor): RGBColor {
+  return [color[0] * 255, color[1] * 255, color[2] * 255];
+}
+
+export function smoothBounds(bounds: Bounds): Bounds {
+  const [xmin, xmax, ymin, ymax, zmin, zmax] = bounds;
+
+  const min = Math.min(xmin, ymin, zmin);
+  const max = Math.max(xmax, ymax, zmax);
+
+  return [
+    min, max,
+    min, max,
+    min, max,
+  ];
+}
diff --git a/client/src/provides.ts b/client/src/provides.ts
index 91368a878..5680a1040 100644
--- a/client/src/provides.ts
+++ b/client/src/provides.ts
@@ -19,6 +19,7 @@ import type { ImageEnhancements } from './use/useImageEnhancements';
 import TrackFilterControls from './TrackFilterControls';
 import GroupFilterControls from './GroupFilterControls';
 import CameraStore from './CameraStore';
+import TrackViewerSettingsStore from './components/track_3d_viewer/TrackViewerSettingsStore';
 
 /**
  * Type definitions are read only because injectors may mutate internal state,
@@ -96,6 +97,7 @@ type ImageEnhancementsType = Readonly<Ref<ImageEnhancements>>;
 
 /** Class-based symbols */
 const CameraStoreSymbol = Symbol('cameraStore');
+const TrackViewerSettingsStoreSymbol = Symbol('trackViewerSettingsStore');
 
 const TrackStyleManagerSymbol = Symbol('trackTypeStyling');
 const GroupStyleManagerSymbol = Symbol('groupTypeStyling');
@@ -232,6 +234,7 @@ export interface State {
   annotatorPreferences: AnnotatorPreferences;
   attributes: AttributesType;
   cameraStore: CameraStore;
+  trackViewerSettingsStore: TrackViewerSettingsStore;
   datasetId: DatasetIdType;
   editingMode: EditingModeType;
   groupFilters: GroupFilterControls;
@@ -264,6 +267,7 @@ const markChangesPending = () => { };
  */
 function dummyState(): State {
   const cameraStore = new CameraStore({ markChangesPending });
+  const trackViewerSettingsStore = new TrackViewerSettingsStore();
   const setTrackType = (
     id: AnnotationId,
     newType: string,
@@ -297,6 +301,7 @@ function dummyState(): State {
     annotatorPreferences: ref({ trackTails: { before: 20, after: 10 }, lockedCamera: { enabled: false } }),
     attributes: ref([]),
     cameraStore,
+    trackViewerSettingsStore,
     datasetId: ref(''),
     editingMode: ref(false),
     multiSelectList: ref([]),
@@ -340,6 +345,7 @@ function provideAnnotator(state: State, handler: Handler, attributesFilters: Att
   provide(AnnotatorPreferencesSymbol, state.annotatorPreferences);
   provide(AttributesSymbol, state.attributes);
   provide(CameraStoreSymbol, state.cameraStore);
+  provide(TrackViewerSettingsStoreSymbol, state.trackViewerSettingsStore);
   provide(DatasetIdSymbol, state.datasetId);
   provide(EditingModeSymbol, state.editingMode);
   provide(GroupFilterControlsSymbol, state.groupFilters);
@@ -392,6 +398,9 @@ function useAttributesFilters() {
 function useCameraStore() {
   return use<CameraStore>(CameraStoreSymbol);
 }
+function useTrackViewerSettingsStore() {
+  return use<TrackViewerSettingsStore>(TrackViewerSettingsStoreSymbol);
+}
 function useDatasetId() {
   return use<DatasetIdType>(DatasetIdSymbol);
 }
@@ -486,6 +495,7 @@ export {
   useAnnotatorPreferences,
   useAttributes,
   useCameraStore,
+  useTrackViewerSettingsStore,
   useDatasetId,
   useEditingMode,
   useHandler,
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 967c6933d..9e8fdad6a 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -12,6 +12,7 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": false,
     "baseUrl": ".",
+    "skipLibCheck": true,
     "paths": {
       "vue-media-annotator/*": [
         "src/*"
diff --git a/client/yarn.lock b/client/yarn.lock
index 1c538628b..2acfbca1a 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1097,6 +1097,13 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
+"@babel/runtime@7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@7.22.11":
   version "7.22.11"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4"
@@ -1602,6 +1609,27 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@kitware/vtk.js@^25.6.0":
+  version "25.15.2"
+  resolved "https://registry.yarnpkg.com/@kitware/vtk.js/-/vtk.js-25.15.2.tgz#314dbb7c25edfd44b134185be6493a6f775d8a88"
+  integrity sha512-bekuiKfB2O9IRJBGXScnWDqA1nT9yAoJJ9t/GTritdrhx4B9kwtcj8sc4MTX000UN7sVruyHoM/NF5qeKvx+fQ==
+  dependencies:
+    "@babel/runtime" "7.17.9"
+    commander "9.2.0"
+    d3-scale "4.0.2"
+    fast-deep-equal "^3.1.3"
+    fflate "0.7.3"
+    gl-matrix "3.4.3"
+    globalthis "1.0.3"
+    seedrandom "3.0.5"
+    shader-loader "1.3.1"
+    shelljs "0.8.5"
+    spark-md5 "3.0.2"
+    stream-browserify "3.0.0"
+    webworker-promise "0.5.0"
+    worker-loader "3.0.8"
+    xmlbuilder2 "3.0.2"
+
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1"
@@ -10441,6 +10469,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.13.4:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
@@ -12864,4 +12897,4 @@ yorkie@^2.0.0:
     execa "^0.8.0"
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
-    strip-indent "^2.0.0"
+    strip-indent "^2.0.0"
\ No newline at end of file
diff --git a/docs/UI-Attributes.md b/docs/UI-Attributes.md
index 117adb8d8..4f5e93534 100644
--- a/docs/UI-Attributes.md
+++ b/docs/UI-Attributes.md
@@ -60,7 +60,7 @@ By default, all attributes associated with the dataset are visible and editable.
 
 1. Click on the ==:material-plus: Attribute== icon for in either the track or detection attribute area.
     1. ![New Attribute Panel](images/Attributes/newAttribute.png)
-1. Enter a unique name
+1. Enter a unique name (see [Reserved Attribute Names section](#reserved-attribute-names))
 1. Choose a Datatype
     1. `Number`
     1. `Boolean` (True/False)
@@ -98,6 +98,13 @@ Attributes are part of the dataset configuration that can be imported and export
     1. Use the ==:material-application-import: Import== button to load this configuration to other datasets.
     1. Upload the configuration file when you create new datasets to initialize them with these attribute definitions.
 
+
+## Reserved Attribute Names
+
+Using certain import mode, attributes definitions might be created automatically. This is documented in this section.
+- When importing using 'Stereoscopic' mode, the `stereo3d_x`, `stereo3d_y` and `stereo3d_z` detection attributes definitions will be created automatically.
+They holds the 3d location of a detected fish and are used in the Track 3D Viewer.
+
 ## Applying Attributes Demo
 
 ![Applying Attributes Demo](videos/Attributes/ApplyingAttributes.gif)