From b2af60ae73c08ad135c8e01a97f9ced5eb6d50a0 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Tue, 15 Oct 2024 11:34:53 -0300
Subject: [PATCH] Components: Very-generic-input-widget: Add component

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/assets/defaults.ts                        |  94 +++
 src/assets/widgets/CustomWidgetBase.png       | Bin 0 -> 1129 bytes
 src/components/EditMenu.vue                   | 142 +++-
 src/components/ElementConfigPanel.vue         | 490 ++++++++++++++
 src/components/MiniWidgetContainer.vue        |   4 +-
 src/components/MiniWidgetInstantiator.vue     |  34 +-
 src/components/WidgetHugger.vue               |  11 +-
 .../custom-widget-elements/Button.vue         |  84 +++
 .../custom-widget-elements/Checkbox.vue       |  98 +++
 .../custom-widget-elements/Dial.vue           | 212 ++++++
 .../custom-widget-elements/Dropdown.vue       | 128 ++++
 .../custom-widget-elements/Label.vue          |  99 +++
 .../custom-widget-elements/Slider.vue         | 138 ++++
 .../custom-widget-elements/Switch.vue         |  86 +++
 src/components/mini-widgets/ArmerButton.vue   |   4 +-
 src/components/widgets/CustomWidgetBase.vue   | 426 ++++++++++++
 src/libs/actions/data-lake.ts                 |  20 +-
 src/stores/widgetManager.ts                   | 195 +++++-
 src/types/widgets.ts                          | 611 +++++++++++++++++-
 src/views/ConfigurationActionsView.vue        |   3 +-
 20 files changed, 2835 insertions(+), 44 deletions(-)
 create mode 100644 src/assets/widgets/CustomWidgetBase.png
 create mode 100644 src/components/ElementConfigPanel.vue
 create mode 100644 src/components/custom-widget-elements/Button.vue
 create mode 100644 src/components/custom-widget-elements/Checkbox.vue
 create mode 100644 src/components/custom-widget-elements/Dial.vue
 create mode 100644 src/components/custom-widget-elements/Dropdown.vue
 create mode 100644 src/components/custom-widget-elements/Label.vue
 create mode 100644 src/components/custom-widget-elements/Slider.vue
 create mode 100644 src/components/custom-widget-elements/Switch.vue
 create mode 100644 src/components/widgets/CustomWidgetBase.vue

diff --git a/src/assets/defaults.ts b/src/assets/defaults.ts
index 7800d23e9..6e69cad5a 100644
--- a/src/assets/defaults.ts
+++ b/src/assets/defaults.ts
@@ -4,6 +4,8 @@ import { DistanceDisplayUnit } from '@/libs/units'
 import {
   type MiniWidgetProfile,
   type Profile,
+  CustomWidgetManagerVars,
+  CustomWidgetType,
   MiniWidgetManagerVars,
   MiniWidgetType,
   WidgetManagerVars,
@@ -29,6 +31,7 @@ export const defaultWidgetManagerVars: WidgetManagerVars = {
   lastNonMaximizedWidth: 0.2,
   lastNonMaximizedHeight: 0.36,
   highlighted: false,
+  disableResponsiveness: false,
 }
 
 export const defaultMiniWidgetManagerVars: MiniWidgetManagerVars = {
@@ -37,6 +40,97 @@ export const defaultMiniWidgetManagerVars: MiniWidgetManagerVars = {
   highlighted: false,
 }
 
+export const defaultCustomWidgetManagerVars: CustomWidgetManagerVars = {
+  everMounted: false,
+  configMenuOpen: false,
+  highlighted: false,
+  customWidgetVars: CustomWidgetType.Button,
+  cockpitActions: [],
+}
+
+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 0000000000000000000000000000000000000000..032ac7f12db21a6ec7cf6edc83af1cd1ea8d64b1
GIT binary patch
literal 1129
zcmeAS@N?(olHy`uVBq!ia0vp^FMzm#gAGVB@~Qd*$(BrK=KxP<XN7{I{ItxRR0al(
ziM11LJq|lawB29U6%{4(M&Z$fg;qCRU1hRGy8;xiaILkP5%Y`PS89@oxckAa4<4LP
zx_a<vWH@`cqre}=!m@&(l8Hk5y}5Lg_B`Iv{(ax~r|+yCGQwu2eN|!b-G0_bOY_;M
z)k*iY*#s6!x_G2bGgSA?{L#0*n&n5G`18nrrS*LsQ5z%#1UiM!800?UeKgbe_JckC
zGO4MNs&?x03|=-J>5mDwse2q#6!~Cgpz-XP>U~1pOZCEb&6w)jTQSRGS(epPZp;4A
zbJ26QX3gFD{$#v_-V5#1G0RQ6M8r0-a4Lyh33L=Sd$i^Cl86%*DlZ+kfAmYWNb||6
zhKb3HrWq4r?SIJsdABxn&a5w!4tXy4ezef;Si`>91y>8^yiY!!IhWyJ`U9``KeBxj
zzD@q(=H4yK*nIoI(Ng!|Zw;qq6MmeW;Cpjw)0UPb!3z7u`KOqjw>xB<eI5N<W;wsZ
zw5qB582R`bKMJL;|Gj7T{@wZiuWkALomupCQDdfoRs}Fx*pj^6T^Rm@;DWu&Cj&(|
z3p^r=85s1GL71^(seKtxkiEpy*OmPRCoeCn;I(Dv*nvWlC9V-A&iT2ysd*&~&PAz-
zC8;S2<(VZJ3hti10pX2&;tUK-j-D=#Ar-gY-dLC??I_ZA@&CH41ZH*#l?AMN9**-5
zyyySJ#=7!JgV>S-3T%8GOEq6uM1{7NUV9+(<Yr{aQh(#ur{bfsSF3FId^bslDdtx3
zB<D%(tEwdPuV|d%_uQuvIa}N(?Ygt=Ue;TW@2KqbEPAE?c6C;MTtVd8t+VS4>SX4w
zxV_41F7w}8@f9zn-IJTk`AaYIpQ@Y`8(J$JmHqkR*04DS6Yt&Ic0b8}`?WCVNx%2~
z51vyXI`Q4FPh~Ie&y}=gSyuY*{qsDJO>dsconc+~NW_+XmqZWqy6Fy%3mU+fv9ZYk
zf|;0D8=;tmi-{G2IYd~vAXq?yLj-~q0t7T5*kOS}00ct}0~tD44E#{fY^&y(otr9S
zu=m=nP5*6pJnO!;Iy|&mbG*@RuKc!Z&(fGD&ztvIW&W>Ei7QssPCBl#Sw(u{p(TZR
zzly>`kH3=MysvQI?|&YjB0|}do4eb0zM4PdbzOkmq@2~Swz}z`oph)F-Tni=Z>#={
z3tjIS^nXR=Md#Q)zmNw-eLp{^zYYHXq~^2qt*g1;{#=i~0!(oXp00i_>zopr0NvZg
A-~a#s

literal 0
HcmV?d00001

diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index 63aef0f46..194c39f1c 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,47 @@
         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())
+          }}</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'
+            miniWidget.name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (str) => str.toUpperCase())
           }}</span>
         </div>
       </div>
@@ -587,6 +615,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">
@@ -596,28 +639,52 @@ import { computed, onMounted, ref, toRefs, watch } from 'vue'
 import { nextTick } from 'vue'
 import { type UseDraggableOptions, useDraggable, VueDraggable } from 'vue-draggable-plus'
 
-import { defaultMiniWidgetManagerVars } from '@/assets/defaults'
+import { defaultCustomWidgetManagerVars, defaultMiniWidgetManagerVars } from '@/assets/defaults'
+/* @ts-ignore */
 import BoatThumb from '@/assets/vehicles/BlueBoat_thumb.png'
+/* @ts-ignore */
 import BlueRoboticsLogo from '@/assets/vehicles/BlueRoboticsLogo.png'
+/* @ts-ignore */
 import RovThumb from '@/assets/vehicles/BlueROV_thumb.png'
+/* @ts-ignore */
 import AttitudeImg from '@/assets/widgets/Attitude.png'
+/* @ts-ignore */
 import CompassImg from '@/assets/widgets/Compass.png'
+/* @ts-ignore */
 import CompassHUDImg from '@/assets/widgets/CompassHUD.png'
+/* @ts-ignore */
+import CustomWidgetBaseImg from '@/assets/widgets/CustomWidgetBase.png'
+/* @ts-ignore */
 import DepthHUDImg from '@/assets/widgets/DepthHUD.png'
+/* @ts-ignore */
 import IFrameImg from '@/assets/widgets/IFrame.png'
+/* @ts-ignore */
 import ImageViewImg from '@/assets/widgets/ImageView.png'
+/* @ts-ignore */
 import MapImg from '@/assets/widgets/Map.png'
+/* @ts-ignore */
 import MiniWidgetsBarImg from '@/assets/widgets/MiniWidgetsBar.png'
+/* @ts-ignore */
 import URLVideoPlayerImg from '@/assets/widgets/URLVideoPlayer.png'
+/* @ts-ignore */
 import VideoPlayerImg from '@/assets/widgets/VideoPlayer.png'
+/* @ts-ignore */
 import VirtualHorizonImg from '@/assets/widgets/VirtualHorizon.png'
 import { useInteractionDialog } from '@/composables/interactionDialog'
 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 +737,23 @@ const availableMiniWidgetTypes = computed(() =>
   }))
 )
 
+const availableCustomWidgetElementsTypes = computed(() =>
+  Object.values(CustomWidgetElementType).map((widgetType) => ({
+    component: widgetType,
+    name: widgetType,
+    options: {},
+    hash: uuid(),
+    isBoolean: false,
+    managerVars: defaultCustomWidgetManagerVars,
+    cockpitActions: [],
+  }))
+)
 const widgetImages = {
   Attitude: AttitudeImg,
   Compass: CompassImg,
-  DepthHUD: DepthHUDImg,
   CompassHUD: CompassHUDImg,
+  CustomWidgetBase: CustomWidgetBaseImg,
+  DepthHUD: DepthHUDImg,
   IFrame: IFrameImg,
   ImageView: ImageViewImg,
   Map: MapImg,
@@ -851,6 +930,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 +940,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',
diff --git a/src/components/ElementConfigPanel.vue b/src/components/ElementConfigPanel.vue
new file mode 100644
index 000000000..b00c1ddc2
--- /dev/null
+++ b/src/components/ElementConfigPanel.vue
@@ -0,0 +1,490 @@
+<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] h-[40px] 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 }">
+                      <p v-bind="props" class="text-[14px] w-full cursor-pointer">
+                        {{ currentElement.options.layout[optionKey][index].name || `Option ${index + 1}` }}
+                      </p>
+                    </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="isOptionsMenuOpen[index] = false"
+                          >close</v-btn
+                        >
+                        <v-btn
+                          variant="text"
+                          size="small"
+                          class="my-3"
+                          @click="
+                            () => {
+                              addSelectorOption(optionKey)
+                              isOptionsMenuOpen[index] = false
+                              isOptionsMenuOpen[index + 1] = true
+                            }
+                          "
+                          >add another option</v-btn
+                        >
+                      </div>
+                    </v-card>
+                  </v-menu>
+                </div>
+                <v-btn
+                  v-if="currentElement.options.actionVariable === undefined || !openNewActionVariableForm"
+                  variant="elevated"
+                  class="bg-[#3B78A8] my-[10px] mr-[13px] w-22"
+                  size="x-small"
+                  @click="addSelectorOption(optionKey)"
+                  >add option</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: 'Action name already exists',
+    variant: 'error',
+  })
+  actionVariableError.value.push('This name is already in use')
+  setTimeout(() => {
+    actionVariableError.value.splice(0, 1)
+  }, 3000)
+}
+
+const deleteParameterFromDataLake = (): void => {
+  if (currentElement.value?.options.actionVariable?.name) {
+    deleteCockpitActionVariable(currentElement.value.options.actionVariable)
+    futureActionVariable.value.name = ''
+    futureActionVariable.value = defaultActionVariable
+    currentElement.value.options.actionVariable = undefined
+    openNewActionVariableForm.value = false
+  }
+}
+
+const saveOrUpdateParameter = (): void => {
+  let newCockpitActionVariable = {
+    id: futureActionVariable.value?.name,
+    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) {
+    const actionVariableToCheck = getCockpitActionVariableInfo(newCockpitActionVariable.id)
+    // Checks if it is updating the same element
+    if (
+      actionVariableToCheck !== undefined &&
+      actionVariableToCheck.id !== currentElement.value.options.actionVariable.id
+    ) {
+      showActionExistsError()
+      return
+    }
+    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: '' })
+    }
+  }
+}
+
+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) {
+    widgetStore.removeElementFromCustomWidget(widgetStore.elementToShowOnDrawer!.hash)
+    widgetStore.elementToShowOnDrawer = undefined
+    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..dc099e915 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>
@@ -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>
diff --git a/src/components/MiniWidgetInstantiator.vue b/src/components/MiniWidgetInstantiator.vue
index 0b57d8274..c1aeeeb91 100644
--- a/src/components/MiniWidgetInstantiator.vue
+++ b/src/components/MiniWidgetInstantiator.vue
@@ -3,28 +3,40 @@
 </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 } from '@/libs/actions/data-lake'
+import type { CustomWidgetElement, MiniWidget } from '@/types/widgets'
 
 const props = defineProps<{
   /**
-   * Mini-widget instance
+   *
    */
-  miniWidget: MiniWidget
+  miniWidget: MiniWidget | CustomWidgetElement
 }>()
 
 const miniWidget = toRefs(props).miniWidget
 
-const componentCache: Record<string, AsyncComponentLoader> = {}
+const componentCache: Record<string, ReturnType<typeof defineAsyncComponent>> = {}
 
-const componentFromType = (componentType: MiniWidgetType): AsyncComponentLoader => {
-  if (componentCache[componentType] === undefined) {
-    componentCache[componentType] = defineAsyncComponent(
-      () => import(`../components/mini-widgets/${componentType}.vue`)
-    )
+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]
 }
+
+const registerCockpitActions = (): void => {
+  if (miniWidget.value.options.actionVariable) {
+    createCockpitActionVariable(miniWidget.value.options.actionVariable)
+  }
+}
+
+onMounted(() => registerCockpitActions())
 </script>
diff --git a/src/components/WidgetHugger.vue b/src/components/WidgetHugger.vue
index a45a7246f..6b0186059 100644
--- a/src/components/WidgetHugger.vue
+++ b/src/components/WidgetHugger.vue
@@ -59,6 +59,10 @@ export interface Props {
    * To hide or not content that overflows the widget area
    */
   hideOverflow?: boolean
+  /**
+   * To change the widget sizes according to window size
+   */
+  disableResponsiveness?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -75,6 +79,7 @@ const outerWidgetRef = ref<HTMLElement | undefined>()
 const innerWidgetRef = ref<HTMLElement | undefined>()
 const widgetView = computed(() => outerWidgetRef.value?.parentElement)
 const widgetResizeHandles = computed(() => outerWidgetRef.value?.getElementsByClassName('resize-handle'))
+const disableResponsiveness = toRefs(props).disableResponsiveness
 
 const devStore = useDevelopmentStore()
 
@@ -87,7 +92,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)
@@ -272,8 +277,8 @@ const temporaryPosition = computed(() => {
 })
 
 const sizeStyle = computed(() => ({
-  width: `${100 * size.value.width}%`,
-  height: `${100 * size.value.height}%`,
+  width: disableResponsiveness.value ? `${1000 * size.value.width}px` : `${100 * size.value.width}%`,
+  height: disableResponsiveness.value ? `${1000 * size.value.height}px` : `${100 * size.value.height}%`,
 }))
 
 const positionStyle = computed(() => ({
diff --git a/src/components/custom-widget-elements/Button.vue b/src/components/custom-widget-elements/Button.vue
new file mode 100644
index 000000000..8c726c6c9
--- /dev/null
+++ b/src/components/custom-widget-elements/Button.vue
@@ -0,0 +1,84 @@
+<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="!widgetStore.editingMode && 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 => {
+  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..85bae9b24
--- /dev/null
+++ b/src/components/custom-widget-elements/Checkbox.vue
@@ -0,0 +1,98 @@
+<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="miniWidget.checked"
+      hide-details
+      :color="miniWidget.options.layout?.color"
+      class="text-white"
+      :class="{ 'pointer-events-none': widgetStore.editingMode }"
+      theme="dark"
+      @change="toggleActionFromCheckbox"
+    ></v-checkbox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, 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 toggleActionFromCheckbox = (): void => {
+  if (miniWidget.value.options.actionVariable) {
+    setCockpitActionVariableData(miniWidget.value.options.actionVariable.name, miniWidget.value.checked)
+  }
+}
+
+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, {
+      variableType: 'boolean',
+      actionVariable: undefined,
+      checked: true,
+      layout: {
+        label: '',
+        align: 'center',
+        color: '#FFFFFF',
+      },
+    })
+  }
+  if (miniWidget.value.options.actionVariable) {
+    listenCockpitActionVariable(miniWidget.value.options.actionVariable.name, (value) => {
+      miniWidget.value.checked = value as boolean
+    })
+  }
+})
+
+onUnmounted(() => {
+  if (miniWidget.value.options.actionVariable) {
+    unlistenCockpitActionVariable(miniWidget.value.options.actionVariable.name)
+    deleteCockpitActionVariable(miniWidget.value.options.actionVariable.name)
+  }
+})
+</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..df22a3c91
--- /dev/null
+++ b/src/components/custom-widget-elements/Dial.vue
@@ -0,0 +1,212 @@
+<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)` }">
+            <div class="knob-notch"></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) }}
+    </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, flush: 'post' }
+)
+
+onMounted(() => {
+  if (!miniWidget.value.options || Object.keys(miniWidget.value.options).length === 0) {
+    miniWidget.value.isCustomElement = true
+    widgetStore.updateElementOptions(miniWidget.value.hash, {
+      variableType: 'number',
+      actionVariable: undefined,
+      layout: {
+        minValue: 0,
+        maxValue: 100,
+        size: 'small',
+        showValue: true,
+        align: 'center',
+      },
+    })
+  }
+  if (miniWidget.value.options.actionVariable) {
+    listenCockpitActionVariable(miniWidget.value.options.actionVariable?.name, (value) => {
+      potentiometerValue.value = value as number
+      const rotationRange = 300
+      const valueRange = miniWidget.value.options.layout.maxValue - miniWidget.value.options.layout.minValue || 1
+      rotationAngle.value =
+        (((value as number) - miniWidget.value.options.layout?.minValue) / valueRange) * rotationRange - 150
+    })
+  }
+})
+
+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 handleDrag = (moveEvent: MouseEvent): void => {
+    const centerX = rect.left + rect.width / 2
+    const centerY = rect.top + rect.height / 2
+
+    const dx = moveEvent.clientX - centerX
+    const dy = moveEvent.clientY - centerY
+
+    const angle = Math.atan2(dy, dx) * (180 / Math.PI)
+    const adjustedAngle = Math.max(-150, Math.min(150, angle))
+
+    rotationAngle.value = adjustedAngle
+
+    const rotationRange = 300
+    const valueRange = miniWidget.value.options.layout?.maxValue - miniWidget.value.options.layout?.minValue
+    potentiometerValue.value =
+      ((adjustedAngle + 150) / rotationRange) * valueRange + miniWidget.value.options.layout?.minValue
+    if (miniWidget.value.options.actionVariable) {
+      setCockpitActionVariableData(miniWidget.value.options.actionVariable.name, potentiometerValue.value.toFixed(1))
+    }
+  }
+
+  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.name)
+  }
+})
+</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%;
+  background-color: #838383;
+  border-radius: 50%;
+  position: relative;
+  cursor: pointer;
+}
+
+.knob-notch {
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  width: 15%;
+  height: 15%;
+  background-color: #303030aa;
+  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..5cca1acbb
--- /dev/null
+++ b/src/components/custom-widget-elements/Dropdown.vue
@@ -0,0 +1,128 @@
+<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="selectedOption"
+        :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 }"
+        @change="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 miniWidget = toRefs(props).miniWidget
+const selectedOption = ref<SelectorOption | undefined>(props.miniWidget.options.lastSelected || undefined)
+
+const options = computed(() => {
+  return (
+    miniWidget.value.options.layout?.selectorOptions.map((option) => ({
+      ...option,
+    })) || []
+  )
+})
+
+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 (miniWidget.value.options.actionVariable?.id) {
+    setCockpitActionVariableData(miniWidget.value.options.actionVariable.id, value)
+  }
+}
+
+onMounted(() => {
+  if (!miniWidget.value.options || Object.keys(miniWidget.value.options).length === 0) {
+    miniWidget.value.isCustomElement = true
+    widgetStore.updateElementOptions(miniWidget.value.hash, {
+      cockpitAction: undefined,
+      actionVariable: undefined,
+      lastSelected: { name: '', value: '' },
+      layout: {
+        selectorOptions: [{ name: '', value: '' }],
+        align: 'start',
+        width: 168,
+      },
+    })
+  }
+  if (miniWidget.value.options.actionVariable) {
+    listenCockpitActionVariable(miniWidget.value.options.actionVariable.name, (value) => {
+      selectedOption.value = options.value.find((option) => option.value === value)
+    })
+  }
+  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.name)
+  }
+})
+</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..fbb8e9afd
--- /dev/null
+++ b/src/components/custom-widget-elements/Label.vue
@@ -0,0 +1,99 @@
+<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
+    })
+  }
+})
+
+onUnmounted(() => {
+  if (props.miniWidget.options.actionVariable) {
+    unlistenCockpitActionVariable(props.miniWidget.options.actionVariable.name)
+    deleteCockpitActionVariable(props.miniWidget.options.actionVariable.name)
+  }
+})
+</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..b49991226
--- /dev/null
+++ b/src/components/custom-widget-elements/Slider.vue
@@ -0,0 +1,138 @@
+<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',
+      }"
+      @change="
+        () => {
+          if (miniWidget.options.actionVariable) {
+            setCockpitActionVariableData(miniWidget.options.actionVariable.name, sliderValue.toFixed(1))
+          }
+        }
+      "
+    ></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 }
+)
+
+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,
+      },
+      actionVariable: undefined,
+    })
+  }
+  if (miniWidget.value.options.actionVariable) {
+    listenCockpitActionVariable(miniWidget.value.options.actionVariable?.name, (value) => {
+      sliderValue.value = value as number
+    })
+  }
+})
+
+onUnmounted(() => {
+  if (miniWidget.value.options.actionVariable) {
+    unlistenCockpitActionVariable(miniWidget.value.options.actionVariable.name)
+    deleteCockpitActionVariable(miniWidget.value.options.actionVariable.name)
+  }
+})
+</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..b39f4490c
--- /dev/null
+++ b/src/components/custom-widget-elements/Switch.vue
@@ -0,0 +1,86 @@
+<template>
+  <div
+    class="flex items-center h-[30px]"
+    :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'"
+      :size="miniWidget.options.layout?.size"
+      :class="{ 'pointer-events-none': widgetStore.editingMode }"
+    />
+    <p v-if="miniWidget.options.layout?.label !== ''" class="ml-3 mb-[3px]">{{ miniWidget.options.layout?.label }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, 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.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 }
+)
+
+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',
+        size: miniWidget.value.options.layout?.size || 'medium',
+        color: miniWidget.value.options.layout?.color || '#FFFFFF',
+        label: miniWidget.value.options.layout?.label || '',
+      },
+      actionVariable: undefined,
+    })
+  }
+  if (miniWidget.value.options.actionVariable) {
+    listenCockpitActionVariable(miniWidget.value.options.actionVariable.name, (value) => {
+      switchValue.value = value as boolean
+    })
+  }
+})
+
+onUnmounted(() => {
+  if (miniWidget.value.options.actionVariable) {
+    unlistenCockpitActionVariable(miniWidget.value.options.actionVariable.name)
+    deleteCockpitActionVariable(miniWidget.value.options.actionVariable.name)
+  }
+})
+</script>
+
+<style scoped></style>
diff --git a/src/components/mini-widgets/ArmerButton.vue b/src/components/mini-widgets/ArmerButton.vue
index 9de910457..8b69599ec 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..d8881dcb3
--- /dev/null
+++ b/src/components/widgets/CustomWidgetBase.vue
@@ -0,0 +1,426 @@
+<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 @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)"
+            >
+              <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)"
+            >
+              <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>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+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, 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 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 loadWidgetFromBrw = (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 handleOptionClick = (option: string): void => {
+  isMenuOpen.value = false
+  if (option === 'options') {
+    widgetStore.widgetManagerVars(currentWidget.value.hash).configMenuOpen = true
+  } else if (option === 'save') {
+    widgetStore.downloadWidgetAsBrw(currentWidget.value)
+  } else if (option === 'load') {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = '.brw'
+
+    input.addEventListener('change', (event: Event) => {
+      loadWidgetFromBrw(event)
+    })
+
+    input.click()
+  }
+}
+
+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
+    }
+    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/libs/actions/data-lake.ts b/src/libs/actions/data-lake.ts
index 0cc437574..acc570ec4 100644
--- a/src/libs/actions/data-lake.ts
+++ b/src/libs/actions/data-lake.ts
@@ -1,3 +1,5 @@
+import { useSnackbar } from '@/composables/snackbar'
+
 /**
  * A variable to be used on a Cockpit action
  * @param { string } id - The id of the variable
@@ -19,6 +21,8 @@ class CockpitActionVariable {
   }
 }
 
+const { showSnackbar } = useSnackbar()
+
 const cockpitActionVariableInfo: Record<string, CockpitActionVariable> = {}
 export const cockpitActionVariableData: Record<string, string | number | boolean> = {}
 const cockpitActionVariableListeners: Record<string, ((value: string | number | boolean) => void)[]> = {}
@@ -33,7 +37,13 @@ export const getCockpitActionVariableInfo = (id: string): CockpitActionVariable
 
 export const createCockpitActionVariable = (variable: CockpitActionVariable): void => {
   if (cockpitActionVariableInfo[variable.id]) {
-    throw new Error(`Cockpit action variable with id '${variable.id}' already exists. Update it instead.`)
+    console.log(`Cockpit action variable with id '${variable.id}' already exists. Renaming to ${variable.name}_new.`)
+    showSnackbar({
+      message: `Cockpit action variable with id '${variable.id}' already exists. Renaming to ${variable.name}_new.`,
+    })
+    variable.id = `${variable.id}_new`
+    variable.name = `${variable.name}_new`
+    cockpitActionVariableInfo[variable.id] = variable
   }
   cockpitActionVariableInfo[variable.id] = variable
 }
@@ -43,6 +53,9 @@ export const updateCockpitActionVariableInfo = (variable: CockpitActionVariable)
     throw new Error(`Cockpit action variable with id '${variable.id}' does not exist. Create it first.`)
   }
   cockpitActionVariableInfo[variable.id] = variable
+  if ((cockpitActionVariableInfo[variable.id] = variable)) {
+    showSnackbar({ message: 'Parameter successfully updated', variant: 'success' })
+  }
 }
 
 export const getCockpitActionVariableData = (id: string): string | number | boolean | undefined => {
@@ -57,6 +70,11 @@ export const setCockpitActionVariableData = (id: string, data: string | number |
 export const deleteCockpitActionVariable = (id: string): void => {
   delete cockpitActionVariableInfo[id]
   delete cockpitActionVariableData[id]
+  if (!cockpitActionVariableInfo[id]) {
+    showSnackbar({ message: 'Parameter successfully deleted', variant: 'success' })
+    return
+  }
+  showSnackbar({ message: 'Parameter could not be deleted', variant: 'error' })
 }
 
 export const listenCockpitActionVariable = (id: string, listener: (value: string | number | boolean) => void): void => {
diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts
index 6f0220b01..ad6afeee3 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,167 @@ 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 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) // Look for the mini-widget by its hash
+
+    // Return the found mini-widget or undefined if not found
+    return customWidgetElement
+  }
+
+  const showElementPropsDrawer = (customWidgetElementHash: string): void => {
+    const customWidgetElement = getElementByHash(customWidgetElementHash)
+    if (!customWidgetElement) {
+      alert('element not found')
+      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) {
+      showSnackbar({ variant: 'error', message: 'Could not find element with the given hash.', duration: 3000 })
+      return
+    }
+
+    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) {
+      showSnackbar({
+        variant: 'error',
+        message: 'Could not find the custom widget containing the element.',
+        duration: 3000,
+      })
+      return
+    }
+
+    const customWidgetContainer = customWidget.options.elementContainers.find(
+      (container: CustomWidgetElementContainer) => container.elements.includes(customWidgetElement)
+    )
+    if (!customWidgetContainer) {
+      showSnackbar({
+        variant: 'error',
+        message: 'Could not find the container containing the element.',
+        duration: 3000,
+      })
+      return
+    }
+
+    customWidgetContainer.elements = customWidgetContainer.elements.filter(
+      (element: CustomWidgetElement) => element.hash !== elementHash
+    )
+  }
+
+  const downloadWidgetAsBrw = (widget: Widget): void => {
+    const blob = new Blob([JSON.stringify(widget)], { type: 'application/json;charset=utf-8' })
+    const fileName = `${widget.name}.brw`
+    saveAs(blob, fileName)
+  }
+
+  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]) {
@@ -412,6 +578,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
    */
   function addWidget(widgetType: WidgetType, view: View): void {
     const widgetHash = uuid4()
+    let disableWidgetResponsiveness = false
 
     const widget = {
       hash: widgetHash,
@@ -422,8 +589,23 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
       options: {},
     }
 
+    if (widgetType === WidgetType.CustomWidgetBase) {
+      disableWidgetResponsiveness = true
+      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, disableResponsiveness: disableWidgetResponsiveness },
+    })
   }
 
   /**
@@ -434,6 +616,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
   }
 
   /**
@@ -682,6 +865,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     currentMiniWidgetsProfile,
     savedProfiles,
     vehicleTypeProfileCorrespondency,
+    allowMovingAndResizing,
     loadProfile,
     saveProfile,
     resetSavedProfiles,
@@ -713,5 +897,14 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     visibleAreaMinClearancePixels,
     currentTopBarHeightPixels,
     currentBottomBarHeightPixels,
+    showElementPropsDrawer,
+    isElementsPropsDrawerVisible,
+    elementToShowOnDrawer,
+    updateElementOptions,
+    removeElementFromCustomWidget,
+    downloadWidgetAsBrw,
+    loadWidgetFromFile,
+    widgetToEdit,
+    editWidgetByHash,
   }
 })
diff --git a/src/types/widgets.ts b/src/types/widgets.ts
index 23e2f704e..2739b1353 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,500 @@ 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 variables to be used in the Custom Widget creator.
+ */
+export enum CustomWidgetType {
+  Button = 'boolean',
+  Checkbox = 'boolean',
+  Dial = 'number',
+  Dropdown = 'string',
+  Label = 'string',
+  Slider = 'number',
+  Switch = 'boolean',
+}
+
+/**
+ * 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
+      /**
+       * 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
+      /**
+       * 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 value
+     */
+    checked: boolean
+    /**
+     * Element options
+     */
+    options: {
+      /**
+       * Variable type
+       */
+      variableType: string
+      /**
+       * 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
+      /**
+       * 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
+         */
+        color: 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
+      /**
+       * Action parameter
+       */
+      actionVariable: CockpitActionVariable
+      /**
+       * Last selected value
+       */
+      lastSelected: SelectorOption
+      /**
+       * Last selected value
+       */
+
+      /**
+       *
+       */
+      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
+      /**
+       * 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
+      /**
+       * Action parameter
+       */
+      actionVariable: CockpitActionVariable
+      /**
+       * Layout options
+       */
+      layout: {
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         * The size of the switch
+         */
+        size: 'small' | 'medium' | 'large'
+        /**
+         * The color of the switch
+         */
+        color: string
+        /**
+         * The label of the switch
+         */
+        label: string
+      }
+    }
+  }
+}
+
 /**
  * External variables used by the widget manager
  */
@@ -77,6 +574,10 @@ export type WidgetManagerVars = {
    * Wether thewidget should be highlited or not
    */
   highlighted: boolean
+  /**
+   * Wether the widget should be resized according to te window size
+   */
+  disableResponsiveness: boolean
 }
 
 /**
@@ -97,6 +598,32 @@ export type MiniWidgetManagerVars = {
   highlighted: boolean
 }
 
+/**
+ * External variables used by the custom widget manager
+ */
+export type CustomWidgetManagerVars = {
+  /**
+   * Number of times the custom widget was mounted
+   */
+  everMounted: boolean
+  /**
+   * If the configuration menu is open or not
+   */
+  configMenuOpen: boolean
+  /**
+   * Wether the custom widget should be highlited or not
+   */
+  highlighted: boolean
+  /**
+   * Variables that are used by the custom widget
+   */
+  customWidgetVars: CustomWidgetType
+  /**
+   * Cockpit actions that are used by the custom widget
+   */
+  cockpitActions: CockpitAction[]
+}
+
 export type Widget = {
   /**
    * Unique identifier for the widget
@@ -143,6 +670,77 @@ 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 boolean input or not
+   */
+  isBoolean?: boolean
+  /**
+   * 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
+  /**
+   * Internal variables of the widget
+   */
+  cockpitActions: CockpitAction[]
+}
+
 export type MiniWidgetContainer = {
   /**
    * Array of widgets that are stored in the container
@@ -154,6 +752,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
diff --git a/src/views/ConfigurationActionsView.vue b/src/views/ConfigurationActionsView.vue
index 171fea4f7..28407384a 100644
--- a/src/views/ConfigurationActionsView.vue
+++ b/src/views/ConfigurationActionsView.vue
@@ -312,7 +312,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 
 import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
 import { openSnackbar } from '@/composables/snackbar'
@@ -665,6 +665,7 @@ const saveUrlParameter = (): void => {
 
 onMounted(() => {
   loadSavedActions()
+  console.log('🚀 ~ allSavedActionConfigs:', allSavedActionConfigs.value)
 })
 </script>