diff --git a/src/assets/defaults.ts b/src/assets/defaults.ts
index 17d34fbf6..53faf9b9f 100644
--- a/src/assets/defaults.ts
+++ b/src/assets/defaults.ts
@@ -1,7 +1,7 @@
 import { type MiniWidgetProfile, MiniWidgetType } from '@/types/miniWidgets'
 import { type Profile, WidgetType } from '@/types/widgets'
 
-const defaultManagerVars = {
+const defaultWidgetManagerVars = {
   timesMounted: 0,
   configMenuOpen: false,
   allowMoving: false,
@@ -11,6 +11,11 @@ const defaultManagerVars = {
   lastNonMaximizedHeight: 0.36,
 }
 
+const defaultMiniWidgetManagerVars = {
+  timesMounted: 0,
+  configMenuOpen: false,
+}
+
 export const defaultGlobalAddress = process.env.NODE_ENV === 'development' ? 'blueos.local' : window.location.hostname
 export const widgetProfiles: { [key: string]: Profile } = {
   'c2bcf04d-048f-496f-9d78-fc4002608028': {
@@ -26,7 +31,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.DepthHUD,
             position: { x: 0.89, y: 0.23 },
             size: { width: 0.09, height: 0.62 },
-            managerVars: defaultManagerVars,
+            managerVars: defaultWidgetManagerVars,
             options: {
               showDepthValue: true,
               hudColor: '#FFFFFF',
@@ -38,7 +43,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.Attitude,
             position: { x: 0.14, y: 0.2 },
             size: { width: 0.72, height: 0.6 },
-            managerVars: defaultManagerVars,
+            managerVars: defaultWidgetManagerVars,
             options: {
               showCenterAim: true,
               showPitchLines: true,
@@ -54,7 +59,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.CompassHUD,
             position: { x: 0.15, y: 0.84 },
             size: { width: 0.7, height: 0.065 },
-            managerVars: defaultManagerVars,
+            managerVars: defaultWidgetManagerVars,
             options: {
               showYawValue: true,
               hudColor: '#FFF',
@@ -66,7 +71,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.VideoPlayer,
             position: { x: 0, y: 0 },
             size: { width: 1, height: 1 },
-            managerVars: defaultManagerVars,
+            managerVars: defaultWidgetManagerVars,
             options: {
               videoFitStyle: 'cover',
               flipHorizontally: false,
@@ -81,6 +86,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
               {
                 hash: 'c6eb406b-8e3c-4ab9-a348-4ad5058352be',
                 component: MiniWidgetType.ViewSelector,
+                managerVars: defaultMiniWidgetManagerVars,
                 options: {},
               },
             ],
@@ -91,6 +97,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
               {
                 hash: 'c6eb406b-8e3c-4ab9-a348-4ad5058352be',
                 component: MiniWidgetType.DepthIndicator,
+                managerVars: defaultMiniWidgetManagerVars,
                 options: {},
               },
             ],
@@ -101,16 +108,19 @@ export const widgetProfiles: { [key: string]: Profile } = {
               {
                 hash: '837a6722-1e54-4ace-9a92-d9c5af059d16',
                 component: MiniWidgetType.ArmerButton,
+                managerVars: defaultMiniWidgetManagerVars,
                 options: {},
               },
               {
                 hash: 'c6301929-cdfc-48af-9fdd-c87ce65d7395',
                 component: MiniWidgetType.ModeSelector,
+                managerVars: defaultMiniWidgetManagerVars,
                 options: {},
               },
               {
                 hash: 'a4d0d6ce-9978-40f2-89ab-958f91137177',
                 component: MiniWidgetType.MiniVideoRecorder,
+                managerVars: defaultMiniWidgetManagerVars,
                 options: {},
               },
             ],
@@ -127,7 +137,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.Map,
             position: { x: 0, y: 0 },
             size: { width: 1, height: 1 },
-            managerVars: defaultManagerVars,
+            managerVars: defaultWidgetManagerVars,
             options: {},
           },
         ],
@@ -138,6 +148,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
               {
                 hash: 'c6eb406b-8e3c-4ab9-a348-4ad5058352be',
                 component: MiniWidgetType.ViewSelector,
+                managerVars: defaultMiniWidgetManagerVars,
                 options: {},
               },
             ],
@@ -161,16 +172,19 @@ export const miniWidgetsProfiles: MiniWidgetProfile[] = [
           {
             hash: '5b21cf5b-5849-413a-8bee-f1c4b42522f8',
             component: MiniWidgetType.BaseCommIndicator,
+            managerVars: defaultMiniWidgetManagerVars,
             options: {},
           },
           {
             hash: '41354445-2057-4574-80f5-bdc6d394dfe7',
             component: MiniWidgetType.JoystickCommIndicator,
+            managerVars: defaultMiniWidgetManagerVars,
             options: {},
           },
           {
             hash: '7b31c4c4-e273-4f75-b0b7-d56263c4177d',
             component: MiniWidgetType.BatteryIndicator,
+            managerVars: defaultMiniWidgetManagerVars,
             options: {},
           },
         ],
diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index 2a58ce0e0..6c16e4887 100644
--- a/src/components/EditMenu.vue
+++ b/src/components/EditMenu.vue
@@ -58,7 +58,7 @@
     </div>
     <div class="w-full h-px my-2 sm bg-slate-800/40" />
     <div
-      ref="currentWidgetsContainer"
+      v-show="widgetMode === WidgetMode.RegularWidgets"
       class="flex flex-col items-center justify-between w-full overflow-y-clip h-[35%]"
     >
       <p class="text-lg font-semibold select-none">Current widgets</p>
@@ -96,6 +96,44 @@
       </VueDraggable>
       <div class="grow" />
     </div>
+    <div
+      v-show="widgetMode === WidgetMode.MiniWidgets"
+      class="flex flex-col items-center justify-between w-full overflow-y-auto h-[35%]"
+    >
+      <p class="text-lg font-semibold select-none">Current mini-widgets</p>
+      <div class="grow" />
+      <div
+        v-for="miniWidgetContainer in store.currentView.miniWidgetContainers"
+        :key="miniWidgetContainer.name"
+        class="w-full"
+      >
+        <span class="w-full text-sm text-left select-none text-slate-400">{{ miniWidgetContainer.name }}</span>
+        <div class="flex flex-col items-center w-full px-2 overflow-x-hidden grow">
+          <TransitionGroup name="fade">
+            <div v-if="miniWidgetContainer.widgets.isEmpty()" class="flex items-center justify-between w-full my-1">
+              ---
+            </div>
+            <div
+              v-for="widget in miniWidgetContainer.widgets"
+              :key="widget.hash"
+              class="flex items-center justify-between w-full my-1"
+            >
+              <div class="flex items-center justify-start w-full overflow-auto">
+                <p class="overflow-hidden select-none text-ellipsis whitespace-nowrap">{{ widget.component }}</p>
+              </div>
+              <div
+                class="flex items-center justify-center w-8 ml-1 text-xs transition-all rounded-sm bg-slate-700 aspect-square mdi mdi-trash-can hover:bg-slate-500"
+              />
+              <div
+                class="flex items-center justify-center w-8 ml-1 text-xs transition-all rounded-sm bg-slate-700 aspect-square mdi mdi-pencil hover:bg-slate-500"
+                @click="widget.managerVars.configMenuOpen = true"
+              />
+            </div>
+          </TransitionGroup>
+        </div>
+      </div>
+      <div class="grow" />
+    </div>
     <div class="w-full h-px mt-4 bg-slate-800/40" />
   </div>
   <div
@@ -142,13 +180,13 @@
       class="flex items-center w-full h-full gap-2 overflow-auto"
     >
       <div
-        v-for="item in availableMiniWidgetTypes"
-        :key="item.hash"
+        v-for="miniWidget in availableMiniWidgetTypes"
+        :key="miniWidget.hash"
         class="flex flex-col items-center justify-center p-2 mx-3 transition-all rounded-md h-5/6 w-fit text-slate-100 cursor-grab"
         :class="{ 'hover:bg-slate-400': !mousePressed }"
       >
         <div class="m-2 pointer-events-none select-none">
-          <MiniWidgetInstantiator :widget-type="item.component" :options="item.options" />
+          <MiniWidgetInstantiator :mini-widget="miniWidget" />
         </div>
       </div>
     </div>
@@ -201,7 +239,15 @@ const emit = defineEmits<{
 
 const availableWidgetTypes = computed(() => Object.values(WidgetType))
 const availableMiniWidgetTypes = computed(() =>
-  Object.values(MiniWidgetType).map((widgetType) => ({ component: widgetType, options: {}, hash: uuid() }))
+  Object.values(MiniWidgetType).map((widgetType) => ({
+    component: widgetType,
+    options: {},
+    hash: uuid(),
+    managerVars: {
+      timesMounted: 0,
+      configMenuOpen: false,
+    },
+  }))
 )
 
 const widgetAddMenuGroupOptions = {
diff --git a/src/components/MiniWidgetContainer.vue b/src/components/MiniWidgetContainer.vue
index 85e703460..9ea0e5a80 100644
--- a/src/components/MiniWidgetContainer.vue
+++ b/src/components/MiniWidgetContainer.vue
@@ -14,13 +14,13 @@
       @unchoose="(event) => emit('unchooseMiniWidget', event)"
     >
       <div
-        v-for="item in container.widgets"
-        :key="item.hash"
+        v-for="miniWidget in container.widgets"
+        :key="miniWidget.hash"
         class="rounded-md"
         :class="{ 'cursor-grab': allowEditing, 'hover:bg-slate-400': allowEditing && !mousePressed }"
       >
         <div :class="{ 'select-none pointer-events-none': allowEditing }">
-          <MiniWidgetInstantiator :widget-type="item.component" :options="item.options" />
+          <MiniWidgetInstantiator :mini-widget="miniWidget" />
         </div>
       </div>
     </VueDraggable>
@@ -44,9 +44,9 @@
             class="flex flex-wrap items-center justify-center w-full h-full gap-2"
             @add="trashList = []"
           >
-            <div v-for="item in trashList" :key="item.hash">
+            <div v-for="miniWidget in trashList" :key="miniWidget.hash">
               <div class="pointer-events-none select-none">
-                <MiniWidgetInstantiator :widget-type="item.component" :options="item.options" />
+                <MiniWidgetInstantiator :mini-widget="miniWidget" />
               </div>
             </div>
           </VueDraggable>
diff --git a/src/components/MiniWidgetInstantiator.vue b/src/components/MiniWidgetInstantiator.vue
index 6cff9bc73..abb89e896 100644
--- a/src/components/MiniWidgetInstantiator.vue
+++ b/src/components/MiniWidgetInstantiator.vue
@@ -1,40 +1,40 @@
 <template>
-  <template v-if="widgetType === MiniWidgetType.ArmerButton">
-    <ArmerButton :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.ArmerButton">
+    <ArmerButton :options="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.BaseCommIndicator">
-    <BaseCommIndicator :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.BaseCommIndicator">
+    <BaseCommIndicator :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.BatteryIndicator">
-    <BatteryIndicator :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.BatteryIndicator">
+    <BatteryIndicator :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.DepthIndicator">
-    <DepthIndicator :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.DepthIndicator">
+    <DepthIndicator :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.VeryGenericIndicator">
-    <VeryGenericIndicator :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.VeryGenericIndicator">
+    <VeryGenericIndicator :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.JoystickCommIndicator">
-    <JoystickCommIndicator :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.JoystickCommIndicator">
+    <JoystickCommIndicator :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.MiniVideoRecorder">
-    <MiniVideoRecorder :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.MiniVideoRecorder">
+    <MiniVideoRecorder :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.ModeSelector">
-    <ModeSelector :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.ModeSelector">
+    <ModeSelector :options="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.SatelliteIndicator">
-    <SatelliteIndicator :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.SatelliteIndicator">
+    <SatelliteIndicator :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.ViewSelector">
-    <ViewSelector :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.ViewSelector">
+    <ViewSelector :options="miniWidget" />
   </template>
 </template>
 
 <script setup lang="ts">
 import { toRefs } from 'vue'
 
-import { MiniWidgetType } from '@/types/miniWidgets'
+import { type MiniWidget, MiniWidgetType } from '@/types/miniWidgets'
 
 import ArmerButton from './mini-widgets/ArmerButton.vue'
 import BaseCommIndicator from './mini-widgets/BaseCommIndicator.vue'
@@ -49,15 +49,10 @@ import ViewSelector from './mini-widgets/ViewSelector.vue'
 
 const props = defineProps<{
   /**
-   * Type of mini-widget to return
+   * Mini-widget instance
    */
-  widgetType: MiniWidgetType
-  /**
-   * Options to pass to mini-widget
-   */
-  options: Record<string, unknown>
+  miniWidget: MiniWidget
 }>()
 
-const widgetType = toRefs(props).widgetType
-const options = toRefs(props).options
+const miniWidget = toRefs(props).miniWidget
 </script>
diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue
index 5b262695b..acafe9b8e 100644
--- a/src/components/mini-widgets/MiniVideoRecorder.vue
+++ b/src/components/mini-widgets/MiniVideoRecorder.vue
@@ -65,6 +65,7 @@ import { WebRTCManager } from '@/composables/webRTC'
 import type { Stream } from '@/libs/webrtc/signalling_protocol'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
+import type { MiniWidget } from '@/types/miniWidgets'
 
 const { rtcConfiguration, webRTCSignallingURI } = useMainVehicleStore()
 const { missionName } = useMissionStore()
@@ -73,12 +74,11 @@ console.debug('[WebRTC] Using webrtc-adapter for', adapter.browserDetails)
 
 const props = defineProps<{
   /**
-   * Mini-widget options
+   * Configuration of the widget
    */
-  options: Record<string, unknown>
+  miniWidget: MiniWidget
 }>()
-
-const options = toRefs(props).options
+const miniWidget = toRefs(props).miniWidget
 
 const selectedStream = ref<Stream | undefined>()
 const webRTCManager = new WebRTCManager(webRTCSignallingURI.val, rtcConfiguration)
@@ -98,8 +98,8 @@ const isRecording = computed(() => {
 
 onBeforeMount(async () => {
   // Set initial widget options if they don't exist
-  if (Object.keys(options.value).length === 0) {
-    options.value = {
+  if (Object.keys(miniWidget.value.options).length === 0) {
+    miniWidget.value.options = {
       streamName: undefined as string | undefined,
     }
   }
@@ -227,11 +227,11 @@ const updateCurrentStream = async (stream: Stream | undefined): Promise<SweetAle
       return Swal.fire({ text: 'Could not load media stream.', icon: 'error' })
     }
   }
-  options.value.streamName = selectedStream.value?.name
+  miniWidget.value.options.streamName = selectedStream.value?.name
 }
 
 watch(externalStreams, () => {
-  const savedStreamName: string | undefined = options.value.streamName as string
+  const savedStreamName: string | undefined = miniWidget.value.options.streamName as string
   availableStreams.value = externalStreams.value
   if (!availableStreams.value.find((stream) => stream.id === 'screenStream')) {
     addScreenStream()
diff --git a/src/components/mini-widgets/VeryGenericIndicator.vue b/src/components/mini-widgets/VeryGenericIndicator.vue
index 29952b3b9..df41e5762 100644
--- a/src/components/mini-widgets/VeryGenericIndicator.vue
+++ b/src/components/mini-widgets/VeryGenericIndicator.vue
@@ -1,21 +1,20 @@
 <template>
   <div
     class="flex items-center justify-center h-12 py-1 text-white transition-all cursor-pointer w-fit hover:bg-slate-100/20"
-    @click="showConfigurationMenu = !showConfigurationMenu"
   >
-    <span class="relative w-[2rem] mdi icon-symbol" :class="[options.iconName]"></span>
+    <span class="relative w-[2rem] mdi icon-symbol" :class="[miniWidget.options.iconName]"></span>
     <div class="flex flex-col items-start justify-center mx-1 select-none w-fit min-w-[3rem]">
       <div>
         <span class="font-mono text-xl font-semibold leading-6 w-fit">{{ parsedState }}</span>
         <span class="text-xl font-semibold leading-6 w-fit">
-          {{ String.fromCharCode(0x20) }} {{ options.variableUnit }}
+          {{ String.fromCharCode(0x20) }} {{ miniWidget.options.variableUnit }}
         </span>
       </div>
-      <span class="w-full text-sm font-semibold leading-4 whitespace-nowrap">{{ options.displayName }}</span>
+      <span class="w-full text-sm font-semibold leading-4 whitespace-nowrap">{{ miniWidget.options.displayName }}</span>
     </div>
   </div>
-  <Dialog v-model:show="showConfigurationMenu" class="w-80">
-    <div class="w-full h-full">
+  <v-dialog v-model="miniWidget.managerVars.configMenuOpen" class="w-[24rem]">
+    <div class="p-4 m-4 rounded-lg bg-slate-600/80">
       <div class="flex items-center mb-3 justify-evenly">
         <div
           class="px-3 py-1 transition-all rounded-md cursor-pointer select-none text-slate-100 hover:bg-slate-400"
@@ -35,33 +34,33 @@
       <div v-if="currentTab === 'custom'" class="flex flex-col items-center justify-around">
         <div class="flex items-center justify-between w-full my-1">
           <span class="mr-1 text-slate-100">Display name</span>
-          <input v-model="options.displayName" class="w-48 px-2 py-1 rounded-md bg-slate-200" />
+          <input v-model="miniWidget.options.displayName" class="w-48 px-2 py-1 rounded-md bg-slate-200" />
         </div>
         <div class="flex items-center justify-between w-full my-1">
           <span class="mr-1 text-slate-100">Variable</span>
           <div class="w-48">
-            <Dropdown v-model="options.variableName" :options="Object.keys(store.genericVariables)" />
+            <Dropdown v-model="miniWidget.options.variableName" :options="Object.keys(store.genericVariables)" />
           </div>
         </div>
         <div class="flex items-center justify-between w-full my-1">
           <span class="mr-1 text-slate-100">Fractional digits</span>
-          <input v-model="options.fractionalDigits" class="w-48 px-2 py-1 rounded-md bg-slate-200" />
+          <input v-model="miniWidget.options.fractionalDigits" class="w-48 px-2 py-1 rounded-md bg-slate-200" />
         </div>
         <div class="flex items-center justify-between w-full my-1">
           <span class="mr-1 text-slate-100">Unit</span>
-          <input v-model="options.variableUnit" class="w-48 px-2 py-1 rounded-md bg-slate-200" />
+          <input v-model="miniWidget.options.variableUnit" class="w-48 px-2 py-1 rounded-md bg-slate-200" />
         </div>
         <div class="flex items-center justify-between w-full my-1">
           <span class="mr-1 text-slate-100">Multiplier</span>
-          <input v-model="options.variableMultiplier" class="w-48 px-2 py-1 rounded-md bg-slate-200" />
+          <input v-model="miniWidget.options.variableMultiplier" class="w-48 px-2 py-1 rounded-md bg-slate-200" />
         </div>
         <div class="flex items-center justify-between w-full my-1">
           <span class="mr-1 text-slate-100">Icon</span>
           <div class="relative w-48">
-            <input v-model="options.iconName" class="w-full py-1 pl-2 pr-8 rounded-md bg-slate-200" />
+            <input v-model="miniWidget.options.iconName" class="w-full py-1 pl-2 pr-8 rounded-md bg-slate-200" />
             <span
               class="absolute right-0.5 m-1 text-2xl -translate-y-1 cursor-pointer text-slate-500 mdi"
-              :class="[options.iconName]"
+              :class="[miniWidget.options.iconName]"
             />
           </div>
         </div>
@@ -80,7 +79,11 @@
           :item-size="46"
           :grid-items="6"
         >
-          <span class="m-1 text-white cursor-pointer mdi icon-symbol" :class="[item]" @click="options.iconName = item">
+          <span
+            class="m-1 text-white cursor-pointer mdi icon-symbol"
+            :class="[item]"
+            @click="miniWidget.options.iconName = item"
+          >
           </span>
         </RecycleScroller>
         <div v-else class="grid w-full h-40 grid-cols-6 mt-3 overflow-x-hidden overflow-y-scroll">
@@ -89,7 +92,7 @@
             :key="icon"
             class="m-1 text-white cursor-pointer mdi icon-symbol"
             :class="[icon]"
-            @click="options.iconName = icon"
+            @click="miniWidget.options.iconName = icon"
           />
         </div>
       </div>
@@ -110,18 +113,18 @@
         </div>
       </div>
     </div>
-  </Dialog>
+  </v-dialog>
 </template>
 
 <script setup lang="ts">
 import * as MdiExports from '@mdi/js/mdi'
-import { toReactive } from '@vueuse/core'
 import { computed, onBeforeMount, onMounted, ref, toRefs, watch } from 'vue'
 
 import Dropdown from '@/components/Dropdown.vue'
 import { round } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { type VeryGenericIndicatorPreset, veryGenericIndicatorPresets } from '@/types/genericIndicator'
+import type { MiniWidget } from '@/types/miniWidgets'
 
 import Dialog from '../Dialog.vue'
 
@@ -129,14 +132,14 @@ const props = defineProps<{
   /**
    * Configuration of the widget
    */
-  options: Record<string, unknown>
+  miniWidget: MiniWidget
 }>()
-const options = toReactive(toRefs(props).options)
+const miniWidget = toRefs(props).miniWidget
 
 onBeforeMount(() => {
   // Set initial widget options if they don't exist
-  if (Object.keys(options).length === 0) {
-    Object.assign(options, {
+  if (Object.keys(miniWidget.value.options).length === 0) {
+    Object.assign(miniWidget.value.options, {
       displayName: '',
       variableName: '',
       fractionalDigits: 1,
@@ -157,32 +160,31 @@ const currentState = ref<unknown>(0)
 const parsedState = computed(() => {
   if (currentState.value !== undefined) {
     return round(
-      Number(options.variableMultiplier) * Number(currentState.value),
-      options.fractionalDigits as number
-    ).toFixed(options.fractionalDigits as number)
+      Number(miniWidget.value.options.variableMultiplier) * Number(currentState.value),
+      miniWidget.value.options.fractionalDigits as number
+    ).toFixed(miniWidget.value.options.fractionalDigits as number)
   }
   return '--'
 })
 
 const updateVariableState = (): void => {
-  currentState.value = store.genericVariables[options.variableName as string]
+  currentState.value = store.genericVariables[miniWidget.value.options.variableName as string]
 }
 watch(store.genericVariables, updateVariableState)
-watch(options, updateVariableState)
+watch(miniWidget.value.options, updateVariableState)
 onMounted(() => updateVariableState())
 
 let iconsNames: string[] = []
 
-const showConfigurationMenu = ref(false)
 const iconSearchString = ref('')
 const currentTab = ref('presets')
 
 const setIndicatorFromTemplate = (template: VeryGenericIndicatorPreset): void => {
-  options.displayName = template.displayName
-  options.variableName = template.variableName
-  options.iconName = template.iconName
-  options.variableUnit = template.variableUnit
-  options.variableMultiplier = template.variableMultiplier
+  miniWidget.value.options.displayName = template.displayName
+  miniWidget.value.options.variableName = template.variableName
+  miniWidget.value.options.iconName = template.iconName
+  miniWidget.value.options.variableUnit = template.variableUnit
+  miniWidget.value.options.variableMultiplier = template.variableMultiplier
 }
 </script>
 
diff --git a/src/components/widgets/Compass.vue b/src/components/widgets/Compass.vue
index 708fdc397..36bdc8719 100644
--- a/src/components/widgets/Compass.vue
+++ b/src/components/widgets/Compass.vue
@@ -13,8 +13,9 @@
       draggable="false"
     />
   </div>
-  <Dialog v-model:show="widget.managerVars.configMenuOpen" class="w-72">
-    <div class="w-full h-full">
+
+  <v-dialog v-model="widget.managerVars.configMenuOpen" width="auto">
+    <div class="p-4 m-4 rounded-lg bg-slate-600/80">
       <div class="flex flex-col items-center justify-around">
         <div class="flex items-center justify-between w-full my-1">
           <span class="mr-1 text-slate-100">Heading style</span>
@@ -22,7 +23,7 @@
         </div>
       </div>
     </div>
-  </Dialog>
+  </v-dialog>
 </template>
 
 <script setup lang="ts">
diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts
index 3b273c202..14203fd5a 100644
--- a/src/stores/widgetManager.ts
+++ b/src/stores/widgetManager.ts
@@ -19,9 +19,9 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const editingMode = ref(false)
   const showGrid = ref(true)
   const gridInterval = ref(0.01)
-  const currentProfile = useStorage('cockpit-current-profile-v4', widgetProfile)
-  const currentMiniWidgetsProfile = useStorage('cockpit-mini-widgets-profile-v2', miniWidgetsProfile)
-  const savedProfiles = useStorage('cockpit-saved-profiles-v4', widgetProfiles)
+  const currentProfile = useStorage('cockpit-current-profile-v5', widgetProfile)
+  const currentMiniWidgetsProfile = useStorage('cockpit-mini-widgets-profile-v3', miniWidgetsProfile)
+  const savedProfiles = useStorage('cockpit-saved-profiles-v5', widgetProfiles)
   const currentViewIndex = useStorage('cockpit-current-view-index', 0)
 
   const currentView = computed<View>({
diff --git a/src/types/miniWidgets.ts b/src/types/miniWidgets.ts
index 242089b82..0f3cb78f9 100644
--- a/src/types/miniWidgets.ts
+++ b/src/types/miniWidgets.ts
@@ -31,6 +31,16 @@ export type MiniWidget = {
   /**
    * External variables used by the widget manager
    */
+  managerVars: {
+    /**
+     * Number of times the mini-widget was mounted
+     */
+    timesMounted: number
+    /**
+     * If the configuration menu is open or not
+     */
+    configMenuOpen: boolean
+  }
 }
 
 export type MiniWidgetContainer = {