diff --git a/bun.lockb b/bun.lockb
index d4cedea3a..8c4ad81da 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index fc2ee6586..7314d835c 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "deploy:electron:dir": "electron-builder --dir",
     "deploy:electron": "electron-builder --publish=never",
     "deploy:flatpak": "electron-builder --x64 --linux flatpak",
-    "dev": "vite",
+    "dev": "vite --host",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore --max-warnings=0",
     "preview": "vite preview --port 5050",
     "serve": "vite preview",
@@ -24,6 +24,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@iconify/vue": "^4.1.2",
     "@j2only/slide-unlock": "^0.5.5",
     "@mdi/font": "^7.0.96",
     "@mdi/js": "^7.2.96",
diff --git a/src/App.vue b/src/App.vue
index 6a7e549c9..fdb2b2c87 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,52 +1,160 @@
 <template>
   <v-app>
     <v-main>
-      <Dialog v-model:show="showMainMenu">
-        <div class="flex flex-col items-center justify-around">
-          <v-btn
-            v-if="route.name === 'widgets-view'"
-            prepend-icon="mdi-pencil"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            @click="widgetStore.editingMode = !widgetStore.editingMode"
-          >
-            Edit mode
-          </v-btn>
-          <v-btn
-            v-if="route.name !== 'widgets-view'"
-            prepend-icon="mdi-send"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            to="/"
-          >
-            Flight
-          </v-btn>
-          <v-btn
-            v-if="route.name !== 'Mission planning'"
-            prepend-icon="mdi-map-marker-radius"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            to="/mission-planning"
-          >
-            Mission planning
-          </v-btn>
-          <v-btn
-            prepend-icon="mdi-cog"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            @click="showConfigurationMenu = true"
-          >
-            Configuration
-          </v-btn>
-          <v-btn
-            :prepend-icon="fullScreenToggleIcon"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            @click="toggleFullscreen"
-          >
-            {{ isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen' }}
-          </v-btn>
+      <transition name="slide-in-left">
+        <div
+          v-if="showMainMenu"
+          ref="mainMenu"
+          class="left-menu slide-in elevation-10"
+          :style="simplifiedMainMenu ? { width: '45px', borderRadius: '0 10px 10px 0' } : mainMenuWidth"
+        >
+          <v-window v-model="mainMenuStep" class="h-full w-full">
+            <v-window-item :value="1" class="h-full">
+              <div
+                class="flex flex-col h-full justify-between align-center items-center select-none"
+                :class="
+                  interfaceStore.isOnSmallScreen
+                    ? 'gap-y-2 pt-2 pb-3 sm:gap-y-1 sm:py-0 sm:-ml-[3px] xs:gap-y-1 xs:py-0 xs:-ml-[3px]'
+                    : 'lg:gap-y-4 xl:gap-y-5 gap-y-6 py-6'
+                "
+              >
+                <GlassButton
+                  v-if="route.name === 'widgets-view'"
+                  :label="simplifiedMainMenu ? '' : 'Edit Mode'"
+                  :selected="widgetStore.editingMode"
+                  :label-class="menuLabelSize"
+                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  :tooltip="simplifiedMainMenu ? 'Edit Mode' : undefined"
+                  :width="buttonSize"
+                  icon="mdi-pencil"
+                  :icon-size="simplifiedMainMenu ? 25 : undefined"
+                  :disabled="false"
+                  @click="
+                    () => {
+                      widgetStore.editingMode = !widgetStore.editingMode
+                      closeMainMenu()
+                    }
+                  "
+                />
+                <GlassButton
+                  v-if="route.name !== 'widgets-view'"
+                  :label="simplifiedMainMenu ? '' : 'Flight'"
+                  :label-class="menuLabelSize"
+                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  :tooltip="simplifiedMainMenu ? 'Flight' : undefined"
+                  :width="buttonSize"
+                  icon="mdi-send"
+                  :icon-size="simplifiedMainMenu ? 25 : undefined"
+                  :disabled="false"
+                  :selected="$route.name === 'Flight'"
+                  @click="
+                    () => {
+                      $router.push('/')
+                      closeMainMenu()
+                    }
+                  "
+                />
+                <GlassButton
+                  v-if="route.name !== 'Mission planning'"
+                  :label="simplifiedMainMenu ? '' : 'Mission Planning'"
+                  :label-class="menuLabelSize"
+                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  :tooltip="simplifiedMainMenu ? 'Mission Planning' : undefined"
+                  icon="mdi-map-marker-radius-outline"
+                  :icon-size="simplifiedMainMenu ? 25 : undefined"
+                  :width="buttonSize"
+                  :disabled="false"
+                  :selected="$route.name === 'Mission planning'"
+                  @click="
+                    () => {
+                      $router.push('/mission-planning')
+                      closeMainMenu()
+                    }
+                  "
+                />
+                <GlassButton
+                  :label="simplifiedMainMenu ? '' : 'Settings'"
+                  :label-class="menuLabelSize"
+                  icon="mdi-cog-outline"
+                  :icon-size="simplifiedMainMenu ? 25 : undefined"
+                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  :tooltip="simplifiedMainMenu ? 'Configuration' : undefined"
+                  :button-class="!simplifiedMainMenu ? '-mt-1' : undefined"
+                  :width="buttonSize"
+                  :disabled="false"
+                  :selected="showConfigurationMenu"
+                  @click="mainMenuStep = 2"
+                />
+                <GlassButton
+                  :label="simplifiedMainMenu ? '' : isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'"
+                  :label-class="menuLabelSize"
+                  :icon="fullScreenToggleIcon"
+                  :icon-size="simplifiedMainMenu ? 25 : undefined"
+                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  :tooltip="simplifiedMainMenu ? (isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen') : undefined"
+                  :button-class="simplifiedMainMenu ? '-mb-2' : ''"
+                  :width="buttonSize"
+                  :disabled="false"
+                  :selected="false"
+                  @click="
+                    () => {
+                      toggleFullscreen()
+                      closeMainMenu()
+                    }
+                  "
+                />
+              </div>
+            </v-window-item>
+            <v-window-item :value="2" class="h-full w-full">
+              <div
+                class="flex flex-col w-full h-full justify-between"
+                :class="simplifiedMainMenu ? 'py-0 gap-y-0' : 'py-2 gap-y-1'"
+              >
+                <GlassButton
+                  v-for="menuitem in configMenu"
+                  :key="menuitem.title"
+                  :label="interfaceStore.isOnSmallScreen ? undefined : menuitem.title"
+                  :label-class="menuLabelSize"
+                  :button-class="interfaceStore.isOnSmallScreen ? 'mt-1 -ml-[3px]' : undefined"
+                  :icon="menuitem.icon"
+                  :selected="currentConfigMenuComponent === menuitem.component"
+                  variant="uncontained"
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                  @click="toggleConfigComponent(menuitem.component)"
+                  ><template #content
+                    ><div v-if="currentConfigMenuComponent === menuitem.component" class="arrow-left"></div></template
+                ></GlassButton>
+                <div class="flex flex-col justify-center align-center">
+                  <v-divider width="70%" class="mb-3" />
+                  <GlassButton
+                    :label-class="menuLabelSize"
+                    icon="mdi-arrow-left"
+                    icon-class="lg:-ml-[1px] md:-mt-[1px] -ml-[2px]"
+                    :button-class="interfaceStore.isOnSmallScreen ? (simplifiedMainMenu ? '-mt-1' : 'mt-1') : undefined"
+                    variant="round"
+                    :width="buttonSize / 2.4"
+                    :disabled="false"
+                    :selected="false"
+                    @click="
+                      () => {
+                        mainMenuStep = 1
+                        currentConfigMenuComponent = null
+                      }
+                    "
+                  />
+                </div>
+              </div>
+            </v-window-item>
+          </v-window>
         </div>
-      </Dialog>
+      </transition>
+
       <teleport to="body">
-        <v-dialog v-model="showConfigurationMenu" transition="dialog-bottom-transition" width="100%" height="100%">
-          <ConfigurationMenu />
-        </v-dialog>
+        <GlassModal :is-visible="currentConfigMenuComponent !== null && mainMenuStep !== 1" position="menuitem"
+          ><component :is="currentConfigMenuComponent"></component
+        ></GlassModal>
       </teleport>
 
       <teleport to="body">
@@ -72,7 +180,7 @@
           <div id="mainTopBar" class="bar top-bar">
             <button
               class="flex items-center justify-center h-full aspect-square top-bar-hamburger"
-              @click="openMainMenu()"
+              @click="toggleMainMenu"
             >
               <span class="text-3xl transition-all mdi mdi-menu text-slate-300 hover:text-slate-50" />
             </button>
@@ -143,17 +251,11 @@
 import { onClickOutside, useDebounceFn, useFullscreen, useTimestamp } from '@vueuse/core'
 import { format } from 'date-fns'
 import Swal from 'sweetalert2'
-import {
-  // type AsyncComponentLoader,
-  computed,
-  onBeforeUnmount,
-  // defineAsyncComponent,
-  ref,
-  watch,
-} from 'vue'
+import { computed, DefineComponent, markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-import ConfigurationMenu from '@/components/ConfigurationMenu.vue'
+import GlassModal from '@/components/GlassModal.vue'
+import { useInteractionDialog } from '@/composables/interactionDialog'
 import { coolMissionNames } from '@/libs/funny-name/words'
 import {
   availableCockpitActions,
@@ -163,54 +265,226 @@ import {
 import { useMissionStore } from '@/stores/mission'
 
 import AltitudeSlider from './components/AltitudeSlider.vue'
-import Dialog from './components/Dialog.vue'
 import EditMenu from './components/EditMenu.vue'
+import GlassButton from './components/GlassButton.vue'
 import MiniWidgetContainer from './components/MiniWidgetContainer.vue'
 import SlideToConfirm from './components/SlideToConfirm.vue'
 import Alerter from './components/widgets/Alerter.vue'
 import { datalogger } from './libs/sensors-logging'
+import { useAppInterfaceStore } from './stores/appInterface'
 import { useMainVehicleStore } from './stores/mainVehicle'
 import { useWidgetManagerStore } from './stores/widgetManager'
+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 ConfigurationTelemetryView from './views/ConfigurationLogsView.vue'
+import ConfigurationMissionView from './views/ConfigurationMissionView.vue'
+import ConfigurationVideoView from './views/ConfigurationVideoView.vue'
+
+const { showDialog, closeDialog } = useInteractionDialog()
 
 const widgetStore = useWidgetManagerStore()
 const vehicleStore = useMainVehicleStore()
+const interfaceStore = useAppInterfaceStore()
 
 const showConfigurationMenu = ref(false)
+type ConfigComponent = DefineComponent<Record<string, never>, Record<string, never>, unknown> | null
+const currentConfigMenuComponent = ref<ConfigComponent>(null)
 
 // Main menu
 const showMainMenu = ref(false)
+const isMenuOpen = ref(false)
+const isSlidingOut = ref(false)
+const mainMenuStep = ref(1)
+const simplifiedMainMenu = ref(false)
+const windowHeight = ref(window.innerHeight)
+
+const configMenu = [
+  {
+    icon: 'mdi-view-dashboard-variant',
+    title: 'General',
+    component: markRaw(ConfigurationGeneralView) as ConfigComponent,
+  },
+  {
+    icon: 'mdi-controller',
+    title: 'Joystick',
+    component: markRaw(ConfigurationJoystickView) as ConfigComponent,
+  },
+  {
+    icon: 'mdi-video',
+    title: 'Video',
+    component: markRaw(ConfigurationVideoView) as ConfigComponent,
+  },
+  {
+    icon: 'mdi-subtitles-outline',
+    title: 'Telemetry',
+    component: markRaw(ConfigurationTelemetryView) as ConfigComponent,
+  },
+  {
+    icon: 'mdi-alert-rhombus-outline',
+    title: 'Alerts',
+    component: markRaw(ConfigurationAlertsView) as ConfigComponent,
+  },
+  {
+    icon: 'mdi-dev-to',
+    title: 'Dev',
+    component: markRaw(ConfigurationDevelopmentView) as ConfigComponent,
+  },
+  {
+    icon: 'mdi-map-marker-path',
+    title: 'Mission',
+    component: markRaw(ConfigurationMissionView) as ConfigComponent,
+  },
+]
+
+const toggleConfigComponent = (component: ConfigComponent): void => {
+  if (currentConfigMenuComponent.value === null) {
+    currentConfigMenuComponent.value = component
+    return
+  }
+  if (currentConfigMenuComponent.value === component) {
+    currentConfigMenuComponent.value = null
+    return
+  }
+  currentConfigMenuComponent.value = component
+}
+
+watch(
+  () => windowHeight.value < 450,
+  (isSmall: boolean) => {
+    simplifiedMainMenu.value = isSmall
+  }
+)
+
+const updateWindowHeight = (): void => {
+  windowHeight.value = window.innerHeight
+}
+
+onMounted(() => {
+  window.addEventListener('resize', updateWindowHeight)
+  if (windowHeight.value < 450) {
+    simplifiedMainMenu.value = true
+  }
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateWindowHeight)
+})
+
+const mainMenuWidth = computed(() => {
+  const width =
+    interfaceStore.isOnSmallScreen && mainMenuStep.value === 2 ? '60px' : `${interfaceStore.mainMenuWidth}px`
+  return { width }
+})
+
+let requestDisarmConfirmationPopup = false
+
+const toggleMainMenu = (): void => {
+  if (isMenuOpen.value === true) {
+    closeMainMenu()
+  } else {
+    openMainMenu()
+  }
+}
 
 // When a isVehicleArmed change its value a watcher call Swal.close, this flag is
 // used to avoid closing others Swal instances instead of the one intended
-let requestDisarmConfirmationPopup = false
 const openMainMenu = (): void => {
-  if (!vehicleStore.isArmed) {
+  if (vehicleStore.isArmed) {
+    showDialog({
+      title: 'Be careful',
+      maxWidth: '650px',
+      message: 'The vehicle is currently armed and it is not recommended to open the main menu.',
+      actions: [
+        {
+          text: 'Continue anyway',
+          action: () => {
+            showMainMenu.value = true
+            isMenuOpen.value = true
+            closeDialog()
+          },
+        },
+        {
+          text: 'Disarm vehicle',
+          action: () => {
+            disarmVehicle()
+          },
+        },
+      ],
+      variant: 'warning',
+    }).then((result) => {
+      if (result.isConfirmed && vehicleStore.isArmed) {
+        vehicleStore.disarm().then(() => {
+          showMainMenu.value = true
+          isMenuOpen.value = true
+        })
+      } else {
+        showMainMenu.value = true
+        isMenuOpen.value = true
+      }
+      requestDisarmConfirmationPopup = false
+    })
+  } else {
     showMainMenu.value = true
-    return
+    isMenuOpen.value = true
   }
+}
 
-  requestDisarmConfirmationPopup = true
-  Swal.fire({
-    title: 'Be careful',
-    text: 'The vehicle is currently armed, it is not recommended to open the main menu.',
-    icon: 'warning',
-    showCancelButton: true,
-    showConfirmButton: true,
-    cancelButtonText: 'Continue anyway',
-    confirmButtonText: 'Disarm vehicle',
-  }).then((result) => {
-    // Opens the main menu only after disarming by the slider is confirmed
-    if (result.isConfirmed && vehicleStore.isArmed) {
-      vehicleStore.disarm().then(() => {
-        showMainMenu.value = true
-      })
-    } else if (result.dismiss === Swal.DismissReason.cancel) {
-      showMainMenu.value = true
-    }
-    requestDisarmConfirmationPopup = false
+// Close Main Menu Logic
+const closeMainMenu = (): void => {
+  isSlidingOut.value = true
+  setTimeout(() => {
+    showMainMenu.value = false
+    isSlidingOut.value = false
+    isMenuOpen.value = false
+    mainMenuStep.value = 1
+    currentConfigMenuComponent.value = null
+  }, 20)
+}
+
+const disarmVehicle = (): void => {
+  vehicleStore.disarm().then(() => {
+    showMainMenu.value = true
   })
+  closeDialog()
 }
 
+const handleEscKey = (event: KeyboardEvent): void => {
+  if (event.key === 'Escape' && showMainMenu.value) {
+    closeMainMenu()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleEscKey)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleEscKey)
+})
+
+const buttonSize = computed(() => {
+  if (interfaceStore.is2xl) return 60
+  if (interfaceStore.isXl) return 55
+  if (interfaceStore.isLg) return 50
+  if (interfaceStore.isMd) return 45
+  if (interfaceStore.isSm && windowHeight.value > 700) return 50
+  if (interfaceStore.isSm && windowHeight.value < 700) return 40
+  if (interfaceStore.isXs && windowHeight.value >= 700) return 50
+  return 40
+})
+
+const menuLabelSize = computed(() => {
+  if (interfaceStore.is2xl) return 'text-[15px]'
+  if (interfaceStore.isXl) return 'text-[14px]'
+  if (interfaceStore.isLg) return 'text-[13px]'
+  if (interfaceStore.isMd) return 'text-[12px]'
+  if (interfaceStore.isSm) return 'text-[10px]'
+  if (interfaceStore.isXs && windowHeight.value >= 700) return 'text-[12px]'
+  return 'text-[10px]'
+})
+
 const isVehicleArmed = computed(() => vehicleStore.isArmed)
 watch(isVehicleArmed, (isArmed) => {
   if (requestDisarmConfirmationPopup && !isArmed) {
@@ -219,7 +493,11 @@ watch(isVehicleArmed, (isArmed) => {
 })
 
 const mainMenu = ref()
-onClickOutside(mainMenu, () => (showMainMenu.value = false))
+onClickOutside(mainMenu, () => {
+  if (mainMenuStep.value === 1) {
+    closeMainMenu()
+  }
+})
 
 const route = useRoute()
 const routerSection = ref()
@@ -276,7 +554,6 @@ onBeforeUnmount(() => unregisterActionCallback(bottomBarToggleCallbackId))
 datalogger.startLogging()
 
 // Dynamic styles
-
 const currentTopBarHeightPixels = computed(() => `${widgetStore.currentTopBarHeightPixels}px`)
 const currentBottomBarHeightPixels = computed(() => `${widgetStore.currentBottomBarHeightPixels}px`)
 </script>
@@ -287,14 +564,60 @@ body {
   /* Removes the scrollbar */
   overflow: hidden !important;
 }
+
 body.hide-cursor {
   cursor: none;
 }
+
+.left-menu {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 0 20px 20px 0;
+  border: 1px #cbcbcb33 solid;
+  border-left: none;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  background-color: #4f4f4f33;
+  backdrop-filter: blur(15px);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%) translateY(-50%);
+  }
+  to {
+    transform: translateX(0) translateY(-50%);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0) translateY(-50%);
+  }
+  to {
+    transform: translateX(-100%) translateY(-50%);
+  }
+}
+
+.slide-in-left-enter-active {
+  animation: slideInLeft 300ms ease forwards;
+}
+
+.slide-in-left-leave-active {
+  animation: slideOutLeft 300ms ease forwards;
+}
+
 .router-view {
   width: 100%;
   height: 100%;
   position: relative;
 }
+
 .main-view {
   transition: all 0.2s;
   width: 100%;
@@ -303,11 +626,13 @@ body.hide-cursor {
   right: 0%;
   top: 0%;
 }
+
 .main-view.edit-mode {
   transform: scale(0.8);
   right: -10%;
   top: -10%;
 }
+
 .swal2-container {
   z-index: 10000;
 }
@@ -316,11 +641,13 @@ body.hide-cursor {
 .fade-leave-active {
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
+
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
   transform: translate(0, 100px);
 }
+
 .bottom-container {
   position: absolute;
   bottom: v-bind('currentBottomBarHeightPixels');
@@ -328,7 +655,7 @@ body.hide-cursor {
   display: flex;
   flex-direction: column;
   align-items: center;
-  z-index: 60; /* Adjust z-index as needed */
+  z-index: 60;
 }
 
 .bar {
diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index 155a4670c..8320c586c 100644
--- a/src/components/EditMenu.vue
+++ b/src/components/EditMenu.vue
@@ -8,7 +8,13 @@
       class="absolute text-2xl transition-all cursor-pointer text-slate-500 aspect-square mdi mdi-close hover:text-slate-300 left-2 top-2"
       @click="emit('update:editMode', false)"
     />
-    <p class="flex items-center justify-center mt-10 text-xl font-semibold select-none">Edit interface</p>
+    <div class="flex items-center justify-center mt-10 text-xl font-semibold select-none">
+      <p>Edit interface</p>
+      <div
+        class="absolute !bg-slate-600 right-2 icon-btn mdi mdi-dots-vertical"
+        @click.stop="editMenuDialogRevealed = true"
+      />
+    </div>
     <div class="w-full h-px my-2 sm bg-slate-800/40" />
     <div class="flex flex-col items-center justify-center w-full px-2 shrink overflow-y-clip h-[35%]">
       <p class="mb-3 text-lg font-semibold select-none">Profiles</p>
@@ -282,6 +288,15 @@
       </v-card>
     </v-dialog>
   </teleport>
+  <teleport to="body">
+    <v-dialog v-model="editMenuDialogRevealed" width="20rem">
+      <v-card class="pa-2">
+        <v-card-text>
+          <v-switch v-model="store.snapToGrid" label="Snap to grid" class="m-2 text-slate-800" />
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </teleport>
 </template>
 
 <script setup lang="ts">
@@ -339,6 +354,9 @@ const widgetAddMenuGroupOptions = {
 
 const editMode = toRefs(props).editMode
 
+const editMenuDialogRevealed = ref(false)
+useConfirmDialog(editMenuDialogRevealed)
+
 const viewBeingRenamed = ref(store.currentView)
 const newViewName = ref('')
 const viewRenameDialogRevealed = ref(false)
diff --git a/src/components/ExpansiblePanel.vue b/src/components/ExpansiblePanel.vue
new file mode 100644
index 000000000..44ecb5752
--- /dev/null
+++ b/src/components/ExpansiblePanel.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="bg-transparent text-white w-full">
+    <div class="flex flex-col align-start">
+      <v-divider v-if="!noTopDivider" centered class="opacity-10 border-[#fafafa] w-full" />
+      <div
+        class="flex flex-row align-center gap-x-[3vw] py-[1.5vh] cursor-pointer"
+        :class="isPanelExpanded ? 'pt-[2.5vh]' : undefined"
+        @click="togglePanel"
+      >
+        <v-icon :size="24" :icon="isPanelExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
+        <div class="flex flex-col">
+          <div class="font-semibold" :class="interfaceStore.isOnSmallScreen ? 'text-[14px]' : 'text-[18px]'">
+            <slot name="title" />
+          </div>
+          <div class="font-normal" :class="interfaceStore.isOnSmallScreen ? 'text-[10px]' : 'text-[14px]'">
+            <slot name="subtitle" />
+          </div>
+        </div>
+      </div>
+      <v-divider v-if="!isPanelExpanded && !noBottomDivider" class="opacity-10 border-[#fafafa] w-full" />
+    </div>
+    <transition name="expand" @before-enter="beforeEnter" @enter="enter" @leave="leave">
+      <div v-show="isPanelExpanded" ref="content" class="overflow-hidden">
+        <slot name="content"></slot>
+        <v-divider v-if="!noBottomDivider" centered class="opacity-10 border-[#fafafa] w-full" />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref } from 'vue'
+
+import { useAppInterfaceStore } from '@/stores/appInterface'
+
+const interfaceStore = useAppInterfaceStore()
+
+const props = defineProps<{
+  /**
+   *
+   */
+  noTopDivider?: boolean
+  /**
+   *
+   */
+  noBottomDivider?: boolean
+  /**
+   *
+   */
+  isExpanded?: boolean
+}>()
+
+const isPanelExpanded = ref(props.isExpanded ?? false)
+const noTopDivider = ref(props.noTopDivider ?? false)
+const noBottomDivider = ref(props.noBottomDivider ?? false)
+
+const togglePanel = (): void => {
+  isPanelExpanded.value = !isPanelExpanded.value
+}
+
+const beforeEnter = (el: Element): void => {
+  const element = el as HTMLElement
+  element.style.height = '0'
+}
+
+const enter = (el: Element): void => {
+  const element = el as HTMLElement
+  nextTick(() => {
+    element.style.height = element.scrollHeight + 'px'
+  })
+}
+
+const leave = (el: Element): void => {
+  const element = el as HTMLElement
+  element.style.height = element.scrollHeight + 'px'
+  nextTick(() => {
+    element.style.height = '0'
+  })
+}
+</script>
+
+<style scoped>
+.expand-enter-active,
+.expand-leave-active {
+  transition: height 0.3s ease;
+}
+.expand-enter,
+.expand-leave-to {
+  height: 0;
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/GlassButton.vue b/src/components/GlassButton.vue
new file mode 100644
index 000000000..32f4954a9
--- /dev/null
+++ b/src/components/GlassButton.vue
@@ -0,0 +1,169 @@
+<template>
+  <div
+    class="flex flex-col items-center 2xl:gap-y-1 xl: gap-y-1 py-2"
+    :class="[
+      isUncontained && !isSelected ? (isNoEffects ? '' : 'mark-on-hover') : '',
+      isSelected === true ? 'frosted-button-selected' : '',
+      isDisabled ? 'opacity-[0.4] cursor-default' : 'opacity-100 cursor-pointer',
+    ]"
+  >
+    <button
+      :disabled="isDisabled"
+      class="flex items-center justify-center"
+      :class="[
+        isUncontained ? 'no-glass' : 'frosted-button',
+        { 'frosted-button-disabled': isDisabled, 'rounded-full': isRound },
+        buttonClass,
+      ]"
+      :style="{ width: buttonStyle.width.toString() + 'px', height: buttonStyle.height.toString() + 'px' }"
+    >
+      <template v-if="tooltip">
+        <v-tooltip open-delay="600" activator="parent" location="top">
+          {{ tooltip }}
+        </v-tooltip>
+      </template>
+      <Icon
+        v-if="isRound || isUncontained"
+        :icon="icon || ''"
+        :width="props.iconSize || calculatedIconSize"
+        :class="[iconClass, interfaceStore.isOnSmallScreen ? '-mr-[2px] -mb-[1px]' : '-mr-[1px]']"
+        class="lg:-mr-[2px]"
+      />
+      <div v-else class="flex items-center align-center justify-center w-full h-full">
+        <Icon :icon="icon || ''" :width="props.iconSize || calculatedIconSize" :class="iconClass" />
+        <div class="text-white select-none" :class="labelClass">
+          {{ label }}
+        </div>
+      </div>
+    </button>
+    <div
+      v-if="isRound || isUncontained"
+      class="flex justify-center align-center text-center select-none text-white px-4 font-semibold 2xl:mt-2 xl:mt-1 lg:mt-0 md:mt-0 sm:-mt-1 mt-1"
+      :class="labelClass"
+    >
+      {{ label }}
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { Icon, IconifyIcon } from '@iconify/vue'
+import { computed } from 'vue'
+
+import { useAppInterfaceStore } from '@/stores/appInterface'
+
+const interfaceStore = useAppInterfaceStore()
+
+const props = defineProps<{
+  /**
+   * The text label displayed on the button (rectangular variant) or under the button (round).
+   */
+  label?: string
+  /**
+   * Additional Tailwind classes for the label.
+   */
+  labelClass?: string
+  /**
+   * The icon to display in the button (prepend on rectangular, centered on round).
+   */
+  icon?: string | IconifyIcon
+  /**
+   * Additional Tailwind classes for the icon.
+   */
+  iconClass?: string
+  /**
+   * The size of the icon.
+   */
+  iconSize?: number
+  /**
+   * Additional Tailwind classes for the button.
+   */
+  buttonClass?: string
+  /**
+   * Whether the button is disabled.
+   */
+  disabled?: boolean
+  /**
+   * The tooltip text displayed on hover.
+   */
+  tooltip?: string
+  /**
+   * Visual feedback for the button when toggled selected.
+   */
+  selected?: boolean
+  /**
+   * The shape of the button.
+   */
+  variant?: 'round' | 'rectangular' | 'uncontained'
+  /**
+   * The width of the button (when round, this is the only size nedded).
+   */
+  width?: number
+  /**
+   * The height of the button.
+   */
+  height?: number
+  /**
+   * No effects on hover.
+   */
+  noEffects?: boolean
+}>()
+
+const label = computed(() => props.label)
+const icon = computed(() => props.icon)
+const isDisabled = computed(() => props.disabled)
+const tooltip = computed(() => props.tooltip)
+const isSelected = computed(() => props.selected)
+const isRound = computed(() => props.variant === 'round')
+const isUncontained = computed(() => props.variant === 'uncontained')
+const calculatedIconSize = computed(() => (isRound.value ? (props.width || 26) * 0.666 : props.iconSize))
+const iconClass = computed(() => props.iconClass)
+const isNoEffects = computed(() => props.noEffects)
+
+const buttonStyle = computed(() => ({
+  width: props.width || (props.iconSize || 24) * 1.1,
+  height: (isRound.value ? props.width : props.height) || (props.iconSize || 24) * 1.1,
+}))
+</script>
+
+<style scoped>
+.frosted-button {
+  background-color: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  color: white;
+  transition: all 0.3s;
+}
+.frosted-button:hover {
+  background-color: rgba(255, 255, 255, 0.35);
+}
+.frosted-button-selected {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.frosted-button-disabled {
+  background-color: rgba(255, 255, 255, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+}
+.no-glass {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  color: white;
+}
+.mark-on-hover:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.divider {
+  width: 1px;
+  height: 75%;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+</style>
diff --git a/src/components/GlassModal.vue b/src/components/GlassModal.vue
new file mode 100644
index 000000000..c54e9ec39
--- /dev/null
+++ b/src/components/GlassModal.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    v-if="isVisible"
+    class="glass-modal"
+    :class="interfaceStore.isOnPhoneScreen ? 'rounded-[10px]' : 'rounded-[20px]'"
+    :style="modalPositionStyle"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import { useAppInterfaceStore } from '@/stores/appInterface'
+
+const interfaceStore = useAppInterfaceStore()
+
+type ModalPosition = 'left' | 'center' | 'menuitem'
+
+const props = defineProps<{
+  /**
+   *
+   */
+  isVisible: boolean
+  /**
+   *
+   */
+  position?: ModalPosition
+}>()
+
+const isVisible = ref(props.isVisible)
+const modalPosition = ref(props.position || 'center')
+
+const modalPositionStyle = computed(() => {
+  switch (modalPosition.value) {
+    case 'left':
+      return {
+        top: '50%',
+        left: '0%',
+        transform: 'translateY(-50%)',
+      }
+    case 'menuitem':
+      return {
+        top: '50%',
+        left: interfaceStore.isOnSmallScreen
+          ? `${interfaceStore.mainMenuWidth - 6}px`
+          : `${interfaceStore.mainMenuWidth + 30}px`,
+        transform: 'translateY(-50%)',
+      }
+    case 'center':
+    default:
+      return {
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+      }
+  }
+})
+
+watch(
+  () => props.isVisible,
+  (newVal) => {
+    isVisible.value = newVal
+  }
+)
+</script>
+
+<style scoped>
+.glass-modal {
+  position: absolute;
+  width: auto;
+  max-height: 85vh;
+  overflow: auto;
+  border: 1px solid #cbcbcb33;
+  background-color: #4f4f4f33;
+  backdrop-filter: blur(15px);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
+  z-index: 100;
+}
+</style>
diff --git a/src/components/InteractionDialog.vue b/src/components/InteractionDialog.vue
index 251028369..30d8db456 100644
--- a/src/components/InteractionDialog.vue
+++ b/src/components/InteractionDialog.vue
@@ -1,26 +1,29 @@
 <template>
-  <v-dialog v-model="internalShowDialog" persistent :max-width="maxWidth || 600">
-    <v-card :max-width="maxWidth || 600" class="main-dialog px-2 rounded-lg">
+  <v-dialog v-model="internalShowDialog" persistent :max-width="maxWidth || '600px'">
+    <v-card :max-width="maxWidth || '600px'" class="main-dialog px-2 rounded-lg">
       <v-card-title>
         <div
-          class="flex justify-center test-center pt-2 mb-2 text-[20px] font-bold text-nowrap text-ellipsis overflow-x-hidden"
-          :class="`w-[${maxWidth}px]`"
+          class="flex justify-center align-center text-center pt-2 mb-1 font-bold text-nowrap text-ellipsis overflow-x-hidden"
+          :class="interfaceStore.isOnPhoneScreen ? 'text-[18px]' : 'text-[20px]'"
         >
           {{ title }}
         </div>
       </v-card-title>
-      <v-card-text class="pb-5">
+      <v-card-text class="pb-2">
         <div class="flex justify-center align-center w-full mb-3">
-          <v-icon v-if="variant" size="38" color="white" class="mr-8">{{
-            variant === 'info'
-              ? 'mdi-information'
-              : variant === 'warning'
-              ? 'mdi-alert'
-              : variant === 'error'
-              ? 'mdi-alert-circle'
-              : 'mdi-check-circle'
-          }}</v-icon>
-          <div class="text-lg">{{ message }}</div>
+          <v-icon v-if="variant !== 'text-only'" size="46" :color="iconColor" class="mr-8 ml-2">{{ iconType }}</v-icon>
+          <div
+            v-if="isArrayMessage"
+            class="flex flex-col mb-3 gap-y-2 w-[90%] text-start"
+            :class="interfaceStore.isOnPhoneScreen ? 'text-[13px] px-2' : 'text-lg px-5'"
+          >
+            <li v-for="messageUnit in message" :key="messageUnit">
+              {{ messageUnit }}
+            </li>
+          </div>
+          <div v-else class="text-center" :class="interfaceStore.isOnPhoneScreen ? 'text-xs' : 'text-lg'">
+            {{ message }}
+          </div>
         </div>
         <slot name="content"></slot>
         <template v-if="contentComponent">
@@ -33,8 +36,11 @@
       <v-card-actions>
         <div
           v-if="actions && actions.length > 0"
-          class="flex w-full px-1 py-2"
-          :class="actions.length === 1 ? 'justify-end' : 'justify-between'"
+          class="flex w-full"
+          :class="[
+            actions.length === 1 ? 'justify-end' : 'justify-between',
+            interfaceStore.isOnPhoneScreen ? 'px-0 py-1' : 'px-1 py-2',
+          ]"
         >
           <v-btn
             v-for="(button, index) in actions"
@@ -43,13 +49,13 @@
             :color="button.color || undefined"
             :class="button.class || undefined"
             :disabled="button.disabled || false"
-            @click="button.action"
+            @click="handleAction(button.action)"
           >
             {{ button.text }}
           </v-btn>
         </div>
         <div v-else class="flex w-full px-1 py-2 justify-end">
-          <v-btn size="small" variant="text" @click="internalShowDialog = false">Close</v-btn>
+          <v-btn size="small" variant="text" @click="handleAction(() => (internalShowDialog = false))">Close</v-btn>
         </div>
       </v-card-actions>
     </v-card>
@@ -57,47 +63,111 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { useInteractionDialog } from '@/composables/interactionDialog'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 
 const { closeDialog } = useInteractionDialog()
+const interfaceStore = useAppInterfaceStore()
 
-/* eslint-disable jsdoc/require-jsdoc */
+/**
+ * Interface to an array of buttons for the Interaction Dialog's footer
+ */
 interface Action {
+  /**
+   * Button Text
+   */
   text: string
+  /**
+   * Button size
+   */
   size?: string
+  /**
+   * Button color
+   */
   color?: string
+  /**
+   * Tailwind class for the button element
+   */
   class?: string
+  /**
+   * Whether the button is disabled
+   */
   disabled?: boolean
+  /**
+   * Callback to button action
+   */
   action: () => void
 }
 
-const props = withDefaults(
-  defineProps<{
-    showDialog: boolean
-    title: string
-    contentComponent: string
-    maxWidth: number
-    actions: Action[]
-    variant: string
-    message: string
-  }>(),
-  {
-    showDialog: false,
-    title: '',
-    contentComponent: '',
-    maxWidth: 600,
-    actions: () => [],
-    variant: '',
-    message: '',
-  }
-)
+/**
+ * Interface representing the properties for the dialog component.
+ */
+interface Props {
+  /**
+   * Whether the dialog should be shown.
+   */
+  showDialog?: boolean
+  /**
+   * The title of the dialog.
+   */
+  title?: string
+  /**
+   * The component to be rendered in the content slot of the dialog.
+   */
+  contentComponent?: string
+  /**
+   * The maximum width of the dialog.
+   */
+  maxWidth?: number
+  /**
+   * The actions to be displayed in the dialog's footer.
+   */
+  actions?: Action[]
+  /**
+   * The variant of the dialog, determining the icon and color.
+   */
+  variant?: string
+  /**
+   * The text message to be displayed in the dialog if there is no content on the slot.
+   */
+  message?: string
+}
 
-const emit = defineEmits(['update:showDialog'])
+const props = withDefaults(defineProps<Props>(), {
+  showDialog: false,
+  title: '',
+  contentComponent: '',
+  maxWidth: 600,
+  actions: () => [],
+  variant: '',
+  message: '',
+})
+
+const emit = defineEmits(['update:showDialog', 'confirmed', 'dismissed'])
 
 const internalShowDialog = ref(props.showDialog)
 
+const isArrayMessage = computed(() => Array.isArray(props.message))
+
+const iconType = computed(() => {
+  switch (props.variant) {
+    case 'info':
+      return 'mdi-information'
+    case 'warning':
+      return 'mdi-alert-rhombus'
+    case 'error':
+      return 'mdi-alert-circle'
+    default:
+      return 'mdi-check-circle'
+  }
+})
+
+const iconColor = computed(() => {
+  return props.variant === 'success' ? 'green' : 'yellow'
+})
+
 watch(
   () => props.showDialog,
   (newVal) => {
@@ -109,15 +179,21 @@ watch(internalShowDialog, (newVal) => {
   if (!newVal) {
     closeDialog()
     emit('update:showDialog', newVal)
+    emit('dismissed')
   }
 })
+
+const handleAction = (action: () => void): void => {
+  action()
+  emit('confirmed')
+}
 </script>
 
 <style scoped>
 .main-dialog {
   color: white;
-  border: 1px solid #fafafa44;
-  background-color: #aaaaaa99;
+  border: 1px solid #fafafa33;
+  background-color: #aaaaaa44;
   backdrop-filter: blur(30px);
   box-shadow: 0px 4px 4px 0px #0000004c, 0px 8px 12px 6px #00000026;
 }
diff --git a/src/components/SnappingGrid.vue b/src/components/SnappingGrid.vue
index 71b14ccb0..952ba0a41 100644
--- a/src/components/SnappingGrid.vue
+++ b/src/components/SnappingGrid.vue
@@ -20,6 +20,7 @@ const gridIntervalStyleY = computed(() => `${windowHeight.value * props.gridInte
 
 <style scoped>
 .grid {
+  --grid-color: #b0b0b089;
   position: absolute;
   height: 100%;
   width: 100%;
@@ -27,15 +28,15 @@ const gridIntervalStyleY = computed(() => `${windowHeight.value * props.gridInte
       0deg,
       transparent,
       transparent calc(v-bind('gridIntervalStyleY') - 1px),
-      #88f calc(v-bind('gridIntervalStyleY') - 1px),
-      #88f v-bind('gridIntervalStyleY')
+      var(--grid-color) calc(v-bind('gridIntervalStyleY') - 1px),
+      var(--grid-color) v-bind('gridIntervalStyleY')
     ),
     repeating-linear-gradient(
       -90deg,
       transparent,
       transparent calc(v-bind('gridIntervalStyleX') - 1px),
-      #88f calc(v-bind('gridIntervalStyleX') - 1px),
-      #88f v-bind('gridIntervalStyleX')
+      var(--grid-color) calc(v-bind('gridIntervalStyleX') - 1px),
+      var(--grid-color) v-bind('gridIntervalStyleX')
     );
   background-size: v-bind('gridIntervalStyleX') v-bind('gridIntervalStyleY');
   background-repeat: repeat;
diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
index 5e99ac9fd..7c5f13f35 100644
--- a/src/components/VideoLibraryModal.vue
+++ b/src/components/VideoLibraryModal.vue
@@ -99,7 +99,7 @@
                     preload="auto"
                     :poster="!video.isProcessed ? video.thumbnail : undefined"
                   >
-                    <source :src="video.url" type="video/webm" />
+                    <source :src="video.url" />
                   </video>
                   <div
                     v-if="selectedVideos.find((v) => v.fileName === video.fileName) && !isMultipleSelectionMode"
@@ -129,7 +129,7 @@
                   <v-tooltip open-delay="500" activator="parent" location="top">{{
                     video.isProcessed ? 'Processed video' : 'Unprocessed video'
                   }}</v-tooltip>
-                  {{ parseDateFromTitle(video.fileName) ?? 'Cockpit webm' }}
+                  {{ parseDateFromTitle(video.fileName) ?? 'Cockpit video' }}
                   <v-icon
                     size="10"
                     class="ml-1 mt-[3px]"
@@ -203,7 +203,7 @@
                 :poster="selectedVideos[0]?.thumbnail || undefined"
                 class="border-[14px] border-white border-opacity-10 rounded-lg min-h-[382px] aspect-video"
               >
-                <source :src="selectedVideos[0]?.url || undefined" type="video/webm" />
+                <source :src="selectedVideos[0]?.url || undefined" />
               </video>
               <v-btn
                 v-if="
@@ -325,11 +325,7 @@
                       transition="slide-x-reverse-transition"
                     >
                       <template #activator="{ props: buttonProps, isActive }">
-                        <div
-                          class="flex items-center justify-center w-full h-full"
-                          v-bind="buttonProps"
-                          v-on="isActive"
-                        >
+                        <div class="flex items-center justify-center w-full h-full" v-bind="buttonProps">
                           <v-icon
                             :size="button.size"
                             :class="{ 'rotate-[-45deg]': isActive, 'outline outline-6 outline-[#ffffff55]': isActive }"
@@ -630,11 +626,9 @@ const processVideos = async (): Promise<void> => {
     isMultipleSelectionMode.value = false
     await fetchVideosAndLogData()
   } catch (error) {
-    if (error instanceof Error) {
-      console.error('Video processing failed:', error.message)
-    } else {
-      console.error('Processing failed with non-Error type:', error)
-    }
+    const errorMsg = `Video processing failed: ${(error as Error).message ?? error!.toString()}`
+    console.error(errorMsg)
+    snackbarMessage.value = errorMsg
     openSnackbar.value = true
     errorProcessingVideos.value = true
   }
@@ -734,7 +728,8 @@ const selectProcessedVideos = (): void => {
 // Add the log files to the list of files to be downloaded/discarded
 const addLogDataToFileList = (fileNames: string[]): string[] => {
   const filesWithLogData = fileNames.flatMap((fileName) => {
-    const subtitlefileName = fileName.replace('.webm', '.ass')
+    const filenameWithoutExtension = fileName.split('.').slice(0, -1).join('.')
+    const subtitlefileName = `${filenameWithoutExtension}.ass`
     const subtitleExists = availableLogFiles.value.some((video) => video.fileName === subtitlefileName)
     return subtitleExists ? [fileName, subtitlefileName] : [fileName]
   })
@@ -742,7 +737,18 @@ const addLogDataToFileList = (fileNames: string[]): string[] => {
 }
 
 const downloadVideoAndTelemetryFiles = async (): Promise<void> => {
+  let initialMessageShown = false
+
+  const fillProgressData = async (progress: number, total: number): Promise<void> => {
+    const progressPercentage = ((100 * progress) / total).toFixed(1)
+    if (!initialMessageShown) return
+    snackbarMessage.value = `Preparing download: ${progressPercentage}%.`
+    openSnackbar.value = true
+  }
+
   snackbarMessage.value = 'Getting your download ready...'
+  setTimeout(() => (initialMessageShown = true), 1500)
+
   let tempProcessedVideos: string[] = []
   let tempUnprocessedVideos: string[] = []
 
@@ -754,11 +760,11 @@ const downloadVideoAndTelemetryFiles = async (): Promise<void> => {
   if (tempProcessedVideos.length > 0) {
     const dataLogFilesAdded = addLogDataToFileList(tempProcessedVideos)
 
-    await videoStore.downloadFilesFromVideoDB(dataLogFilesAdded)
+    await videoStore.downloadFilesFromVideoDB(dataLogFilesAdded, fillProgressData)
   }
   if (tempUnprocessedVideos.length > 0) {
     openDownloadInfoDialog()
-    await videoStore.downloadTempVideo(tempUnprocessedVideos)
+    await videoStore.downloadTempVideo(tempUnprocessedVideos, fillProgressData)
   }
 }
 
@@ -771,7 +777,7 @@ const openDownloadInfoDialog = (): void => {
       ? 'You are downloading both processed and unprocessed videos'
       : 'You are downloading unprocessed video chunks',
     message: hasProcessedVideos
-      ? `One of the .zip files contains unprocessed video chunks, which are not playable. 
+      ? `One of the .zip files contains unprocessed video chunks, which are not playable.
       For a playable video, you need to process it first.`
       : 'For a playable video, you need to process it first.',
     variant: 'info',
@@ -802,7 +808,7 @@ const discardVideosAndUpdateDB = async (): Promise<void> => {
   snackbarMessage.value = `${selectedVideoArraySize} video(s) discarded.`
   openSnackbar.value = true
   await fetchVideosAndLogData()
-  availableVideos.value.length > 0 ? (selectedVideos.value = [availableVideos.value[0]]) : (selectedVideos.value = [])
+  selectedVideos.value = availableVideos.value.length > 0 ? [availableVideos.value[0]] : []
   if (availableVideos.value.length === 1) isMultipleSelectionMode.value = false
   deleteButtonLoading.value = false
 }
@@ -815,7 +821,7 @@ const fetchVideosAndLogData = async (): Promise<void> => {
 
   // Fetch processed videos and logs
   await videoStore.videoStoringDB.iterate((value, key) => {
-    if (key.endsWith('.webm')) {
+    if (videoStore.isVideoFilename(key)) {
       videoFilesOperations.push(
         (async () => {
           const videoBlob = await videoStore.videoStoringDB.getItem<Blob>(key)
@@ -853,25 +859,17 @@ const fetchVideosAndLogData = async (): Promise<void> => {
   // Fetch unprocessed videos
   const unprocessedVideos = await videoStore.unprocessedVideos
   const unprocessedVideoOperations = Object.entries(unprocessedVideos).map(async ([hash, videoInfo]) => {
-    return {
-      dateStart: videoInfo.dateStart,
-      dateLastRecordingUpdate: videoInfo.dateLastRecordingUpdate,
-      dateFinish: videoInfo.dateFinish,
-      fileName: videoInfo.fileName,
-      vWidth: videoInfo.vWidth,
-      vHeight: videoInfo.vHeight,
-      hash: hash,
-      thumbnail: videoInfo.thumbnail,
-      url: '',
-      isProcessed: false,
-    }
+    return { ...videoInfo, ...{ hash: hash, url: '', isProcessed: false } }
   })
 
   const videos = await Promise.all(videoFilesOperations)
   const logFiles = await Promise.all(logFileOperations)
   const unprocessedVideosData = await Promise.all(unprocessedVideoOperations)
-  // Filter videos that are currently being recorded
-  const validUnprocessedVideos = unprocessedVideosData.filter((video) => video.dateFinish)
+
+  // Filter out videos that are currently being recorded
+  const validUnprocessedVideos = unprocessedVideosData.filter((video) => {
+    return video.dateFinish || videoStore.keysFailedUnprocessedVideos.includes(video.hash)
+  })
 
   availableVideos.value = [...videos, ...validUnprocessedVideos]
   availableLogFiles.value = logFiles
diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index bb335a2fe..ab710227e 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="modal-content">
       <video id="video-player" class="w-[100%]" controls autoplay preload="auto">
-        <source :src="videoFileUrl" type="video/webm" />
+        <source :src="videoFileUrl" />
       </video>
     </div>
   </div>
diff --git a/src/components/WidgetHugger.vue b/src/components/WidgetHugger.vue
index 58f9f9f11..b75c1ae00 100644
--- a/src/components/WidgetHugger.vue
+++ b/src/components/WidgetHugger.vue
@@ -30,11 +30,12 @@
 </template>
 
 <script setup lang="ts">
-import { useElementBounding, useElementHover, useWindowSize } from '@vueuse/core'
+import { useElementHover, useWindowSize } from '@vueuse/core'
 import { computed, nextTick, onMounted, ref, toRefs, watch } from 'vue'
 
 import { constrain, round } from '@/libs/utils'
 import { useDevelopmentStore } from '@/stores/development'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { Point2D } from '@/types/general'
 import type { Widget } from '@/types/widgets'
 
@@ -67,6 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const widget = toRefs(props).widget
+const { size, position, managerVars } = toRefs(props.widget)
 const allowMoving = toRefs(props).allowMoving
 const allowResizing = toRefs(props).allowResizing
 const outerWidgetRef = ref<HTMLElement | undefined>()
@@ -85,7 +87,7 @@ const hoveringWidgetOrOverlay = computed(() => hoveringOverlay.value || hovering
 
 // Put the widget into highlighted state when in edit-mode and hovering over it
 watch([hoveringWidgetOrOverlay, allowMoving], () => {
-  widget.value.managerVars.highlighted = hoveringWidgetOrOverlay.value && allowMoving.value
+  managerVars.value.highlighted = hoveringWidgetOrOverlay.value && allowMoving.value
 })
 
 const draggingWidget = ref(false)
@@ -103,7 +105,7 @@ const handleDragStart = (event: MouseEvent): void => {
   if (!allowMoving.value || isResizing.value || !outerWidgetRef.value) return
   draggingWidget.value = true
   initialMousePos.value = { x: event.clientX, y: event.clientY }
-  initialWidgetPos.value = widget.value.position
+  initialWidgetPos.value = position.value
   outerWidgetRef.value.style.cursor = 'grabbing'
   event.stopPropagation()
   event.preventDefault()
@@ -114,8 +116,8 @@ const handleResizeStart = (event: MouseEvent): void => {
   isResizing.value = true
   resizeHandle.value = event.target
   initialMousePos.value = { x: event.clientX, y: event.clientY }
-  initialWidgetPos.value = widget.value.position
-  initialWidgetSize.value = widget.value.size
+  initialWidgetPos.value = position.value
+  initialWidgetSize.value = size.value
   event.stopPropagation()
   event.preventDefault()
 }
@@ -126,9 +128,9 @@ const handleDrag = (event: MouseEvent): void => {
   const dx = (event.clientX - initialMousePos.value.x) / viewSize.value.width
   const dy = (event.clientY - initialMousePos.value.y) / viewSize.value.height
 
-  widget.value.position = {
-    x: constrain(initialWidgetPos.value.x + dx, 0, 1 - widget.value.size.width),
-    y: constrain(initialWidgetPos.value.y + dy, 0, 1 - widget.value.size.height),
+  position.value = {
+    x: constrain(initialWidgetPos.value.x + dx, 0, 1 - size.value.width),
+    y: constrain(initialWidgetPos.value.y + dy, 0, 1 - size.value.height),
   }
 }
 
@@ -171,11 +173,11 @@ const handleResize = (event: MouseEvent): void => {
     newHeight += dy
   }
 
-  widget.value.position = {
-    x: constrain(newLeft, 0, 1 - widget.value.size.width),
-    y: constrain(newTop, 0, 1 - widget.value.size.height),
+  position.value = {
+    x: constrain(newLeft, 0, 1 - size.value.width),
+    y: constrain(newTop, 0, 1 - size.value.height),
   }
-  widget.value.size = {
+  size.value = {
     width: constrain(newWidth, 0.01, 1),
     height: constrain(newHeight, 0.01, 1),
   }
@@ -197,11 +199,11 @@ const resizeWidgetToMinimalSize = (): void => {
   if (innerWidgetRef.value === undefined) return
   const { clientHeight, clientWidth, scrollWidth, scrollHeight } = innerWidgetRef.value
   if (scrollWidth > 1.05 * clientWidth) {
-    widget.value.size.width = (1.1 * scrollWidth) / windowWidth.value
+    size.value.width = (1.1 * scrollWidth) / windowWidth.value
     stillAutoResizing = true
   }
   if (scrollHeight > 1.05 * clientHeight) {
-    widget.value.size.height = (1.1 * scrollHeight) / windowHeight.value
+    size.value.height = (1.1 * scrollHeight) / windowHeight.value
     stillAutoResizing = true
   }
 
@@ -209,11 +211,10 @@ const resizeWidgetToMinimalSize = (): void => {
 }
 
 onMounted(async () => {
-  if (widget.value.managerVars.timesMounted === 0) {
+  if (managerVars.value.timesMounted === 0) {
     resizeWidgetToMinimalSize()
   }
-  makeWidgetRespectWalls()
-  widget.value.managerVars.timesMounted += 1
+  managerVars.value.timesMounted += 1
 
   if (widgetResizeHandles.value) {
     for (let i = 0; i < widgetResizeHandles.value.length; i++) {
@@ -243,29 +244,41 @@ watch(allowMoving, (isAllowing, wasAllowing) => {
   }
 })
 
-const outerBounds = useElementBounding(outerWidgetRef)
+const widgetStore = useWidgetManagerStore()
+const temporaryPosition = computed(() => {
+  let tempPos = { x: position.value.x, y: position.value.y }
+  const clearanceOffset = widgetStore.visibleAreaMinClearancePixels
 
-const makeWidgetRespectWalls = (): void => {
-  for (const bound of [outerBounds.left.value, outerBounds.right.value]) {
-    if (bound < 0 || bound > windowWidth.value) {
-      widget.value.position.x = 1 - widget.value.size.width
-    }
+  const barClearances = widgetStore.widgetClearanceForVisibleArea(widget.value)
+
+  // If the widget is under both bars, dont touch it, as it could be full screened by purpose, and if we apply the rules below, it will keep jumping
+  if (barClearances.top < clearanceOffset && barClearances.bottom < clearanceOffset) return tempPos
+
+  // If the widget is partially under the top or bottom bar, move it so that it gets fully visible
+  if (barClearances.top < clearanceOffset) {
+    tempPos.y = (widgetStore.currentTopBarHeightPixels + clearanceOffset) / windowHeight.value
+  } else if (barClearances.bottom < clearanceOffset) {
+    const maxBottomEdgePosition = (widgetStore.currentBottomBarHeightPixels + clearanceOffset) / windowHeight.value
+    tempPos.y = 1 - maxBottomEdgePosition - size.value.height
   }
-  for (const bound of [outerBounds.top.value, outerBounds.bottom.value]) {
-    if (bound < 0 || bound > windowHeight.value) {
-      widget.value.position.y = 1 - widget.value.size.height
-    }
+
+  // Use grid to snap to grid
+  if (widgetStore.snapToGrid) {
+    tempPos.x = Math.round(tempPos.x / widgetStore.gridInterval) * widgetStore.gridInterval
+    tempPos.y = Math.round(tempPos.y / widgetStore.gridInterval) * widgetStore.gridInterval
   }
-}
+
+  return tempPos
+})
 
 const sizeStyle = computed(() => ({
-  width: `${100 * widget.value.size.width}%`,
-  height: `${100 * widget.value.size.height}%`,
+  width: `${100 * size.value.width}%`,
+  height: `${100 * size.value.height}%`,
 }))
 
 const positionStyle = computed(() => ({
-  left: `${100 * widget.value.position.x}%`,
-  top: `${100 * widget.value.position.y}%`,
+  left: `${100 * temporaryPosition.value.x}%`,
+  top: `${100 * temporaryPosition.value.y}%`,
 }))
 
 const overlayDisplayStyle = computed(() => {
@@ -288,7 +301,7 @@ const cursorStyle = computed(() => {
 
 const devInfoBlurLevel = computed(() => `${devStore.widgetDevInfoBlurLevel}px`)
 
-const highlighted = computed(() => widget.value.managerVars.highlighted)
+const highlighted = computed(() => managerVars.value.highlighted)
 </script>
 
 <style>
diff --git a/src/components/mini-widgets/ArmerButton.vue b/src/components/mini-widgets/ArmerButton.vue
index 3484ba17c..9de910457 100644
--- a/src/components/mini-widgets/ArmerButton.vue
+++ b/src/components/mini-widgets/ArmerButton.vue
@@ -22,27 +22,18 @@
 
 <script setup lang="ts">
 import { canByPassCategory, EventCategory, slideToConfirm } from '@/libs/slide-to-confirm'
+import { tryOrAlert } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 const vehicleStore = useMainVehicleStore()
 
 const arm = (): void => {
-  slideToConfirm(
-    vehicleStore.arm,
-    {
-      command: 'Arm',
-    },
-    canByPassCategory(EventCategory.ARM)
-  )
+  const tryToArm = async (): Promise<void> => tryOrAlert(vehicleStore.arm)
+  slideToConfirm(tryToArm, { command: 'Arm' }, canByPassCategory(EventCategory.ARM))
 }
 
 const disarm = (): void => {
-  slideToConfirm(
-    vehicleStore.disarm,
-    {
-      command: 'Disarm',
-    },
-    canByPassCategory(EventCategory.DISARM)
-  )
+  const tryToDisarm = async (): Promise<void> => tryOrAlert(vehicleStore.disarm)
+  slideToConfirm(tryToDisarm, { command: 'Disarm' }, canByPassCategory(EventCategory.DISARM))
 }
 </script>
diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue
index b33043ee2..a569d5917 100644
--- a/src/components/mini-widgets/MiniVideoRecorder.vue
+++ b/src/components/mini-widgets/MiniVideoRecorder.vue
@@ -92,7 +92,7 @@ import { storeToRefs } from 'pinia'
 import Swal from 'sweetalert2'
 import { computed, onBeforeMount, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
 
-import { isEqual } from '@/libs/utils'
+import { isEqual, sleep } from '@/libs/utils'
 import { useVideoStore } from '@/stores/video'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { MiniWidget } from '@/types/miniWidgets'
@@ -147,12 +147,9 @@ const handleModalUpdate = (newVal: boolean): void => {
 
 // Fetch number of temporary videos on storage
 const fetchNumebrOfTempVideos = async (): Promise<void> => {
-  let numberOfVideos = 0
-  await videoStore.videoStoringDB.iterate((value, key) => {
-    key.endsWith('.webm') && numberOfVideos++
-  })
-  Object.values(videoStore.keysFailedUnprocessedVideos).forEach(() => numberOfVideos++)
-  numberOfVideosOnDB.value = numberOfVideos
+  const nProcessedVideos = (await videoStore.videoStoringDB.keys()).filter((k) => videoStore.isVideoFilename(k)).length
+  const nFailedUnprocessedVideos = Object.keys(videoStore.keysFailedUnprocessedVideos).length
+  numberOfVideosOnDB.value = nProcessedVideos + nFailedUnprocessedVideos
 }
 
 // eslint-disable-next-line jsdoc/require-jsdoc
@@ -230,7 +227,7 @@ const updateCurrentStream = async (streamName: string | undefined): Promise<void
   while (isLoadingStream.value && millisPassed < waitingTime) {
     // @ts-ignore: The media stream can (and probably will) get defined as we selected a stream
     isLoadingStream.value = mediaStream.value === undefined || !mediaStream.value.active
-    await new Promise((r) => setTimeout(r, timeStep))
+    await sleep(timeStep)
     millisPassed += timeStep
   }
 
diff --git a/src/components/mini-widgets/TakeoffLandCommander.vue b/src/components/mini-widgets/TakeoffLandCommander.vue
index 67a500efb..2850da1f9 100644
--- a/src/components/mini-widgets/TakeoffLandCommander.vue
+++ b/src/components/mini-widgets/TakeoffLandCommander.vue
@@ -3,7 +3,7 @@
     class="relative flex items-center justify-center w-32 p-1 rounded-md shadow-inner h-9 bg-slate-800/60 hover:bg-slate-400/60"
     @click="vehicleStore.flying ? land() : takeoff()"
   >
-    <span class="inline-block font-extrabold align-middle text-white">
+    <span class="inline-block font-extrabold text-white align-middle">
       {{ vehicleStore.flying === undefined ? '...' : vehicleStore.flying ? 'Land' : 'Takeoff' }}
     </span>
   </button>
@@ -12,32 +12,21 @@
 <script setup lang="ts">
 import { showAltitudeSlider } from '@/libs/altitude-slider'
 import { canByPassCategory, EventCategory, slideToConfirm } from '@/libs/slide-to-confirm'
+import { tryOrAlert } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 const vehicleStore = useMainVehicleStore()
 
-const takeoff = (): void => {
+const takeoff = async (): Promise<void> => {
   showAltitudeSlider.value = true
-
-  slideToConfirm(
-    () => {
-      showAltitudeSlider.value = false
-      vehicleStore.takeoff()
-    },
-    {
-      command: 'Takeoff',
-    },
-    canByPassCategory(EventCategory.TAKEOFF)
-  )
+  const tryToTakeOff = async (): Promise<void> => tryOrAlert(vehicleStore.takeoff)
+  await slideToConfirm(tryToTakeOff, { command: 'Takeoff' }, canByPassCategory(EventCategory.TAKEOFF))
+  showAltitudeSlider.value = false
 }
 
 const land = (): void => {
-  slideToConfirm(
-    vehicleStore.land,
-    {
-      command: 'Land',
-    },
-    canByPassCategory(EventCategory.LAND)
-  )
+  const tryToLand = async (): Promise<void> => tryOrAlert(vehicleStore.land)
+  slideToConfirm(tryToLand, { command: 'Land' }, canByPassCategory(EventCategory.LAND))
+  showAltitudeSlider.value = false
 }
 </script>
diff --git a/src/components/widgets/Map.vue b/src/components/widgets/Map.vue
index ce970c4fa..c8d3cb221 100644
--- a/src/components/widgets/Map.vue
+++ b/src/components/widgets/Map.vue
@@ -503,7 +503,9 @@ const executeMissionOnVehicle = (): void => {
 
 // Set dynamic styles for correct displacement of the bottom buttons when the widget is below the bottom bar
 const widgetStore = useWidgetManagerStore()
-const bottomButtonsDisplacement = computed(() => `${widgetStore.widgetBottomClearanceForVisibleArea(widget.value)}px`)
+const bottomButtonsDisplacement = computed(() => {
+  return `${Math.max(-widgetStore.widgetClearanceForVisibleArea(widget.value).bottom, 0)}px`
+})
 </script>
 
 <style>
diff --git a/src/composables/interactionDialog.ts b/src/composables/interactionDialog.ts
index a10d5e6ea..d1c641c27 100644
--- a/src/composables/interactionDialog.ts
+++ b/src/composables/interactionDialog.ts
@@ -5,26 +5,69 @@ import InteractionDialogComponent from '@/components/InteractionDialog.vue'
 import vuetify from '@/plugins/vuetify'
 import { DialogActions } from '@/types/general'
 
-/* eslint-disable jsdoc/require-jsdoc */
+/**
+ * Options to configure the interaction dialog.
+ */
 interface DialogOptions {
-  message: string
+  /**
+   * Message to display in the dialog. If an array, elements will be displayed as an item list.
+   * @type {string}
+   */
+  message: string | string[]
+
+  /**
+   * The variant type of the dialog (e.g., 'info', 'warning', 'error', 'success').
+   * @type {string}
+   */
   variant: string
+
+  /**
+   * The title of the dialog.
+   * @type {string}
+   */
   title?: string
+
+  /**
+   * The actions to display in the dialog.
+   * Each action should be an object containing text, size, color, class, disabled, and action properties.
+   * @type {DialogActions[]}
+   */
   actions?: DialogActions[]
-  maxWidth?: number
+
+  /**
+   * The maximum width of the dialog in pixels.
+   * @type {string | number}
+   */
+  maxWidth?: string | number
 }
 
+/**
+ *
+ */
+interface DialogResult {
+  /**
+   *
+   */
+  isConfirmed: boolean
+}
+
+let resolveFn: (value: DialogResult | PromiseLike<DialogResult>) => void
+let rejectFn: (reason?: DialogResult) => void
+
 /**
  * Provides methods to control the interaction dialog.
  * @returns {object} - An object containing the showDialog and closeDialog methods.
  */
 export function useInteractionDialog(): {
   /**
-   *
+   * Shows the dialog with the provided options.
+   * @param {DialogOptions} options - Options to configure the dialog.
+   * @returns {Promise<{ isConfirmed: boolean }>} - A promise that resolves or rejects based on user action.
    */
-  showDialog: (options: DialogOptions) => void
+  showDialog: (options: DialogOptions) => Promise<DialogResult>
   /**
-   *
+   * Closes the dialog.
+   * @returns {void}
    */
   closeDialog: () => void
 } {
@@ -41,40 +84,43 @@ export function useInteractionDialog(): {
     variant: '',
     title: '',
     actions: [],
-    maxWidth: 600,
+    maxWidth: '600px',
     showDialog: false,
   })
 
   let dialogApp: App<Element> | null = null
 
-  /**
-   * Mounts the dialog component to the DOM.
-   * @returns {void}
-   */
   const mountDialog = (): void => {
     const mountPoint = document.createElement('div')
     document.body.appendChild(mountPoint)
-    dialogApp = createApp(InteractionDialogComponent, dialogProps)
+    dialogApp = createApp(InteractionDialogComponent, {
+      ...dialogProps,
+      onConfirmed: () => {
+        if (resolveFn) resolveFn({ isConfirmed: true })
+      },
+      onDismissed: () => {
+        if (rejectFn) rejectFn({ isConfirmed: false })
+      },
+    })
     dialogApp.use(vuetify)
     dialogApp.mount(mountPoint)
   }
 
-  /**
-   * Shows the dialog with the provided options.
-   * @param {DialogOptions} options - Options to configure the dialog.
-   * @returns {void}
-   */
-  const showDialog = (options: DialogOptions): void => {
-    Object.assign(dialogProps, options, { showDialog: true })
-    mountDialog()
+  const showDialog = (options: DialogOptions): Promise<DialogResult> => {
+    return new Promise((resolve, reject) => {
+      Object.assign(dialogProps, options, { showDialog: true })
+      resolveFn = resolve
+      rejectFn = reject
+      mountDialog()
+    })
   }
 
-  /**
-   * Closes the dialog.
-   * @returns {void}
-   */
   const closeDialog = (): void => {
     dialogProps.showDialog = false
+    if (dialogApp) {
+      dialogApp.unmount()
+      dialogApp = null
+    }
   }
 
   onUnmounted(() => {
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index 4399021ef..9d640a899 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import Swal from 'sweetalert2'
+
 export const constrain = (value: number, min: number, max: number): number => {
   return Math.max(Math.min(value, max), min)
 }
@@ -99,3 +101,25 @@ export const formatBytes = (bytes: number, decimals = 2): string => {
 export const isHorizontalScroll = (e: WheelEvent): boolean => {
   return e.shiftKey
 }
+
+/**
+ * Wait for a specified amount of time assincronously
+ * @param {number} delay The time to sleep in milliseconds
+ * @returns {Promise<void>} A promise that resolves after the specified delay
+ */
+export const sleep = (delay: number): Promise<void> => {
+  return new Promise((r) => setTimeout(r, delay))
+}
+
+/**
+ * Try to run the given function and alert the user if an error occurs
+ * @param {() => Promise<void>} tryFunction The time to sleep in milliseconds
+ * @returns {Promise<void>} A promise that resolves after the specified delay
+ */
+export const tryOrAlert = async (tryFunction: () => Promise<void>): Promise<void> => {
+  try {
+    await tryFunction()
+  } catch (error) {
+    Swal.fire({ text: error as string, icon: 'error' })
+  }
+}
diff --git a/src/libs/vehicle/ardupilot/ardupilot.ts b/src/libs/vehicle/ardupilot/ardupilot.ts
index fedd3d441..5e65cc594 100644
--- a/src/libs/vehicle/ardupilot/ardupilot.ts
+++ b/src/libs/vehicle/ardupilot/ardupilot.ts
@@ -1,5 +1,4 @@
 import { differenceInMilliseconds } from 'date-fns'
-import Swal from 'sweetalert2'
 
 import { sendMavlinkMessage } from '@/libs/communication/mavlink'
 import type { MAVLinkMessageDictionary, Package, Type } from '@/libs/connection/m2r/messages/mavlink2rest'
@@ -19,7 +18,7 @@ import {
 import { MavFrame } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { type Message } from '@/libs/connection/m2r/messages/mavlink2rest-message'
 import { SignalTyped } from '@/libs/signal'
-import { round } from '@/libs/utils'
+import { round, sleep } from '@/libs/utils'
 import {
   type ArduPilotParameterSetData,
   alertLevelFromMavSeverity,
@@ -125,85 +124,74 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
    * @param {number} param5
    * @param {number} param6
    * @param {number} param7
-   * @param {boolean} waitForAck If the command should wait for an acknowledgment
-   * @param {boolean} noAlert Controls if swal alerts should not be shown
    * @returns {Promise<CommandAck>} A promise that resolves with the command acknowledgment.
    */
-  sendCommandLong(
+  async sendCommandLong(
     mav_command: MavCmd,
-    param1?: number,
-    param2?: number,
-    param3?: number,
-    param4?: number,
-    param5?: number,
-    param6?: number,
-    param7?: number,
-    waitForAck = true,
-    noAlert = false
-  ): Promise<CommandAck> {
-    return new Promise((resolve, reject) => {
-      // Construct the command
-      const command: Message.CommandLong = {
-        type: MAVLinkType.COMMAND_LONG,
-        param1: param1 ?? 0,
-        param2: param2 ?? 0,
-        param3: param3 ?? 0,
-        param4: param4 ?? 0,
-        param5: param5 ?? 0,
-        param6: param6 ?? 0,
-        param7: param7 ?? 0,
-        command: {
-          type: mav_command,
-        },
-        target_system: this.currentSystemId,
-        target_component: 1,
-        confirmation: 0,
-      }
+    param1 = 0,
+    param2 = 0,
+    param3 = 0,
+    param4 = 0,
+    param5 = 0,
+    param6 = 0,
+    param7 = 0
+  ): Promise<void> {
+    const command: Message.CommandLong = {
+      type: MAVLinkType.COMMAND_LONG,
+      param1: param1,
+      param2: param2,
+      param3: param3,
+      param4: param4,
+      param5: param5,
+      param6: param6,
+      param7: param7,
+      command: {
+        type: mav_command,
+      },
+      target_system: this.currentSystemId,
+      target_component: 1,
+      confirmation: 0,
+    }
 
-      sendMavlinkMessage(command)
-      if (!waitForAck) {
-        resolve(new CommandAck())
-        return
-      }
+    sendMavlinkMessage(command)
 
-      let ackReceived = false
-      const ackHandler = (commandAck: CommandAck): void => {
-        console.log('Received command acknowledgment:', commandAck)
-        if (commandAck.command.type === mav_command) {
-          ackReceived = true
-          this.onCommandAck.remove(ackHandler)
+    // Monitor the acknowledgment of the command and throw an error if it fails or reaches a timeout
+    let incomingAckCommand: CommandAck | undefined = undefined
+    let receivedCommandAck = false
+    let timeoutReached = false
+    const timeout = 5000
 
-          if (![MavResult.MAV_RESULT_ACCEPTED, MavResult.MAV_RESULT_IN_PROGRESS].includes(commandAck.result.type)) {
-            if (!noAlert) {
-              commandAck.alertMessage()
-            }
-            reject(new Error(`Command failed with result: ${commandAck.result.type}`))
-          } else {
-            this.onCommandAck.remove(ackHandler)
-            resolve(commandAck)
-          }
-        }
-      }
+    const ackHandler = (commandAck: CommandAck): void => {
+      incomingAckCommand = commandAck
+    }
 
-      this.onCommandAck.add(ackHandler)
-
-      // Setup a timeout for the ACK
-      const timeout = 5000
-      setTimeout(() => {
-        if (!ackReceived) {
-          if (!noAlert) {
-            Swal.fire({
-              title: 'Command timeout',
-              text: 'No acknowledgment was received for the command: ' + mav_command + ' in ' + timeout / 1000 + 's',
-              icon: 'error',
-              confirmButtonText: 'OK',
-            })
-          }
-          this.onCommandAck.remove(ackHandler)
-          reject(new Error('Timeout waiting for command acknowledgment'))
-        }
-      }, timeout)
-    })
+    const dateCommand = new Date()
+    this.onCommandAck.add(ackHandler)
+
+    // Wait for the acknowledgment to be received
+    while (!timeoutReached && !receivedCommandAck) {
+      await sleep(100)
+      receivedCommandAck = (incomingAckCommand as unknown as CommandAck)?.command.type === mav_command
+      timeoutReached = differenceInMilliseconds(new Date(), dateCommand) > timeout
+    }
+
+    this.onCommandAck.remove(ackHandler)
+
+    if (!receivedCommandAck) {
+      throw Error(`No acknowledgment received for command '${mav_command}' before timeout (${timeout / 1000}s).`)
+    }
+
+    // We already tested the ack and know that it is of the correct type
+    const commandAck = incomingAckCommand as unknown as CommandAck
+
+    console.log('Received command acknowledgment:', commandAck)
+
+    const confirmationResults = [MavResult.MAV_RESULT_ACCEPTED, MavResult.MAV_RESULT_IN_PROGRESS]
+    if (confirmationResults.includes(commandAck.result.type)) {
+      return
+    }
+
+    throw new Error(`Command failed with result: ${commandAck.result.type}`)
   }
 
   registerUsageOfMessageType = (messagePath: string): void => {
@@ -456,6 +444,9 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
       case MAVLinkType.NAMED_VALUE_FLOAT: {
         const namedValueFloatMessage = mavlink_message.message as Message.NamedValueFloat
         const messageName = namedValueFloatMessage.name.join('').replaceAll('\x00', '')
+        if (!this._availableGenericVariablesdMessagePaths.includes(messageName)) {
+          this._availableGenericVariablesdMessagePaths.push(messageName)
+        }
         this._genericVariables[messageName] = namedValueFloatMessage.value
         this.onGenericVariables.emit()
         break
@@ -481,8 +472,8 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
    * @param {boolean} arm
    * @param {boolean} force
    */
-  _arm(arm: boolean, force?: boolean): void {
-    this.sendCommandLong(
+  async _arm(arm: boolean, force?: boolean): Promise<void> {
+    await this.sendCommandLong(
       MavCmd.MAV_CMD_COMPONENT_ARM_DISARM,
       arm ? 1 : 0, // 0: Disarm, 1: ARM
       force ? 21196 : 0 // 21196: force arming/disarming (e.g. override preflight checks and disarming in flight)
@@ -491,11 +482,10 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
 
   /**
    * Arm vehicle
-   * @returns {boolean}
+   * @returns {Promise<void>}
    */
-  arm(): boolean {
-    this._arm(true)
-    return true
+  async arm(): Promise<void> {
+    await this._arm(true)
   }
 
   /**
@@ -539,39 +529,40 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
   /**
    * Helper function for commanding takeoff
    * @param {number} altitude (in meters)
+   * @returns {Promise<void>} A promise that resolves if the takeoff command is accepted.
    */
-  _takeoff(altitude: number): void {
-    this.sendCommandLong(MavCmd.MAV_CMD_NAV_TAKEOFF, 0, 0, 0, 0, 0, 0, altitude)
+  async _takeoff(altitude: number): Promise<void> {
+    return await this.sendCommandLong(MavCmd.MAV_CMD_NAV_TAKEOFF, 0, 0, 0, 0, 0, 0, altitude)
   }
 
   /**
    * Takeoff
    * @param {number} altitudeSetpoint
-   * @returns {void}
+   * @returns {Promise<void>}
    */
-  takeoff(altitudeSetpoint: number): void {
+  async takeoff(altitudeSetpoint: number): Promise<void> {
     const guidedMode = this.modesAvailable().get('GUIDED')
     if (guidedMode === undefined) {
-      return
+      throw new Error("Vehicle doesn't support GUIDED mode.")
     }
 
-    this.setMode(guidedMode as Modes)
-    this.arm()
-    this._takeoff(altitudeSetpoint)
+    await this.setMode(guidedMode as Modes)
+    await this.arm()
+    await this._takeoff(altitudeSetpoint)
     this.onTakeoff.emit()
     return
   }
 
   /**
    * Land
-   * @returns {void}
+   * @returns {Promise<void>}
    */
-  land(): void {
+  async land(): Promise<void> {
     const landMode = this.modesAvailable().get('LAND')
     if (landMode === undefined) {
-      return
+      throw new Error("Vehicle doesn't support LAND mode.")
     }
-    this.setMode(landMode as Modes)
+    await this.setMode(landMode as Modes)
     return
   }
   /**
@@ -646,11 +637,10 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
 
   /**
    * Disarm vehicle
-   * @returns {boolean}
+   * @returns {Promise<void>}
    */
-  disarm(): boolean {
-    this._arm(false)
-    return true
+  async disarm(): Promise<void> {
+    await this._arm(false)
   }
 
   /**
@@ -754,8 +744,8 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
    * Set vehicle flight mode
    * @param {'Modes'} mode Custom vehicle mode
    */
-  setMode(mode: Modes): void {
-    this.sendCommandLong(
+  async setMode(mode: Modes): Promise<void> {
+    await this.sendCommandLong(
       MavCmd.MAV_CMD_DO_SET_MODE,
       MavModeFlag.MAV_MODE_FLAG_CUSTOM_MODE_ENABLED,
       Number(mode) // Custom mode, please refer to the individual autopilot specifications for details
@@ -935,7 +925,7 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
         itemsCount = lastMissionCountMessage.count
         break
       }
-      await new Promise((r) => setTimeout(r, 100))
+      await sleep(100)
       timeoutReachedCount = new Date().getTime() - initTimeCount > 10000
     }
     if (itemsCount === undefined) {
@@ -949,7 +939,7 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
     const initTimeDown = new Date().getTime()
     let timeoutReachedDownload = false
     while (!allItemsDownloaded && !timeoutReachedDownload) {
-      await new Promise((r) => setTimeout(r, 100))
+      await sleep(100)
       timeoutReachedDownload = new Date().getTime() - initTimeDown > 10000
       loadingCallback((100 * itemToDownload) / itemsCount)
 
@@ -1000,13 +990,13 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
         Please put the vehicle in ${resetModeName} mode manually so a new mission can be started.`
       )
     }
-    this.setMode(resetMode as Modes)
+    await this.setMode(resetMode as Modes)
 
     // Check if the vehicle got off of the AUTO mode
     const initialTimeResetModeCheck = new Date().getTime()
     while (this.mode() !== resetMode && new Date().getTime() - initialTimeResetModeCheck < 10000) {
-      this.setMode(resetMode as Modes)
-      await new Promise((r) => setTimeout(r, 100))
+      await this.setMode(resetMode as Modes)
+      await sleep(100)
     }
     if (this.mode() !== resetMode) {
       throw Error(`Could not put vehicle in ${resetModeName} mode. Please do it manually.`)
@@ -1015,14 +1005,14 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
     // Arming the vehicle is necessary to successfully start a mission
     const initialTimeArmCheck = new Date().getTime()
     while (!this.isArmed() && new Date().getTime() - initialTimeArmCheck < 5000) {
-      this.arm()
-      await new Promise((r) => setTimeout(r, 100))
+      await this.arm()
+      await sleep(100)
     }
     if (!this.isArmed) {
       throw Error('Could not arm the vehicle. Please arm it manually.')
     }
 
-    this.sendCommandLong(MavCmd.MAV_CMD_MISSION_START, 0, 0)
+    await this.sendCommandLong(MavCmd.MAV_CMD_MISSION_START, 0, 0)
   }
 
   /**
@@ -1051,7 +1041,7 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
     let epochLastRequestAnswered = -1
     let lastSeqRequested = -1
     while (missionAck === undefined && !timeoutReachedUpload) {
-      await new Promise((r) => setTimeout(r, 10))
+      await sleep(10)
       timeoutReachedUpload = new Date().getTime() - initTimeUpload > 10000
       const lastMissionItemRequestMessage =
         this._messages.get(MAVLinkType.MISSION_REQUEST) || this._messages.get(MAVLinkType.MISSION_REQUEST_INT)
diff --git a/src/libs/vehicle/types.ts b/src/libs/vehicle/types.ts
index dff23d7d3..4cee92534 100644
--- a/src/libs/vehicle/types.ts
+++ b/src/libs/vehicle/types.ts
@@ -1,5 +1,3 @@
-import Swal from 'sweetalert2'
-
 import type { Type } from '@/libs/connection/m2r/messages/mavlink2rest'
 import { MavCmd, MavResult } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { AlertLevel } from '@/types/alert'
@@ -122,46 +120,6 @@ export class CommandAck {
   constructor(init?: Partial<CommandAck>) {
     Object.assign(this, init)
   }
-
-  /**
-   * Alert message
-   */
-  public alertMessage(): void {
-    if (
-      this.result.type === MavResult.MAV_RESULT_TEMPORARILY_REJECTED ||
-      this.result.type === MavResult.MAV_RESULT_DENIED ||
-      this.result.type === MavResult.MAV_RESULT_UNSUPPORTED ||
-      this.result.type === MavResult.MAV_RESULT_FAILED
-    ) {
-      Swal.fire({
-        title: 'Command Failed',
-        text: 'Command: ' + this.command.type + ' failed with result: ' + this.result.type,
-        icon: 'error',
-        confirmButtonText: 'OK',
-      })
-    } else if (this.result.type === MavResult.MAV_RESULT_ACCEPTED) {
-      Swal.fire({
-        title: 'Command Accepted',
-        text: 'Command: ' + this.command.type + ' succeeded with: ' + this.result.type,
-        icon: 'success',
-        confirmButtonText: 'OK',
-      })
-    } else if (this.result.type === MavResult.MAV_RESULT_IN_PROGRESS) {
-      Swal.fire({
-        title: 'Command In Progress',
-        text: 'Command: ' + this.command.type + ' is in progress',
-        icon: 'info',
-        confirmButtonText: 'OK',
-      })
-    } else {
-      Swal.fire({
-        title: 'Result Unknown',
-        text: 'Command: ' + this.command.type + ' result is unknown',
-        icon: 'error',
-        confirmButtonText: 'OK',
-      })
-    }
-  }
 }
 
 /**
diff --git a/src/libs/vehicle/vehicle.ts b/src/libs/vehicle/vehicle.ts
index bc6322f5a..5ecf77585 100644
--- a/src/libs/vehicle/vehicle.ts
+++ b/src/libs/vehicle/vehicle.ts
@@ -171,13 +171,13 @@ export abstract class AbstractVehicle<Modes> {
 
   abstract onMessage(message: Uint8Array): void
 
-  abstract arm(): boolean
+  abstract arm(): Promise<void>
   abstract altitude(): Altitude
   abstract attitude(): Attitude
   abstract batteries(): Battery[]
   abstract configurationPages(): PageDescription[]
   abstract cpuLoad(): number // Percentage
-  abstract disarm(): boolean
+  abstract disarm(): Promise<void>
   abstract isArmed(): boolean
   abstract mode(): Modes
   abstract modesAvailable(): Map<string, Modes>
@@ -188,6 +188,6 @@ export abstract class AbstractVehicle<Modes> {
   abstract lastParameter(): Parameter
   abstract statusText(): StatusText
   abstract statusGPS(): StatusGPS
-  abstract setMode(mode: Modes): void
+  abstract setMode(mode: Modes): Promise<void>
   abstract flying(): boolean
 }
diff --git a/src/stores/appInterface.ts b/src/stores/appInterface.ts
new file mode 100644
index 000000000..3fbf19803
--- /dev/null
+++ b/src/stores/appInterface.ts
@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+
+export const useAppInterfaceStore = defineStore('responsive', {
+  state: () => ({
+    width: window.innerWidth,
+  }),
+  actions: {
+    updateWidth() {
+      this.width = window.innerWidth
+    },
+  },
+  getters: {
+    isXs: (state) => state.width < 720, // Extra small devices (5-6" mobile screens in landscape)
+    isSm: (state) => state.width >= 720 && state.width < 980, // Small devices (6-7" mobile screens in landscape)
+    isMd: (state) => state.width >= 980 && state.width < 1280, // Medium devices (7-10" tablets in landscape)
+    isLg: (state) => state.width >= 1280 && state.width < 1600, // Large devices (HD in landscape)
+    isXl: (state) => state.width >= 1600 && state.width < 1920, // Extra large devices (HD+ desktop/laptop screens in landscape)
+    is2xl: (state) => state.width >= 1920, // FullHD and above - Extra extra large devices
+    currentWindowBreakpoint: (state) => {
+      if (state.width < 720) return 'xs'
+      if (state.width >= 720 && state.width < 980) return 'sm'
+      if (state.width >= 980 && state.width < 1280) return 'md'
+      if (state.width >= 1280 && state.width < 1600) return 'lg'
+      if (state.width >= 1600 && state.width < 1920) return 'xl'
+      if (state.width >= 1920) return '2xl'
+    },
+    currentWindowSize: (state) => `${state.width} x ${window.innerHeight}`,
+    isOnSmallScreen: (state) => state.width < 1280,
+    isOnPhoneScreen: () => window.innerHeight < 600,
+    mainMenuWidth: (state) => {
+      if (state.width < 720) return 78
+      if (state.width >= 720 && state.width < 980) return 78
+      if (state.width >= 980 && state.width < 1280) return 95
+      if (state.width >= 1280 && state.width < 1600) return 102
+      if (state.width >= 1600 && state.width < 1920) return 121
+      return 130
+    },
+  },
+})
diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
index 40e66d274..cf8b72b43 100644
--- a/src/stores/mainVehicle.ts
+++ b/src/stores/mainVehicle.ts
@@ -38,53 +38,25 @@ import { useControllerStore } from './controller'
 import { useWidgetManagerStore } from './widgetManager'
 
 /**
- * This is an abstraction that holds a customizable parameter that can fallback to a default value
- * @template T The customizable parameter type
+ * Custom parameter data description interface
  */
-class CustomizableParameter<T> {
-  private _customValue: T
-  private _defaultValue: () => T
-  isCustom = false
-
-  /**
-   * @param {Ref<T>} defaultVal The default parameter value
-   */
-  constructor(defaultVal: () => T) {
-    this._defaultValue = defaultVal
-    this._customValue = this.defaultValue
-  }
-
+interface CustomParameter<T> {
   /**
-   * Sets the URI to a given custom one
-   * @param {T} val
+   * Real data associated with the parameter
    */
-  set val(val: T) {
-    this._customValue = val
-  }
+  data: T
 
   /**
-   * @returns {T} The current configured parameter, whether default or custom
+   * Indicates if the custom parameter data is enabled
    */
-  get val(): T {
-    return this.isCustom ? this._customValue : this.defaultValue
-  }
-
-  /**
-   * @returns {T} The current configured parameter, whether default or custom
-   */
-  get defaultValue(): T {
-    return this._defaultValue()
-  }
-
-  /**
-   * Resets custom to the default value and disables custom
-   */
-  public reset(): void {
-    this.isCustom = false
-    this._customValue = this.defaultValue
-  }
+  enabled: boolean
 }
 
+const defaultRtcConfiguration = {
+  bundlePolicy: 'max-bundle',
+  iceServers: [],
+} as RTCConfiguration
+
 export const useMainVehicleStore = defineStore('main-vehicle', () => {
   const controllerStore = useControllerStore()
   const widgetStore = useWidgetManagerStore()
@@ -92,18 +64,22 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
 
   const cpuLoad = ref<number>()
   const globalAddress = useStorage('cockpit-vehicle-address', defaultGlobalAddress)
-  const _mainConnectionURI = new CustomizableParameter<Connection.URI>(() => {
-    const queryMainConnectionURI = new URLSearchParams(window.location.search).get('mainConnectionURI')
-    return new Connection.URI(
-      queryMainConnectionURI || `${ws_protocol}://${globalAddress.value}/mavlink2rest/ws/mavlink`
-    )
-  })
-  const mainConnectionURI = ref(_mainConnectionURI)
-  const _webRTCSignallingURI = new CustomizableParameter<Connection.URI>(() => {
-    const queryWebRTCSignallingURI = new URLSearchParams(window.location.search).get('webRTCSignallingURI')
-    return new Connection.URI(queryWebRTCSignallingURI || `${ws_protocol}://${globalAddress.value}:6021`)
+
+  const defaultMainConnectionURI = ref<string>(`${ws_protocol}://${globalAddress.value}/mavlink2rest/ws/mavlink`)
+  const defaultWebRTCSignallingURI = ref<string>(`${ws_protocol}://${globalAddress.value}:6021/`)
+  const customMainConnectionURI = useStorage('cockpit-vehicle-custom-main-connection-uri', {
+    data: defaultMainConnectionURI.value,
+    enabled: false,
+  } as CustomParameter<string>)
+  const customWebRTCSignallingURI = useStorage('cockpit-vehicle-custom-webrtc-signalling-uri', {
+    data: defaultWebRTCSignallingURI.value,
+    enabled: false,
+  } as CustomParameter<string>)
+  const customWebRTCConfiguration = useStorage('cockpit-custom-rtc-config', {
+    data: defaultRtcConfiguration,
+    enabled: false,
   })
-  const webRTCSignallingURI = ref(_webRTCSignallingURI)
+
   const lastHeartbeat = ref<Date>()
   const firmwareType = ref<MavAutopilot>()
   const vehicleType = ref<MavType>()
@@ -128,6 +104,18 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const modes = ref<Map<string, any>>()
 
+  const mainConnectionURI = computed(() => {
+    const queryURI = new URLSearchParams(window.location.search).get('mainConnectionURI')
+    const customURI = customMainConnectionURI.value.enabled ? customMainConnectionURI.value.data : undefined
+    return new Connection.URI(queryURI ?? customURI ?? defaultMainConnectionURI.value)
+  })
+
+  const webRTCSignallingURI = computed(() => {
+    const queryWebRTCSignallingURI = new URLSearchParams(window.location.search).get('webRTCSignallingURI')
+    const customURI = customWebRTCSignallingURI.value.enabled ? customWebRTCSignallingURI.value.data : undefined
+    return new Connection.URI(queryWebRTCSignallingURI ?? customURI ?? defaultWebRTCSignallingURI.value)
+  })
+
   /**
    * Check if vehicle is online (no more than 5 seconds passed since last heartbeat)
    * @returns { boolean } True if vehicle is online
@@ -136,6 +124,21 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     return lastHeartbeat.value !== undefined && new Date(timeNow.value).getTime() - lastHeartbeat.value.getTime() < 5000
   })
 
+  const rtcConfiguration = computed(() => {
+    const queryWebRtcConfiguration = new URLSearchParams(window.location.search).get('webRTCConfiguration')
+    if (queryWebRtcConfiguration) {
+      console.log('Using WebRTC configuration from query parameter')
+      console.log(queryWebRtcConfiguration)
+      try {
+        return JSON.parse(queryWebRtcConfiguration)
+      } catch (error) {
+        console.error('Failed to parse WebRTC configuration from query parameter.', error)
+      }
+    }
+    console.log('Using WebRTC configuration from storage.')
+    return customWebRTCConfiguration.value.enabled ? customWebRTCConfiguration.value.data : defaultRtcConfiguration
+  })
+
   /**
    * Arm the vehicle.
    * Awaits user confirmation before arming the vehicle. Resolves when arming is successful or rejects if the action is cancelled.
@@ -146,7 +149,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
       throw new Error('No vehicle available to arm.')
     }
 
-    mainVehicle.value.arm()
+    await mainVehicle.value.arm()
   }
 
   /**
@@ -159,7 +162,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
       throw new Error('No vehicle available to disarm.')
     }
 
-    mainVehicle.value.disarm()
+    await mainVehicle.value.disarm()
   }
 
   /**
@@ -171,7 +174,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
       throw new Error('No vehicle available for takeoff')
     }
 
-    mainVehicle.value.takeoff(altitude_setpoint.value)
+    await mainVehicle.value.takeoff(altitude_setpoint.value)
   }
   /**
    * Change the altitude of the vehicle.
@@ -194,7 +197,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
       throw new Error('No vehicle available to land.')
     }
 
-    mainVehicle.value.land()
+    await mainVehicle.value.land()
   }
 
   /**
@@ -293,10 +296,10 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
    * Set vehicle flight mode
    * @param {string} modeName
    */
-  function setFlightMode(modeName: string): void {
+  async function setFlightMode(modeName: string): Promise<void> {
     const enumMode = modes.value?.get(modeName)
     if (enumMode !== undefined) {
-      mainVehicle.value?.setMode(enumMode)
+      await mainVehicle.value?.setMode(enumMode)
     }
   }
 
@@ -319,12 +322,13 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
 
   ConnectionManager.onMainConnection.add(() => {
     const newMainConnection = ConnectionManager.mainConnection()
+    console.log('Main connection changed:', newMainConnection?.uri().toString())
     if (newMainConnection !== undefined) {
-      mainConnectionURI.value.val = newMainConnection.uri()
+      customMainConnectionURI.value.data = newMainConnection.uri().toString()
     }
   })
 
-  ConnectionManager.addConnection(mainConnectionURI.value.val, Protocol.Type.MAVLink)
+  ConnectionManager.addConnection(mainConnectionURI.value, Protocol.Type.MAVLink)
 
   const getAutoPilot = (vehicles: WeakRef<Vehicle.Abstract>[]): ArduPilot => {
     const vehicle = vehicles?.last()?.deref()
@@ -479,11 +483,6 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     }
   }, 10)
 
-  const rtcConfiguration = {
-    bundlePolicy: 'max-bundle',
-    iceServers: [],
-  } as RTCConfiguration
-
   return {
     arm,
     takeoff,
@@ -501,7 +500,11 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     startMission,
     globalAddress,
     mainConnectionURI,
+    customMainConnectionURI,
+    defaultMainConnectionURI,
     webRTCSignallingURI,
+    customWebRTCSignallingURI,
+    defaultWebRTCSignallingURI,
     cpuLoad,
     lastHeartbeat,
     firmwareType,
@@ -521,6 +524,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     icon,
     configurationPages,
     rtcConfiguration,
+    customWebRTCConfiguration,
     genericVariables,
     availableGenericVariables,
     registerUsageOfGenericVariable,
diff --git a/src/stores/video.ts b/src/stores/video.ts
index 0418c4958..a1f733678 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -10,6 +10,7 @@ import { computed, ref, watch } from 'vue'
 import fixWebmDuration from 'webm-duration-fix'
 import adapter from 'webrtc-adapter'
 
+import { useInteractionDialog } from '@/composables/interactionDialog'
 import { WebRTCManager } from '@/composables/webRTC'
 import { getIpsInformationFromVehicle } from '@/libs/blueos'
 import { availableCockpitActions, registerActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
@@ -18,13 +19,23 @@ import { isEqual } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
 import { Alert, AlertLevel } from '@/types/alert'
-import type { FileDescriptor, StorageDB, StreamData, UnprocessedVideoInfo, VideoProcessingDetails } from '@/types/video'
+import {
+  type DownloadProgressCallback,
+  type FileDescriptor,
+  type StorageDB,
+  type StreamData,
+  type UnprocessedVideoInfo,
+  type VideoProcessingDetails,
+  getBlobExtensionContainer,
+  VideoExtensionContainer,
+} from '@/types/video'
 
 import { useAlertStore } from './alert'
 
 export const useVideoStore = defineStore('video', () => {
   const missionStore = useMissionStore()
   const alertStore = useAlertStore()
+  const { showDialog } = useInteractionDialog()
 
   const { globalAddress, rtcConfiguration, webRTCSignallingURI } = useMainVehicleStore()
   console.debug('[WebRTC] Using webrtc-adapter for', adapter.browserDetails)
@@ -33,7 +44,7 @@ export const useVideoStore = defineStore('video', () => {
   const allowedIceProtocols = useStorage<string[]>('cockpit-allowed-stream-protocols', [])
   const jitterBufferTarget = useStorage<number | null>('cockpit-jitter-buffer-target', 0)
   const activeStreams = ref<{ [key in string]: StreamData | undefined }>({})
-  const mainWebRTCManager = new WebRTCManager(webRTCSignallingURI.val, rtcConfiguration)
+  const mainWebRTCManager = new WebRTCManager(webRTCSignallingURI, rtcConfiguration)
   const availableIceIps = ref<string[]>([])
   const unprocessedVideos = useStorage<{ [key in string]: UnprocessedVideoInfo }>('cockpit-unprocessed-video-info', {})
   const timeNow = useTimestamp({ interval: 500 })
@@ -76,7 +87,7 @@ export const useVideoStore = defineStore('video', () => {
    */
   const activateStream = (streamName: string): void => {
     const stream = ref()
-    const webRtcManager = new WebRTCManager(webRTCSignallingURI.val, rtcConfiguration)
+    const webRtcManager = new WebRTCManager(webRTCSignallingURI, rtcConfiguration)
     const { mediaStream, connected } = webRtcManager.startStream(
       stream,
       allowedIceIps,
@@ -252,6 +263,26 @@ export const useVideoStore = defineStore('video', () => {
     unprocessedVideos.value = { ...unprocessedVideos.value, ...{ [recordingHash]: videoInfo } }
 
     activeStreams.value[streamName]!.mediaRecorder!.start(1000)
+
+    let losingChunksWarningIssued = false
+    const unsavedChunkAlerts: { [key in string]: ReturnType<typeof setTimeout> } = {}
+
+    const warnAboutChunkLoss = (): void => {
+      const chunkLossWarningMsg = `A part of your video recording could not be saved.
+        This usually happens when the device's storage is full or the performance is low.
+        We recommend stopping the recording and trying again, as the video may be incomplete or corrupted
+        on several parts.`
+
+      console.error(chunkLossWarningMsg)
+      showDialog({ title: 'Video Recording Issue', message: chunkLossWarningMsg, variant: 'error' })
+
+      losingChunksWarningIssued = true
+      Object.keys(unsavedChunkAlerts).forEach((key) => {
+        clearTimeout(unsavedChunkAlerts[key])
+        delete unsavedChunkAlerts[key]
+      })
+    }
+
     let chunksCount = -1
     activeStreams.value[streamName]!.mediaRecorder!.ondataavailable = async (e) => {
       // Since this operation is async, at any given moment there might be more than one chunk processing promise started.
@@ -259,7 +290,17 @@ export const useVideoStore = defineStore('video', () => {
       // update the chunk count/name before anything else.
       chunksCount++
       const chunkName = `${recordingHash}_${chunksCount}`
-      await tempVideoChunksDB.setItem(chunkName, e.data)
+      if (!losingChunksWarningIssued) {
+        unsavedChunkAlerts[chunkName] = setTimeout(() => warnAboutChunkLoss(), 5000)
+      }
+
+      try {
+        await tempVideoChunksDB.setItem(chunkName, e.data)
+      } catch {
+        if (!losingChunksWarningIssued) warnAboutChunkLoss()
+        return
+      }
+
       const updatedInfo = unprocessedVideos.value[recordingHash]
       updatedInfo.dateLastRecordingUpdate = new Date()
       unprocessedVideos.value = { ...unprocessedVideos.value, ...{ [recordingHash]: updatedInfo } }
@@ -269,7 +310,7 @@ export const useVideoStore = defineStore('video', () => {
         try {
           const videoChunk = await tempVideoChunksDB.getItem(chunkName)
           if (videoChunk) {
-            const firstChunkBlob = new Blob([videoChunk as Blob], { type: 'video/webm;codecs=vp9' })
+            const firstChunkBlob = new Blob([videoChunk as Blob])
             const thumbnail = await extractThumbnailFromVideo(firstChunkBlob)
             updatedInfo.thumbnail = thumbnail
             unprocessedVideos.value = { ...unprocessedVideos.value, ...{ [recordingHash]: updatedInfo } }
@@ -278,6 +319,10 @@ export const useVideoStore = defineStore('video', () => {
           console.error('Failed to extract thumbnail:', error)
         }
       }
+
+      // If the chunk was saved, remove it from the unsaved list
+      clearTimeout(unsavedChunkAlerts[chunkName])
+      delete unsavedChunkAlerts[chunkName]
     }
 
     activeStreams.value[streamName]!.mediaRecorder!.onstop = async () => {
@@ -308,16 +353,26 @@ export const useVideoStore = defineStore('video', () => {
     }
   }
 
-  const createZipAndDownload = async (files: FileDescriptor[], zipFilename: string): Promise<void> => {
-    const zipWriter = new ZipWriter(new BlobWriter('application/zip'))
-    for (const { filename, blob } of files) {
-      await zipWriter.add(filename, new BlobReader(blob))
-    }
+  const createZipAndDownload = async (
+    files: FileDescriptor[],
+    zipFilename: string,
+    progressCallback?: DownloadProgressCallback
+  ): Promise<void> => {
+    const zipWriter = new ZipWriter(new BlobWriter('application/zip'), { level: 0 })
+    const zipAddingPromises = files.map(({ filename, blob }) => {
+      zipWriter.add(filename, new BlobReader(blob), { onprogress: progressCallback })
+    })
+    Promise.all(zipAddingPromises)
     const blob = await zipWriter.close()
     saveAs(blob, zipFilename)
   }
 
-  const downloadFiles = async (db: StorageDB, keys: string[], zipFilenamePrefix: string): Promise<void> => {
+  const downloadFiles = async (
+    db: StorageDB,
+    keys: string[],
+    zipFilenamePrefix: string,
+    progressCallback?: DownloadProgressCallback
+  ): Promise<void> => {
     const maybeFiles = await Promise.all(
       keys.map(async (key) => ({
         blob: await db.getItem(key),
@@ -335,25 +390,29 @@ export const useVideoStore = defineStore('video', () => {
     if (files.length === 1) {
       saveAs(files[0].blob, files[0].filename)
     } else {
-      await createZipAndDownload(files, `${zipFilenamePrefix}.zip`)
+      await createZipAndDownload(files, `${zipFilenamePrefix}.zip`, progressCallback)
     }
   }
 
-  const downloadFilesFromVideoDB = async (fileNames: string[]): Promise<void> => {
+  const downloadFilesFromVideoDB = async (
+    fileNames: string[],
+    progressCallback?: DownloadProgressCallback
+  ): Promise<void> => {
     console.debug(`Downloading files from the video recovery database: ${fileNames.join(', ')}`)
     await downloadFiles(
       videoStoringDB,
       fileNames,
-      fileNames.length > 1 ? 'Cockpit-Video-Recordings' : 'Cockpit-Video-Recording'
+      fileNames.length > 1 ? 'Cockpit-Video-Recordings' : 'Cockpit-Video-Recording',
+      progressCallback
     )
   }
 
-  const downloadTempVideo = async (hashes: string[]): Promise<void> => {
+  const downloadTempVideo = async (hashes: string[], progressCallback?: DownloadProgressCallback): Promise<void> => {
     console.debug(`Downloading ${hashes.length} video chunks from the temporary database.`)
 
     for (const hash of hashes) {
       const fileNames = (await tempVideoChunksDB.keys()).filter((filename) => filename.includes(hash))
-      await downloadFiles(tempVideoChunksDB, fileNames, `Cockpit-Unprocessed-Video-Chunks-${hash}`)
+      await downloadFiles(tempVideoChunksDB, fileNames, `Cockpit-Unprocessed-Video-Chunks-${hash}`, progressCallback)
     }
   }
 
@@ -468,13 +527,23 @@ export const useVideoStore = defineStore('video', () => {
       updateLastProcessingUpdate(hash)
 
       const chunkBlobs = chunks.map((chunk) => chunk.blob)
+      const extensionContainer = getBlobExtensionContainer(chunkBlobs[0])
       debouncedUpdateFileProgress(info.fileName, 50, 'Processing video chunks.')
-      const durFixedBlob = await fixWebmDuration(new Blob([...chunkBlobs], { type: 'video/webm;codecs=vp9' }))
+
+      const mergedBlob = new Blob([...chunkBlobs])
+
+      let durFixedBlob: Blob | undefined = undefined
+      try {
+        durFixedBlob = await fixWebmDuration(mergedBlob)
+      } catch {
+        const errorMsg = 'Failed to fix video duration. The processed video may present issues or be unplayable.'
+        showDialog({ title: 'Video Processing Issue', message: errorMsg, variant: 'error' })
+      }
 
       updateLastProcessingUpdate(hash)
 
       debouncedUpdateFileProgress(info.fileName, 75, `Saving video file.`)
-      await videoStoringDB.setItem(`${info.fileName}.webm`, durFixedBlob)
+      await videoStoringDB.setItem(`${info.fileName}.${extensionContainer || '.webm'}`, durFixedBlob ?? mergedBlob)
 
       updateLastProcessingUpdate(hash)
 
@@ -578,6 +647,13 @@ export const useVideoStore = defineStore('video', () => {
     }
   }
 
+  const isVideoFilename = (filename: string): boolean => {
+    for (const ext of Object.values(VideoExtensionContainer)) {
+      if (filename.endsWith(ext)) return true
+    }
+    return false
+  }
+
   const issueSelectedIpNotAvailableWarning = (): void => {
     Swal.fire({
       html: `
@@ -742,5 +818,6 @@ export const useVideoStore = defineStore('video', () => {
     currentFileProgress,
     overallProgress,
     processVideoChunksAndTelemetry,
+    isVideoFilename,
   }
 })
diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts
index feb082fe2..a4ab95979 100644
--- a/src/stores/widgetManager.ts
+++ b/src/stores/widgetManager.ts
@@ -30,7 +30,7 @@ const savedProfilesKey = 'cockpit-saved-profiles-v8'
 export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const vehicleStore = useMainVehicleStore()
   const editingMode = ref(false)
-  const showGrid = ref(true)
+  const snapToGrid = ref(true)
   const gridInterval = ref(0.01)
   const currentMiniWidgetsProfile = useStorage('cockpit-mini-widgets-profile-v4', miniWidgetsProfile)
   const savedProfiles = useStorage<Profile[]>(savedProfilesKey, [])
@@ -38,6 +38,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const currentProfileIndex = useStorage('cockpit-current-profile-index', 0)
   const desiredTopBarHeightPixels = ref(48)
   const desiredBottomBarHeightPixels = ref(48)
+  const visibleAreaMinClearancePixels = ref(20)
   const vehicleTypeProfileCorrespondency = useStorage<typeof defaultProfileVehicleCorrespondency>(
     'cockpit-default-vehicle-type-profiles',
     defaultProfileVehicleCorrespondency
@@ -122,14 +123,24 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
 
   /**
    * Gets whether or not the widget is on the active view
-   * @returns { number } The bottom clearance, in pixels, a widget should add on it's content to ensure they are not under the bottom bar
+   * @returns { { top: number, bottom: number } } The top and bottom clearances, in pixels, a widget should add on it's content to ensure they are not under the top/bottom bar.
+   * Positive clearances mean the widget is already under the bar, while negative clearances mean the widget is that amount away from the bar.
    * @param { Widget } widget - Widget
    */
-  const widgetBottomClearanceForVisibleArea = (widget: Widget): number => {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  const widgetClearanceForVisibleArea = (widget: Widget): { top: number; bottom: number } => {
+    const clearances = { top: 0, bottom: 0 }
     const { height: windowHeight } = useWindowSize()
-    const bottomEdgeHeightPixels = windowHeight.value * (1 - widget.position.y - widget.size.height)
-    if (bottomEdgeHeightPixels > currentBottomBarHeightPixels.value) return 0
-    return currentBottomBarHeightPixels.value - bottomEdgeHeightPixels
+
+    const widgetTopEdgePixels = windowHeight.value * widget.position.y
+    const topBarStartPixels = currentTopBarHeightPixels.value
+    clearances.top = widgetTopEdgePixels - topBarStartPixels
+
+    const widgetBottomEdgePixels = windowHeight.value * (widget.position.y + widget.size.height)
+    const bottomBarStartPixels = windowHeight.value - currentBottomBarHeightPixels.value
+    clearances.bottom = bottomBarStartPixels - widgetBottomEdgePixels
+
+    return clearances
   }
 
   /**
@@ -617,7 +628,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
 
   return {
     editingMode,
-    showGrid,
+    snapToGrid,
     gridInterval,
     currentProfile,
     currentView,
@@ -651,10 +662,11 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     exportProfilesToVehicle,
     loadDefaultProfileForVehicle,
     isWidgetVisible,
-    widgetBottomClearanceForVisibleArea,
+    widgetClearanceForVisibleArea,
     isRealMiniWidget,
     desiredTopBarHeightPixels,
     desiredBottomBarHeightPixels,
+    visibleAreaMinClearancePixels,
     currentTopBarHeightPixels,
     currentBottomBarHeightPixels,
   }
diff --git a/src/styles/global.css b/src/styles/global.css
index 33e873d2c..40f19d470 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -52,7 +52,12 @@
 ::-webkit-scrollbar-thumb:hover {
     background-color: hsla(0, 0%, 0%, 0.411);
 }
-
+.v-text-field input { 
+    background-color: transparent;  
+}
+.v-field__input {
+    background-color: transparent;
+}
 select:focus {
     outline: none;
 }
\ No newline at end of file
diff --git a/src/types/video.ts b/src/types/video.ts
index 586376dbd..3077bf30d 100644
--- a/src/types/video.ts
+++ b/src/types/video.ts
@@ -111,3 +111,22 @@ export interface FileDescriptor {
 export interface StorageDB {
   getItem: (key: string) => Promise<Blob | null | undefined>
 }
+
+export type DownloadProgressCallback = (progress: number, total: number) => Promise<void>
+
+export enum VideoExtensionContainer {
+  MKV = 'mkv',
+  MP4 = 'mp4',
+  WEBM = 'webm',
+}
+
+export const getBlobExtensionContainer = (blob: Blob): VideoExtensionContainer | undefined => {
+  if (blob.type.includes('matroska')) {
+    return VideoExtensionContainer.MKV
+  } else if (blob.type.includes('mp4')) {
+    return VideoExtensionContainer.MP4
+  } else if (blob.type.includes('webm')) {
+    return VideoExtensionContainer.WEBM
+  }
+  return undefined
+}
diff --git a/src/views/BaseConfigurationView.vue b/src/views/BaseConfigurationView.vue
index 51a803e8a..6c5176d86 100644
--- a/src/views/BaseConfigurationView.vue
+++ b/src/views/BaseConfigurationView.vue
@@ -1,11 +1,20 @@
 <template>
-  <v-card class="elevation-0">
-    <v-card-title class="flex-centered mt-2">
+  <div class="bg-transparent text-white px-[1vw] pb-[2vh]">
+    <div class="absolute top-0 right-0 py-2 pr-3">
+      <slot name="help-icon"></slot>
+    </div>
+    <div
+      class="font-semibold flex-centered mt-3"
+      :style="{ fontSize: interfaceStore.isOnSmallScreen ? '16px' : '20px' }"
+    >
       <slot name="title"></slot>
-    </v-card-title>
-    <v-divider />
-    <v-card-text class="flex-centered flex-column">
+    </div>
+    <div class="flex-center flex-column">
       <slot name="content"></slot>
-    </v-card-text>
-  </v-card>
+    </div>
+  </div>
 </template>
+<script setup lang="ts">
+import { useAppInterfaceStore } from '@/stores/appInterface'
+const interfaceStore = useAppInterfaceStore()
+</script>
diff --git a/src/views/ConfigurationGeneralView.vue b/src/views/ConfigurationGeneralView.vue
index 3627eb757..c453561b1 100644
--- a/src/views/ConfigurationGeneralView.vue
+++ b/src/views/ConfigurationGeneralView.vue
@@ -1,156 +1,289 @@
 <template>
   <BaseConfigurationView>
+    <template #help-icon>
+      <GlassButton
+        icon="mdi-help-circle-outline"
+        :icon-size="interfaceStore.isOnSmallScreen ? 16 : 24"
+        :icon-class="interfaceStore.isOnSmallScreen ? '-ml-[1px]' : ''"
+        variant="round"
+        @click="openHelpDialog"
+      />
+    </template>
     <template #title>General configuration</template>
     <template #content>
-      <v-card class="pb-2 pa-5 ma-4" max-width="600px">
-        <v-icon :icon="'mdi-earth'" class="mr-3" />
-        <span class="text-h6">Global vehicle address</span>
-        <v-form
-          ref="globalAddressForm"
-          v-model="globalAddressFormValid"
-          class="justify-center d-flex align-center"
-          @submit.prevent="setGlobalAddress"
-        >
-          <v-text-field
-            v-model="newGlobalAddress"
-            variant="underlined"
-            type="input"
-            hint="Address of the Vehicle. E.g: blueos.local"
-            class="uri-input"
-            :rules="[isValidHostAddress, isValidConnectionURI]"
-          />
-
-          <v-btn v-tooltip.bottom="'Set'" icon="mdi-check" class="mx-1 mb-5 pa-0" rounded="lg" flat type="submit" />
-          <v-btn
-            v-tooltip.bottom="'Reset to default'"
-            :disabled="newGlobalAddress === defaultGlobalAddress"
-            icon="mdi-refresh"
-            class="mx-1 mb-5 pa-0"
-            rounded="lg"
-            flat
-            @click="resetGlobalAddress"
-          />
-        </v-form>
-        <span>Current address: {{ mainVehicleStore.globalAddress }} </span><br />
-      </v-card>
-      <v-card class="pb-2 pa-5 ma-4" max-width="600px">
-        <v-progress-circular v-if="vehicleConnected === undefined" indeterminate size="24" class="mr-3" />
-        <v-icon v-else :icon="vehicleConnected ? 'mdi-lan-connect' : 'mdi-lan-disconnect'" class="mr-3" />
-        <span class="text-h6">Mavlink2Rest connection</span>
-        <v-form
-          ref="connectionForm"
-          v-model="connectionFormValid"
-          class="justify-center d-flex align-center"
-          @submit.prevent="addNewVehicleConnection"
-        >
-          <v-checkbox
-            v-model="connectionURI.isCustom"
-            v-tooltip.bottom="'Enable custom'"
-            class="mx-1 mb-5 pa-0"
-            rounded="lg"
-            hide-details
-          />
-
-          <v-text-field
-            v-model="connectionURI.val"
-            :disabled="!connectionURI.isCustom"
-            label="Mavlink2Rest URI"
-            variant="underlined"
-            type="input"
-            hint="URI of a Mavlink2Rest web-socket"
-            class="uri-input"
-            :rules="[isValidSocketConnectionURI]"
-          />
-
-          <v-btn v-tooltip.bottom="'Set'" icon="mdi-check" class="mx-1 mb-5 pa-0" rounded="lg" flat type="submit" />
-          <v-btn
-            v-tooltip.bottom="'Reset to default'"
-            :disabled="connectionURI.toString() === connectionURI.defaultValue.toString()"
-            icon="mdi-refresh"
-            class="mx-1 mb-5 pa-0"
-            rounded="lg"
-            flat
-            @click="resetVehicleConnection"
-          />
-        </v-form>
-        <span>Current address: {{ ConnectionManager.mainConnection()?.uri().toString() ?? 'none' }} </span><br />
-        <span
-          >Status:
-          {{
-            vehicleConnected ? 'connected' : vehicleConnected === undefined ? 'connecting...' : 'failed to connect'
-          }}</span
-        >
-      </v-card>
-      <v-card class="pb-2 pa-5 ma-4" max-width="600px">
-        <v-icon :icon="'mdi-lan-pending'" class="mr-3" />
-        <span class="text-h6">WebRTC connection</span>
-        <v-form
-          ref="webRTCSignallingForm"
-          v-model="webRTCSignallingFormValid"
-          class="justify-center d-flex align-center"
-          @submit.prevent="setWebRTCSignallingURI"
-        >
-          <v-checkbox
-            v-model="webRTCSignallingURI.isCustom"
-            v-tooltip.bottom="'Enable custom'"
-            class="mx-1 mb-5 pa-0"
-            rounded="lg"
-            hide-details
-          />
-
-          <v-text-field
-            v-model="webRTCSignallingURI.val"
-            :disabled="!webRTCSignallingURI.isCustom"
-            label="WebRTC Signalling Server URI"
-            variant="underlined"
-            type="input"
-            hint="URI of a WebRTC Signalling Server URI"
-            class="uri-input"
-            :rules="[isValidSocketConnectionURI]"
-          />
-
-          <v-btn v-tooltip.bottom="'Set'" icon="mdi-check" class="mx-1 mb-5 pa-0" rounded="lg" flat type="submit" />
-          <v-btn
-            v-tooltip.bottom="'Reset to default'"
-            :disabled="webRTCSignallingURI.val.toString() === webRTCSignallingURI.defaultValue.toString()"
-            icon="mdi-refresh"
-            class="mx-1 mb-5 pa-0"
-            rounded="lg"
-            flat
-            @click="resetWebRTCSignallingURI"
-          />
-        </v-form>
-        <span>Current address: {{ mainVehicleStore.webRTCSignallingURI.val.toString() }} </span><br />
-      </v-card>
+      <div class="flex-col h-full mx-[1vw] w-[540px]">
+        <ExpansiblePanel no-top-divider :is-expanded="!interfaceStore.isOnSmallScreen">
+          <template #title>Global vehicle address</template>
+          <template #subtitle>Current address: {{ mainVehicleStore.globalAddress }}</template>
+          <template #content>
+            <v-form
+              ref="globalAddressForm"
+              v-model="globalAddressFormValid"
+              class="flex w-full mt-2"
+              @submit.prevent="setGlobalAddress"
+            >
+              <div class="flex justify-center align-center">
+                <v-text-field
+                  v-model="newGlobalAddress"
+                  variant="filled"
+                  type="input"
+                  :density="interfaceStore.isOnSmallScreen ? 'compact' : 'default'"
+                  hint="Address of the Vehicle. E.g: blueos.local"
+                  class="uri-input"
+                  :rules="[isValidHostAddress, isValidConnectionURI]"
+                  @click:append-inner="resetGlobalAddress"
+                >
+                  <template #append-inner>
+                    <v-icon v-tooltip.bottom="'Reset global address'" color="white" @click="resetGlobalAddress">
+                      mdi-refresh
+                    </v-icon>
+                  </template>
+                </v-text-field>
+                <v-btn
+                  :size="interfaceStore.isOnSmallScreen ? 'small' : 'default'"
+                  class="bg-transparent -mt-5"
+                  :class="interfaceStore.isOnSmallScreen ? 'ml-1' : 'ml-5'"
+                  variant="text"
+                  type="submit"
+                >
+                  Apply
+                </v-btn>
+              </div>
+            </v-form>
+          </template>
+        </ExpansiblePanel>
+        <ExpansiblePanel no-top-divider :is-expanded="!interfaceStore.isOnSmallScreen">
+          <template #title>Mavlink2Rest connection</template>
+          <template #subtitle>
+            Current address: {{ ConnectionManager.mainConnection()?.uri().toString() ?? 'none' }}<br />
+            Status:
+            {{
+              vehicleConnected ? 'connected' : vehicleConnected === undefined ? 'connecting...' : 'failed to connect'
+            }}
+          </template>
+          <template #content>
+            <v-progress-circular v-if="vehicleConnected === undefined" indeterminate size="24" class="mr-3" />
+            <v-form
+              ref="mainConnectionForm"
+              v-model="mainConnectionFormValid"
+              class="flex w-full mt-2"
+              @submit.prevent="setMainVehicleConnectionURI"
+            >
+              <div class="flex flex-row w-full justify-between align-center">
+                <div class="w-[350px]">
+                  <v-text-field
+                    v-model="mainConnectionURI"
+                    :disabled="!mainVehicleStore.customMainConnectionURI.enabled"
+                    variant="filled"
+                    type="input"
+                    :density="interfaceStore.isOnSmallScreen ? 'compact' : 'default'"
+                    hint="URI of a Mavlink2Rest web-socket"
+                    :rules="[isValidSocketConnectionURI]"
+                  >
+                    <template #append-inner>
+                      <v-icon
+                        v-tooltip.bottom="'Reset to default'"
+                        color="white"
+                        :disabled="!mainVehicleStore.customMainConnectionURI.enabled"
+                        @click="resetMainVehicleConnectionURI"
+                      >
+                        mdi-refresh
+                      </v-icon>
+                    </template>
+                  </v-text-field>
+                </div>
+
+                <v-btn
+                  :size="interfaceStore.isOnSmallScreen ? 'small' : 'default'"
+                  class="bg-transparent -mt-5 -ml-6"
+                  :disabled="!mainVehicleStore.customMainConnectionURI.enabled"
+                  variant="text"
+                  type="submit"
+                >
+                  Apply
+                </v-btn>
+                <div
+                  class="flex flex-col align-end text-[10px]"
+                  :class="interfaceStore.isOnSmallScreen ? '-mt-3' : '-mt-5'"
+                >
+                  <v-switch
+                    v-model="mainVehicleStore.customMainConnectionURI.enabled"
+                    v-tooltip.bottom="'Enable custom'"
+                    class="-mt-5 bg-transparent"
+                    :class="interfaceStore.isOnSmallScreen ? 'mr-1' : undefined"
+                    :density="interfaceStore.isOnSmallScreen ? 'compact' : 'default'"
+                    hide-details
+                  />
+                  <div class="-mt-[4px]">
+                    {{ mainVehicleStore.customMainConnectionURI.enabled ? 'Enabled' : 'Disabled' }}
+                  </div>
+                </div>
+              </div>
+            </v-form>
+          </template>
+        </ExpansiblePanel>
+        <ExpansiblePanel no-top-divider no-bottom-divider :is-expanded="!interfaceStore.isOnSmallScreen">
+          <template #title>WebRTC connection</template>
+          <template #subtitle>Current address: {{ mainVehicleStore.webRTCSignallingURI.toString() }}</template>
+          <template #content>
+            <v-form
+              ref="webRTCSignallingForm"
+              v-model="webRTCSignallingFormValid"
+              class="justify-center d-flex align-center mt-2"
+              @submit.prevent="setWebRTCSignallingURI"
+            >
+              <div class="flex justify-between align-center w-full">
+                <div class="w-[350px]">
+                  <v-text-field
+                    v-model="webRTCSignallingURI"
+                    :disabled="!mainVehicleStore.customWebRTCSignallingURI.enabled"
+                    variant="filled"
+                    type="input"
+                    :density="interfaceStore.isOnSmallScreen ? 'compact' : 'default'"
+                    hint="URI of a WebRTC Signalling Server URI"
+                    class="uri-input"
+                    :rules="[isValidSocketConnectionURI]"
+                  >
+                    <template #append-inner>
+                      <v-icon
+                        v-tooltip.bottom="'Reset to default'"
+                        color="white"
+                        :disabled="!mainVehicleStore.customWebRTCSignallingURI.enabled"
+                        @click="resetWebRTCSignallingURI"
+                      >
+                        mdi-refresh
+                      </v-icon>
+                    </template>
+                  </v-text-field>
+                </div>
+                <v-btn
+                  :size="interfaceStore.isOnSmallScreen ? 'small' : 'default'"
+                  :disabled="!mainVehicleStore.customWebRTCSignallingURI.enabled"
+                  class="bg-transparent -mt-5 -ml-6"
+                  variant="text"
+                  type="submit"
+                >
+                  Apply
+                </v-btn>
+                <div
+                  class="flex flex-col align-end text-[10px]"
+                  :class="interfaceStore.isOnSmallScreen ? '-mt-3' : '-mt-5'"
+                >
+                  <v-switch
+                    v-model="mainVehicleStore.customWebRTCSignallingURI.enabled"
+                    v-tooltip.bottom="'Enable custom'"
+                    class="-mt-5 bg-transparent"
+                    :class="interfaceStore.isOnSmallScreen ? 'mr-1' : undefined"
+                    :density="interfaceStore.isOnSmallScreen ? 'compact' : 'default'"
+                    hide-details
+                  />
+                  <div class="-mt-[4px]">
+                    {{ mainVehicleStore.customWebRTCSignallingURI.enabled ? 'Enabled' : 'Disabled' }}
+                  </div>
+                </div>
+              </div>
+            </v-form>
+          </template>
+        </ExpansiblePanel>
+        <ExpansiblePanel no-bottom-divider :is-expanded="!interfaceStore.isOnSmallScreen">
+          <template #title>Custom RTC Configuration</template>
+          <template #content>
+            <div class="flex justify-between mt-2 w-full">
+              <v-textarea
+                id="rtcConfigTextInput"
+                v-model="customRtcConfiguration"
+                :disabled="!mainVehicleStore.customWebRTCConfiguration.enabled"
+                variant="outlined"
+                label="Custom WebRTC Configuration"
+                :rows="6"
+                hint="e.g.: { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] }"
+                class="w-full"
+              />
+              <div class="flex flex-col justify-around align-center w-[100px] -mr-6">
+                <GlassButton
+                  :size="interfaceStore.isOnSmallScreen ? 'small' : 'default'"
+                  variant="uncontained"
+                  label="APPLY"
+                  :disabled="!mainVehicleStore.customWebRTCConfiguration.enabled"
+                  label-class="font-thin text-[15px] opacity-[0.95] -ml-1"
+                  no-effects
+                  class="-mt-8"
+                  @click="handleCustomRtcConfiguration"
+                />
+                <div class="flex flex-col align-end text-[10px] -mt-8">
+                  <v-switch
+                    v-model="mainVehicleStore.customWebRTCConfiguration.enabled"
+                    v-tooltip.bottom="'Enable custom'"
+                    class="-mt-5 bg-transparent"
+                    rounded="lg"
+                    hide-details
+                  />
+                  <div class="-mt-[4px]">
+                    {{ mainVehicleStore.customWebRTCConfiguration.enabled ? 'Enabled' : 'Disabled' }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </ExpansiblePanel>
+      </div>
     </template>
   </BaseConfigurationView>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 import { defaultGlobalAddress } from '@/assets/defaults'
+import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
+import GlassButton from '@/components/GlassButton.vue'
+import { useInteractionDialog } from '@/composables/interactionDialog'
 import * as Connection from '@/libs/connection/connection'
 import { ConnectionManager } from '@/libs/connection/connection-manager'
 import { isValidNetworkAddress } from '@/libs/utils'
 import * as Protocol from '@/libs/vehicle/protocol/protocol'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 import BaseConfigurationView from './BaseConfigurationView.vue'
 
 const mainVehicleStore = useMainVehicleStore()
+const interfaceStore = useAppInterfaceStore()
+const { showDialog } = useInteractionDialog()
 
 const globalAddressForm = ref()
 const globalAddressFormValid = ref(false)
 const newGlobalAddress = ref(mainVehicleStore.globalAddress)
 
-const webRTCSignallingForm = ref()
-const webRTCSignallingFormValid = ref(false)
-const webRTCSignallingURI = ref(mainVehicleStore.webRTCSignallingURI)
+const setGlobalAddress = async (): Promise<void> => {
+  await globalAddressForm.value.validate()
+
+  const validation = isValidConnectionURI(newGlobalAddress.value)
+  if (validation !== true) {
+    alert(validation)
+    return
+  }
+
+  mainVehicleStore.globalAddress = newGlobalAddress.value
 
-const connectionForm = ref()
-const connectionFormValid = ref(false)
-const connectionURI = ref(mainVehicleStore.mainConnectionURI)
+  // Temporary solution to actually set the address and connect the vehicle, since this is non-reactive today.
+  // TODO: Modify the store variables to be reactive.
+  location.reload()
+}
+
+const resetGlobalAddress = async (): Promise<void> => {
+  newGlobalAddress.value = defaultGlobalAddress
+
+  await setGlobalAddress()
+}
+
+const handleCustomRtcConfiguration = (): void => {
+  if (mainVehicleStore.customWebRTCConfiguration.enabled) {
+    updateWebRtcConfiguration()
+  }
+}
+
+/** Main vehicle connection */
 
 const vehicleConnected = ref<boolean | undefined>(mainVehicleStore.isVehicleOnline)
 watch(
@@ -158,6 +291,109 @@ watch(
   () => (vehicleConnected.value = mainVehicleStore.isVehicleOnline)
 )
 
+const mainConnectionForm = ref()
+const mainConnectionFormValid = ref(false)
+const mainConnectionURI = ref(mainVehicleStore.mainConnectionURI)
+
+const addNewVehicleConnection = async (conn: Connection.URI): Promise<void> => {
+  mainConnectionURI.value = conn
+  vehicleConnected.value = undefined
+  setTimeout(() => (vehicleConnected.value ??= false), 5000)
+  try {
+    ConnectionManager.addConnection(new Connection.URI(conn), Protocol.Type.MAVLink)
+  } catch (error) {
+    console.error(error)
+    alert(`Could not update main connection. ${error}.`)
+    return
+  }
+  console.debug(`New connection successfully configured to ${conn.toString()}.`)
+}
+
+watch(
+  () => mainVehicleStore.mainConnectionURI,
+  (val: Connection.URI) => {
+    if (val.toString() === mainConnectionURI.value.toString()) {
+      return
+    }
+
+    addNewVehicleConnection(val)
+  }
+)
+
+const setMainVehicleConnectionURI = async (): Promise<void> => {
+  const res = await mainConnectionForm.value.validate()
+
+  if (!res.valid) {
+    return
+  }
+
+  mainVehicleStore.customMainConnectionURI = {
+    data: mainConnectionURI.value.toString(),
+    enabled: true,
+  }
+
+  addNewVehicleConnection(mainConnectionURI.value)
+}
+
+const resetMainVehicleConnectionURI = async (): Promise<void> => {
+  mainVehicleStore.customMainConnectionURI = {
+    enabled: false,
+    data: mainVehicleStore.defaultMainConnectionURI.toString(),
+  }
+}
+
+const webRTCSignallingForm = ref()
+const webRTCSignallingFormValid = ref(false)
+const webRTCSignallingURI = ref(mainVehicleStore.webRTCSignallingURI)
+
+const addWebRTCConnection = async (conn: Connection.URI): Promise<void> => {
+  webRTCSignallingURI.value = conn
+
+  // This works as a reset for the custom URI, and its not needed in mainConnectionURI since on Add from
+  // ConnectionManager it will be set.
+  if (!mainVehicleStore.customWebRTCSignallingURI.enabled) {
+    mainVehicleStore.customWebRTCSignallingURI.data = conn.toString()
+  }
+
+  // Temporary solution to actually set WebRTC URI, since right now we cannot just make reactive because streams will
+  // be kept open.
+  // TODO: handle video stream re connection
+  location.reload()
+}
+
+watch(
+  () => mainVehicleStore.webRTCSignallingURI,
+  (val: Connection.URI) => {
+    if (val.toString() === webRTCSignallingURI.value.toString()) {
+      return
+    }
+
+    addWebRTCConnection(val)
+  }
+)
+
+const setWebRTCSignallingURI = async (): Promise<void> => {
+  const res = await webRTCSignallingForm.value.validate()
+
+  if (!res.valid) {
+    return
+  }
+
+  mainVehicleStore.customWebRTCSignallingURI = {
+    data: webRTCSignallingURI.value.toString(),
+    enabled: true,
+  }
+
+  addWebRTCConnection(webRTCSignallingURI.value)
+}
+
+const resetWebRTCSignallingURI = (): void => {
+  mainVehicleStore.customWebRTCSignallingURI = {
+    enabled: false,
+    data: mainVehicleStore.defaultWebRTCSignallingURI.toString(),
+  }
+}
+
 const isValidHostAddress = (value: string): boolean | string => {
   return isValidNetworkAddress(value) ?? 'Invalid host address. Should be an IP address or a hostname'
 }
@@ -188,61 +424,56 @@ const isValidSocketConnectionURI = (value: string): boolean | string => {
   return true
 }
 
-const resetGlobalAddress = async (): Promise<void> => {
-  newGlobalAddress.value = defaultGlobalAddress
-
-  await setGlobalAddress()
-}
-
-const resetVehicleConnection = async (): Promise<void> => {
-  connectionURI.value.reset()
-
-  await addNewVehicleConnection()
-}
-
-const resetWebRTCSignallingURI = (): void => {
-  webRTCSignallingURI.value.reset()
-}
-
-// Adds a new connection, which right now is the same as changing the main one
-const addNewVehicleConnection = async (): Promise<void> => {
-  await connectionForm.value.validate()
-  vehicleConnected.value = undefined
-  setTimeout(() => (vehicleConnected.value ??= false), 5000)
+const customRtcConfiguration = ref<string>(JSON.stringify(mainVehicleStore.customWebRTCConfiguration.data, null, 4))
+const updateWebRtcConfiguration = (): void => {
   try {
-    ConnectionManager.addConnection(new Connection.URI(connectionURI.value.val), Protocol.Type.MAVLink)
+    const newConfig = JSON.parse(customRtcConfiguration.value)
+    mainVehicleStore.customWebRTCConfiguration.data = newConfig
+    location.reload()
   } catch (error) {
-    console.error(error)
-    alert(`Could not update main connection. ${error}.`)
-    return
+    alert(`Could not update WebRTC configuration. ${error}.`)
   }
-  console.debug(`New connection successfully configured to ${connectionURI.value.val}.`)
 }
 
-const setGlobalAddress = async (): Promise<void> => {
-  await globalAddressForm.value.validate()
-
-  const validation = isValidConnectionURI(newGlobalAddress.value)
-  if (validation !== true) {
-    alert(validation)
-    return
+const tryToPrettifyRtcConfig = (): void => {
+  try {
+    const ugly = customRtcConfiguration.value
+    const obj = JSON.parse(ugly)
+    const pretty = JSON.stringify(obj, null, 4)
+    if (ugly !== pretty) {
+      customRtcConfiguration.value = pretty
+    }
+  } catch (error) {
+    // Do nothing if the JSON is invalid
   }
+}
 
-  mainVehicleStore.globalAddress = newGlobalAddress.value
+watch(customRtcConfiguration, () => tryToPrettifyRtcConfig())
 
-  // Temporary solution to actually set the address and connect the vehicle, since this is non-reactive today.
-  // TODO: Modify the store variables to be reactive.
-  location.reload()
-}
+onMounted(() => {
+  tryToPrettifyRtcConfig()
+})
 
-const setWebRTCSignallingURI = async (): Promise<void> => {
-  await webRTCSignallingForm.value.validate()
-  mainVehicleStore.webRTCSignallingURI.val = webRTCSignallingURI.value.val
+const openHelpDialog = (): void => {
+  showDialog({
+    title: 'General Configuration Help',
+    message: [
+      // eslint-disable-next-line vue/max-len
+      'Global Vehicle Address: Sets the network address for device communication. Change and apply new settings as needed.',
+      // eslint-disable-next-line vue/max-len
+      'Mavlink2Rest Connection: Configures MAVLink over HTTP/WS. Toggle to enable/disable and apply settings to take effect.',
+      // eslint-disable-next-line vue/max-len
+      'WebRTC Connection: Establishes real-time communication over the web. Set the signaling server URI and toggle to activate.',
+      'Additional Help: For more detailed settings, refer to documentation or contact us.',
+    ],
+    variant: 'text-only',
+    maxWidth: interfaceStore.isOnSmallScreen ? '80vw' : '60vw',
+  })
 }
 </script>
 
 <style scoped>
 .uri-input {
-  min-width: 350px;
+  width: 350px;
 }
 </style>
diff --git a/src/views/ConfigurationJoystickView.vue b/src/views/ConfigurationJoystickView.vue
index 024466ce6..b20fc8dbe 100644
--- a/src/views/ConfigurationJoystickView.vue
+++ b/src/views/ConfigurationJoystickView.vue
@@ -347,6 +347,7 @@ import { getArdupilotVersion, getMavlink2RestVersion } from '@/libs/blueos'
 import { MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { CockpitActionsFunction } from '@/libs/joystick/protocols/cockpit-actions'
 import { modifierKeyActions } from '@/libs/joystick/protocols/other'
+import { sleep } from '@/libs/utils'
 import { useControllerStore } from '@/stores/controller'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import {
@@ -465,7 +466,7 @@ const remapInput = async (joystick: Joystick, input: JoystickInput): Promise<voi
   while ([undefined, -1].includes(pressedButtonIndex) && millisPassed < remappingTimeTotalMs) {
     // Check if any button on the joystick is pressed, and if so, get it's index
     pressedButtonIndex = joystick.gamepad.buttons.findIndex((button) => button.value === 1)
-    await new Promise((r) => setTimeout(r, 100))
+    await sleep(100)
     millisPassed += 100
     remapTimeProgress.value = 100 * (millisPassed / remappingTimeTotalMs)
   }
@@ -520,7 +521,7 @@ const remapAxisInput = async (joystick: Joystick, input: JoystickInput): Promise
     }
 
     // Await a short period before the next check
-    await new Promise((resolve) => setTimeout(resolve, 100))
+    await sleep(100)
     const timePassed = Date.now() - endTime + remappingTimeTotalMs
     remapAxisTimeProgress.value = (timePassed / remappingTimeTotalMs) * 100
   }
diff --git a/src/views/WidgetsView.vue b/src/views/WidgetsView.vue
index 7824bb7fe..e03897c4a 100644
--- a/src/views/WidgetsView.vue
+++ b/src/views/WidgetsView.vue
@@ -1,7 +1,8 @@
 <template>
-  <SnappingGrid v-if="store.showGrid && store.editingMode" :grid-interval="store.gridInterval" class="snapping-grid" />
   <div class="widgets-view">
     <div v-for="view in store.viewsToShow" :key="view.hash" class="widget-view">
+      <div class="w-full h-full bg-slate-500" />
+      <SnappingGrid v-if="store.snapToGrid && store.editingMode" :grid-interval="store.gridInterval" />
       <template v-for="widget in view.widgets.slice().reverse()" :key="widget.hash">
         <WidgetHugger
           v-if="Object.values(WidgetType).includes(widget.component)"
@@ -12,7 +13,6 @@
           <component :is="componentFromType(widget.component)" :widget="widget" />
         </WidgetHugger>
       </template>
-      <div class="w-full h-full bg-slate-500" />
     </div>
   </div>
 </template>
@@ -49,9 +49,6 @@ const componentFromType = (componentType: WidgetType): AsyncComponentLoader => {
   justify-content: center;
   position: relative;
 }
-.snapping-grid {
-  z-index: 40;
-}
 .widget-view {
   position: absolute;
   width: 100%;
@@ -61,6 +58,5 @@ const componentFromType = (componentType: WidgetType): AsyncComponentLoader => {
   align-items: center;
   justify-content: center;
   background-color: rgb(122, 25, 25);
-  z-index: 50;
 }
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 9fb84e8c5..1a565e2c6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,18 @@ module.exports = {
       colors: {
         critical: '#7F34CF',
       },
+      transitionProperty: {
+        height: 'height',
+        spacing: 'margin, padding',
+      },
+      screens: {
+        'xs': { max: '719px' }, // Extra small devices (5-6" mobile screens in landscape)
+        'sm': { min: '720px', max: '979px' }, // Small devices (6-7" mobile screens in landscape)
+        'md': { min: '980px', max: '1279px' }, // Medium devices (7-10" tablets in landscape)
+        'lg': { min: '1280px', max: '1599px' }, // Large devices (HD in landscape)
+        'xl': { min: '1600px', max: '1919px' }, // Extra large devices (HD+ desktop/laptop screens in landscape)
+        '2xl': { min: '1920px' }, // FullHD and above - Extra extra large devices
+      },
     },
   },
   plugins: [require('tailwind-scrollbar-hide'), require('flowbite/plugin')],
diff --git a/vite.config.ts b/vite.config.ts
index ecfeb91c2..8957b4dd4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -35,4 +35,7 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
   },
+  server: {
+    host: '0.0.0.0',
+  },
 })