diff --git a/core/frontend/src/assets/3d/generic_sensor.glb b/core/frontend/src/assets/3d/generic_sensor.glb
new file mode 100644
index 0000000000..9f5432b8a5
Binary files /dev/null and b/core/frontend/src/assets/3d/generic_sensor.glb differ
diff --git a/core/frontend/src/assets/3d/navigator.glb b/core/frontend/src/assets/3d/navigator.glb
new file mode 100644
index 0000000000..83eb0a0cb1
Binary files /dev/null and b/core/frontend/src/assets/3d/navigator.glb differ
diff --git a/core/frontend/src/components/kraken/BackAlleyTab.vue b/core/frontend/src/components/kraken/BackAlleyTab.vue
index b479890ee5..5bb91dc081 100644
--- a/core/frontend/src/components/kraken/BackAlleyTab.vue
+++ b/core/frontend/src/components/kraken/BackAlleyTab.vue
@@ -338,7 +338,7 @@ export default Vue.extend({
         return []
       }
 
-      return (this.manifest as ExtensionData[]).sort(
+      return this.manifest as ExtensionData[].sort(
         (a, b) => (b?.repo_info?.downloads ?? 0) - (a?.repo_info?.downloads ?? 0),
       )
     },
diff --git a/core/frontend/src/components/vehiclesetup/OrientationPicker.vue b/core/frontend/src/components/vehiclesetup/OrientationPicker.vue
new file mode 100644
index 0000000000..7343a91449
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/OrientationPicker.vue
@@ -0,0 +1,372 @@
+<template>
+  <v-card outline class="pa-5 mt-4 mr-2 mb-2">
+    <v-card-title>Board Orientation</v-card-title>
+    <v-select
+      v-model="selectedRotation"
+      class="orientation-selector"
+      :items="rotations"
+      return-object
+      :item-text="'name'"
+    />
+    <div class="threejs-container">
+      <div ref="threemount" class="threejsmount" />
+      <div class="control-overlay">
+          <v-btn
+            :color="transformMode === 'rotate' ? 'primary' : ''"
+            @click="setTransformMode('rotate')"
+            small
+          >
+            <v-icon>mdi-rotate-3d</v-icon>
+            Rotate
+          </v-btn>
+          <v-btn
+            :color="transformMode === 'translate' ? 'primary' : ''"
+            @click="setTransformMode('translate')"
+            small
+          >
+            <v-icon>mdi-arrow-all</v-icon>
+            Move
+          </v-btn>
+      </div>
+    </div>
+  </v-card>
+</template>
+
+<script lang="ts">
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { PropType } from 'vue'
+
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import autopilot_data from '@/store/autopilot'
+import Parameter, { printParam } from '@/types/autopilot/parameter'
+
+import { get_board_model, get_model } from './viewers/modelHelper'
+
+class Rotation {
+  name: string
+
+  roll: number
+
+  pitch: number
+
+  yaw: number
+
+  constructor(name: string, roll: number, pitch: number, yaw: number) {
+    this.name = name
+    this.roll = roll
+    this.pitch = pitch
+    this.yaw = yaw
+  }
+}
+
+export default {
+  name: 'OrientationPicker',
+  props: {
+    parameter: {
+      type: Object as PropType<Parameter | undefined>,
+      required: true,
+    },
+    componentModel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      transformControls: undefined as TransformControls | undefined,
+      transformMode: 'rotate' as 'rotate' | 'translate',
+      rotations: [
+        new Rotation('NONE', 0, 0, 0),
+        new Rotation('YAW_45', 0, 0, 45),
+        new Rotation('YAW_90', 0, 0, 90),
+        new Rotation('YAW_135', 0, 0, 135),
+        new Rotation('YAW_180', 0, 0, 180),
+        new Rotation('YAW_225', 0, 0, 225),
+        new Rotation('YAW_270', 0, 0, 270),
+        new Rotation('YAW_315', 0, 0, 315),
+        new Rotation('ROLL_180', 180, 0, 0),
+        new Rotation('ROLL_180_YAW_45', 180, 0, 45),
+        new Rotation('ROLL_180_YAW_90', 180, 0, 90),
+        new Rotation('ROLL_180_YAW_135', 180, 0, 135),
+        new Rotation('PITCH_180', 0, 180, 0),
+        new Rotation('ROLL_180_YAW_225', 180, 0, 225),
+        new Rotation('ROLL_180_YAW_270', 180, 0, 270),
+        new Rotation('ROLL_180_YAW_315', 180, 0, 315),
+        new Rotation('ROLL_90', 90, 0, 0),
+        new Rotation('ROLL_90_YAW_45', 90, 0, 45),
+        new Rotation('ROLL_90_YAW_90', 90, 0, 90),
+        new Rotation('ROLL_90_YAW_135', 90, 0, 135),
+        new Rotation('ROLL_270', 270, 0, 0),
+        new Rotation('ROLL_270_YAW_45', 270, 0, 45),
+        new Rotation('ROLL_270_YAW_90', 270, 0, 90),
+        new Rotation('ROLL_270_YAW_135', 270, 0, 135),
+        new Rotation('PITCH_90', 0, 90, 0),
+        new Rotation('PITCH_270', 0, 270, 0),
+        new Rotation('PITCH_180_YAW_90', 0, 180, 90),
+        new Rotation('PITCH_180_YAW_270', 0, 180, 270),
+        new Rotation('ROLL_90_PITCH_90', 90, 90, 0),
+        new Rotation('ROLL_180_PITCH_90', 180, 90, 0),
+        new Rotation('ROLL_270_PITCH_90', 270, 90, 0),
+        new Rotation('ROLL_90_PITCH_180', 90, 180, 0),
+        new Rotation('ROLL_270_PITCH_180', 270, 180, 0),
+        new Rotation('ROLL_90_PITCH_270', 90, 270, 0),
+        new Rotation('ROLL_180_PITCH_270', 180, 270, 0),
+        new Rotation('ROLL_270_PITCH_270', 270, 270, 0),
+        new Rotation('ROLL_90_PITCH_180_YAW_90', 90, 180, 90),
+        new Rotation('ROLL_90_YAW_270', 90, 0, 270),
+        new Rotation('ROLL_90_PITCH_68_YAW_293', 90, 68, 270),
+        new Rotation('PITCH_315', 0, 315, 0),
+        new Rotation('ROLL_90_PITCH_315', 90, 315, 0),
+        new Rotation('PITCH_7', 0, 7, 0),
+      ] as Rotation[],
+      object: undefined as THREE.WebGLObject,
+      camera: undefined as THREE.WebGLCAMERA | undefined,
+      scene: undefined as THREE.WebGLScene | undefined,
+      renderer: undefined as THREE.WebGLRenderer | undefined,
+      vehicle_obj: undefined as THREE.WebGLObject,
+      arrows: [] as THREE.WebGLArrowHelper[],
+    }
+  },
+  computed: {
+    threejs_canvas(): HTMLDivElement {
+      return this.$refs.threemount as HTMLDivElement
+    },
+    vehicle_model(): string | undefined {
+      return get_model()
+    },
+    selectedRotation: {
+      get(): Rotation | undefined {
+        return this.rotations.find(
+          (rotation) => {
+            const rotation_lowercase = rotation.name.toLocaleLowerCase().replace('_', '')
+            const param_lowercase = printParam(this.parameter).toLocaleLowerCase()
+            return rotation_lowercase === param_lowercase
+          },
+        )
+      },
+      set(newValue: Rotation) {
+        if (this.parameter === undefined) {
+          return
+        }
+        mavlink2rest.setParam(
+          this.parameter.name,
+          this.rotations.indexOf(newValue),
+          autopilot_data.system_id,
+          this.parameter.paramType.type,
+        )
+        autopilot_data.setRebootRequired(true)
+      },
+    },
+  },
+
+  watch: {
+    selectedRotation(rotation) {
+      this.rotateObject(rotation)
+    },
+    selectedRotation(rotation) {
+      this.rotateObject(rotation)
+    },
+  },
+  mounted() {
+    const scene = new THREE.Scene()
+    this.scene = scene
+    this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 100)
+    this.renderer = new THREE.WebGLRenderer({ antialias: true })
+    this.camera.position.y = 0.3
+    this.camera.position.x = 0.3
+    this.camera.position.z = 0.3
+    if (this.threejs_canvas) {
+      this.threejs_canvas.appendChild(this.renderer.domElement)
+    }
+    const orbitControls = new OrbitControls(this.camera, this.renderer.domElement)
+
+    // Add lights
+    const ambientLight = new THREE.AmbientLight(0xffffff, 3.5)
+    ambientLight.castShadow = true
+    scene.add(ambientLight)
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 2.0)
+    directionalLight.position.set(1, 1, 1)
+    directionalLight.castShadow = true
+    scene.add(directionalLight)
+
+    const pointLight = new THREE.PointLight(0xffffff, 0.5, 100)
+    pointLight.position.set(0, 10, 0)
+    pointLight.castShadow = true
+    scene.add(pointLight)
+
+    scene.background = new THREE.Color(0xffffff)
+
+    // Add arrows for the x, y, and z axes
+    const arrowHelperX = new THREE.ArrowHelper(new THREE.Vector3(0.1, 0, 0), new THREE.Vector3(0, 0, 0), 0.1, 0xffaaaa)
+    this.arrows.push(arrowHelperX)
+    scene.add(arrowHelperX)
+
+    const arrowHelperY = new THREE.ArrowHelper(new THREE.Vector3(0, 5, 0), new THREE.Vector3(0, 0, 0), 0.1, 0xaaffaa)
+    scene.add(arrowHelperY)
+    this.arrows.push(arrowHelperY)
+
+    const arrowHelperZ = new THREE.ArrowHelper(new THREE.Vector3(0, 0, 5), new THREE.Vector3(0, 0, 0), 0.1, 0xaaaaff)
+    scene.add(arrowHelperZ)
+    this.arrows.push(arrowHelperZ)
+    // Add TransformControls
+    this.transformControls = new TransformControls(this.camera, this.renderer.domElement)
+    this.transformControls.addEventListener('mouseDown', (event) => {
+      orbitControls.enabled = false
+    })
+    this.transformControls.addEventListener('mouseUp', (event) => {
+      orbitControls.enabled = true
+    })
+    
+    this.transformControls.setMode(this.transformMode)
+    this.transformControls.setSpace('global')
+    scene.add(this.transformControls)
+    const animate = () : void => {
+      requestAnimationFrame(animate)
+      if (!this.renderer) {
+        return
+      }
+      this.renderer.render(scene, this.camera)
+    }
+    window.addEventListener('resize', this.resize)
+    this.add_vehicle_model()
+    this.add_board_model()
+    this.resize()
+    this.rotateObject(this.selectedRotation)
+    animate()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resize)
+  },
+  methods: {
+    setTransformMode(mode: 'rotate' | 'translate') {
+      this.transformMode = mode
+      if (this.transformControls) {
+        this.transformControls.setMode(mode)
+      }
+    },
+    rotateObject(rotation: Rotation | undefined) {
+      if (!rotation) {
+        return
+      }
+      if (this.object) {
+        this.object.rotation.x = THREE.MathUtils.degToRad(rotation.roll)
+        this.object.rotation.z = THREE.MathUtils.degToRad(rotation.pitch)
+        this.object.rotation.y = THREE.MathUtils.degToRad(rotation.yaw)
+
+        // Update the selected rotation based on the object's current rotation
+        const currentRotation = new Rotation(
+          'Custom',
+          THREE.MathUtils.radToDeg(this.object.rotation.x),
+          THREE.MathUtils.radToDeg(this.object.rotation.z),
+          THREE.MathUtils.radToDeg(this.object.rotation.y),
+        )
+        this.updateSelectedRotation(currentRotation)
+      }
+    },
+    add_vehicle_model() {
+      if (this.scene) {
+        const dracoLoader = new DRACOLoader()
+        dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/')
+        const loader = new GLTFLoader()
+        loader.setDRACOLoader(dracoLoader)
+        loader.load(
+          this.vehicle_model,
+          (gltf) => {
+            gltf.scene.traverse((child) => {
+              if (child instanceof THREE.Mesh) {
+                child.material = new THREE.MeshStandardMaterial({
+                  color: 0x666666, // white
+                  transparent: true,
+                  opacity: 0.05,
+                  depthTest: false,
+                  depthWrite: true,
+                  side: THREE.DoubleSide, // Set material to be double-sided
+                })
+              }
+            })
+            this.vehicle_obj = gltf.scene
+            this.scene.add(gltf.scene)
+          },
+          undefined,
+          (error) => {
+            console.error('An error occurred while loading the GLB model:', error)
+          },
+        )
+      }
+    }, 
+    async add_board_model() {
+      if (this.scene) {
+        const dracoLoader = new DRACOLoader()
+        dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/')
+        const loader = new GLTFLoader()
+        loader.setDRACOLoader(dracoLoader)
+        const board_model = await get_board_model(this.componentModel)
+        console.log(board_model.default)
+        loader.load(
+          board_model.default,
+          (gltf) => {
+            this.object = gltf.scene
+            this.scene.add(gltf.scene)
+            this.rotateObject(this.selectedRotation)
+
+            // Attach TransformControls to the loaded object
+            if (this.transformControls) {
+              this.transformControls.attach(this.object)
+            }
+          },
+          undefined,
+          (error) => {
+            console.error('An error occurred while loading the GLB model:', error)
+          },
+        )
+      }
+    },
+    resize() {
+      // ... (keep existing method)
+    },
+    updateSelectedRotation(rotation: Rotation) {
+      // Find the closest predefined rotation
+      const closestRotation = this.rotations.reduce((prev, curr) => {
+        const prevDiff = Math.abs(prev.roll - rotation.roll) + Math.abs(prev.pitch - rotation.pitch) + Math.abs(prev.yaw - rotation.yaw)
+        const currDiff = Math.abs(curr.roll - rotation.roll) + Math.abs(curr.pitch - rotation.pitch) + Math.abs(curr.yaw - rotation.yaw)
+        return prevDiff < currDiff ? prev : curr
+      })
+
+      this.selectedRotation = closestRotation
+
+      // Update the parameter
+      if (this.parameter) {
+        mavlink2rest.setParam(
+          this.parameter.name,
+          this.rotations.indexOf(closestRotation),
+          autopilot_data.system_id,
+          this.parameter.paramType.type,
+        )
+        autopilot_data.setRebootRequired(true)
+      }
+      this.camera.aspect = this.threejs_canvas.clientWidth / this.threejs_canvas.clientHeight
+      this.camera.updateProjectionMatrix()
+      this.renderer.setSize(this.threejs_canvas.clientWidth, this.threejs_canvas.clientHeight)
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+div.threejsmount {
+  width: 100%;
+  height: 500px;
+}
+
+.orientation-selector {
+  width: 600px;
+}
+
+</style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/accelerometer/ArdupilotAccelerometerSetup.vue b/core/frontend/src/components/vehiclesetup/configuration/accelerometer/ArdupilotAccelerometerSetup.vue
index 4edd57669f..49b87af1e3 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/accelerometer/ArdupilotAccelerometerSetup.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/accelerometer/ArdupilotAccelerometerSetup.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="main-container">
-    <v-card outline class="pa-2">
+    <OrientationPicker
+      v-if="params_finished_loaded"
+      :component-model="current_board"
+      :parameter="orientation_parameter"
+    />
+    <v-card v-if="params_finished_loaded" outline class="pa-5 mt-4 mr-2 mb-2">
       <v-simple-table>
         <thead>
           <tr>
@@ -55,9 +60,16 @@
 <script lang="ts">
 import Vue from 'vue'
 
+import {
+  fetchCurrentBoard,
+} from '@/components/autopilot/AutopilotManagerUpdater'
 // eslint-disable-next-line
 import FullAccelerometerCalibration from '@/components/vehiclesetup/configuration/accelerometer/FullAccelerometerCalibration.vue'
+import OrientationPicker from '@/components/vehiclesetup/OrientationPicker.vue'
+import { OneMoreTime } from '@/one-more-time'
 import autopilot_data from '@/store/autopilot'
+import autopilot from '@/store/autopilot_manager'
+import Parameter from '@/types/autopilot/parameter'
 import { Dictionary } from '@/types/common'
 import decode, { deviceId } from '@/utils/deviceid_decoder'
 
@@ -69,12 +81,29 @@ export default Vue.extend({
   components: {
     FullAccelerometerCalibration,
     QuickAccelerometerCalibration,
+    OrientationPicker,
   },
   data() {
     return {
+      fetch_board_task: new OneMoreTime({ delay: 10000, disposeWith: this }),
     }
   },
   computed: {
+    current_board(): string | undefined {
+      return autopilot.current_board?.name
+    },
+    orientation_parameter(): Parameter | undefined {
+      return autopilot_data.parameter('AHRS_ORIENTATION')
+    },
+    params_finished_loaded(): boolean {
+      return autopilot_data.finished_loading
+    },
+    loaded_params(): number {
+      return autopilot_data.parameters_loaded
+    },
+    total_params(): number {
+      return autopilot_data.parameters_total
+    },
     imus() : deviceId[] {
       return autopilot_data.parameterRegex('^INS_ACC.*_ID')
         .filter((param) => param.value !== 0)
@@ -87,6 +116,9 @@ export default Vue.extend({
       return imu_temperature_is_calibrated(this.imus, autopilot_data)
     },
   },
+  mounted() {
+    this.fetch_board_task.setAction(() => fetchCurrentBoard)
+  },
   methods: {
     getCalibrationTemperature(imu: deviceId) {
       return this.imu_temperature_is_calibrated[imu.param].calibrationTemperature.toFixed(0)
diff --git a/core/frontend/src/components/vehiclesetup/configuration/accelerometer/FullAccelerometerCalibration.vue b/core/frontend/src/components/vehiclesetup/configuration/accelerometer/FullAccelerometerCalibration.vue
index 7ed858c1d5..b14d0eed83 100644
--- a/core/frontend/src/components/vehiclesetup/configuration/accelerometer/FullAccelerometerCalibration.vue
+++ b/core/frontend/src/components/vehiclesetup/configuration/accelerometer/FullAccelerometerCalibration.vue
@@ -3,6 +3,7 @@
     v-model="dialog"
     persistent
     width="500"
+    @click:outside="cleanup"
   >
     <template #activator="{ on, attrs }">
       <v-btn
diff --git a/core/frontend/src/components/vehiclesetup/configuration/failsafes.vue b/core/frontend/src/components/vehiclesetup/configuration/failsafes.vue
new file mode 100644
index 0000000000..d9ff48c508
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/configuration/failsafes.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="pt-1 pb-1">
+    <div v-for="(parameters, section) in filtered_params">
+      <v-sheet class="ma-5">
+        <v-card-title>{{ section }}</v-card-title>
+        <div class="d-flex d-col flex-wrap">
+          <v-card v-for="param in parameters" elevation="2" class="ma-2 d-flex flex-column" min-width="200px" max-width="250px">
+            <v-card-title> {{ param.name }}</v-card-title>
+            <v-card-text>
+              {{ param.description }}
+            </v-card-text>
+            <div class="flex-grow-1" />
+            <v-card-actions>
+              <v-text-field
+                label="Current value"
+                :value="`${printParam(param)} ${param.units ?? ''}`"
+
+                disabled
+              />
+              <v-btn small>
+                <v-icon>mdi-pencil</v-icon>
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </div>
+      </v-sheet>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Dictionary } from 'vue-router/types/router.js'
+
+import autopilot_data from '@/store/autopilot'
+import Parameter, { printParam } from '@/types/autopilot/parameter'
+
+enum Lights {
+  Lights1 = 59, // RCIN9
+  Lights2 = 60, // RCIN10
+  DISABLED = 0,
+}
+
+const FS_PARAMS = {
+  Communication:
+  [
+    'FS_PILOT_INPUT',
+    'FS_PILOT_TIMEOUT',
+    'FS_GCS_ENABLE',
+  ],
+  Sensors:
+  [
+    'FS_LEAK_ENABLE',
+    'FS_PRESS_ENABLE',
+    'FS_TEMP_ENABLE',
+    'FS_PRESS_MAX',
+    'FS_TEMP_MAX',
+    'FS_EKF_ACTION',
+  ],
+  Battery:
+  [
+    'BATT_FS_VOLTSRC',
+    'BATT_FS_LOW_ACT',
+    'BATT_FS_CRT_ACT',
+  ],
+}
+
+export default {
+  name: 'FailsafesConfigration',
+  computed: {
+    filtered_params(): Dictionary<(Parameter | undefined)[]> {
+      // return parameters in servo_params that are on channel 9 and higher
+      const params = {} as Dictionary<(Parameter | undefined)[]>
+      for (const [section, parameters] of Object.entries(FS_PARAMS)) {
+        params[section] = parameters.map((param) => autopilot_data.parameter(param))
+      }
+      return params
+    },
+  },
+  methods: {
+    printParam,
+  },
+}
+</script>
+<style scoped>
+.main-container {
+  display: flex;
+  column-gap: 10px;
+  padding: 10px;
+}
+</style>
diff --git a/core/frontend/src/components/vehiclesetup/viewers/GenericViewer.vue b/core/frontend/src/components/vehiclesetup/viewers/GenericViewer.vue
index 7b26aeaf5b..0e316c8363 100755
--- a/core/frontend/src/components/vehiclesetup/viewers/GenericViewer.vue
+++ b/core/frontend/src/components/vehiclesetup/viewers/GenericViewer.vue
@@ -77,29 +77,17 @@ import Vue from 'vue'
 
 import SpinningLogo from '@/components/common/SpinningLogo.vue'
 import autopilot_data from '@/store/autopilot'
-import autopilot from '@/store/autopilot_manager'
 import ping from '@/store/ping'
-import {
-  FRAME_TYPE as ROVER_FRAME_TYPE,
-} from '@/types/autopilot/parameter-rover-enums'
 import {
   BTN_FUNCTION as SUB_BTN_FUNCTION,
-  FRAME_CONFIG as SUB_FRAME_CONFIG,
   SERVO_FUNCTION as SUB_SERVO_FUNCTION,
 } from '@/types/autopilot/parameter-sub-enums'
 import { Dictionary, Indexed, Keyed } from '@/types/common'
 import { PingType } from '@/types/ping'
-import { sleep } from '@/utils/helper_functions'
 
-const models: Record<string, string> = import.meta.glob('/public/assets/vehicles/models/**', { eager: true })
+import { checkModelOverrides, frame_name, get_model } from './modelHelper'
 
-function get_model(vehicle_name: string, frame_name: string): undefined | string {
-  const release_path = `assets/vehicles/models/${vehicle_name}/${frame_name}.glb`
-  if (models[`/public/${release_path}`]) {
-    return `/assets/vehicles/models/${vehicle_name}/${frame_name}.glb`
-  }
-  return undefined
-}
+const models: Record<string, string> = import.meta.glob('/public/assets/vehicles/models/**', { eager: true })
 
 export default Vue.extend({
   name: 'GenericViewer',
@@ -134,60 +122,14 @@ export default Vue.extend({
     }
   },
   computed: {
-    vehicle_type(): string | null {
-      return autopilot.vehicle_type
-    },
-    vehicle_folder(): string {
-      switch (this.vehicle_type) {
-        case 'Submarine':
-          return 'sub'
-        case 'Surface Boat':
-          return 'boat'
-        case 'Ground Rover':
-          return 'rover'
-        default:
-          return ''
-      }
-    },
-    frame_type(): number | undefined {
-      switch (this.vehicle_type) {
-        case 'Submarine':
-          return autopilot_data.parameter('FRAME_CONFIG')?.value
-        case 'Surface Boat':
-          return autopilot_data.parameter('FRAME_TYPE')?.value
-          // TODO: other vehicles
-        default:
-          return undefined
-      }
-    },
-    frame_name(): string | undefined {
-      let result
-      switch (this.vehicle_type) {
-        case 'Submarine':
-          result = Object.entries(SUB_FRAME_CONFIG).find((key, value) => value === this.frame_type)?.[1] as string
-          break
-        case 'Surface Boat':
-          // we already know it is a boat, so check only TYPE and ignore CLASS (rover/boat/balancebot)
-          result = Object.entries(ROVER_FRAME_TYPE).find((key, value) => value === this.frame_type)?.[1] as string
-          break
-        case 'Ground Rover':
-          // TOOD: check FRAME_TYPE
-          result = 'unknown'
-          break
-          // TODO: other vehicles
-        default:
-          break
-      }
-      return result ? `${result}` : undefined
-    },
     model_path(): string | undefined {
-      return get_model(this.vehicle_folder, this.frame_name)
+      return get_model()
     },
     filtered_annotations(): (HotspotConfiguration & Indexed & Keyed)[] {
       if (this.noannotations) {
         return []
       }
-      if (this.frame_name === undefined) {
+      if (frame_name === undefined) {
         return []
       }
       // pick correct set
@@ -271,7 +213,7 @@ export default Vue.extend({
     },
     async model_path() {
       this.reloadAnnotations()
-      this.model_override_path = await this.checkModelOverrides()
+      this.model_override_path = await checkModelOverrides()
       this.override_annotations = await this.loadAnottationsOverride()
       this.forceRefreshAnnotations()
     },
@@ -308,7 +250,6 @@ export default Vue.extend({
       }
       this.hideIrrelevantParts()
     })
-    this.model_override_path = await this.checkModelOverrides()
     this.override_annotations = await this.loadAnottationsOverride()
     this.reloadAnnotations()
   },
@@ -360,26 +301,7 @@ export default Vue.extend({
       this.hideIrrelevantParts()
       this.forceRefreshAnnotations()
     },
-    async checkModelOverrides() {
-      while (!this.vehicle_type || !this.frame_name) {
-        await sleep(100)
-      }
-      const master_override = '/userdata/modeloverrides/ALL.glb'
-      const vehicle_override = `/userdata/modeloverrides/${this.vehicle_folder}/${this.frame_name}.glb`
-      try {
-        await axios.head(master_override)
-        return master_override
-      } catch {
-        console.log(`master override model not found at ${master_override}`)
-      }
-      try {
-        await axios.head(vehicle_override)
-        return vehicle_override
-      } catch {
-        console.log(`vehicle override model not found at ${vehicle_override}`)
-      }
-      return undefined
-    },
+
     async loadAnottationsOverride(): Promise<Dictionary<HotspotConfiguration>> {
       if (!this.model_override_path) {
         return {}
diff --git a/core/frontend/src/components/vehiclesetup/viewers/modelHelper.ts b/core/frontend/src/components/vehiclesetup/viewers/modelHelper.ts
new file mode 100644
index 0000000000..d06678baf0
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/viewers/modelHelper.ts
@@ -0,0 +1,106 @@
+import autopilot_data from "@/store/autopilot"
+import autopilot from "@/store/autopilot_manager"
+
+import {
+    FRAME_TYPE as ROVER_FRAME_TYPE,
+  } from '@/types/autopilot/parameter-rover-enums'
+
+import {
+    BTN_FUNCTION as SUB_BTN_FUNCTION,
+    FRAME_CONFIG as SUB_FRAME_CONFIG,
+    SERVO_FUNCTION as SUB_SERVO_FUNCTION,
+  } from '@/types/autopilot/parameter-sub-enums'
+import { sleep } from "@/utils/helper_functions"
+import axios from "axios"
+
+const models: Record<string, string> = import.meta.glob('/public/assets/vehicles/models/**', { eager: true })
+
+function vehicle_folder(): string {
+switch (autopilot.vehicle_type) {
+    case 'Submarine':
+    return 'sub'
+    case 'Surface Boat':
+    return 'boat'
+    case 'Ground Rover':
+    return 'rover'
+    default:
+    return ''
+}
+}
+
+export enum BoardName {
+    NAVIGATOR = 'NAVIGATOR',
+    GENERIC = 'GENERIC',
+}
+
+
+function frame_type(): number | undefined {
+    switch (autopilot.vehicle_type) {
+      case 'Submarine':
+        return autopilot_data.parameter('FRAME_CONFIG')?.value
+      case 'Surface Boat':
+        return autopilot_data.parameter('FRAME_TYPE')?.value
+        // TODO: other vehicles
+      default:
+        return undefined
+    }
+  }
+
+
+export function frame_name(): string | undefined {
+    let result
+    switch (autopilot.vehicle_type) {
+      case 'Submarine':
+        result = Object.entries(SUB_FRAME_CONFIG).find((key, value) => value === frame_type())?.[1] as string
+        break
+      case 'Surface Boat':
+        // we already know it is a boat, so check only TYPE and ignore CLASS (rover/boat/balancebot)
+        result = Object.entries(ROVER_FRAME_TYPE).find((key, value) => value === frame_type())?.[1] as string
+        break
+      case 'Ground Rover':
+        // TOOD: check FRAME_TYPE
+        result = 'unknown'
+        break
+        // TODO: other vehicles
+      default:
+        break
+    }
+    return result ? `${result}` : undefined
+  }
+
+export async function checkModelOverrides() {
+    while (!autopilot.vehicle_type) {
+      await sleep(100)
+    }
+    const master_override = '/userdata/modeloverrides/ALL.glb'
+    const vehicle_override = `/userdata/modeloverrides/${vehicle_folder()}/${frame_name()}.glb`
+    try {
+      await axios.head(master_override)
+      return master_override
+    } catch {
+      console.log(`master override model not found at ${master_override}`)
+    }
+    try {
+      await axios.head(vehicle_override)
+      return vehicle_override
+    } catch {
+      console.log(`vehicle override model not found at ${vehicle_override}`)
+    }
+    return undefined
+  }
+
+  export function get_model(): undefined | string {
+    const release_path = `assets/vehicles/models/${vehicle_folder()}/${frame_name()}.glb`
+    if (models[`/public/${release_path}`]) {
+      return `/assets/vehicles/models/${vehicle_folder()}/${frame_name()}.glb`
+    }
+    return undefined
+  }
+  
+  export async function get_board_model(board?: string): Promise<string> {
+    if (board === "Navigator") {
+      return await import('@/assets/3d/navigator.glb')
+    }
+    console.log(`No 3D model for board ${board}`)
+    return await import('@/assets/3d/generic_sensor.glb')
+  }