diff --git a/src/assets/defaults.ts b/src/assets/defaults.ts
index af46b6ed8..332273542 100644
--- a/src/assets/defaults.ts
+++ b/src/assets/defaults.ts
@@ -37,6 +37,89 @@ export const defaultMiniWidgetManagerVars: MiniWidgetManagerVars = {
   highlighted: false,
 }
 
+export const defaultCustomWidgetContainers = [
+  {
+    name: '0-left',
+    elements: [],
+  },
+  {
+    name: '1-left',
+    elements: [],
+  },
+  {
+    name: '2-left',
+    elements: [],
+  },
+  {
+    name: '3-left',
+    elements: [],
+  },
+  {
+    name: '4-left',
+    elements: [],
+  },
+  {
+    name: '5-left',
+    elements: [],
+  },
+  {
+    name: '6-left',
+    elements: [],
+  },
+  {
+    name: '7-left',
+    elements: [],
+  },
+  {
+    name: '8-left',
+    elements: [],
+  },
+  {
+    name: '9-left',
+    elements: [],
+  },
+  {
+    name: '0-right',
+    elements: [],
+  },
+  {
+    name: '1-right',
+    elements: [],
+  },
+  {
+    name: '2-right',
+    elements: [],
+  },
+  {
+    name: '3-right',
+    elements: [],
+  },
+  {
+    name: '4-right',
+    elements: [],
+  },
+  {
+    name: '5-right',
+    elements: [],
+  },
+  {
+    name: '6-right',
+    elements: [],
+  },
+  {
+    name: '7-right',
+    elements: [],
+  },
+  {
+    name: '8-right',
+    elements: [],
+  },
+  {
+    name: '9-right',
+    elements: [],
+  },
+]
+
 const hostname = window.location.hostname
 export const defaultBlueOsAddress = 'http://blueos-avahi.local'
 export const defaultGlobalAddress = !hostname || hostname == 'localhost' ? defaultBlueOsAddress : hostname
diff --git a/src/assets/widgets/CustomWidgetBase.png b/src/assets/widgets/CustomWidgetBase.png
new file mode 100644
index 000000000..032ac7f12
Binary files /dev/null and b/src/assets/widgets/CustomWidgetBase.png differ
diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index 63aef0f46..d3c4d48eb 100644
--- a/src/components/EditMenu.vue
+++ b/src/components/EditMenu.vue
@@ -152,7 +152,7 @@
     </div>
     <v-divider class="opacity-20" />
     <div
-      class="flex flex-row justify-start relative items-center bg-[#CBCBCB2A] elevation-5 2xl:h-full xl:h-[45px] h-[35px] overflow-hidden"
+      class="flex flex-row max-h-[48px] justify-start relative items-center bg-[#CBCBCB2A] elevation-5 2xl:h-full xl:h-[45px] h-[35px] overflow-hidden"
     >
       <v-icon
         size="sm"
@@ -444,7 +444,7 @@
   <div class="flex items-center justify-between edit-panel bottom-panel" :class="{ active: editMode }">
     <div class="w-px h-full bg-[#FFFFFF18]" />
     <div
-      class="flex flex-col justify-between items-center 2xl:w-[30%] w-[25%] max-w-[240px] h-full text-white 2xl:pr-2 px-1 2xl:py-5 xl:py-4 lg:py-1"
+      class="flex flex-col justify-around items-center 2xl:w-[30%] w-[25%] max-w-[240px] h-full text-white 2xl:pr-2 px-1 2xl:py-5 xl:py-4 lg:py-1"
     >
       <div>
         <p class="2xl:text-md text-xs ml-1">Widget type:</p>
@@ -453,7 +453,7 @@
           theme="dark"
           variant="filled"
           density="compact"
-          :items="['Regular', 'Mini']"
+          :items="['Regular', 'Mini', 'Input']"
           class="bg-[#27384255] 2xl:scale-100 scale-[80%]"
           hide-details
           @change="widgetMode = $event"
@@ -463,17 +463,18 @@
         <div v-show="widgetMode === 'Regular'" class="w-[90%] 2xl:text-[16px] text-xs text-center mt-6">
           To be placed on the main view area
         </div>
-        <div
-          v-show="widgetMode === 'Regular widgets'"
-          class="2xl:text-md text-sm mt-3 2xl:px-3 px-2 bg-[#3B78A8] rounded-lg"
-        >
-          Click or drag to add
-        </div>
+        <div v-show="widgetMode === 'Regular'" class="text-xs mt-3 2xl:px-3 px-2 rounded-lg">(Drag card to add)</div>
         <div v-show="widgetMode === 'Mini'" class="w-[90%] 2xl:text-[16px] text-xs text-center mt-6">
           To be placed on the top and bottom bars
         </div>
-        <div v-show="widgetMode === 'Mini'" class="2xl:text-md text-sm mt-3 2xl:px-3 px-2 rounded-lg">
-          (Drag card in place to add)
+        <div v-show="widgetMode === 'Mini'" class="text-xs mt-3 2xl:px-3 px-2 rounded-lg">(Drag card to add)</div>
+        <div v-show="widgetMode === 'Input'">
+          <v-btn
+            type="flat"
+            class="bg-[#FFFFFF33] text-white w-[95%]"
+            @click="store.addWidget(WidgetType.CustomWidgetBase, store.currentView)"
+            >Add widget base
+          </v-btn>
         </div>
       </div>
     </div>
@@ -491,7 +492,7 @@
         @dragstart="onRegularWidgetDragStart"
         @dragend="onRegularWidgetDragEnd(widgetType)"
       >
-        <v-tooltip text="Click or drag to add" location="top" theme="light">
+        <v-tooltip text="Drag to add" location="top" theme="light">
           <template #activator="{ props: tooltipProps }">
             <div />
             <img
@@ -504,8 +505,7 @@
               class="flex items-center justify-center w-full p-1 transition-all bg-[#3B78A8] rounded-b-md text-white"
             >
               <span class="whitespace-normal text-center">{{
-                widgetType.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (str) => str.toUpperCase()) ||
-                'Very Generic Indicator'
+                widgetType.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (str) => str.toUpperCase())
               }}</span>
             </div>
           </template>
@@ -522,19 +522,49 @@
         id="mini-widget-card"
         :ref="(el) => (miniWidgetContainers[miniWidget.component] = el as HTMLElement)"
         :key="miniWidget.hash"
-        class="flex flex-col items-center justify-between w-full rounded-md bg-[#273842] hover:brightness-125 h-[90%] aspect-square cursor-pointer elevation-4 overflow-clip pointer-events-none"
+        class="flex flex-col items-center w-full justify-between rounded-md bg-[#273842] hover:brightness-125 h-[90%] aspect-square cursor-pointer elevation-4 overflow-clip"
         :draggable="false"
       >
         <div />
         <div id="draggable-mini-widget" class="m-2 pointer-events-auto select-auto cursor-grab" :draggable="true">
-          <div class="flex justify-center pointer-events-none min-w-[160px]">
+          <div class="flex justify-center pointer-events-none min-w-[170px]">
+            <MiniWidgetInstantiator :mini-widget="miniWidget" />
+          </div>
+        </div>
+        <div
+          class="flex items-center justify-center w-full py-1 px-2 transition-all bg-[#3B78A8] rounded-b-md text-white"
+        >
+          <span class="whitespace-normal text-center">{{
+            miniWidget.name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (str) => str.toUpperCase()) ||
+            'Very generic indicator'
+          }}</span>
+        </div>
+      </div>
+    </div>
+    <div
+      v-show="widgetMode === 'Input'"
+      ref="availableCustomWidgetElementsContainer"
+      class="flex items-center w-full h-full gap-3 overflow-auto pr-2"
+    >
+      <div
+        v-for="miniWidget in availableCustomWidgetElementsTypes"
+        id="mini-widget-card"
+        :key="miniWidget.hash"
+        class="flex flex-col items-center w-full justify-between rounded-md bg-[#273842] hover:brightness-125 h-[90%] aspect-square cursor-pointer elevation-4 overflow-clip"
+        draggable="false"
+      >
+        <div />
+        <div id="draggable-mini-widget" class="m-2 pointer-events-auto select-auto cursor-grab" draggable="true">
+          <div class="flex justify-center pointer-events-none min-w-[170px]">
             <MiniWidgetInstantiator :mini-widget="miniWidget" />
           </div>
         </div>
-        <div class="flex items-center justify-center w-full p-1 transition-all bg-[#3B78A8] rounded-b-md text-white">
+        <div
+          class="flex items-center justify-center w-full py-1 px-2 transition-all bg-[#3B78A8] rounded-b-md text-white"
+        >
           <span class="whitespace-normal text-center">{{
             miniWidget.name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (str) => str.toUpperCase()) ||
-            'Very Generic Indicator'
+            'Very generic indicator'
           }}</span>
         </div>
       </div>
@@ -587,6 +617,21 @@
       </v-card>
     </GlassModal>
   </teleport>
+  <transition
+    enter-active-class="transition-transform duration-500 ease-in-out"
+    leave-active-class="transition-transform duration-0 ease-in-out"
+    enter-from-class="translate-x-full opacity-0"
+    enter-to-class="translate-x-0 opacity-100"
+    leave-from-class="translate-x-0 opacity-100"
+    leave-to-class="translate-x-full opacity-0"
+  >
+    <div
+      v-if="store.isElementsPropsDrawerVisible && store.editingMode && store.elementToShowOnDrawer"
+      class="flex fixed w-[250px] h-[78vh] right-0 top-0 border-l-[1px] border-[#FFFFFF44] text-white elevation-5 bg-[#051e2d]"
+    >
+      <ElementConfigPanel />
+    </div>
+  </transition>
 </template>
 
 <script setup lang="ts">
@@ -603,6 +648,7 @@ import RovThumb from '@/assets/vehicles/BlueROV_thumb.png'
 import AttitudeImg from '@/assets/widgets/Attitude.png'
 import CompassImg from '@/assets/widgets/Compass.png'
 import CompassHUDImg from '@/assets/widgets/CompassHUD.png'
+import CustomWidgetBaseImg from '@/assets/widgets/CustomWidgetBase.png'
 import DepthHUDImg from '@/assets/widgets/DepthHUD.png'
 import IFrameImg from '@/assets/widgets/IFrame.png'
 import ImageViewImg from '@/assets/widgets/ImageView.png'
@@ -616,8 +662,16 @@ import { MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { isHorizontalScroll } from '@/libs/utils'
 import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
-import { type Profile, type View, type Widget, MiniWidgetType, WidgetType } from '@/types/widgets'
+import {
+  type Profile,
+  type View,
+  type Widget,
+  CustomWidgetElementType,
+  MiniWidgetType,
+  WidgetType,
+} from '@/types/widgets'
 
+import ElementConfigPanel from './ElementConfigPanel.vue'
 import ExpansiblePanel from './ExpansiblePanel.vue'
 import GlassModal from './GlassModal.vue'
 import MiniWidgetInstantiator from './MiniWidgetInstantiator.vue'
@@ -670,11 +724,21 @@ const availableMiniWidgetTypes = computed(() =>
   }))
 )
 
+const availableCustomWidgetElementsTypes = computed(() =>
+  Object.values(CustomWidgetElementType).map((widgetType) => ({
+    component: widgetType,
+    name: widgetType,
+    options: {},
+    hash: uuid(),
+    managerVars: defaultMiniWidgetManagerVars,
+  }))
+)
 const widgetImages = {
   Attitude: AttitudeImg,
   Compass: CompassImg,
-  DepthHUD: DepthHUDImg,
   CompassHUD: CompassHUDImg,
+  CustomWidgetBase: CustomWidgetBaseImg,
+  DepthHUD: DepthHUDImg,
   IFrame: IFrameImg,
   ImageView: ImageViewImg,
   Map: MapImg,
@@ -851,6 +915,7 @@ const resetSavedProfiles = (): void => {
 
 const availableWidgetsContainer = ref()
 const availableMiniWidgetsContainer = ref()
+const availableCustomWidgetElementsContainer = ref()
 
 // @ts-ignore: Documentation is not clear on what generic should be passed to 'UseDraggableOptions'
 const miniWidgetsContainerOptions = ref<UseDraggableOptions>({
@@ -860,8 +925,24 @@ const miniWidgetsContainerOptions = ref<UseDraggableOptions>({
 })
 useDraggable(availableMiniWidgetsContainer, availableMiniWidgetTypes, miniWidgetsContainerOptions)
 
+// @ts-ignore: Documentation is not clear on what generic should be passed to 'UseDraggableOptions'
+const customWidgetElementContainerOptions = ref<UseDraggableOptions>({
+  animation: '150',
+  group: widgetAddMenuGroupOptions,
+  sort: false,
+})
+useDraggable(
+  availableCustomWidgetElementsContainer,
+  availableCustomWidgetElementsTypes,
+  customWidgetElementContainerOptions
+)
+
 onMounted(() => {
-  const widgetContainers = [availableWidgetsContainer.value, availableMiniWidgetsContainer.value]
+  const widgetContainers = [
+    availableWidgetsContainer.value,
+    availableMiniWidgetsContainer.value,
+    availableCustomWidgetElementsContainer.value,
+  ]
   widgetContainers.forEach((container) => {
     container.addEventListener(
       'wheel',
@@ -881,12 +962,12 @@ onMounted(() => {
   })
 })
 
-const widgetMode = ref('Regular' || 'Mini')
+const widgetMode = ref('Regular')
 
 // Resize mini widgets so they fit the layout when the widget mode is set to mini widgets
 const miniWidgetContainers = ref<Record<string, HTMLElement>>({})
 watch(widgetMode, () => {
-  if (widgetMode.value !== 'Mini widgets') return
+  if (widgetMode.value !== 'Mini') return
   nextTick(() => {
     Object.values(miniWidgetContainers.value).forEach((element) => {
       if (element.scrollWidth > element.clientWidth) {
diff --git a/src/components/ElementConfigPanel.vue b/src/components/ElementConfigPanel.vue
new file mode 100644
index 000000000..747db14dd
--- /dev/null
+++ b/src/components/ElementConfigPanel.vue
@@ -0,0 +1,525 @@
+<template>
+  <div class="flex flex-col text-center">
+    <v-btn
+      class="absolute top-0 left-0"
+      variant="text"
+      size="small"
+      icon="mdi-close"
+      style="z-index: 50000"
+      @click="CloseConfigPanel"
+    />
+    <v-btn
+      class="absolute bg-[#FFFFFF44] text-white bottom-2 right-2"
+      variant="plain"
+      size="small"
+      prepend-icon="mdi-delete"
+      @click="deleteElement"
+    >
+      Delete
+    </v-btn>
+    <ExpansiblePanel
+      v-if="currentElement"
+      mark-expanded
+      compact
+      elevation-effect
+      no-bottom-divider
+      darken-content
+      invert-chevron
+      :is-expanded="true"
+    >
+      <template #title><p class="ml-10">Options</p></template>
+      <template #content>
+        <div class="flex flex-col items-center mb-4 -ml-[7px] w-[248px]">
+          <div
+            v-for="optionKey in sortedOptionKeys"
+            :key="optionKey"
+            class="flex w-full justify-between items-center border-b-[1px] border-[#FFFFFF33] h-auto"
+          >
+            <p class="text-start ml-1 text-[14px] w-[60%]">{{ formatLabel(optionKey) }}</p>
+
+            <template
+              v-if="
+                typeof currentElement.options.layout[optionKey] === 'string' &&
+                !Array.isArray(getSelectChoices(optionKey)) &&
+                !isColorPicker(optionKey) &&
+                optionKey !== 'cockpitAction' &&
+                optionKey !== 'cockpitActions'
+              "
+            >
+              <div class="max-w-[120px]">
+                <input
+                  v-model="currentElement.options.layout[optionKey]"
+                  type="text"
+                  class="p-2 bg-[#FFFFFF11] w-[123px]"
+                />
+              </div>
+            </template>
+
+            <template v-if="optionKey === 'cockpitAction'">
+              <div class="max-w-[120px]">
+                <select v-model="currentElement.options.layout[optionKey]" class="p-2 bg-[#FFFFFF11] w-[120px]">
+                  <option
+                    v-for="cockpitAction in availableCockpitActions"
+                    :key="cockpitAction.name"
+                    :value="cockpitAction"
+                    class="bg-[#000000AA]"
+                  >
+                    {{ cockpitAction.name }}
+                  </option>
+                </select>
+              </div>
+            </template>
+
+            <template v-if="typeof currentElement.options.layout[optionKey] === 'number'">
+              <div class="max-w-[120px]">
+                <input
+                  v-model="currentElement.options.layout[optionKey]"
+                  type="number"
+                  class="p-2 bg-[#FFFFFF11] w-[128px]"
+                />
+              </div>
+            </template>
+
+            <template v-else-if="Array.isArray(getSelectChoices(optionKey)) && optionKey !== 'selectorOptions'">
+              <div class="max-w-[120px]">
+                <select v-model="currentElement.options.layout[optionKey]" class="p-2 bg-[#FFFFFF11] w-[120px]">
+                  <option
+                    v-for="choice in getSelectChoices(optionKey)"
+                    :key="choice"
+                    :value="choice"
+                    class="bg-[#000000AA]"
+                  >
+                    {{ choice }}
+                  </option>
+                </select>
+              </div>
+            </template>
+
+            <template v-else-if="typeof currentElement.options.layout[optionKey] === 'boolean'">
+              <div class="flex items-center max-w-[120px]">
+                <v-checkbox
+                  v-model="currentElement.options.layout[optionKey]"
+                  hide-details
+                  density="compact"
+                  class="text-white mr-10 h-[40px]"
+                />
+              </div>
+            </template>
+
+            <template v-else-if="isColorPicker(optionKey)">
+              <div class="max-w-[120px]">
+                <input v-model="currentElement.options.layout[optionKey]" type="color" class="p-0 w-20 mr-4" />
+              </div>
+            </template>
+
+            <template v-if="optionKey === 'selectorOptions'">
+              <div class="flex flex-col w-[144px] items-end h-auto">
+                <div
+                  v-for="(item, index) in currentElement.options.layout[optionKey]"
+                  :key="index"
+                  class="flex items-center text-center border-b-[1px] border-l-[1px] border-[#FFFFFF11] w-full whitespace-nowrap"
+                >
+                  <v-btn
+                    v-if="currentElement.options.layout.selectorOptions.length > 1"
+                    icon
+                    size="x-small"
+                    variant="text"
+                    @click="removeSelectorOption(optionKey, index)"
+                  >
+                    <v-icon>mdi-delete</v-icon>
+                  </v-btn>
+                  <v-menu
+                    v-model="isOptionsMenuOpen[index]"
+                    :close-on-content-click="false"
+                    location="top start"
+                    origin="top start"
+                    transition="scale-transition"
+                  >
+                    <template #activator="{ props }">
+                      <div class="flex justify-end items-center min-h-[40px] w-full">
+                        <p
+                          v-if="currentElement.options.layout[optionKey][index].name"
+                          v-bind="props"
+                          class="text-[14px] text-center w-[130px] cursor-pointer"
+                        >
+                          {{ currentElement.options.layout[optionKey][index].name }}
+                        </p>
+
+                        <v-btn
+                          v-else
+                          variant="elevated"
+                          class="bg-[#FFFFFF22] my-[10px] mr-[23px] w-22"
+                          size="x-small"
+                          v-bind="props"
+                          >edit</v-btn
+                        >
+                      </div>
+                    </template>
+                    <v-card
+                      class="flex flex-col overflow-hidden pa-3 pb-0 gap-x-4"
+                      :style="interfaceStore.globalGlassMenuStyles"
+                    >
+                      <div class="flex gap-x-4">
+                        <div class="flex flex-col items-center">
+                          <p class="text-[14px]">{{ `Option ${index + 1} name` }}</p>
+                          <input
+                            v-model="currentElement.options.layout[optionKey][index].name"
+                            placeholder="option name"
+                            theme="dark"
+                            type="text"
+                            class="p-2 w-[120px] bg-[#FFFFFF11]"
+                          />
+                        </div>
+                        <div class="flex flex-col items-center">
+                          <p class="text-[14px]">{{ `Option ${index + 1} value` }}</p>
+                          <input
+                            v-model="currentElement.options.layout[optionKey][index].value"
+                            placeholder="value"
+                            theme="dark"
+                            type="text"
+                            class="p-2 w-[120px] bg-[#FFFFFF11]"
+                          />
+                        </div>
+                      </div>
+                      <div class="flex justify-between items-center">
+                        <v-btn
+                          variant="text"
+                          size="x-small"
+                          class="my-2"
+                          @click="
+                            () => {
+                              if (currentElement?.options.layout[optionKey][index].name === '') {
+                                removeSelectorOption(optionKey, index)
+                              }
+                              isOptionsMenuOpen[index] = false
+                            }
+                          "
+                          >close</v-btn
+                        >
+                        <v-btn
+                          variant="text"
+                          size="small"
+                          class="my-3"
+                          :disabled="currentElement.options.layout[optionKey][index].name === ''"
+                          @click="
+                            () => {
+                              addSelectorOption(optionKey)
+                              isOptionsMenuOpen[index] = false
+                              isOptionsMenuOpen[index + 1] = true
+                            }
+                          "
+                          >add another option</v-btn
+                        >
+                      </div>
+                    </v-card>
+                  </v-menu>
+                </div>
+                <v-btn
+                  variant="elevated"
+                  class="bg-[#3B78A8] my-[10px] mr-[13px] w-22"
+                  size="x-small"
+                  @click="addSelectorOption(optionKey)"
+                  >add</v-btn
+                >
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+    </ExpansiblePanel>
+    <ExpansiblePanel
+      v-if="currentElement"
+      :key="currentElement.hash"
+      no-bottom-divider
+      no-top-divider
+      mark-expanded
+      elevation-effect
+      compact
+      darken-content
+      invert-chevron
+      :is-expanded="true"
+    >
+      <template #title>Cockpit actions</template>
+      <template #content>
+        <div class="flex flex-col items-center mb-4 -ml-[7px] w-[248px]">
+          <template v-if="currentElement.component !== CustomWidgetElementType.Button">
+            <div class="flex w-full justify-between items-center h-[40px] border-b-[1px] border-[#FFFFFF33]">
+              <p class="text-center w-full text-sm">Action URL parameter</p>
+              <v-btn
+                v-if="openNewActionVariableForm === false && currentElement.options.actionVariable?.name === undefined"
+                variant="elevated"
+                class="bg-[#3B78A8] mr-[13px]"
+                size="x-small"
+                @click="openNewActionVariableForm = true"
+                >create</v-btn
+              >
+            </div>
+          </template>
+          <template v-if="openNewActionVariableForm || currentElement.options.actionVariable?.name">
+            <div
+              class="flex justify-between items-center h-[40px] w-full border-b-[1px] border-[#FFFFFF33]"
+              :class="{ 'border-[1px] border-red-700': actionVariableError.includes('This name is already in use') }"
+            >
+              <p class="ml-1 text-[14px]">Name</p>
+              <input v-model="futureActionVariable.name" type="text" class="p-2 bg-[#FFFFFF11] w-[123px]" />
+            </div>
+            <div class="flex justify-between items-center h-[40px] w-full border-b-[1px] border-[#FFFFFF33]">
+              <p class="ml-1 text-[14px]">Description</p>
+              <input v-model="futureActionVariable.description" type="text" class="p-2 bg-[#FFFFFF11] w-[123px]" />
+            </div>
+            <div class="flex w-full justify-end">
+              <v-btn
+                variant="text"
+                size="x-small"
+                class="mr-[15px] mt-2"
+                :disabled="currentElement.options.actionVariable === undefined"
+                @click="deleteParameterFromDataLake"
+                >delete</v-btn
+              >
+              <v-btn
+                variant="elevated"
+                size="x-small"
+                class="bg-[#3B78A8] mr-1 mt-2"
+                :class="{
+                  'opacity-10': futureActionVariable.name === '',
+                }"
+                :disabled="futureActionVariable.name === ''"
+                @click="saveOrUpdateParameter"
+                >{{ currentElement.options.actionVariable === undefined ? 'save' : 'update' }}</v-btn
+              >
+            </div>
+          </template>
+          <template v-if="currentElement.component === CustomWidgetElementType.Button">
+            <div class="flex justify-between items-center h-[40px] w-full border-b-[1px] border-[#FFFFFF33]">
+              <p class="ml-1 text-[14px]">Action to trigger</p>
+              <select v-model="currentElement.options.cockpitAction" class="p-2 bg-[#FFFFFF11] w-[123px]">
+                <option
+                  v-for="cockpitAction in availableCockpitActions"
+                  :key="cockpitAction.name"
+                  :value="cockpitAction"
+                  class="bg-[#000000AA]"
+                >
+                  {{ cockpitAction.name }}
+                </option>
+              </select>
+            </div>
+          </template>
+        </div>
+        <div
+          v-if="actionVariableError.length > 0"
+          class="flex justify-center items-center text-[14px] text-center h-[30px] bg-red-800 rounded-lg"
+        >
+          <p v-for="message in actionVariableError" :key="message">• {{ message }}</p>
+        </div>
+      </template>
+    </ExpansiblePanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+
+import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
+import { useSnackbar } from '@/composables/snackbar'
+import {
+  createCockpitActionVariable,
+  deleteCockpitActionVariable,
+  getCockpitActionVariableInfo,
+  updateCockpitActionVariableInfo,
+} from '@/libs/actions/data-lake'
+import { getAllHttpRequestActionConfigs, HttpRequestActionConfig } from '@/libs/actions/http-request'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import { CockpitActionVariable, CustomWidgetElement, CustomWidgetElementType } from '@/types/widgets'
+
+const widgetStore = useWidgetManagerStore()
+const interfaceStore = useAppInterfaceStore()
+const { showSnackbar } = useSnackbar()
+
+const currentElement = ref<CustomWidgetElement | undefined>(widgetStore.elementToShowOnDrawer)
+const defaultActionVariable: CockpitActionVariable = {
+  id: '',
+  name: '',
+  type: currentElement.value?.options.variableType,
+  description: '',
+}
+
+const availableCockpitActions = reactive<Record<string, HttpRequestActionConfig>>({})
+const futureActionVariable = ref<CockpitActionVariable>(defaultActionVariable)
+const openNewActionVariableForm = ref(false)
+const isOptionsMenuOpen = ref<{ [key: number]: boolean }>({})
+const actionVariableError = ref<string[]>([])
+
+watch(
+  () => widgetStore.elementToShowOnDrawer,
+  (newValue) => {
+    currentElement.value = newValue
+    futureActionVariable.value = newValue?.options.actionVariable || {
+      id: '',
+      name: '',
+      type: currentElement.value?.options.variableType,
+      description: '',
+    }
+    openNewActionVariableForm.value = false
+    if (newValue && newValue.hash) {
+      widgetStore.miniWidgetManagerVars(newValue.hash).configMenuOpen = false
+    }
+  }
+)
+
+const CloseConfigPanel = (): void => {
+  widgetStore.elementToShowOnDrawer = undefined
+  widgetStore.miniWidgetManagerVars(currentElement.value!.hash).configMenuOpen = false
+}
+
+const showActionExistsError = (): void => {
+  showSnackbar({
+    message: 'Variable name already exists',
+    variant: 'error',
+  })
+  actionVariableError.value.push('This name is already in use')
+  setTimeout(() => {
+    actionVariableError.value.splice(0, 1)
+  }, 3000)
+}
+
+const deleteParameterFromDataLake = async (): Promise<void> => {
+  if (currentElement.value?.options.actionVariable?.name) {
+    try {
+      await deleteCockpitActionVariable(currentElement.value.options.actionVariable)
+      showSnackbar({
+        message: 'Action variable deleted',
+        variant: 'success',
+      })
+    } catch (e) {
+      showSnackbar({
+        message: 'Error deleting action variable',
+        variant: 'error',
+      })
+    }
+    futureActionVariable.value.name = ''
+    futureActionVariable.value = defaultActionVariable
+    currentElement.value.options.actionVariable = undefined
+    openNewActionVariableForm.value = false
+  }
+}
+
+const saveOrUpdateParameter = (): void => {
+  let newCockpitActionVariable = {
+    id: futureActionVariable.value?.id === '' ? futureActionVariable.value?.name : futureActionVariable.value?.id,
+    name: futureActionVariable.value?.name,
+    type: currentElement.value?.options.variableType,
+    description: futureActionVariable.value?.description,
+  }
+  if (
+    currentElement.value &&
+    futureActionVariable.value &&
+    currentElement.value.options.actionVariable?.name === undefined // Knows that it's a new input element being named
+  ) {
+    if (getCockpitActionVariableInfo(newCockpitActionVariable.id) !== undefined) {
+      showActionExistsError()
+      return
+    }
+    createCockpitActionVariable(newCockpitActionVariable)
+    currentElement.value.options.actionVariable = newCockpitActionVariable
+    return
+  }
+  if (futureActionVariable.value && currentElement.value?.options.actionVariable?.name) {
+    newCockpitActionVariable.id = currentElement.value.options.actionVariable.id
+    updateCockpitActionVariableInfo(newCockpitActionVariable)
+    currentElement.value.options.actionVariable = newCockpitActionVariable
+  }
+}
+
+// Sort layout options in alphabetical order
+const sortedOptionKeys = computed(() => {
+  if (currentElement.value?.options?.layout) {
+    return Object.keys(currentElement.value?.options?.layout).sort((a, b) => {
+      return a.localeCompare(b)
+    })
+  }
+  return []
+})
+
+// Capitalize and format labels
+const formatLabel = (key: string): string => {
+  return key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1')
+}
+
+const getSelectChoices = (key: string): string[] | undefined => {
+  if (key === 'align') {
+    return ['start', 'center', 'end']
+  }
+  if (key === 'buttonSize') {
+    return ['small', 'default', 'large']
+  }
+  if (key === 'variant') {
+    return ['text', 'outlined', 'flat', 'elevated', 'tonal', 'plain']
+  }
+  if (key === 'size') {
+    return ['small', 'medium', 'large']
+  }
+  if (key === 'weight') {
+    return ['normal', 'bold']
+  }
+  if (key === 'decoration') {
+    return ['none', 'underline', 'overline', 'line-through']
+  }
+  if (key === 'selectorOptions') {
+    return ['selector']
+  }
+}
+
+const isColorPicker = (key: string): boolean => {
+  return key.toLowerCase().includes('color')
+}
+
+const addSelectorOption = (key: string): void => {
+  if (currentElement.value) {
+    if (!currentElement.value.options.layout[key]) {
+      currentElement.value.options.layout[key] = [{ name: '', value: '' }]
+    } else {
+      currentElement.value.options.layout[key].push({ name: '', value: '' })
+    }
+    isOptionsMenuOpen.value[currentElement.value.options.layout[key].length - 1] = true
+  }
+}
+
+const removeSelectorOption = (key: string, index: number): void => {
+  if (currentElement.value && currentElement.value.options.layout[key]) {
+    currentElement.value.options.layout[key].splice(index, 1)
+  }
+}
+
+const deleteElement = (): void => {
+  if (currentElement.value) {
+    try {
+      widgetStore.removeElementFromCustomWidget(currentElement.value.hash)
+      widgetStore.elementToShowOnDrawer = undefined
+      deleteParameterFromDataLake()
+    } catch (e) {
+      widgetStore.deleteMiniWidget(currentElement.value as any) // eslint-disable-line
+    }
+    deleteParameterFromDataLake()
+  }
+}
+
+const loadSavedActions = (): void => {
+  Object.assign(availableCockpitActions, getAllHttpRequestActionConfigs())
+}
+
+onMounted(() => {
+  if (currentElement.value?.options.actionVariable?.name) {
+    futureActionVariable.value = currentElement.value?.options.actionVariable
+  }
+  loadSavedActions()
+})
+</script>
+
+<style scoped>
+.label-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/MiniWidgetContainer.vue b/src/components/MiniWidgetContainer.vue
index ff481712c..0477b3412 100644
--- a/src/components/MiniWidgetContainer.vue
+++ b/src/components/MiniWidgetContainer.vue
@@ -25,7 +25,7 @@
         @mouseover="widgetStore.miniWidgetManagerVars(miniWidget.hash).highlighted = allowEditing"
         @mouseleave="widgetStore.miniWidgetManagerVars(miniWidget.hash).highlighted = false"
       >
-        <div :class="{ 'select-none pointer-events-none': allowEditing }">
+        <div :class="{ 'select-none ': allowEditing }">
           <MiniWidgetInstantiator :mini-widget="miniWidget" />
         </div>
       </div>
@@ -36,12 +36,12 @@
       <div
         v-if="showWidgetTrashArea"
         ref="widgetTrashArea"
-        class="absolute w-64 h-64 -translate-x-32 -translate-y-32 top-1/2 left-1/2 bg-slate-500/50 z-[65] rounded-3xl flex items-center justify-center hover:bg-slate-200/50 transition-all"
+        class="absolute w-32 h-32 -translate-x-32 -translate-y-32 bottom-[20%] left-1/3 bg-[#FF000055] z-[65] rounded-xl flex items-center justify-center hover:bg-slate-200/50 transition-all"
       >
-        <div class="relative w-full h-full">
+        <div class="relative flex justify-center items-center w-full h-full">
           <FontAwesomeIcon
             icon="fa-solid fa-trash"
-            class="absolute h-24 transition-all -translate-x-12 -translate-y-12 top-1/2 left-1/2 text-slate-50/30"
+            class="absolute h-16 transition-all -translate-x-7 -translate-y-8 top-1/2 left-1/2 text-white"
           />
           <VueDraggable
             v-model="trashList"
@@ -51,7 +51,7 @@
             @add="handleDeleteWidget"
           >
             <div v-for="miniWidget in trashList" :key="miniWidget.hash">
-              <div class="pointer-events-none select-none">
+              <div class="select-none">
                 <MiniWidgetInstantiator :mini-widget="miniWidget" />
               </div>
             </div>
@@ -146,6 +146,7 @@ const handleDeleteWidget = (event: DraggableEvent): void => {
     // Remove miniWidget variableName from Logged variables list
     CurrentlyLoggedVariables.removeVariable(widgetData.options.displayName)
   }
+  widgetStore.elementToShowOnDrawer = undefined
   trashList.value = []
 }
 </script>
diff --git a/src/components/MiniWidgetInstantiator.vue b/src/components/MiniWidgetInstantiator.vue
index be0f0c2b7..6acc253e8 100644
--- a/src/components/MiniWidgetInstantiator.vue
+++ b/src/components/MiniWidgetInstantiator.vue
@@ -3,37 +3,51 @@
 </template>
 
 <script setup lang="ts">
-import { type AsyncComponentLoader, defineAsyncComponent, toRefs } from 'vue'
+import { defineAsyncComponent, onMounted, toRefs } from 'vue'
 
-import { type MiniWidget, MiniWidgetType } from '@/types/widgets'
+import { createCockpitActionVariable, getCockpitActionVariableInfo } from '@/libs/actions/data-lake'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import { type MiniWidget, CustomWidgetElement } from '@/types/widgets'
+
+const widgetStore = useWidgetManagerStore()
 
 const props = defineProps<{
   /**
    * Mini-widget instance
    */
-  miniWidget: MiniWidget
+  miniWidget: MiniWidget | CustomWidgetElement
 }>()
 
 const miniWidget = toRefs(props).miniWidget
 
-const componentCache: Record<string, AsyncComponentLoader> = {}
-
-const componentFromType = (componentType: MiniWidgetType): AsyncComponentLoader => {
-  if (!Object.values(MiniWidgetType).includes(componentType)) {
-    console.error(`Trying to import mini-widget with unknown '${componentType}' type. Import aborted.`)
-    return
+const componentCache: Record<string, ReturnType<typeof defineAsyncComponent>> = {}
+
+const componentFromType = (componentType: string): ReturnType<typeof defineAsyncComponent> => {
+  if (!componentCache[componentType]) {
+    componentCache[componentType] = defineAsyncComponent(async () => {
+      try {
+        return await import(`../components/mini-widgets/${componentType}.vue`)
+      } catch (error) {
+        return await import(`../components/custom-widget-elements/${componentType}.vue`)
+      }
+    })
   }
+  return componentCache[componentType]
+}
 
-  if (componentCache[componentType] === undefined) {
-    try {
-      componentCache[componentType] = defineAsyncComponent(
-        () => import(`../components/mini-widgets/${componentType}.vue`)
-      )
-    } catch (error) {
-      console.error(`Failed to load mini-widget component: ${componentType}`, error)
-    }
+const registerCockpitActions = (): void => {
+  if (
+    miniWidget.value.options.actionVariable &&
+    getCockpitActionVariableInfo(miniWidget.value.options.actionVariable.id) !== undefined
+  )
+    return
+  if (miniWidget.value.options.actionVariable) {
+    createCockpitActionVariable(
+      miniWidget.value.options.actionVariable,
+      widgetStore.getMiniWidgetLastValue(miniWidget.value.hash)
+    )
   }
-
-  return componentCache[componentType]
 }
+
+onMounted(() => registerCockpitActions())
 </script>
diff --git a/src/components/WidgetHugger.vue b/src/components/WidgetHugger.vue
index a45a7246f..d99488ac2 100644
--- a/src/components/WidgetHugger.vue
+++ b/src/components/WidgetHugger.vue
@@ -87,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], () => {
-  widgetStore.widgetManagerVars(widget.value.hash).highlighted = hoveringWidgetOrOverlay.value && allowMoving.value
+  widgetStore.widgetManagerVars(widget.value.hash).highlighted = hoveringWidgetOrOverlay.value
 })
 
 const draggingWidget = ref(false)
diff --git a/src/components/custom-widget-elements/Button.vue b/src/components/custom-widget-elements/Button.vue
new file mode 100644
index 000000000..837f9990d
--- /dev/null
+++ b/src/components/custom-widget-elements/Button.vue
@@ -0,0 +1,85 @@
+<template>
+  <div
+    class="flex items-center"
+    :style="{ justifyContent: miniWidget.options.layout?.align }"
+    :class="
+      widgetStore.elementToShowOnDrawer?.hash === miniWidget.hash && widgetStore.editingMode
+        ? 'bg-[#00000010] '
+        : 'border-0'
+    "
+    @click="widgetStore.editingMode && widgetStore.showElementPropsDrawer(miniWidget.hash)"
+  >
+    <div :class="widgetStore.editingMode ? 'pointer-events-none' : 'pointer-events-auto'">
+      <v-btn
+        :size="miniWidget.options.layout?.buttonSize"
+        :variant="miniWidget.options.layout?.variant"
+        :style="{
+          color: miniWidget.options.layout?.textColor || '#FFFFFF',
+          backgroundColor:
+            miniWidget.options.layout?.variant !== 'text' && miniWidget.options.layout?.variant !== 'outlined'
+              ? miniWidget.options.layout?.backgroundColor || '#FFFFFF33'
+              : 'transparent',
+        }"
+        @click="handleClick"
+      >
+        {{ miniWidget.options.layout?.label || 'Button' }}
+      </v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, toRefs, watch } from 'vue'
+
+import { executeActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
+
+const widgetStore = useWidgetManagerStore()
+
+const props = defineProps<{
+  /**
+   * Element instance
+   */
+  miniWidget: CustomWidgetElementOptions[CustomWidgetElementType.Button]
+}>()
+
+const miniWidget = toRefs(props).miniWidget
+
+const handleClick = (): void => {
+  if (widgetStore.editingMode) return
+  executeActionCallback(`http-request-action (${miniWidget.value.options.cockpitAction.name})`)
+}
+
+watch(
+  () => widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen,
+  (newValue) => {
+    if (newValue === true) {
+      widgetStore.showElementPropsDrawer(miniWidget.value.hash)
+      setTimeout(() => {
+        widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen = false
+      }, 200)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+onMounted(() => {
+  if (!props.miniWidget.options || Object.keys(props.miniWidget.options).length === 0) {
+    miniWidget.value.isCustomElement = true
+    widgetStore.updateElementOptions(props.miniWidget.hash, {
+      layout: {
+        align: miniWidget.value.options.layout?.align || 'center',
+        backgroundColor: miniWidget.value.options.layout?.backgroundColor || '#FFFFFF33',
+        label: miniWidget.value.options.layout?.label || 'Click Here',
+        buttonSize: miniWidget.value.options.layout?.buttonSize || 'default',
+        textColor: miniWidget.value.options.layout?.textColor || '#FFFFFF',
+        variant: miniWidget.value.options.layout?.variant || 'elevated',
+      },
+      cockpitAction: miniWidget.value.options.cockpitAction || '',
+    })
+  }
+})
+</script>
+
+<style scoped></style>
diff --git a/src/components/custom-widget-elements/Checkbox.vue b/src/components/custom-widget-elements/Checkbox.vue
new file mode 100644
index 000000000..91e9a2f7e
--- /dev/null
+++ b/src/components/custom-widget-elements/Checkbox.vue
@@ -0,0 +1,101 @@
+<template>
+  <div
+    class="flex items-center h-[30px]"
+    :style="{ justifyContent: miniWidget.options.layout?.align }"
+    :class="
+      widgetStore.elementToShowOnDrawer?.hash === miniWidget.hash && widgetStore.editingMode
+        ? 'bg-[#00000010] '
+        : 'border-0'
+    "
+    @click="widgetStore.editingMode && widgetStore.showElementPropsDrawer(miniWidget.hash)"
+  >
+    <p v-if="miniWidget.options.layout?.label !== ''" class="mr-3 mb-[3px] text-white">
+      {{ miniWidget.options.layout?.label }}
+    </p>
+    <v-checkbox
+      v-model="isChecked"
+      hide-details
+      :color="miniWidget.options.layout?.color"
+      class="text-white"
+      :class="{ 'pointer-events-none': widgetStore.editingMode }"
+      theme="dark"
+      @update:model-value="handleToggleAction"
+    ></v-checkbox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
+
+import {
+  deleteCockpitActionVariable,
+  listenCockpitActionVariable,
+  setCockpitActionVariableData,
+  unlistenCockpitActionVariable,
+} from '@/libs/actions/data-lake'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
+
+const widgetStore = useWidgetManagerStore()
+
+const props = defineProps<{
+  /**
+   * Element instance
+   */
+  miniWidget: CustomWidgetElementOptions[CustomWidgetElementType.Checkbox]
+}>()
+
+const miniWidget = toRefs(props).miniWidget
+const isChecked = ref(false)
+
+const handleToggleAction = (): void => {
+  if (widgetStore.editingMode) return
+  widgetStore.setMiniWidgetLastValue(miniWidget.value.hash, isChecked.value)
+  if (miniWidget.value.options.actionVariable) {
+    setCockpitActionVariableData(miniWidget.value.options.actionVariable.name, isChecked.value)
+  }
+}
+
+watch(
+  () => widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen,
+  (newValue) => {
+    if (newValue === true) {
+      widgetStore.showElementPropsDrawer(miniWidget.value.hash)
+      setTimeout(() => {
+        widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen = false
+      }, 200)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+onMounted(() => {
+  if (!miniWidget.value.options || Object.keys(miniWidget.value.options).length === 0) {
+    miniWidget.value.isCustomElement = true
+    widgetStore.updateElementOptions(miniWidget.value.hash, {
+      layout: {
+        label: '',
+        align: 'center',
+        color: '#FFFFFF',
+      },
+      variableType: 'boolean',
+      actionVariable: undefined,
+    })
+  }
+  if (miniWidget.value.options.actionVariable) {
+    listenCockpitActionVariable(miniWidget.value.options.actionVariable.name, (value) => {
+      isChecked.value = value as boolean
+    })
+    isChecked.value = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash) as boolean
+  }
+})
+
+onUnmounted(() => {
+  if (miniWidget.value.options.actionVariable) {
+    unlistenCockpitActionVariable(miniWidget.value.options.actionVariable.name)
+    deleteCockpitActionVariable(miniWidget.value.options.actionVariable.id)
+  }
+})
+</script>
+
+<style scoped></style>
diff --git a/src/components/custom-widget-elements/Dial.vue b/src/components/custom-widget-elements/Dial.vue
new file mode 100644
index 000000000..3fa8e19ff
--- /dev/null
+++ b/src/components/custom-widget-elements/Dial.vue
@@ -0,0 +1,251 @@
+<template>
+  <div
+    id="dial"
+    class="flex items-center w-auto"
+    :style="{ justifyContent: miniWidget.options.layout?.align }"
+    :class="
+      widgetStore.elementToShowOnDrawer?.hash === miniWidget.hash && widgetStore.editingMode
+        ? 'bg-[#00000010] '
+        : 'border-0'
+    "
+    @click="widgetStore.editingMode && widgetStore.showElementPropsDrawer(miniWidget.hash)"
+  >
+    <div class="flex flex-row" :class="widgetStore.editingMode ? 'pointer-events-none' : 'pointer-events-auto'">
+      <div class="potentiometer-container w-full" :class="sizeClass" @mousedown="startDrag">
+        <div class="potentiometer-scale elevation-5">
+          <div
+            class="potentiometer-knob"
+            :style="{
+              transform: `rotate(${rotationAngle}deg)`,
+              background: miniWidget.options.layout?.knobColor || '#838383',
+            }"
+          >
+            <div class="knob-notch" :style="{ background: miniWidget.options.layout?.notchColor || '#222222' }"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="miniWidget.options.layout?.showValue"
+      class="value-display bg-[#FFFFFF22] border-[#FFFFFF44] border-[1px] rounded-md p-[2px] min-w-9 text-center elevation-1"
+    >
+      {{ Math.round(potentiometerValue) || 0 }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
+
+import {
+  deleteCockpitActionVariable,
+  listenCockpitActionVariable,
+  setCockpitActionVariableData,
+  unlistenCockpitActionVariable,
+} from '@/libs/actions/data-lake'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
+
+const widgetStore = useWidgetManagerStore()
+
+const props = defineProps<{
+  /**
+   * Element instance
+   */
+  miniWidget: CustomWidgetElementOptions[CustomWidgetElementType.Dial]
+}>()
+
+const miniWidget = toRefs(props).miniWidget
+
+const potentiometerValue = ref(0)
+const rotationAngle = ref(-150)
+
+watch(
+  () => widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen,
+  (newValue) => {
+    if (newValue === true) {
+      widgetStore.showElementPropsDrawer(miniWidget.value.hash)
+      setTimeout(() => {
+        widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen = false
+      }, 200)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+const setDialValue = (value: number | string | undefined): void => {
+  let numValue: number
+  if (value === undefined || value === null || isNaN(Number(value))) {
+    numValue = miniWidget.value.options.layout?.minValue || 0
+  } else {
+    numValue = Number(value)
+  }
+
+  potentiometerValue.value = numValue
+
+  const rotationRange = 300
+  const valueRange = miniWidget.value.options.layout?.maxValue - miniWidget.value.options.layout?.minValue || 1
+  rotationAngle.value = ((numValue - miniWidget.value.options.layout?.minValue) / valueRange) * rotationRange - 150
+}
+
+onMounted(() => {
+  if (!miniWidget.value.options || Object.keys(miniWidget.value.options).length === 0) {
+    miniWidget.value.isCustomElement = true
+    widgetStore.updateElementOptions(miniWidget.value.hash, {
+      layout: {
+        minValue: 0,
+        maxValue: 100,
+        size: 'small',
+        showValue: true,
+        align: 'center',
+        knobColor: '#838383',
+        notchColor: '#303030aa',
+      },
+      variableType: 'number',
+      actionVariable: undefined,
+    })
+  }
+  if (miniWidget.value.options.actionVariable) {
+    listenCockpitActionVariable(miniWidget.value.options.actionVariable?.name, (value) => {
+      setDialValue(value as number)
+    })
+    const initialValue = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash)
+    setDialValue(initialValue)
+  }
+})
+
+const sizeClass = computed(() => {
+  switch (miniWidget.value.options.layout?.size) {
+    case 'medium':
+      return 'potentiometer-medium'
+    case 'large':
+      return 'potentiometer-large'
+    default:
+      return 'potentiometer-small'
+  }
+})
+
+const startDrag = (event: MouseEvent): void => {
+  event.preventDefault()
+
+  const target = event.currentTarget as HTMLElement
+  const rect = target.getBoundingClientRect()
+
+  const centerX = rect.left + rect.width / 2
+  const centerY = rect.top + rect.height / 2
+
+  const dxStart = event.clientX - centerX
+  const dyStart = event.clientY - centerY
+  const initialMouseAngle = Math.atan2(dyStart, dxStart) * (180 / Math.PI)
+
+  const initialRotationAngle = rotationAngle.value
+
+  const handleDrag = (moveEvent: MouseEvent): void => {
+    const dx = moveEvent.clientX - centerX
+    const dy = moveEvent.clientY - centerY
+
+    const currentMouseAngle = Math.atan2(dy, dx) * (180 / Math.PI)
+
+    let angleDifference = currentMouseAngle - initialMouseAngle
+
+    if (angleDifference > 180) {
+      angleDifference -= 360
+    } else if (angleDifference < -180) {
+      angleDifference += 360
+    }
+
+    let newRotationAngle = initialRotationAngle + angleDifference
+
+    newRotationAngle = Math.max(-150, Math.min(150, newRotationAngle))
+
+    rotationAngle.value = newRotationAngle
+
+    const rotationRange = 300
+    const valueRange = miniWidget.value.options.layout?.maxValue - miniWidget.value.options.layout?.minValue || 1
+    potentiometerValue.value =
+      ((newRotationAngle + 150) / rotationRange) * valueRange + miniWidget.value.options.layout?.minValue
+
+    if (miniWidget.value.options.actionVariable) {
+      if (widgetStore.editingMode) return
+      widgetStore.setMiniWidgetLastValue(miniWidget.value.hash, Math.round(potentiometerValue.value))
+      setCockpitActionVariableData(miniWidget.value.options.actionVariable.name, Math.round(potentiometerValue.value))
+    }
+  }
+
+  const stopDrag = (): void => {
+    document.removeEventListener('mousemove', handleDrag)
+    document.removeEventListener('mouseup', stopDrag)
+  }
+
+  document.addEventListener('mousemove', handleDrag)
+  document.addEventListener('mouseup', stopDrag)
+}
+
+onUnmounted(() => {
+  if (miniWidget.value.options.actionVariable) {
+    unlistenCockpitActionVariable(miniWidget.value.options.actionVariable.name)
+    deleteCockpitActionVariable(miniWidget.value.options.actionVariable.id)
+  }
+})
+</script>
+
+<style scoped>
+.potentiometer-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+}
+
+.potentiometer-small {
+  width: 50px;
+  height: 50px;
+}
+
+.potentiometer-medium {
+  width: 75px;
+  height: 75px;
+}
+
+.potentiometer-large {
+  width: 120px;
+  height: 120px;
+}
+
+.potentiometer-scale {
+  width: 80%;
+  height: 80%;
+  background-size: contain;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  position: relative;
+}
+
+.potentiometer-knob {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: relative;
+  cursor: pointer;
+}
+
+.knob-notch {
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  width: 15%;
+  height: 15%;
+  border-radius: 50%;
+  transform: translateX(-50%);
+}
+
+.value-display {
+  font-size: 14px;
+  color: white;
+  margin-left: 8px;
+}
+</style>
diff --git a/src/components/custom-widget-elements/Dropdown.vue b/src/components/custom-widget-elements/Dropdown.vue
new file mode 100644
index 000000000..7b0f49bc8
--- /dev/null
+++ b/src/components/custom-widget-elements/Dropdown.vue
@@ -0,0 +1,140 @@
+<template>
+  <div
+    class="flex w-full"
+    :style="{ width: '100%', justifyContent: miniWidget.options.layout?.align }"
+    :class="
+      widgetStore.elementToShowOnDrawer?.hash === miniWidget.hash && widgetStore.editingMode
+        ? 'bg-[#00000010] '
+        : 'border-0'
+    "
+    @click="widgetStore.editingMode && widgetStore.showElementPropsDrawer(miniWidget.hash)"
+  >
+    <div>
+      <v-select
+        v-model="selectedValue"
+        :items="options"
+        item-title="name"
+        item-value="value"
+        theme="dark"
+        density="compact"
+        variant="filled"
+        :min-width="miniWidget.options.layout?.width || 168"
+        hide-details
+        class="text-white"
+        :class="{ 'pointer-events-none': widgetStore.editingMode }"
+        @update:model-value="handleSelection"
+      >
+        >
+      </v-select>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
+
+import {
+  deleteCockpitActionVariable,
+  listenCockpitActionVariable,
+  setCockpitActionVariableData,
+  unlistenCockpitActionVariable,
+} from '@/libs/actions/data-lake'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import { CustomWidgetElementOptions, CustomWidgetElementType, SelectorOption } from '@/types/widgets'
+
+const widgetStore = useWidgetManagerStore()
+
+const props = defineProps<{
+  /**
+   * Element instance
+   */
+  miniWidget: CustomWidgetElementOptions[CustomWidgetElementType.Dropdown]
+}>()
+
+const options = computed(() => {
+  return miniWidget.value.options.layout?.selectorOptions || []
+})
+
+const miniWidget = toRefs(props).miniWidget
+const selectedOption = ref<SelectorOption | undefined>(
+  options.value.find((option) => option.value === props.miniWidget.options.lastSelected?.value) || options.value[0]
+)
+
+const selectedValue = ref<string | number | boolean>(
+  props.miniWidget.options.lastSelected?.value || options.value[0]?.value
+)
+
+watch(
+  () => widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen,
+  (newValue) => {
+    if (newValue === true) {
+      widgetStore.showElementPropsDrawer(miniWidget.value.hash)
+      setTimeout(() => {
+        widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen = false
+      }, 200)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+watch(selectedOption, (newValue) => {
+  widgetStore.updateElementOptions(miniWidget.value.hash, {
+    ...miniWidget.value.options,
+    lastSelected: newValue,
+  })
+})
+
+const handleSelection = (value: string | number | boolean): void => {
+  if (widgetStore.editingMode) return
+
+  const selected = options.value.find((option) => option.value === value)
+  if (!selected) return
+
+  selectedValue.value = value
+
+  if (miniWidget.value.options.actionVariable) {
+    setCockpitActionVariableData(miniWidget.value.options.actionVariable.id, value)
+  }
+  widgetStore.setMiniWidgetLastValue(miniWidget.value.hash, selected.value)
+}
+
+onMounted(() => {
+  if (!miniWidget.value.options || Object.keys(miniWidget.value.options).length === 0) {
+    miniWidget.value.isCustomElement = true
+    widgetStore.updateElementOptions(miniWidget.value.hash, {
+      layout: {
+        selectorOptions: [],
+        align: 'start',
+        width: 168,
+      },
+      variableType: 'string',
+      actionVariable: undefined,
+    })
+  }
+  if (miniWidget.value.options.actionVariable) {
+    listenCockpitActionVariable(miniWidget.value.options.actionVariable.name, (value) => {
+      selectedOption.value = options.value.find((option) => option.value === value)
+    })
+    const storedValue = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash)
+    selectedOption.value = options.value.find((option: SelectorOption) => option.value === storedValue)
+  }
+  if (miniWidget.value.options.lastSelected?.name !== '') {
+    selectedOption.value = miniWidget.value.options.lastSelected
+  }
+})
+
+onUnmounted(() => {
+  if (miniWidget.value.options.actionVariable) {
+    unlistenCockpitActionVariable(miniWidget.value.options.actionVariable.name)
+    deleteCockpitActionVariable(miniWidget.value.options.actionVariable.id)
+  }
+})
+</script>
+
+<style scoped>
+.select-container {
+  width: 100%;
+  align-items: center;
+  flex-direction: row;
+}
+</style>
diff --git a/src/components/custom-widget-elements/Label.vue b/src/components/custom-widget-elements/Label.vue
new file mode 100644
index 000000000..25ffdb2d6
--- /dev/null
+++ b/src/components/custom-widget-elements/Label.vue
@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="label-container"
+    :class="
+      widgetStore.elementToShowOnDrawer?.hash === miniWidget.hash && widgetStore.editingMode
+        ? 'bg-[#00000010] '
+        : 'border-0'
+    "
+    @click="widgetStore.editingMode && widgetStore.showElementPropsDrawer(miniWidget.hash)"
+  >
+    <div
+      :style="{
+        width: '100%',
+        fontSize: `${miniWidget.options.layout?.textSize}px` || '35px',
+        fontWeight: miniWidget.options.layout?.weight,
+        textDecoration: miniWidget.options.layout?.decoration,
+        color: miniWidget.options.layout?.color || '#FFFFFF',
+        textAlign: miniWidget.options.layout?.align || 'center',
+        margin: '1px',
+      }"
+    >
+      {{ miniWidget.options.text || 'Label' }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, toRefs, watch } from 'vue'
+
+import {
+  deleteCockpitActionVariable,
+  listenCockpitActionVariable,
+  unlistenCockpitActionVariable,
+} from '@/libs/actions/data-lake'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
+
+const widgetStore = useWidgetManagerStore()
+
+const props = defineProps<{
+  /**
+   * Element instance
+   */
+  miniWidget: CustomWidgetElementOptions[CustomWidgetElementType.Label]
+}>()
+
+const miniWidget = toRefs(props).miniWidget
+
+watch(
+  () => widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen,
+  (newValue) => {
+    if (newValue === true) {
+      widgetStore.showElementPropsDrawer(miniWidget.value.hash)
+      setTimeout(() => {
+        widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen = false
+      }, 200)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+onMounted(() => {
+  if (!props.miniWidget.options || Object.keys(props.miniWidget.options).length === 0) {
+    miniWidget.value.isCustomElement = true
+    widgetStore.updateElementOptions(props.miniWidget.hash, {
+      text: 'Label',
+      layout: {
+        textSize: 20,
+        weight: 'normal',
+        decoration: 'none',
+        color: '#FFFFFF',
+        align: 'center',
+      },
+      variableType: 'string',
+      actionVariable: undefined,
+    })
+  }
+  if (props.miniWidget.options.actionVariable) {
+    listenCockpitActionVariable(props.miniWidget.options.actionVariable?.name, (value) => {
+      miniWidget.value.options.text = value as string
+    })
+    miniWidget.value.options.text = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash) as string
+  }
+})
+
+onUnmounted(() => {
+  if (miniWidget.value.options.actionVariable) {
+    unlistenCockpitActionVariable(miniWidget.value.options.actionVariable.name)
+    deleteCockpitActionVariable(miniWidget.value.options.actionVariable.id)
+  }
+})
+</script>
+
+<style scoped>
+.label-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/custom-widget-elements/Slider.vue b/src/components/custom-widget-elements/Slider.vue
new file mode 100644
index 000000000..0bd14395f
--- /dev/null
+++ b/src/components/custom-widget-elements/Slider.vue
@@ -0,0 +1,142 @@
+<template>
+  <div
+    class="slider-container"
+    :class="
+      widgetStore.elementToShowOnDrawer?.hash === miniWidget.hash && widgetStore.editingMode
+        ? 'bg-[#00000010] '
+        : 'border-0'
+    "
+    @click="widgetStore.editingMode && widgetStore.showElementPropsDrawer(miniWidget.hash)"
+  >
+    <div :style="{ minWidth: miniWidget.options.layout?.labelWidth + 'px' }">
+      <p v-if="miniWidget.options.layout?.label !== ''" class="mr-3 mb-[3px]">
+        {{ miniWidget.options.layout?.label }}
+      </p>
+    </div>
+    <v-slider
+      v-model="sliderValue"
+      :min="miniWidget.options.layout?.minValue"
+      :max="miniWidget.options.layout?.maxValue"
+      :thumb-label="miniWidget.options.layout?.showTooltip"
+      hide-details
+      class="min-w-20"
+      :color="miniWidget.options.layout?.color || 'white'"
+      :class="{
+        'pointer-events-none': widgetStore.editingMode,
+        'scale-75': miniWidget.options.layout?.size === 'small',
+      }"
+      @update:model-value="handleSliderChange"
+    ></v-slider>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from '@vueuse/core'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+import {
+  deleteCockpitActionVariable,
+  listenCockpitActionVariable,
+  setCockpitActionVariableData,
+  unlistenCockpitActionVariable,
+} from '@/libs/actions/data-lake'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
+
+const widgetStore = useWidgetManagerStore()
+
+const props = defineProps<{
+  /**
+   * Element instance
+   */
+  miniWidget: CustomWidgetElementOptions[CustomWidgetElementType.Slider]
+}>()
+
+const miniWidget = toRefs(props).miniWidget
+
+const sliderValue = ref(0)
+
+watch(
+  () => widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen,
+  (newValue) => {
+    if (newValue === true) {
+      widgetStore.showElementPropsDrawer(miniWidget.value.hash)
+      setTimeout(() => {
+        widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen = false
+      }, 200)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+const handleSliderChange = (): void => {
+  if (widgetStore.editingMode) return
+  if (miniWidget.value.options.actionVariable) {
+    widgetStore.setMiniWidgetLastValue(miniWidget.value.hash, sliderValue.value.toFixed(1))
+    setCockpitActionVariableData(miniWidget.value.options.actionVariable.name, sliderValue.value.toFixed(1))
+  }
+}
+
+onMounted(() => {
+  if (!miniWidget.value.options || Object.keys(miniWidget.value.options).length === 0) {
+    miniWidget.value.isCustomElement = true
+    widgetStore.updateElementOptions(miniWidget.value.hash, {
+      layout: {
+        label: '',
+        minValue: 0,
+        maxValue: 100,
+        showTooltip: true,
+        color: '#FFFFFF',
+        labelWidth: miniWidget.value.options.layout?.labelWidth || 0,
+      },
+      variableType: 'number',
+      actionVariable: undefined,
+    })
+  }
+  if (miniWidget.value.options.actionVariable) {
+    listenCockpitActionVariable(miniWidget.value.options.actionVariable?.name, (value) => {
+      sliderValue.value = value as number
+    })
+    sliderValue.value = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash) as number
+  }
+})
+
+onUnmounted(() => {
+  if (miniWidget.value.options.actionVariable) {
+    unlistenCockpitActionVariable(miniWidget.value.options.actionVariable.name)
+    deleteCockpitActionVariable(miniWidget.value.options.actionVariable.id)
+  }
+})
+</script>
+
+<style scoped>
+.slider-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+}
+
+.label-top {
+  margin-bottom: 8px;
+}
+
+.label-bottom {
+  margin-top: 8px;
+}
+
+.label-left {
+  order: -1;
+  margin-right: 16px;
+}
+
+.label-right {
+  margin-left: 16px;
+  order: 1;
+}
+
+.slider-container.row {
+  flex-direction: row; /* Horizontal layout for left/right labels */
+}
+</style>
diff --git a/src/components/custom-widget-elements/Switch.vue b/src/components/custom-widget-elements/Switch.vue
new file mode 100644
index 000000000..ff1173731
--- /dev/null
+++ b/src/components/custom-widget-elements/Switch.vue
@@ -0,0 +1,101 @@
+<template>
+  <div
+    class="flex items-center h-[30px] px-4"
+    :class="
+      widgetStore.elementToShowOnDrawer?.hash === miniWidget.hash && widgetStore.editingMode
+        ? 'bg-[#00000010] '
+        : 'border-0'
+    "
+    @click="widgetStore.editingMode && widgetStore.showElementPropsDrawer(miniWidget.hash)"
+  >
+    <v-switch
+      v-model="switchValue"
+      hide-details
+      :color="miniWidget.options.layout?.color || '#FFFFFF'"
+      :class="{ 'pointer-events-none': widgetStore.editingMode }"
+      class="min-w-[35px]"
+      @change="handleToggleAction"
+    />
+    <p v-if="miniWidget.options.layout?.label !== ''" class="ml-3 mb-[3px] whitespace-nowrap">
+      {{ miniWidget.options.layout?.label }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
+
+import {
+  deleteCockpitActionVariable,
+  listenCockpitActionVariable,
+  setCockpitActionVariableData,
+  unlistenCockpitActionVariable,
+} from '@/libs/actions/data-lake'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
+
+const widgetStore = useWidgetManagerStore()
+
+const props = defineProps<{
+  /**
+   * Element instance
+   */
+  miniWidget: CustomWidgetElementOptions[CustomWidgetElementType.Switch]
+}>()
+
+const miniWidget = toRefs(props).miniWidget
+const switchValue = ref(true)
+
+watch(
+  () => widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen,
+  (newValue) => {
+    if (newValue === true) {
+      widgetStore.showElementPropsDrawer(miniWidget.value.hash)
+      setTimeout(() => {
+        widgetStore.miniWidgetManagerVars(miniWidget.value.hash).configMenuOpen = false
+      }, 200)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+const handleToggleAction = (): void => {
+  if (widgetStore.editingMode) return
+  if (miniWidget.value.options.actionVariable) {
+    widgetStore.setMiniWidgetLastValue(miniWidget.value.hash, switchValue.value)
+    setCockpitActionVariableData(miniWidget.value.options.actionVariable.name, switchValue.value)
+  }
+}
+
+onMounted(() => {
+  if (!props.miniWidget.options || Object.keys(props.miniWidget.options).length === 0) {
+    miniWidget.value.isCustomElement = true
+    widgetStore.updateElementOptions(props.miniWidget.hash, {
+      layout: {
+        align: miniWidget.value.options.layout?.align || 'center',
+        color: miniWidget.value.options.layout?.color || '#FFFFFF',
+        label: miniWidget.value.options.layout?.label || '',
+      },
+      variableType: 'boolean',
+      actionVariable: undefined,
+      toggled: true,
+    })
+
+    switchValue.value = true
+  } else if (miniWidget.value.options.actionVariable) {
+    listenCockpitActionVariable(miniWidget.value.options.actionVariable.name, (value) => {
+      switchValue.value = value as boolean
+    })
+    switchValue.value = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash) as boolean
+  }
+})
+
+onUnmounted(() => {
+  if (miniWidget.value.options.actionVariable) {
+    unlistenCockpitActionVariable(miniWidget.value.options.actionVariable.name)
+    deleteCockpitActionVariable(miniWidget.value.options.actionVariable.id)
+  }
+})
+</script>
+
+<style scoped></style>
diff --git a/src/components/mini-widgets/ArmerButton.vue b/src/components/mini-widgets/ArmerButton.vue
index 7e85420e1..10c5a6da3 100644
--- a/src/components/mini-widgets/ArmerButton.vue
+++ b/src/components/mini-widgets/ArmerButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="relative flex items-center justify-center w-32 p-1 rounded-md shadow-inner h-9 bg-slate-800/60"
-    @click="vehicleStore.isArmed ? disarm() : arm()"
+    @click="!widgetStore.editingMode && (vehicleStore.isArmed ? disarm() : arm())"
   >
     <div
       class="absolute top-auto flex items-center px-1 rounded-[4px] shadow transition-all w-[70%] h-[80%]"
@@ -24,8 +24,10 @@
 import { canByPassCategory, EventCategory, slideToConfirm } from '@/libs/slide-to-confirm'
 import { tryOrAlert } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
 
 const vehicleStore = useMainVehicleStore()
+const widgetStore = useWidgetManagerStore()
 
 const arm = (): void => {
   const tryToArm = async (): Promise<void> => tryOrAlert(vehicleStore.arm)
diff --git a/src/components/widgets/CustomWidgetBase.vue b/src/components/widgets/CustomWidgetBase.vue
new file mode 100644
index 000000000..bae6170a4
--- /dev/null
+++ b/src/components/widgets/CustomWidgetBase.vue
@@ -0,0 +1,480 @@
+<template>
+  <div
+    ref="widgetBase"
+    class="h-full rounded-lg overflow-hidden"
+    :class="[
+      isWrapped ? 'w-[40px]' : 'w-full',
+      isWrapped && wrapDirection === 'left' ? 'ml-0 mr-auto' : '',
+      isWrapped && wrapDirection === 'right' ? 'mr-0 ml-auto' : '',
+    ]"
+    :width="canvasSize.width"
+    :height="canvasSize.height"
+    :style="[
+      interfaceStore.globalGlassMenuStyles,
+      {
+        backgroundColor: `${widget.options.backgroundColor + convertedBackgroundOpacity}`,
+        backdropFilter: `blur(${widget.options.backgroundBlur}px)`,
+      },
+    ]"
+  >
+    <div class="flex flex-col justify-between h-full pa-2 cursor-pointer">
+      <div class="flex justify-between w-full">
+        <v-icon class="cursor-grab opacity-40" @mousedown="enableMovingOnDrag" @mouseup="disableMovingOnDrag">
+          mdi-drag
+        </v-icon>
+        <div v-if="!isWrapped">
+          <div v-if="isEditingWidgetName">
+            <input
+              ref="nameInput"
+              v-model="editedName"
+              class="border-b border-gray-400"
+              @blur="saveName"
+              @keyup.enter="saveName"
+            />
+          </div>
+          <p
+            v-else
+            class="whitespace-nowrap overflow-hidden text-ellipsis"
+            :style="{ maxWidth: `${canvasSize.width * 0.8}px` }"
+            @dblclick="enableEditing"
+          >
+            {{ widget.name }}
+          </p>
+        </div>
+        <div class="flex">
+          <v-menu v-if="widgetStore.editingMode" theme="dark">
+            <template #activator="{ props: buttonProps }">
+              <v-btn size="20" icon="mdi-dots-vertical" variant="text" v-bind="buttonProps"></v-btn>
+            </template>
+
+            <v-list>
+              <v-list-item @click="handleOptionClick('options')">
+                <v-list-item-title>Options</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="handleOptionClick('save')">
+                <v-list-item-title>Save</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="handleOptionClick('load')">
+                <v-list-item-title>Load</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
+      </div>
+      <div v-if="isWrapped" class="flex rotate-[270deg] justify-center whitespace-nowrap">{{ widget.name }}</div>
+      <div v-show="!isWrapped" class="flex justify-center h-full px-3 pt-2 gap-x-2">
+        <div
+          class="flex flex-col justify-center border-[#FFFFFF33] border-dashed rounded-md"
+          :style="{ width: widget.options.columns > 1 ? `${leftColumnWidth}%` : '100%' }"
+          :class="[widgetStore.editingMode ? 'border-[1px]' : 'border-0']"
+        >
+          <div v-for="container in leftContainers" :key="container.name" class="w-full h-full">
+            <VueDraggable
+              v-model="container.elements"
+              :disabled="!widgetStore.editingMode"
+              :animation="150"
+              group="generalGroup"
+              class="flex items-center w-full h-full gap-2 px-2"
+              :class="[wrap ? 'flex-wrap' : '', widgetsAlignment]"
+              @add="(e) => widgetAdded(e, container.name)"
+              @start="showWidgetTrashArea = true"
+              @end="showWidgetTrashArea = false"
+            >
+              <div
+                v-for="miniWidget in container.elements"
+                :key="miniWidget.hash"
+                :data-widget-hash="miniWidget.hash"
+                class="rounded-md w-full"
+                :class="{
+                  'cursor-grab': widgetStore.editingMode,
+                  'bg-slate-400': widgetStore.miniWidgetManagerVars(miniWidget.hash).highlighted,
+                }"
+              >
+                <MiniWidgetInstantiator :mini-widget="miniWidget" />
+              </div>
+            </VueDraggable>
+          </div>
+        </div>
+        <div
+          v-if="widget.options.columns > 1 && widgetStore.editingMode"
+          class="cursor-col-resize w-1 bg-[#FFFFFF22] relative"
+          @mousedown="startResize"
+        >
+          <div class="absolute inset-y-0 -left-1 -right-1"></div>
+        </div>
+
+        <div
+          v-if="widget.options.columns > 1"
+          class="flex flex-col justify-center border-[#FFFFFF33] border-dashed rounded-md"
+          :style="{ width: `${100 - leftColumnWidth}%` }"
+          :class="[widgetStore.editingMode ? 'border-[1px]' : 'border-0']"
+        >
+          <div v-for="container in rightContainers" :key="container.name" class="w-full h-full">
+            <VueDraggable
+              v-model="container.elements"
+              :disabled="!widgetStore.editingMode"
+              :animation="150"
+              group="generalGroup"
+              class="flex items-center w-full h-full gap-2 px-2"
+              :class="[wrap ? 'flex-wrap' : '', widgetsAlignment]"
+              @add="(e) => widgetAdded(e, container.name)"
+              @start="showWidgetTrashArea = true"
+              @end="showWidgetTrashArea = false"
+            >
+              <div
+                v-for="element in container.elements"
+                :key="element.hash"
+                :data-widget-hash="element.hash"
+                class="rounded-md w-full"
+                :class="{
+                  'cursor-grab': widgetStore.editingMode,
+                  'bg-slate-400': widgetStore.miniWidgetManagerVars(element.hash).highlighted,
+                }"
+              >
+                <MiniWidgetInstantiator :mini-widget="element" />
+              </div>
+            </VueDraggable>
+          </div>
+        </div>
+      </div>
+      <div />
+      <v-btn
+        v-if="!widgetStore.editingMode"
+        :class="['fixed bottom-[2px]', wrapDirection === 'left' ? 'left-[2px]' : 'right-[2px]']"
+        :icon="wrapChevronIcon"
+        variant="text"
+        size="36"
+        @click="isWrapped = !isWrapped"
+      />
+    </div>
+  </div>
+
+  <Teleport to="body">
+    <GlassModal :is-visible="widgetStore.widgetManagerVars(widget.hash).configMenuOpen">
+      <v-card class="px-8 pb-6 pt-2 rounded-lg w-[400px] bg-transparent">
+        <v-card-title class="text-center -mt-1">Custom Widget options</v-card-title>
+        <v-btn
+          class="absolute top-3 right-0 text-lg rounded-full"
+          variant="text"
+          size="small"
+          @click="widgetStore.widgetManagerVars(widget.hash).configMenuOpen = false"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+        <div class="flex flex-col justify-start items-start gap-x-4 mt-3 w-full">
+          <p class="text-start">Name:</p>
+          <v-text-field ref="nameInput" v-model="widget.name" density="compact" class="w-3/4" />
+          <p class="text-start">Columns:</p>
+          <v-text-field
+            ref="nameInput"
+            v-model="widget.options.columns"
+            min="1"
+            max="2"
+            type="number"
+            density="compact"
+            class="w-1/4"
+          />
+          <p class="mt-1">Background color</p>
+          <input v-model="widget.options.backgroundColor" type="color" class="p-0 w-20 mr-4" />
+          <p class="mt-3">Background opacity:</p>
+          <v-slider v-model="widget.options.backgroundOpacity" min="0" max="1" color="white" thumb-label width="250" />
+          <p class="mt-3">Background blur:</p>
+          <v-slider v-model="widget.options.backgroundBlur" min="0" max="100" color="white" thumb-label width="250" />
+        </div>
+      </v-card>
+    </GlassModal>
+    <Transition>
+      <div
+        v-if="showWidgetTrashArea"
+        ref="widgetTrashArea"
+        class="absolute w-32 h-32 -translate-x-32 -translate-y-32 bottom-[20%] left-1/3 bg-[#FF000055] z-[65] rounded-xl flex items-center justify-center hover:bg-slate-200/50 transition-all"
+      >
+        <div class="relative flex justify-center items-center w-full h-full">
+          <FontAwesomeIcon
+            icon="fa-solid fa-trash"
+            class="absolute h-16 transition-all -translate-x-7 -translate-y-8 top-1/2 left-1/2 text-white"
+          />
+          <VueDraggable
+            v-model="trashList"
+            :animation="150"
+            group="generalGroup"
+            class="flex flex-wrap items-center justify-center w-full h-full gap-2"
+            @add="handleDeleteWidget"
+          >
+            <div v-for="miniWidget in trashList" :key="miniWidget.hash">
+              <div class="select-none">
+                <MiniWidgetInstantiator :mini-widget="miniWidget" />
+              </div>
+            </div>
+          </VueDraggable>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+import saveAs from 'file-saver'
+import type SortableEvent from 'sortablejs'
+import { v4 as uuid } from 'uuid'
+import { computed, nextTick, onBeforeMount, onMounted, ref, toRefs, watch } from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'
+
+import { useSnackbar } from '@/composables/snackbar'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import { CustomWidget, CustomWidgetElement, CustomWidgetElementContainer, MiniWidget, Widget } from '@/types/widgets'
+
+import GlassModal from '../GlassModal.vue'
+import MiniWidgetInstantiator from '../MiniWidgetInstantiator.vue'
+
+const widgetStore = useWidgetManagerStore()
+const interfaceStore = useAppInterfaceStore()
+const { showSnackbar } = useSnackbar()
+
+const props = defineProps<{
+  /**
+   * Widget instance
+   */
+  widget: CustomWidget
+}>()
+const widget = toRefs(props).widget
+
+const currentWidget = ref<Widget>(props.widget)
+const lastKnownHashes = ref(new Map<string, string[]>())
+const wrap = ref(false)
+const widgetsAlignment = ref('justify-center')
+const isMenuOpen = ref(false)
+const isEditingWidgetName = ref(false)
+const editedName = ref(props.widget.name)
+const nameInput = ref<HTMLInputElement | null>(null)
+const leftColumnWidth = ref(props.widget.options.leftColumnWidth || 50)
+const isDragging = ref(false)
+const widgetBase = ref<HTMLElement | null>(null)
+const isWrapped = ref(false)
+const wrapDirection = ref<'left' | 'right'>('right')
+const trashList = ref<MiniWidget[] | CustomWidgetElement[]>([])
+
+const updateWrapDirection = (): void => {
+  if (widgetBase.value) {
+    const widgetRect = widgetBase.value.getBoundingClientRect()
+    const screenWidth = window.innerWidth
+    const widgetCenterX = widgetRect.left + widgetRect.width / 2
+
+    if (widgetCenterX < screenWidth / 2) {
+      wrapDirection.value = 'left'
+    } else {
+      wrapDirection.value = 'right'
+    }
+  }
+}
+
+const wrapChevronIcon = computed(() => {
+  if (wrapDirection.value === 'left') {
+    return isWrapped.value ? 'mdi-chevron-right' : 'mdi-chevron-left'
+  } else {
+    return isWrapped.value ? 'mdi-chevron-left' : 'mdi-chevron-right'
+  }
+})
+
+const enableEditing = (): void => {
+  editedName.value = props.widget.name
+  isEditingWidgetName.value = true
+
+  nextTick(() => {
+    if (nameInput.value) {
+      nameInput.value.focus()
+      nameInput.value.select()
+    }
+  })
+}
+
+const saveName = (): void => {
+  isEditingWidgetName.value = false
+  if (currentWidget.value && editedName.value !== currentWidget.value.name) {
+    currentWidget.value.name = editedName.value
+  }
+}
+
+const loadWidget = (event: Event): void => {
+  const file = (event.target as HTMLInputElement).files?.[0]
+  if (!file) {
+    showSnackbar({ variant: 'error', message: 'No file selected.', duration: 3000 })
+    return
+  }
+
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    try {
+      const loadedWidget = JSON.parse(e.target?.result as string) as Widget
+      const hash = currentWidget.value.hash
+      widgetStore.loadWidgetFromFile(hash, loadedWidget)
+    } catch (error) {
+      showSnackbar({ variant: 'error', message: 'Invalid widget file format.', duration: 3000 })
+    }
+  }
+
+  reader.readAsText(file)
+}
+
+const showWidgetTrashArea = ref(false)
+
+const handleDeleteWidget = (): void => {
+  widgetStore.elementToShowOnDrawer = undefined
+  trashList.value = []
+}
+
+const handleOptionClick = (option: string): void => {
+  isMenuOpen.value = false
+  if (option === 'options') {
+    widgetStore.widgetManagerVars(currentWidget.value.hash).configMenuOpen = true
+  } else if (option === 'save') {
+    downloadWidget()
+  } else if (option === 'load') {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = '.widget'
+
+    input.addEventListener('change', (event: Event) => {
+      loadWidget(event)
+    })
+
+    input.click()
+  }
+}
+
+const downloadWidget = (): void => {
+  const blob = new Blob([JSON.stringify(widget.value)], { type: 'application/json;charset=utf-8' })
+  const fileName = `${widget.value.name}.widget`
+  saveAs(blob, fileName)
+}
+
+const startResize = (event: MouseEvent): void => {
+  if (!widgetStore.editingMode) return
+
+  const startX = event.clientX
+  const startWidth = leftColumnWidth.value
+  isDragging.value = true
+
+  const doDrag = (e: MouseEvent): void => {
+    if (!widgetBase.value) return
+    const containerWidth = widgetBase.value.offsetWidth
+    const newWidth = startWidth + ((e.clientX - startX) / containerWidth) * 100
+    leftColumnWidth.value = Math.max(10, Math.min(90, newWidth))
+  }
+
+  const stopDrag = (): void => {
+    isDragging.value = false
+    document.removeEventListener('mousemove', doDrag)
+    document.removeEventListener('mouseup', stopDrag)
+  }
+
+  document.addEventListener('mousemove', doDrag)
+  document.addEventListener('mouseup', stopDrag)
+}
+
+const leftContainers = computed(() =>
+  currentWidget.value.options.elementContainers.filter((container: CustomWidgetElementContainer) =>
+    container.name.includes('left')
+  )
+)
+const rightContainers = computed(() =>
+  currentWidget.value.options.elementContainers.filter((container: CustomWidgetElementContainer) =>
+    container.name.includes('right')
+  )
+)
+
+const convertedBackgroundOpacity = computed(() => Math.round(widget.value.options.backgroundOpacity * 255).toString(16))
+
+const enableMovingOnDrag = (): void => {
+  widgetStore.allowMovingAndResizing(currentWidget.value.hash, true)
+  window.addEventListener('mouseup', disableMovingOnDrag)
+  window.addEventListener('dragend', disableMovingOnDrag)
+}
+
+const disableMovingOnDrag = (): void => {
+  updateWrapDirection()
+  widgetStore.allowMovingAndResizing(currentWidget.value.hash, false)
+  window.removeEventListener('mouseup', disableMovingOnDrag)
+  window.removeEventListener('dragend', disableMovingOnDrag)
+}
+
+const widgetAdded = (e: SortableEvent.SortableEvent, containerName: string): void => {
+  const container = currentWidget.value.options.elementContainers.find(
+    (innerContainer: CustomWidgetElementContainer) => innerContainer.name === containerName
+  )
+  if (!container) return
+
+  const currentHashes = container.elements.map((element: CustomWidgetElement) => element.hash)
+  const previousHashes = lastKnownHashes.value.get(containerName) || []
+  const newHash = currentHashes.find((hash: string) => !previousHashes.includes(hash))
+
+  if (newHash) {
+    const newWidget = container.elements.find((element: CustomWidgetElement) => element.hash === newHash)
+    if (newWidget && e.pullMode === 'clone') {
+      newWidget.hash = uuid()
+      widgetStore.miniWidgetManagerVars(newWidget.hash).configMenuOpen = true
+    }
+    widgetStore.showElementPropsDrawer(newWidget.hash)
+    lastKnownHashes.value.set(containerName, currentHashes)
+  }
+}
+
+const { width: windowWidth } = useWindowSize()
+const canvasSize = computed(() => ({
+  width: currentWidget.value.size.width * windowWidth.value,
+  height: currentWidget.value.size.height * windowWidth.value,
+}))
+
+const containerRef = ref<HTMLElement | null>(null)
+
+watch(
+  () => widgetStore.editingMode,
+  (newValue) => {
+    if (newValue === true) {
+      disableMovingOnDrag()
+      isWrapped.value = false
+    }
+  }
+)
+
+const loadWidgetFromStore = (): void => {
+  try {
+    const loadedWidget = widgetStore.editWidgetByHash(props.widget.hash)
+    if (loadedWidget) {
+      currentWidget.value = loadedWidget
+    }
+  } catch (error) {
+    showSnackbar({ variant: 'warning', message: 'Error reading widget file.', duration: 1000 })
+  }
+}
+
+onBeforeMount(() => {
+  props.widget.options.elementContainers.forEach((container: CustomWidgetElementContainer) => {
+    lastKnownHashes.value.set(
+      container.name,
+      container.elements.map((w) => w.hash)
+    )
+  })
+})
+
+onMounted(() => {
+  updateWrapDirection()
+  window.addEventListener('resize', updateWrapDirection)
+  containerRef.value = document.querySelector('.main')
+  loadWidgetFromStore()
+  disableMovingOnDrag()
+})
+</script>
+
+<style scoped>
+.cursor-col-resize {
+  cursor: col-resize;
+}
+
+.cursor-col-resize:hover,
+.cursor-col-resize:active {
+  background-color: #ffffff55;
+}
+</style>
diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts
index 6f0220b01..4d83a07e9 100644
--- a/src/stores/widgetManager.ts
+++ b/src/stores/widgetManager.ts
@@ -7,6 +7,7 @@ import { v4 as uuid4 } from 'uuid'
 import { computed, onBeforeMount, onBeforeUnmount, Ref, ref, watch } from 'vue'
 
 import {
+  defaultCustomWidgetContainers,
   defaultMiniWidgetManagerVars,
   defaultProfileVehicleCorrespondency,
   defaultWidgetManagerVars,
@@ -16,6 +17,7 @@ import { miniWidgetsProfile } from '@/assets/defaults'
 import { useInteractionDialog } from '@/composables/interactionDialog'
 import { resetJustMadeKey, useBlueOsStorage } from '@/composables/settingsSyncer'
 import { openSnackbar } from '@/composables/snackbar'
+import { useSnackbar } from '@/composables/snackbar'
 import { MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import * as Words from '@/libs/funny-name/words'
 import {
@@ -32,6 +34,8 @@ import {
   type Profile,
   type View,
   type Widget,
+  CustomWidgetElement,
+  CustomWidgetElementContainer,
   MiniWidgetManagerVars,
   validateProfile,
   validateView,
@@ -40,6 +44,7 @@ import {
 } from '@/types/widgets'
 
 const { showDialog } = useInteractionDialog()
+const { showSnackbar } = useSnackbar()
 
 export const savedProfilesKey = 'cockpit-saved-profiles-v8'
 
@@ -60,6 +65,149 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   )
   const _widgetManagerVars: Ref<Record<string, WidgetManagerVars>> = ref({})
   const _miniWidgetManagerVars: Ref<Record<string, MiniWidgetManagerVars>> = ref({})
+  const isElementsPropsDrawerVisible = ref(false)
+  const elementToShowOnDrawer = ref<CustomWidgetElement>()
+  const widgetToEdit = ref<Widget>()
+  const miniWidgetLastValues = useBlueOsStorage<Record<string, any>>('cockpit-mini-widget-last-values', {})
+
+  const editWidgetByHash = (hash: string): Widget | undefined => {
+    widgetToEdit.value = currentProfile.value.views
+      .flatMap((view) => view.widgets)
+      .find((widget) => widget.hash === hash)
+    return widgetToEdit.value
+  }
+
+  const getElementByHash = (hash: string): CustomWidgetElement | undefined => {
+    let customWidgetElement = currentProfile.value.views
+      .flatMap((view) => view.widgets)
+      .filter((widget) => widget.component === WidgetType.CustomWidgetBase)
+      .flatMap((widget) => widget.options.elementContainers)
+      .flatMap((container) => container.elements)
+      .find((element) => element.hash === hash)
+
+    if (customWidgetElement) {
+      return customWidgetElement
+    }
+
+    customWidgetElement = currentProfile.value.views
+      .flatMap((view) => view.miniWidgetContainers || [])
+      .flatMap((container) => container.widgets) // Get all widgets in mini-widget containers
+      .find((miniWidget) => miniWidget.hash === hash)
+
+    return customWidgetElement
+  }
+
+  const showElementPropsDrawer = (customWidgetElementHash: string): void => {
+    const customWidgetElement = getElementByHash(customWidgetElementHash)
+    if (!customWidgetElement) {
+      showSnackbar({ variant: 'error', message: 'Could not find element with the given hash.', duration: 3000 })
+      return
+    }
+    elementToShowOnDrawer.value = customWidgetElement
+    isElementsPropsDrawerVisible.value = true
+  }
+
+  const removeElementFromCustomWidget = (elementHash: string): void => {
+    const customWidgetElement = getElementByHash(elementHash)
+    if (!customWidgetElement) {
+      throw new Error('Could not find element with the given hash.')
+    }
+
+    const customWidget = currentProfile.value.views
+      .flatMap((view) => view.widgets)
+      .filter((widget) => widget.component === WidgetType.CustomWidgetBase)
+      .find((widget) =>
+        widget.options.elementContainers.some((container: CustomWidgetElementContainer) =>
+          container.elements.includes(customWidgetElement)
+        )
+      )
+
+    if (!customWidget) {
+      throw new Error('Could not find the custom widget containing the element.')
+    }
+
+    const customWidgetContainer = customWidget.options.elementContainers.find(
+      (container: CustomWidgetElementContainer) => container.elements.includes(customWidgetElement)
+    )
+    if (!customWidgetContainer) {
+      throw new Error('Could not find the container containing the element.')
+    }
+
+    customWidgetContainer.elements = customWidgetContainer.elements.filter(
+      (element: CustomWidgetElement) => element.hash !== elementHash
+    )
+  }
+
+  const loadWidgetFromFile = (widgetHash: string, loadedWidget: Widget): void => {
+    const currentViewWidgets = currentProfile.value.views[currentViewIndex.value].widgets
+    const widgetIndex = currentViewWidgets.findIndex((widget) => widget.hash === widgetHash)
+
+    if (widgetIndex === -1) {
+      showSnackbar({ variant: 'error', message: 'Widget not found with the given hash.', duration: 3000 })
+      return
+    }
+
+    const currentPosition = currentViewWidgets[widgetIndex].position
+
+    reassignHashesToWidget(loadedWidget)
+
+    loadedWidget.position = currentPosition
+    currentViewWidgets[widgetIndex] = loadedWidget
+
+    showSnackbar({ variant: 'success', message: 'Widget loaded successfully with new hash.', duration: 3000 })
+  }
+
+  const reassignHashesToWidget = (widget: Widget): void => {
+    const oldToNewHashMap = new Map<string, string>()
+
+    const oldWidgetHash = widget.hash
+    widget.hash = uuid4()
+    oldToNewHashMap.set(oldWidgetHash, widget.hash)
+
+    for (const container of widget.options.elementContainers) {
+      for (const element of container.elements) {
+        reassignHashesToElement(element, oldToNewHashMap)
+      }
+    }
+  }
+
+  const reassignHashesToElement = (element: CustomWidgetElement, hashMap: Map<string, string>): void => {
+    const oldHash = element.hash
+    element.hash = uuid4()
+    hashMap.set(oldHash, element.hash)
+
+    if (element.options && element.options.actionVariable) {
+      const actionVariable = element.options.actionVariable
+      actionVariable.id = `${actionVariable.id}_new`
+      actionVariable.name = `${actionVariable.name}_new`
+    }
+  }
+
+  /**
+   * Updates the options of a custom widget element by its hash.
+   * @param {string} elementHash - The unique identifier of the element.
+   * @param {Record<string, any>} newOptions - The new options to merge with the existing ones.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const updateElementOptions = (elementHash: string, newOptions: Record<string, any>): void => {
+    const element = getElementByHash(elementHash)
+    if (element) {
+      element.options = {
+        ...element.options,
+        ...newOptions,
+      }
+    }
+  }
+
+  const allowMovingAndResizing = (widgetHash: string, forcedState: boolean): void => {
+    currentProfile.value.views.forEach((view) => {
+      view.widgets.forEach((widget) => {
+        if (widget.hash === widgetHash) {
+          widgetManagerVars(widgetHash).allowMoving = forcedState
+        }
+      })
+    })
+  }
 
   const widgetManagerVars = (widgetHash: string): WidgetManagerVars => {
     if (!_widgetManagerVars.value[widgetHash]) {
@@ -422,8 +570,22 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
       options: {},
     }
 
+    if (widgetType === WidgetType.CustomWidgetBase) {
+      widget.options = {
+        elementContainers: defaultCustomWidgetContainers,
+        columns: 1,
+        leftColumnWidth: 50,
+        backgroundOpacity: 0.2,
+        backgroundColor: '#FFFFFF',
+        backgroundBlur: 25,
+      }
+    }
+
     view.widgets.unshift(widget)
-    Object.assign(widgetManagerVars(widget.hash), { ...defaultWidgetManagerVars, ...{ allowMoving: true } })
+    Object.assign(widgetManagerVars(widget.hash), {
+      ...defaultWidgetManagerVars,
+      ...{ allowMoving: true },
+    })
   }
 
   /**
@@ -434,6 +596,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     const view = viewFromWidget(widget)
     const index = view.widgets.indexOf(widget)
     view.widgets.splice(index, 1)
+    elementToShowOnDrawer.value = undefined
   }
 
   /**
@@ -664,6 +827,15 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     })
   })
 
+  const setMiniWidgetLastValue = (miniWidgetHash: string, lastValue: any): void => {
+    miniWidgetLastValues.value[miniWidgetHash] = structuredClone(lastValue)
+  }
+
+  const getMiniWidgetLastValue = (miniWidgetHash: string): any => {
+    const lastValue = miniWidgetLastValues.value[miniWidgetHash]
+    return lastValue === undefined ? undefined : structuredClone(lastValue)
+  }
+
   // Reassign hashes to profiles using old ones - TODO: Remove for 1.0.0 release
   Object.values(savedProfiles.value).forEach((profile) => {
     // If the profile is a correspondent of a cockpit default one, use the correspondent hash
@@ -682,6 +854,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     currentMiniWidgetsProfile,
     savedProfiles,
     vehicleTypeProfileCorrespondency,
+    allowMovingAndResizing,
     loadProfile,
     saveProfile,
     resetSavedProfiles,
@@ -713,5 +886,15 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     visibleAreaMinClearancePixels,
     currentTopBarHeightPixels,
     currentBottomBarHeightPixels,
+    showElementPropsDrawer,
+    isElementsPropsDrawerVisible,
+    elementToShowOnDrawer,
+    updateElementOptions,
+    removeElementFromCustomWidget,
+    loadWidgetFromFile,
+    widgetToEdit,
+    editWidgetByHash,
+    setMiniWidgetLastValue,
+    getMiniWidgetLastValue,
   }
 })
diff --git a/src/types/widgets.ts b/src/types/widgets.ts
index 23e2f704e..62da93c31 100644
--- a/src/types/widgets.ts
+++ b/src/types/widgets.ts
@@ -1,3 +1,5 @@
+import { CockpitAction } from '@/libs/joystick/protocols/cockpit-actions'
+
 import type { Point2D, SizeRect2D } from './general'
 
 /**
@@ -7,8 +9,9 @@ import type { Point2D, SizeRect2D } from './general'
 export enum WidgetType {
   Attitude = 'Attitude',
   Compass = 'Compass',
-  DepthHUD = 'DepthHUD',
   CompassHUD = 'CompassHUD',
+  CustomWidgetBase = 'CustomWidgetBase',
+  DepthHUD = 'DepthHUD',
   IFrame = 'IFrame',
   ImageView = 'ImageView',
   Map = 'Map',
@@ -41,6 +44,478 @@ export enum MiniWidgetType {
   ViewSelector = 'ViewSelector',
 }
 
+/**
+ * Available elements to be used in the Custom Widget creator.
+ * The enum value is equal to the component's filename, without the '.vue' extension
+ */
+export enum CustomWidgetElementType {
+  Button = 'Button',
+  Checkbox = 'Checkbox',
+  Dial = 'Dial',
+  Dropdown = 'Dropdown',
+  Label = 'Label',
+  Slider = 'Slider',
+  Switch = 'Switch',
+}
+
+/**
+ * Available containers to be used in the Custom Widget creator.
+ */
+export enum CustomWidgetElementContainers {
+  Left0 = '0-left',
+  Left1 = '1-left',
+  Left2 = '2-left',
+  Left3 = '3-left',
+  Left4 = '4-left',
+  Left5 = '5-left',
+  Left6 = '6-left',
+  Left7 = '7-left',
+  Left8 = '8-left',
+  Left9 = '9-left',
+  Right0 = '0-right',
+  Right1 = '1-right',
+  Right2 = '2-right',
+  Right3 = '3-right',
+  Right4 = '4-right',
+  Right5 = '5-right',
+  Right6 = '6-right',
+  Right7 = '7-right',
+  Right8 = '8-right',
+  Right9 = '9-right',
+}
+
+export type SelectorOption = {
+  /**
+   * The name of the option
+   */
+  name: string
+  /**
+   * The value of the option
+   */
+  value: string
+}
+
+/**
+ * Options for the Cockpit Actions parameters
+ */
+export interface CockpitActionVariable {
+  /**
+   * Parameter ID, equals to initial name of the parameter
+   */
+  id: string
+  /**
+   * Parameter name
+   */
+  name: string
+  /**
+   * Parameter type
+   */
+  type: 'string' | 'boolean' | 'number'
+  /**
+   * Parameter description
+   */
+  description?: string
+}
+
+/**
+ * Options for the Custom Widgets inner elements
+ */
+export type CustomWidgetElementOptions = {
+  /**
+   * Custom widget element - Label
+   */
+  [CustomWidgetElementType.Label]: {
+    /**
+     * Element hash
+     */
+    hash: string
+    /**
+     * Element name
+     */
+    name: string
+    /**
+     * Mark as custom mini widget
+     */
+    isCustomElement: boolean
+    /**
+     * Element options
+     */
+    options: {
+      /**
+       * Variable type
+       */
+      variableType: 'string' | 'boolean' | 'number'
+      /**
+       * Action parameter
+       */
+      actionVariable: CockpitActionVariable
+      /**
+       * The label text
+       */
+      text: string
+      /**
+       * Layout options
+       */
+      layout: {
+        /**
+         * The size of the label's font (in pixels)
+         */
+        textSize: number
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         * The weight of the label's font
+         */
+        weight: 'normal' | 'bold' | 'bolder' | 'lighter'
+        /**
+         * The decoration for the label's text
+         */
+        decoration: 'none' | 'underline' | 'line-through' | 'overline'
+        /**
+         * The color of the label's text
+         */
+        color: string
+      }
+    }
+  }
+  /**
+   * Custom widget element - Button
+   */
+  [CustomWidgetElementType.Button]: {
+    /**
+     * Element hash
+     */
+    hash: string
+    /**
+     * Element name
+     */
+    name: string
+    /**
+     * Mark as custom mini widget
+     */
+    isCustomElement: boolean
+    /**
+     * Element options
+     */
+    options: {
+      /**
+       * Variable type
+       */
+      variableType: 'string' | 'boolean' | 'number'
+      /**
+       * Action parameter
+       */
+      cockpitAction: CockpitAction
+      /**
+       * Layout options
+       */
+      layout: {
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         * The label of the button
+         */
+        label: string
+        /**
+         * The size of the button
+         */
+        buttonSize: 'small' | 'default' | 'large'
+        /**
+         * The color of the button
+         */
+        backgroundColor: string
+        /**
+         * The color of the button's text
+         */
+        textColor: string
+        /**
+         * The variant of the button
+         */
+        variant: 'text' | 'outlined' | 'flat' | 'elevated' | 'tonal' | 'plain'
+      }
+    }
+  }
+  /**
+   * Custom widget element - Checkbox
+   */
+  [CustomWidgetElementType.Checkbox]: {
+    /**
+     * Element hash
+     */
+    hash: string
+    /**
+     * Element name
+     */
+    name: string
+    /**
+     * Mark as custom mini widget
+     */
+    isCustomElement: boolean
+    /**
+     * Element options
+     */
+    options: {
+      /**
+       * Variable type
+       */
+      variableType: 'string' | 'boolean' | 'number'
+      /**
+       * Action parameter
+       */
+      actionVariable: CockpitActionVariable
+      /**
+       * Layout props for the element
+       */
+      layout: {
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         * The size of the checkbox
+         */
+        color: string
+        /**
+         * The label of the checkbox
+         */
+        label: string
+      }
+    }
+  }
+  /**
+   * Custom widget element - Dial
+   */
+  [CustomWidgetElementType.Dial]: {
+    /**
+     * Element hash
+     */
+    hash: string
+    /**
+     * Element name
+     */
+    name: string
+    /**
+     * Mark as custom mini widget
+     */
+    isCustomElement: boolean
+    /**
+     * Element options
+     */
+    options: {
+      /**
+       * Variable type
+       */
+      variableType: 'string' | 'boolean' | 'number'
+      /**
+       * Action parameter
+       */
+      actionVariable: CockpitActionVariable
+      /**
+       * Layout options
+       */
+      layout: {
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         * The size of the dial
+         */
+        size: 'small' | 'medium' | 'large'
+        /**
+         * The color of the dial
+         */
+        knobColor: string
+        /**
+         * The color of the knob's notch
+         */
+        notchColor: string
+        /**
+         * The minimum value of the dial
+         */
+        minValue: number
+        /**
+         * The maximum value of the dial
+         */
+        maxValue: number
+        /**
+         * The step value of the dial
+         */
+        showValue: boolean
+      }
+    }
+  }
+  /**
+   * Custom widget element - Dropdown
+   */
+  [CustomWidgetElementType.Dropdown]: {
+    /**
+     * Element hash
+     */
+    hash: string
+    /**
+     * Element name
+     */
+    name: string
+    /**
+     * Mark as custom mini widget
+     */
+    isCustomElement: boolean
+    /**
+     * Element options
+     */
+    options: {
+      /**
+       * Variable type
+       */
+      variableType: 'string' | 'boolean' | 'number'
+      /**
+       * Action parameter
+       */
+      actionVariable: CockpitActionVariable
+      /**
+       * Last selected value
+       */
+      lastSelected: SelectorOption
+      /**
+       * Layout options
+       */
+      layout: {
+        /**
+         * Alignment of the element
+         */
+        selectorOptions: SelectorOption[]
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         *  The size of the dropdown
+         */
+        width: number
+      }
+    }
+  }
+  /**
+   * Custom widget element - Slider
+   */
+  [CustomWidgetElementType.Slider]: {
+    /**
+     * Element hash
+     */
+    hash: string
+    /**
+     * Element name
+     */
+    name: string
+    /**
+     * Mark as custom mini widget
+     */
+    isCustomElement: boolean
+    /**
+     * Element options
+     */
+    options: {
+      /**
+       * Variable type
+       */
+      variableType: 'string' | 'boolean' | 'number'
+      /**
+       * Action parameter
+       */
+      actionVariable: CockpitActionVariable
+      /**
+       * Layout options
+       */
+      layout: {
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         * The size of the slider
+         */
+        size: 'small' | 'medium' | 'large'
+        /**
+         * The color of the slider
+         */
+        color: string
+        /**
+         * The minimum value of the slider
+         */
+        minValue: number
+        /**
+         * The maximum value of the slider
+         */
+        maxValue: number
+        /**
+         * The step value of the slider
+         */
+        showTooltip: boolean
+        /**
+         * The label of the slider
+         */
+        label: string
+        /**
+         * The width of the label
+         */
+        labelWidth: number
+      }
+    }
+  }
+  /**
+   * Custom widget element - Switch
+   */
+  [CustomWidgetElementType.Switch]: {
+    /**
+     * Element hash
+     */
+    hash: string
+    /**
+     * Element name
+     */
+    name: string
+    /**
+     * Mark as custom mini widget
+     */
+    isCustomElement: boolean
+    /**
+     * Element options
+     */
+    options: {
+      /**
+       * Variable type
+       */
+      variableType: 'string' | 'boolean' | 'number'
+      /**
+       * Action parameter
+       */
+      actionVariable: CockpitActionVariable
+      /**
+       * Layout options
+       */
+      layout: {
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         * The color of the switch
+         */
+        color: string
+        /**
+         * The label of the switch
+         */
+        label: string
+      }
+    }
+  }
+}
+
 /**
  * External variables used by the widget manager
  */
@@ -143,6 +618,69 @@ export type MiniWidget = {
   options: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
+export type CustomWidget = {
+  /**
+   * Unique identifier for the widget
+   */
+  hash: string
+  /**
+   * Component type of the widget
+   */
+  component: WidgetType
+  /**
+   * 2D position of the widget (top-left corner)
+   */
+  position: Point2D
+  /**
+   * Size of the widget box
+   */
+  size: SizeRect2D
+  /**
+   * Editable name for the widget
+   */
+  name: string
+  /**
+   * Internal options of the widget
+   */
+  elementContainers: Array<{
+    /**
+     * Editable name for the container
+     */
+    name: CustomWidgetElementContainers
+    /**
+     * Array of elements that are stored in the container
+     */
+    elements: CustomWidgetElement[]
+  }>
+  /**
+   * Internal options of the widget
+   */
+  options: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+export type CustomWidgetElement = {
+  /**
+   * Unique identifier for the widget
+   */
+  hash: string
+  /**
+   * Editable name for the widget
+   */
+  name: string
+  /**
+   * Component type of the element
+   */
+  component: CustomWidgetElementType
+  /**
+   * If the element is a custom mini widget
+   */
+  isCustomElement?: boolean
+  /**
+   * Internal options of the widget
+   */
+  options: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
 export type MiniWidgetContainer = {
   /**
    * Array of widgets that are stored in the container
@@ -154,6 +692,17 @@ export type MiniWidgetContainer = {
   name: string
 }
 
+export type CustomWidgetElementContainer = {
+  /**
+   * Array of widgets that are stored in the container
+   */
+  elements: CustomWidgetElement[]
+  /**
+   * Editable name for the container
+   */
+  name: string
+}
+
 export type MiniWidgetProfile = {
   /**
    * Array of views that are stored in the profile