diff --git a/bun.lockb b/bun.lockb
index 1c255576a8..1a09465dcd 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 29f572a404..8a7670f657 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "vue-draggable-plus": "^0.2.0-beta.2",
     "vue-router": "^4.0.14",
     "vue-virtual-scroller": "^2.0.0-beta.8",
-    "vuetify": "^3.1.13",
+    "vuetify": "3.4.7",
     "webfontloader": "^1.0.0",
     "webrtc-adapter": "^8.2.0"
   },
diff --git a/src/App.vue b/src/App.vue
index bb3959cc0d..46897caddf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -159,7 +159,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 { datalogger } from './libs/sensors-logging'
 import { useWidgetManagerStore } from './stores/widgetManager'
 
 const widgetStore = useWidgetManagerStore()
diff --git a/src/components/mini-widgets/DepthIndicator.vue b/src/components/mini-widgets/DepthIndicator.vue
index 8a31c0c69b..cec2201a94 100644
--- a/src/components/mini-widgets/DepthIndicator.vue
+++ b/src/components/mini-widgets/DepthIndicator.vue
@@ -17,7 +17,7 @@ import { useAverage } from '@vueuse/math'
 import { ref, watch } from 'vue'
 import { computed } from 'vue'
 
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 const store = useMainVehicleStore()
diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue
index 99898d9c14..4fa0399ce0 100644
--- a/src/components/mini-widgets/MiniVideoRecorder.vue
+++ b/src/components/mini-widgets/MiniVideoRecorder.vue
@@ -57,14 +57,13 @@ import { useMouseInElement, useTimestamp } from '@vueuse/core'
 import { format, intervalToDuration } from 'date-fns'
 import { saveAs } from 'file-saver'
 import fixWebmDuration from 'fix-webm-duration'
-import localforage from 'localforage'
 import { storeToRefs } from 'pinia'
 import Swal, { type SweetAlertResult } from 'sweetalert2'
 import { computed, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vue'
 import adapter from 'webrtc-adapter'
 
 import { WebRTCManager } from '@/composables/webRTC'
-import { datalogger } from '@/libs/logging'
+import { datalogger } from '@/libs/sensors-logging'
 import type { Stream } from '@/libs/webrtc/signalling_protocol'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
@@ -103,14 +102,6 @@ const isRecording = computed(() => {
   return mediaRecorder.value !== undefined && mediaRecorder.value.state === 'recording'
 })
 
-const cockpitVideoDB = localforage.createInstance({
-  driver: localforage.INDEXEDDB,
-  name: 'CockpitVideoDB',
-  storeName: 'cockpit-video-db',
-  version: 1.0,
-  description: 'Local backups of Cockpit video recordings to be retrieved in case of failure.',
-})
-
 onBeforeMount(async () => {
   // Set initial widget options if they don't exist
   if (Object.keys(miniWidget.value.options).length === 0) {
@@ -205,7 +196,7 @@ const startRecording = async (): Promise<SweetAlertResult | void> => {
   let chunks: Blob[] = []
   mediaRecorder.value.ondataavailable = async (e) => {
     chunks.push(e.data)
-    await cockpitVideoDB.setItem(fileName, chunks)
+    await videoStore.videoRecoveryDB.setItem(fileName, chunks)
   }
 
   mediaRecorder.value.onstop = () => {
@@ -216,7 +207,7 @@ const startRecording = async (): Promise<SweetAlertResult | void> => {
     fixWebmDuration(blob, Date.now() - timeRecordingStart.value.getTime()).then((fixedBlob) => {
       saveAs(fixedBlob, `${fileName}.webm`)
       saveAs(logBlob, `${fileName}.ass`)
-      cockpitVideoDB.removeItem(fileName)
+      videoStore.videoRecoveryDB.removeItem(fileName)
     })
     chunks = []
     mediaRecorder.value = undefined
diff --git a/src/components/mini-widgets/ModeSelector.vue b/src/components/mini-widgets/ModeSelector.vue
index e6f5ff6041..a4d13acfe3 100644
--- a/src/components/mini-widgets/ModeSelector.vue
+++ b/src/components/mini-widgets/ModeSelector.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 import Dropdown from '../Dropdown.vue'
diff --git a/src/components/mini-widgets/SatelliteIndicator.vue b/src/components/mini-widgets/SatelliteIndicator.vue
index e484baf7a9..88fb240375 100644
--- a/src/components/mini-widgets/SatelliteIndicator.vue
+++ b/src/components/mini-widgets/SatelliteIndicator.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 datalogger.registerUsage(DatalogVariable.gpsFixType)
diff --git a/src/components/widgets/Attitude.vue b/src/components/widgets/Attitude.vue
index 0c147c015a..ed62eff394 100644
--- a/src/components/widgets/Attitude.vue
+++ b/src/components/widgets/Attitude.vue
@@ -64,7 +64,7 @@ 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 { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { constrain, degrees, radians, resetCanvas, round } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'
diff --git a/src/components/widgets/Compass.vue b/src/components/widgets/Compass.vue
index 661746c286..bc7aa2bb8a 100644
--- a/src/components/widgets/Compass.vue
+++ b/src/components/widgets/Compass.vue
@@ -26,7 +26,7 @@ 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 { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { degrees, radians, resetCanvas, sequentialArray } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'
diff --git a/src/components/widgets/CompassHUD.vue b/src/components/widgets/CompassHUD.vue
index 44e0ed5c4a..d91889acbf 100644
--- a/src/components/widgets/CompassHUD.vue
+++ b/src/components/widgets/CompassHUD.vue
@@ -41,7 +41,7 @@ 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 { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { degrees, radians, resetCanvas } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'
diff --git a/src/components/widgets/DepthHUD.vue b/src/components/widgets/DepthHUD.vue
index 47121b71cd..eefe12a193 100644
--- a/src/components/widgets/DepthHUD.vue
+++ b/src/components/widgets/DepthHUD.vue
@@ -33,7 +33,7 @@ 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 { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { constrain, range, resetCanvas, round } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'
diff --git a/src/components/widgets/Map.vue b/src/components/widgets/Map.vue
index 1aa8fc7881..312b55fea8 100644
--- a/src/components/widgets/Map.vue
+++ b/src/components/widgets/Map.vue
@@ -116,7 +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 { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { degrees } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
diff --git a/src/components/widgets/VirtualHorizon.vue b/src/components/widgets/VirtualHorizon.vue
index 779410d3b3..1c4c356ccb 100644
--- a/src/components/widgets/VirtualHorizon.vue
+++ b/src/components/widgets/VirtualHorizon.vue
@@ -14,7 +14,7 @@ import { useElementSize } from '@vueuse/core'
 import gsap from 'gsap'
 import { computed, ref } from 'vue'
 
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { degrees, radians, resetCanvas } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
diff --git a/src/libs/logging.ts b/src/libs/sensors-logging.ts
similarity index 98%
rename from src/libs/logging.ts
rename to src/libs/sensors-logging.ts
index 7448440968..1dca0281ba 100644
--- a/src/libs/logging.ts
+++ b/src/libs/sensors-logging.ts
@@ -88,10 +88,10 @@ class DataLogger {
     const vehicleStore = useMainVehicleStore()
     const cockpitLogsDB = localforage.createInstance({
       driver: localforage.INDEXEDDB,
-      name: 'cockpitLogsDB',
-      storeName: 'cockpit-logs-db',
+      name: 'Cockpit - Sensor Logs',
+      storeName: 'cockpit-sensor-logs-db',
       version: 1.0,
-      description: 'Local backups of Cockpit logs to be retrieved in case of failure.',
+      description: 'Local backups of Cockpit sensor logs, to be retrieved in case of failure.',
     })
 
     const initialTime = new Date()
diff --git a/src/libs/system-logging.ts b/src/libs/system-logging.ts
new file mode 100644
index 0000000000..4f48e07d02
--- /dev/null
+++ b/src/libs/system-logging.ts
@@ -0,0 +1,75 @@
+import { format } from 'date-fns'
+import localforage from 'localforage'
+
+export const cockpitSytemLogsDB = localforage.createInstance({
+  driver: localforage.INDEXEDDB,
+  name: 'Cockpit - System Logs',
+  storeName: 'cockpit-system-logs-db',
+  version: 1.0,
+  description: 'Local backups of Cockpit system logs, to be retrieved in case of failure.',
+})
+
+const initialTime = new Date()
+const fileName = `Cockpit (${format(initialTime, 'LLL dd, yyyy - HH꞉mm꞉ss O')}).syslog`
+
+/* eslint-disable jsdoc/require-jsdoc */
+type LogEvent = {
+  epoch: number
+  level: string
+  msg: string
+}
+
+const initialDatetime = new Date()
+export interface SystemLog {
+  initialDate: string
+  initialTime: string
+  events: LogEvent[]
+}
+
+const currentSystemLog: SystemLog = {
+  initialDate: format(initialDatetime, 'LLL dd, yyyy'),
+  initialTime: format(initialDatetime, 'HH꞉mm꞉ss O'),
+  events: [],
+}
+/* eslint-enable jsdoc/require-jsdoc */
+
+const saveLogEventInDB = (event: LogEvent): void => {
+  currentSystemLog.events.push(event)
+  cockpitSytemLogsDB.setItem(fileName, currentSystemLog)
+}
+
+const oldConsoleError = window.console.error
+window.console.error = (o) => {
+  oldConsoleError(o)
+  saveLogEventInDB({ epoch: new Date().getTime(), level: 'error', msg: o })
+}
+
+const oldConsoleWarn = window.console.warn
+window.console.warn = (o) => {
+  oldConsoleWarn(o)
+  saveLogEventInDB({ epoch: new Date().getTime(), level: 'warn', msg: o })
+}
+
+const oldConsoleInfo = window.console.info
+window.console.info = (o) => {
+  oldConsoleInfo(o)
+  saveLogEventInDB({ epoch: new Date().getTime(), level: 'info', msg: o })
+}
+
+const oldConsoleDebug = window.console.debug
+window.console.debug = (o) => {
+  oldConsoleDebug(o)
+  saveLogEventInDB({ epoch: new Date().getTime(), level: 'debug', msg: o })
+}
+
+const oldConsoleTrace = window.console.trace
+window.console.trace = (o) => {
+  oldConsoleTrace(o)
+  saveLogEventInDB({ epoch: new Date().getTime(), level: 'trace', msg: o })
+}
+
+const oldConsoleLog = window.console.log
+window.console.log = (o) => {
+  oldConsoleLog(o)
+  saveLogEventInDB({ epoch: new Date().getTime(), level: 'Log', msg: o })
+}
diff --git a/src/main.ts b/src/main.ts
index 27962569a8..a5285836bf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import 'floating-vue/dist/style.css'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import '@/libs/system-logging'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { far } from '@fortawesome/free-regular-svg-icons'
diff --git a/src/stores/video.ts b/src/stores/video.ts
index 1f9d5960e3..5e27738467 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -10,15 +10,15 @@ export const useVideoStore = defineStore('video', () => {
   const allowedIceIps = useStorage<string[]>('cockpit-allowed-stream-ips', [])
 
   // Offer download of backuped videos
-  const cockpitVideoDB = localforage.createInstance({
+  const videoRecoveryDB = localforage.createInstance({
     driver: localforage.INDEXEDDB,
-    name: 'CockpitVideoDB',
-    storeName: 'cockpit-video-db',
+    name: 'Cockpit - Video Recovery',
+    storeName: 'cockpit-video-recovery-db',
     version: 1.0,
     description: 'Local backups of Cockpit video recordings to be retrieved in case of failure.',
   })
 
-  cockpitVideoDB.length().then((len) => {
+  videoRecoveryDB.length().then((len) => {
     if (len === 0) return
 
     Swal.fire({
@@ -37,13 +37,13 @@ export const useVideoStore = defineStore('video', () => {
     }).then((decision) => {
       if (decision.isDismissed) return
       if (decision.isDenied) {
-        cockpitVideoDB.iterate((_, videoName) => cockpitVideoDB.removeItem(videoName))
+        videoRecoveryDB.iterate((_, videoName) => videoRecoveryDB.removeItem(videoName))
       } else if (decision.isConfirmed) {
-        cockpitVideoDB.iterate((videoFile, videoName) => {
+        videoRecoveryDB.iterate((videoFile, videoName) => {
           const blob = (videoFile as Blob[]).reduce((a, b) => new Blob([a, b], { type: 'video/webm' }))
           saveAs(blob, videoName)
         })
-        cockpitVideoDB.iterate((_, videoName) => cockpitVideoDB.removeItem(videoName))
+        videoRecoveryDB.iterate((_, videoName) => videoRecoveryDB.removeItem(videoName))
       }
     })
   })
@@ -58,7 +58,7 @@ export const useVideoStore = defineStore('video', () => {
     if (availableIceIps.value.length >= 1) {
       Swal.fire({
         html: `
-          <p>Cockpit detected more than one IP address being used to route the video streaming. This often 
+          <p>Cockpit detected more than one IP address being used to route the video streaming. This often
           leads to video stuttering, especially if one of the IPs is from a non-wired connection.</p>
           </br>
           <p>To prevent issues and achieve an optimal streaming experience, please:</p>
@@ -76,5 +76,5 @@ export const useVideoStore = defineStore('video', () => {
     }
   }, 5000)
 
-  return { availableIceIps, allowedIceIps }
+  return { availableIceIps, allowedIceIps, videoRecoveryDB }
 })
diff --git a/src/views/ConfigurationDevelopmentView.vue b/src/views/ConfigurationDevelopmentView.vue
index 60c25b6498..57b6472711 100644
--- a/src/views/ConfigurationDevelopmentView.vue
+++ b/src/views/ConfigurationDevelopmentView.vue
@@ -13,14 +13,63 @@
         step="1"
         thumb-label="always"
       />
+      <v-data-table :items="systemLogsData" :headers="headers" class="max-w-[80%] max-h-[60%]">
+        <template #item.actions="{ item }">
+          <div class="text-center cursor-pointer icon-btn mdi mdi-download" @click="downloadLog(item.name)" />
+        </template>
+      </v-data-table>
     </template>
   </BaseConfigurationView>
 </template>
 
 <script setup lang="ts">
+// @ts-nocheck
+// TODO:  As of now Vuetify does not export the necessary types for VDataTable, so we can't fix the type error.
+
+import { saveAs } from 'file-saver'
+import { onBeforeMount } from 'vue'
+import { ref } from 'vue'
+
+import { type SystemLog, cockpitSytemLogsDB } from '@/libs/system-logging'
 import { useDevelopmentStore } from '@/stores/development'
 
 import BaseConfigurationView from './BaseConfigurationView.vue'
-
 const devStore = useDevelopmentStore()
+
+/* eslint-disable jsdoc/require-jsdoc */
+interface SystemLogsData {
+  name: string
+  initialTime: string
+  initialDate: string
+  nEvents: number
+}
+/* eslint-enable jsdoc/require-jsdoc */
+
+const systemLogsData = ref<SystemLogsData[]>([])
+
+const headers = [
+  { title: 'Name', value: 'name' },
+  { title: 'Time (initial)', value: 'initialTime' },
+  { title: 'Date (initial)', value: 'initialDate' },
+  { title: 'N. events', value: 'nEvents' },
+  { title: 'Download', value: 'actions' },
+]
+
+onBeforeMount(async () => {
+  await cockpitSytemLogsDB.iterate((log: SystemLog, logName) => {
+    systemLogsData.value.push({
+      name: logName,
+      initialTime: log.initialTime,
+      initialDate: log.initialDate,
+      nEvents: log.events.length,
+    })
+  })
+})
+
+const downloadLog = async (logName: string): Promise<void> => {
+  const log = await cockpitSytemLogsDB.getItem(logName)
+  const logParts = JSON.stringify(log, null, 2)
+  const logBlob = new Blob([logParts], { type: 'application/json' })
+  saveAs(logBlob, logName)
+}
 </script>
diff --git a/src/views/ConfigurationLogsView.vue b/src/views/ConfigurationLogsView.vue
index 3013ecc954..38955329ae 100644
--- a/src/views/ConfigurationLogsView.vue
+++ b/src/views/ConfigurationLogsView.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { datalogger, DatalogVariable } from '@/libs/logging'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 
 import BaseConfigurationView from './BaseConfigurationView.vue'
 </script>