diff --git a/bun.lockb b/bun.lockb
index d1ecbf665..1c255576a 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 8ebce6fb0..29f572a40 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "@types/file-saver": "^2.0.5",
     "@types/jsdom": "^16.2.14",
     "@types/leaflet": "^1.9.0",
-    "@types/node": "^16.11.27",
+    "@types/node": "^17.0.29",
     "@types/uuid": "^8.3.4",
     "@types/webfontloader": "^1.0.0",
     "@vitejs/plugin-vue": "3.1.0",
diff --git a/src/App.vue b/src/App.vue
index c874442f7..04b9aaea8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -155,6 +155,7 @@ import Dialog from './components/Dialog.vue'
 import EditMenu from './components/EditMenu.vue'
 import MiniWidgetContainer from './components/MiniWidgetContainer.vue'
 import Alerter from './components/widgets/Alerter.vue'
+import { datalogger } from './libs/logging'
 import { useWidgetManagerStore } from './stores/widgetManager'
 
 const widgetStore = useWidgetManagerStore()
@@ -210,6 +211,9 @@ watch([() => widgetStore.currentView, () => widgetStore.currentView.showBottomBa
 const debouncedToggleBottomBar = useDebounceFn(() => (showBottomBarNow.value = !showBottomBarNow.value), 25)
 const bottomBarToggleCallbackId = registerActionCallback(CockpitAction.TOGGLE_BOTTOM_BAR, debouncedToggleBottomBar)
 onBeforeUnmount(() => unregisterActionCallback(bottomBarToggleCallbackId))
+
+// Start datalogging
+datalogger.startLogging()
 </script>
 
 <style>
diff --git a/src/components/ConfigurationMenu.vue b/src/components/ConfigurationMenu.vue
index 64d529000..ab00c883e 100644
--- a/src/components/ConfigurationMenu.vue
+++ b/src/components/ConfigurationMenu.vue
@@ -41,6 +41,7 @@ import ConfigurationAlertsView from '../views/ConfigurationAlertsView.vue'
 import ConfigurationDevelopmentView from '../views/ConfigurationDevelopmentView.vue'
 import ConfigurationGeneralView from '../views/ConfigurationGeneralView.vue'
 import ConfigurationJoystickView from '../views/ConfigurationJoystickView.vue'
+import ConfigurationLogsView from '../views/ConfigurationLogsView.vue'
 
 const store = useMainVehicleStore()
 
@@ -58,6 +59,11 @@ const menus = [
     title: 'Joystick',
     component: ConfigurationJoystickView,
   },
+  {
+    icon: 'mdi-script',
+    title: 'Logs',
+    component: ConfigurationLogsView,
+  },
   {
     icon: 'mdi-bell-ring',
     title: 'Alerts',
diff --git a/src/components/mini-widgets/DepthIndicator.vue b/src/components/mini-widgets/DepthIndicator.vue
index 68bdb4afc..ccee1831f 100644
--- a/src/components/mini-widgets/DepthIndicator.vue
+++ b/src/components/mini-widgets/DepthIndicator.vue
@@ -17,9 +17,11 @@ import { useAverage } from '@vueuse/math'
 import { ref, watch } from 'vue'
 import { computed } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 const store = useMainVehicleStore()
+datalogger.registerUsage(DatalogVariable.depth)
 
 // Calculate depth time-average (50 values window)
 const depth = ref(0)
diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue
index 31330bbd9..99898d9c1 100644
--- a/src/components/mini-widgets/MiniVideoRecorder.vue
+++ b/src/components/mini-widgets/MiniVideoRecorder.vue
@@ -64,6 +64,7 @@ import { computed, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vu
 import adapter from 'webrtc-adapter'
 
 import { WebRTCManager } from '@/composables/webRTC'
+import { datalogger } from '@/libs/logging'
 import type { Stream } from '@/libs/webrtc/signalling_protocol'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
@@ -194,6 +195,12 @@ const startRecording = async (): Promise<SweetAlertResult | void> => {
   timeRecordingStart.value = new Date()
   const fileName = `${missionName || 'Cockpit'} (${format(timeRecordingStart.value, 'LLL dd, yyyy - HH꞉mm꞉ss O')})`
   mediaRecorder.value = new MediaRecorder(mediaStream.value)
+  if (!datalogger.logging()) {
+    datalogger.startLogging()
+  }
+  const videoTrack = mediaStream.value.getVideoTracks()[0]
+  const vWidth = videoTrack.getSettings().width || 1920
+  const vHeight = videoTrack.getSettings().height || 1080
   mediaRecorder.value.start(1000)
   let chunks: Blob[] = []
   mediaRecorder.value.ondataavailable = async (e) => {
@@ -203,8 +210,12 @@ const startRecording = async (): Promise<SweetAlertResult | void> => {
 
   mediaRecorder.value.onstop = () => {
     const blob = new Blob(chunks, { type: 'video/webm' })
+    const videoTelemetryLog = datalogger.getSlice(datalogger.currentCockpitLog, timeRecordingStart.value, new Date())
+    const assLog = datalogger.toAssOverlay(videoTelemetryLog, vWidth, vHeight, timeRecordingStart.value.getTime())
+    var logBlob = new Blob([assLog], { type: 'text/plain' })
     fixWebmDuration(blob, Date.now() - timeRecordingStart.value.getTime()).then((fixedBlob) => {
-      saveAs(fixedBlob, fileName)
+      saveAs(fixedBlob, `${fileName}.webm`)
+      saveAs(logBlob, `${fileName}.ass`)
       cockpitVideoDB.removeItem(fileName)
     })
     chunks = []
diff --git a/src/components/mini-widgets/ModeSelector.vue b/src/components/mini-widgets/ModeSelector.vue
index 3ff49ca37..e6f5ff604 100644
--- a/src/components/mini-widgets/ModeSelector.vue
+++ b/src/components/mini-widgets/ModeSelector.vue
@@ -7,10 +7,12 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 import Dropdown from '../Dropdown.vue'
 
+datalogger.registerUsage(DatalogVariable.mode)
 const vehicleStore = useMainVehicleStore()
 const currentMode = ref()
 
diff --git a/src/components/mini-widgets/SatelliteIndicator.vue b/src/components/mini-widgets/SatelliteIndicator.vue
index 3653aaf70..e484baf7a 100644
--- a/src/components/mini-widgets/SatelliteIndicator.vue
+++ b/src/components/mini-widgets/SatelliteIndicator.vue
@@ -9,7 +9,10 @@
 </template>
 
 <script setup lang="ts">
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
+datalogger.registerUsage(DatalogVariable.gpsFixType)
+datalogger.registerUsage(DatalogVariable.gpsVisibleSatellites)
 const store = useMainVehicleStore()
 </script>
diff --git a/src/components/widgets/Attitude.vue b/src/components/widgets/Attitude.vue
index c43fe7b82..0c147c015 100644
--- a/src/components/widgets/Attitude.vue
+++ b/src/components/widgets/Attitude.vue
@@ -64,10 +64,13 @@ import { useWindowSize } from '@vueuse/core'
 import gsap from 'gsap'
 import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, toRefs, watch } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { constrain, degrees, radians, resetCanvas, round } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'
 
+datalogger.registerUsage(DatalogVariable.roll)
+datalogger.registerUsage(DatalogVariable.pitch)
 const store = useMainVehicleStore()
 const props = defineProps<{
   /**
diff --git a/src/components/widgets/Compass.vue b/src/components/widgets/Compass.vue
index 208c8dcc9..661746c28 100644
--- a/src/components/widgets/Compass.vue
+++ b/src/components/widgets/Compass.vue
@@ -26,10 +26,12 @@ import { computed, onBeforeMount, ref, toRefs } from 'vue'
 
 import Dialog from '@/components/Dialog.vue'
 import Dropdown from '@/components/Dropdown.vue'
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { degrees, radians, resetCanvas, sequentialArray } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'
 
+datalogger.registerUsage(DatalogVariable.heading)
 const store = useMainVehicleStore()
 const compassRoot = ref()
 const canvasRef = ref<HTMLCanvasElement | undefined>()
diff --git a/src/components/widgets/CompassHUD.vue b/src/components/widgets/CompassHUD.vue
index 1674d4634..44e0ed5c4 100644
--- a/src/components/widgets/CompassHUD.vue
+++ b/src/components/widgets/CompassHUD.vue
@@ -41,10 +41,12 @@ import { colord } from 'colord'
 import gsap from 'gsap'
 import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, toRefs, watch } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { degrees, radians, resetCanvas } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'
 
+datalogger.registerUsage(DatalogVariable.heading)
 const store = useMainVehicleStore()
 const props = defineProps<{
   /**
diff --git a/src/components/widgets/DepthHUD.vue b/src/components/widgets/DepthHUD.vue
index a421bd2ea..47121b71c 100644
--- a/src/components/widgets/DepthHUD.vue
+++ b/src/components/widgets/DepthHUD.vue
@@ -33,10 +33,12 @@ import { colord } from 'colord'
 import gsap from 'gsap'
 import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, toRefs, watch } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { constrain, range, resetCanvas, round } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'
 
+datalogger.registerUsage(DatalogVariable.depth)
 const store = useMainVehicleStore()
 const props = defineProps<{
   /**
diff --git a/src/components/widgets/Map.vue b/src/components/widgets/Map.vue
index c6e6bc671..1aa8fc788 100644
--- a/src/components/widgets/Map.vue
+++ b/src/components/widgets/Map.vue
@@ -116,6 +116,7 @@ import type { Map } from 'leaflet'
 import Swal from 'sweetalert2'
 import { type Ref, computed, nextTick, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { degrees } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
@@ -123,6 +124,8 @@ import type { Widget } from '@/types/widgets'
 
 import VehicleIcon from './VehicleIcon.vue'
 
+datalogger.registerUsage(DatalogVariable.latitude)
+datalogger.registerUsage(DatalogVariable.longitude)
 const vehicleStore = useMainVehicleStore()
 const missionStore = useMissionStore()
 
diff --git a/src/components/widgets/VirtualHorizon.vue b/src/components/widgets/VirtualHorizon.vue
index 3aa2c409c..779410d3b 100644
--- a/src/components/widgets/VirtualHorizon.vue
+++ b/src/components/widgets/VirtualHorizon.vue
@@ -14,9 +14,12 @@ import { useElementSize } from '@vueuse/core'
 import gsap from 'gsap'
 import { computed, ref } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { degrees, radians, resetCanvas } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
+datalogger.registerUsage(DatalogVariable.roll)
+datalogger.registerUsage(DatalogVariable.pitch)
 const store = useMainVehicleStore()
 const virtualHorizonRoot = ref()
 const canvasRef = ref<HTMLCanvasElement | undefined>()
diff --git a/src/libs/logging.ts b/src/libs/logging.ts
new file mode 100644
index 000000000..744844096
--- /dev/null
+++ b/src/libs/logging.ts
@@ -0,0 +1,248 @@
+import { useStorage } from '@vueuse/core'
+import { differenceInMilliseconds, differenceInSeconds, format } from 'date-fns'
+import localforage from 'localforage'
+import Swal from 'sweetalert2'
+
+import { useMainVehicleStore } from '@/stores/mainVehicle'
+
+import { degrees } from './utils'
+
+/**
+ * Variables data can be datalogged
+ */
+export enum DatalogVariable {
+  roll = 'Roll',
+  pitch = 'Pitch',
+  heading = 'Heading',
+  depth = 'Depth',
+  mode = 'Mode',
+  batteryVoltage = 'Battery voltage',
+  batteryCurrent = 'Battery current',
+  gpsVisibleSatellites = 'GPS satellites',
+  gpsFixType = 'GPS status',
+  latitude = 'Latitude',
+  longitude = 'Longitude',
+}
+
+/**
+ * State of a variable that can be displayed
+ */
+export type VariablesData = {
+  /**
+   * Name of the variable
+   */
+  [key in DatalogVariable]: {
+    /**
+     * Value that should be displayed for that variable, with the right amount of digits and including units (if desired)
+     */
+    value: string
+    /**
+     * Linux epoch stating when this value was last changed
+     */
+    lastChanged: number
+  }
+}
+
+/**
+ * Format for a standalone cockpit log
+ */
+export interface CockpitStandardLogPoint {
+  /**
+   * Universal Linux epoch time (milliseconds since January 1st, 1970, UTC)
+   */
+  epoch: number
+  /**
+   * Seconds passed since the beggining of the logging
+   */
+  seconds: number
+  /**
+   * The actual vehicle data
+   */
+  data: VariablesData
+}
+
+/**
+ * Format for a standalone cockpit log
+ */
+export type CockpitStandardLog = CockpitStandardLogPoint[]
+
+/**
+ * Manager logging vehicle data and others
+ */
+class DataLogger {
+  currentLoggerInterval: ReturnType<typeof setInterval> | undefined = undefined
+  currentCockpitLog: CockpitStandardLog = []
+  variablesBeingUsed: DatalogVariable[] = []
+  selectedVariablesToShow = useStorage<DatalogVariable[]>('cockpit-datalogger-overlay-variables', [])
+
+  /**
+   * Start an intervaled logging
+   * @param {number} interval - The time to wait between two logs
+   */
+  startLogging(interval = 1000): void {
+    if (this.logging()) {
+      Swal.fire({ title: 'Error', text: 'A log is already being generated.', icon: 'error', timer: 3000 })
+      return
+    }
+
+    const vehicleStore = useMainVehicleStore()
+    const cockpitLogsDB = localforage.createInstance({
+      driver: localforage.INDEXEDDB,
+      name: 'cockpitLogsDB',
+      storeName: 'cockpit-logs-db',
+      version: 1.0,
+      description: 'Local backups of Cockpit logs to be retrieved in case of failure.',
+    })
+
+    const initialTime = new Date()
+    const fileName = `Cockpit (${format(initialTime, 'LLL dd, yyyy - HH꞉mm꞉ss O')}).clog`
+    this.currentCockpitLog = []
+
+    this.currentLoggerInterval = setInterval(async () => {
+      const timeNow = new Date()
+      const secondsNow = differenceInSeconds(timeNow, initialTime)
+
+      const timeNowObj = { lastChanged: timeNow.getTime() }
+
+      /* eslint-disable vue/max-len, prettier/prettier, max-len */
+      const variablesData = {
+        [DatalogVariable.roll]: { value: `${degrees(vehicleStore.attitude.roll).toFixed(1)} °`, ...timeNowObj },
+        [DatalogVariable.pitch]: { value: `${degrees(vehicleStore.attitude.pitch).toFixed(1)} °`, ...timeNowObj },
+        [DatalogVariable.heading]: { value: `${degrees(vehicleStore.attitude.yaw).toFixed(1)} °`, ...timeNowObj },
+        [DatalogVariable.depth]: { value: `${vehicleStore.altitude.msl.toPrecision(4)} m`, ...timeNowObj },
+        [DatalogVariable.mode]: { value: vehicleStore.mode || 'Unknown', ...timeNowObj },
+        [DatalogVariable.batteryVoltage]: { value: `${vehicleStore.powerSupply.voltage?.toFixed(2)} V` || 'Unknown', ...timeNowObj },
+        [DatalogVariable.batteryCurrent]: { value: `${vehicleStore.powerSupply.current?.toFixed(2)} A` || 'Unknown', ...timeNowObj },
+        [DatalogVariable.gpsVisibleSatellites]: { value: vehicleStore.statusGPS.visibleSatellites.toFixed(0) || 'Unknown', ...timeNowObj },
+        [DatalogVariable.gpsFixType]: { value: vehicleStore.statusGPS.fixType, ...timeNowObj },
+        [DatalogVariable.latitude]: { value: `${vehicleStore.coordinates.latitude.toFixed(6)} °` || 'Unknown', ...timeNowObj },
+        [DatalogVariable.longitude]: { value: `${vehicleStore.coordinates.longitude.toFixed(6)} °` || 'Unknown', ...timeNowObj },
+      }
+      /* eslint-enable vue/max-len, prettier/prettier, max-len */
+
+      this.currentCockpitLog.push({
+        epoch: timeNow.getTime(),
+        seconds: secondsNow,
+        data: structuredClone(variablesData),
+      })
+
+      await cockpitLogsDB.setItem(fileName, this.currentCockpitLog)
+    }, interval)
+  }
+
+  /**
+   * Stop the current logging operation
+   */
+  stopLogging(): void {
+    if (!this.logging()) {
+      Swal.fire({ title: 'Error', text: 'No log is being generated.', icon: 'error', timer: 3000 })
+      return
+    }
+
+    clearInterval(this.currentLoggerInterval)
+  }
+
+  /**
+   * Wether the logger is currently logging or not
+   * @returns {boolean}
+   */
+  logging(): boolean {
+    return this.currentLoggerInterval !== undefined
+  }
+
+  /**
+   * Update state of a given variable
+   * @param {DatalogVariable} variable - Name of the variable being updated
+   * @returns {void}
+   */
+  registerUsage(variable: DatalogVariable): void {
+    if (this.variablesBeingUsed.includes(variable)) return
+    this.variablesBeingUsed.push(variable)
+  }
+
+  /**
+   * Get desired part of a log based on timestamp
+   * @param {CockpitStandardLog} completeLog The log from which the slice should be taken from
+   * @param {Date} initialTime The timestamp from which the log should be started from
+   * @param {Date} finalTime The timestamp in which the log should be terminated
+   * @returns {CockpitStandardLog} The actual log
+   */
+  getSlice(completeLog: CockpitStandardLog, initialTime: Date, finalTime: Date): CockpitStandardLog {
+    return completeLog
+      .filter((logPoint) => logPoint.epoch > initialTime.getTime() && logPoint.epoch < finalTime.getTime())
+      .map((logPoint) => ({ ...logPoint, ...{ seconds: differenceInSeconds(new Date(logPoint.epoch), initialTime) } }))
+  }
+
+  /**
+   * Convert Cockpit standard log files to Advanced SubStation Alpha subtitle overlays
+   * @param {CockpitStandardLog} log
+   * @param {number} videoWidth
+   * @param {number} videoHeight
+   * @param {number} videoStartEpoch
+   * @returns {string} ASS file string for video overlaying
+   */
+  toAssOverlay(log: CockpitStandardLog, videoWidth: number, videoHeight: number, videoStartEpoch: number): string {
+    /* eslint-disable vue/max-len, prettier/prettier, max-len */
+      let assFile = `[Script Info]
+Title: Cockpit Subtitle Telemetry file
+ScriptType: v4.00+
+WrapStyle: 0
+ScaledBorderAndShadow: yes
+YCbCr Matrix: TV.601
+PlayResX: ${videoWidth}
+PlayResY: ${videoHeight}
+
+[V4+ Styles]
+Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
+Style: Default,Arial,48,&H00FFFFFF,&H000000FF,&H00000000,&H00000000,0,0,0,0,100,100,0,0,1,2,2,1,10,10,10,1
+
+[Events]
+Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text`
+
+    // Try to show, in order, variables the user has decided to show, or variables being used in the application, or all variables.
+    const hasUserSelected = !this.selectedVariablesToShow.value.isEmpty()
+    const areThereVariablesBeingUsed = !this.variablesBeingUsed.isEmpty()
+    const allAvailableVariables = Object.values(DatalogVariable)
+    const variablesToShow = hasUserSelected ? this.selectedVariablesToShow.value : areThereVariablesBeingUsed ? this.variablesBeingUsed : allAvailableVariables
+
+    log.forEach((logPoint) => {
+      const data = Object.entries(logPoint.data)
+        .filter((vData) => variablesToShow.includes(vData[0] as DatalogVariable))
+        .map((v) => ({ name: v[0], value: v[1].value }))
+
+      const secondsStart = Math.round(differenceInMilliseconds(new Date(logPoint.epoch), new Date(videoStartEpoch))/1000)
+      const secondsFinish = secondsStart + 1
+
+      let subtitleDataString1 = ''
+      let subtitleDataString2 = ''
+      let subtitleDataString3 = ''
+      let binToUse = 1
+      data.forEach((d) => {
+        if (binToUse === 1) {
+          subtitleDataString1 = subtitleDataString1.concat(`${d.name}: ${d.value} \\N`)
+        } else if (binToUse === 2) {
+          subtitleDataString2 = subtitleDataString2.concat(`${d.name}: ${d.value} \\N`)
+        } else if (binToUse === 3) {
+          subtitleDataString3 = subtitleDataString3.concat(`${d.name}: ${d.value} \\N`)
+        }
+        binToUse +=1
+        if (binToUse > 3) {
+          binToUse = 1
+        }
+      })
+
+      console.log(videoWidth, videoHeight)
+      console.log(0.1*videoWidth, 0.05*videoHeight)
+
+      assFile = assFile.concat(`\nDialogue: 0,0:0:${secondsStart}.00,0:0:${secondsFinish}.00,Default,,${0.1*videoWidth},0,${0.05*videoHeight},,${subtitleDataString1}`)
+      assFile = assFile.concat(`\nDialogue: 0,0:0:${secondsStart}.00,0:0:${secondsFinish}.00,Default,,${0.4*videoWidth},0,${0.05*videoHeight},,${subtitleDataString2}`)
+      assFile = assFile.concat(`\nDialogue: 0,0:0:${secondsStart}.00,0:0:${secondsFinish}.00,Default,,${0.7*videoWidth},0,${0.05*videoHeight},,${subtitleDataString3}`)
+    })
+    /* eslint-enable vue/max-len, prettier/prettier, max-len */
+    assFile = assFile.concat('\n')
+
+    return assFile
+  }
+}
+
+export const datalogger = new DataLogger()
diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts
index 7c9262b1c..47f16d63e 100644
--- a/src/stores/widgetManager.ts
+++ b/src/stores/widgetManager.ts
@@ -426,7 +426,6 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   if (savedProfiles.value.isEmpty()) {
     importProfilesFromVehicle()
     widgetProfiles.forEach((profile) => {
-      // @ts-ignore: structuredClone is a thing since a long time ago
       const userProfile = structuredClone(profile)
       userProfile.name = userProfile.name.replace('Default', 'User')
       userProfile.hash = uuid4()
diff --git a/src/views/ConfigurationLogsView.vue b/src/views/ConfigurationLogsView.vue
new file mode 100644
index 000000000..3013ecc95
--- /dev/null
+++ b/src/views/ConfigurationLogsView.vue
@@ -0,0 +1,23 @@
+<template>
+  <BaseConfigurationView>
+    <template #title>Logs configuration</template>
+    <template #content>
+      <h1 class="text-lg font-bold text-slate-600">Variables to be show in the overlay subtitles log:</h1>
+      <div class="flex w-[60%] flex-wrap">
+        <v-checkbox
+          v-for="variable in DatalogVariable"
+          :key="variable"
+          v-model="datalogger.selectedVariablesToShow.value"
+          :label="variable"
+          :value="variable"
+        ></v-checkbox>
+      </div>
+    </template>
+  </BaseConfigurationView>
+</template>
+
+<script setup lang="ts">
+import { datalogger, DatalogVariable } from '@/libs/logging'
+
+import BaseConfigurationView from './BaseConfigurationView.vue'
+</script>