diff --git a/src/App.vue b/src/App.vue
index dc606e9e7..eef53b480 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -89,11 +89,11 @@
                   :icon-class="
                     interfaceStore.isOnSmallScreen
                       ? 'scale-[100%] -mb-[1px] md:ml-[2px]'
-                      : 'scale-[95%] -mb-[1px] lg:-mr-[1px] -mr-[2px] xl:-mb-[2px]'
+                      : 'scale-[95%] -mb-[2px] lg:-mr-[1px] -mr-[2px] xl:-mb-[2px]'
                   "
                   :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
                   :tooltip="simplifiedMainMenu ? 'Configuration' : undefined"
-                  :button-class="!simplifiedMainMenu ? '-mt-1' : undefined"
+                  :button-class="!simplifiedMainMenu ? '-mt-[5px]' : undefined"
                   :width="buttonSize"
                   :selected="showConfigurationMenu"
                   @click="mainMenuStep = 2"
@@ -178,14 +178,32 @@
 
       <teleport to="body">
         <v-dialog v-model="showMissionOptionsDialog" width="50%">
-          <v-card class="pa-2">
-            <v-card-title>Mission configuration</v-card-title>
+          <v-card class="pa-2 bg-[#20202022] backdrop-blur-2xl text-white rounded-lg">
+            <v-card-title class="flex justify-between">
+              <div />
+              <div>Mission configuration</div>
+              <v-btn
+                icon
+                :width="38"
+                :height="34"
+                variant="text"
+                class="bg-transparent -mt-1 -mr-3"
+                @click="showMissionOptionsDialog = false"
+              >
+                <v-icon
+                  :size="interfaceStore.isOnSmallScreen ? 22 : 26"
+                  :class="interfaceStore.isOnSmallScreen ? '-mr-[10px] -mt-[10px]' : '-mr-[2px]'"
+                  >mdi-close</v-icon
+                >
+              </v-btn>
+            </v-card-title>
             <v-card-text>
-              <div class="flex">
+              <div class="flex flex-col">
+                <p>Misison Name</p>
                 <v-text-field
                   v-model="store.missionName"
-                  label="Mission name"
                   append-inner-icon="mdi-restore"
+                  class="mt-1"
                   @click:append-inner="store.missionName = store.lastMissionName"
                 />
               </div>
@@ -199,12 +217,14 @@
           <div id="mainTopBar" class="bar top-bar">
             <button
               class="flex items-center justify-center h-full aspect-square top-bar-hamburger"
+              :class="widgetStore.editingMode ? 'pointer-events-none' : 'pointer-events-auto'"
               @click="toggleMainMenu"
             >
               <span class="text-3xl transition-all mdi mdi-menu text-slate-300 hover:text-slate-50" />
             </button>
             <div
               class="flex items-center justify-start h-full px-4 ml-3 mr-1 transition-all cursor-pointer hover:bg-slate-200/30 min-w-[20%] select-none"
+              :class="widgetStore.editingMode ? 'pointer-events-none' : 'pointer-events-auto'"
               @click="showMissionOptionsDialog = true"
             >
               <div class="flex items-center overflow-hidden text-lg font-medium text-white whitespace-nowrap">
@@ -671,9 +691,9 @@ body.hide-cursor {
 }
 
 .main-view.edit-mode {
-  transform: scale(0.8);
-  right: -10%;
-  top: -10%;
+  transform: scale(0.78);
+  right: -11%;
+  top: -11%;
 }
 
 .swal2-container {
diff --git a/src/assets/vehicles/BlueBoat_thumb.png b/src/assets/vehicles/BlueBoat_thumb.png
new file mode 100644
index 000000000..fd544041d
Binary files /dev/null and b/src/assets/vehicles/BlueBoat_thumb.png differ
diff --git a/src/assets/vehicles/BlueROV_thumb.png b/src/assets/vehicles/BlueROV_thumb.png
new file mode 100644
index 000000000..4cb2074d4
Binary files /dev/null and b/src/assets/vehicles/BlueROV_thumb.png differ
diff --git a/src/assets/vehicles/BlueRoboticsLogo.png b/src/assets/vehicles/BlueRoboticsLogo.png
new file mode 100644
index 000000000..7122a3cb7
Binary files /dev/null and b/src/assets/vehicles/BlueRoboticsLogo.png differ
diff --git a/src/assets/widgets/Attitude.png b/src/assets/widgets/Attitude.png
new file mode 100644
index 000000000..73dac86af
Binary files /dev/null and b/src/assets/widgets/Attitude.png differ
diff --git a/src/assets/widgets/Compass.png b/src/assets/widgets/Compass.png
new file mode 100644
index 000000000..411612f87
Binary files /dev/null and b/src/assets/widgets/Compass.png differ
diff --git a/src/assets/widgets/CompassHUD.png b/src/assets/widgets/CompassHUD.png
new file mode 100644
index 000000000..f8a382ea4
Binary files /dev/null and b/src/assets/widgets/CompassHUD.png differ
diff --git a/src/assets/widgets/DepthHUD.png b/src/assets/widgets/DepthHUD.png
new file mode 100644
index 000000000..8ea93767d
Binary files /dev/null and b/src/assets/widgets/DepthHUD.png differ
diff --git a/src/assets/widgets/IFrame.png b/src/assets/widgets/IFrame.png
new file mode 100644
index 000000000..abc0cbcc5
Binary files /dev/null and b/src/assets/widgets/IFrame.png differ
diff --git a/src/assets/widgets/ImageView.png b/src/assets/widgets/ImageView.png
new file mode 100644
index 000000000..21aaea4df
Binary files /dev/null and b/src/assets/widgets/ImageView.png differ
diff --git a/src/assets/widgets/Map.png b/src/assets/widgets/Map.png
new file mode 100644
index 000000000..2e3935502
Binary files /dev/null and b/src/assets/widgets/Map.png differ
diff --git a/src/assets/widgets/MiniWidgetsBar.png b/src/assets/widgets/MiniWidgetsBar.png
new file mode 100644
index 000000000..438ea9cb0
Binary files /dev/null and b/src/assets/widgets/MiniWidgetsBar.png differ
diff --git a/src/assets/widgets/URLVideoPlayer.png b/src/assets/widgets/URLVideoPlayer.png
new file mode 100644
index 000000000..06f58fcc1
Binary files /dev/null and b/src/assets/widgets/URLVideoPlayer.png differ
diff --git a/src/assets/widgets/VideoPlayer.png b/src/assets/widgets/VideoPlayer.png
new file mode 100644
index 000000000..677f352e8
Binary files /dev/null and b/src/assets/widgets/VideoPlayer.png differ
diff --git a/src/assets/widgets/VirtualHorizon.png b/src/assets/widgets/VirtualHorizon.png
new file mode 100644
index 000000000..4182f56ce
Binary files /dev/null and b/src/assets/widgets/VirtualHorizon.png differ
diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index 812cbd947..d8dd37087 100644
--- a/src/components/EditMenu.vue
+++ b/src/components/EditMenu.vue
@@ -1,295 +1,570 @@
 <template>
-  <div class="w-full h-full bg-slate-600 z-[60]"></div>
   <div
-    class="relative flex flex-col justify-between px-1 text-white edit-panel left-panel"
+    v-if="editMode"
+    class="flex fixed top-[5vh] 2xl:left-[22.5vw] xl:left-[21.5vw] left-[20.7vw] bg-[#334a5755] border-[1px] border-[#ffffff25] text-[#FFFFFF] backdrop-blur-lg elevation-5 pr-4 rounded-full cursor-pointer hover:brightness-125 2xl:scale-90 xl:scale-75 scale-[60%]"
+    @click="() => emit('update:editMode', false)"
+  >
+    <v-btn icon="mdi-close" size="54" class="bg-[#334a5755] text-[#FFFFFFCC] text-[28px] rounded-full elevation-5" />
+    <div class="ml-2 mt-[7px] text-[26px]">Exit</div>
+  </div>
+  <div v-if="editMode" class="flex fixed top-0 left-0 h-[100vh] w-[22vw] bg-[#031C2B]" />
+  <div
+    class="relative flex flex-col justify-start overflow-y-auto text-white edit-panel left-panel"
     :class="{ active: editMode }"
   >
-    <div
-      class="absolute text-2xl transition-all cursor-pointer text-slate-500 aspect-square mdi mdi-close hover:text-slate-300 left-2 top-2"
-      @click="emit('update:editMode', false)"
-    />
-    <div class="flex items-center justify-center mt-10 text-xl font-semibold select-none">
-      <p>Edit interface</p>
-      <div
-        class="absolute !bg-slate-600 right-2 icon-btn mdi mdi-dots-vertical"
-        @click.stop="editMenuDialogRevealed = true"
+    <div class="flex justify-between items-center w-full bg-[#CBCBCB2A] relative">
+      <img
+        :src="pickVehicleImage(store.currentProfile.name)"
+        alt="current-vehicle"
+        class="ml-2 my-1 p-1 2xl:w-[60px] xl:w-[50px] w-[40px] aspect-square"
       />
-    </div>
-    <div class="w-full h-px my-2 sm bg-slate-800/40" />
-    <div class="flex flex-col items-center justify-center w-full px-2 shrink overflow-y-clip h-[35%]">
-      <p class="mb-3 text-lg font-semibold select-none">Profiles</p>
-      <div class="w-full px-2 overflow-x-hidden overflow-y-auto">
-        <TransitionGroup name="fade-and-suffle">
+      <div class="flex justify-between relative">
+        <div class="flex text-start 2xl:w-[230px] xl:w-[190px] w-[170px]">
+          <v-btn
+            id="profile"
+            variant="text"
+            :size="interfaceStore.is2xl ? 'x-large' : 'large'"
+            class="2xl:w-[230px] xl:w-[190px] w-[170px]"
+            :class="isDialOpen ? 'bg-[#49697c] p-3 border-b-2 border-[#041e2e55]' : 'bg-[#273842]'"
+            @click="toggleDial"
+          >
+            <span
+              class="wrapclass text-none 2xl:text-xl xl:text-[16px] lg:text-md text-sm 2xl:max-w-[230px] xl:max-w-[180px] max-w-[160px]"
+              >{{ store.currentProfile.name }} {{ store.currentProfile.name.endsWith('profile') ? '' : 'profile' }}
+            </span>
+          </v-btn>
+        </div>
+        <div
+          v-if="isDialOpen"
+          class="absolute flex justify-start flex-col top-full -mt-[1px] bg-transparent backdrop-blur-2xl z-10"
+        >
           <div
-            v-for="profile in store.savedProfiles"
+            v-for="profile in store.savedProfiles.filter((p) => p.hash !== store.currentProfile.hash)"
             :key="profile.hash"
-            class="flex items-center justify-between w-full my-1"
+            variant="text"
+            size="x-large"
+            class="bg-[#FFFFFF33] 2xl:w-[280px] xl:w-[240px] w-[210px] p-3 text-white mb-[1px] border-[1px] border-[#FFFFFF11] text-none flex-nowrap rounded-sm hover:brightness-90 cursor-pointer"
+            @click="
+              () => {
+                store.loadProfile(profile)
+                toggleDial()
+                isPanelExpanded = false
+              }
+            "
           >
-            <Button
-              class="flex items-center justify-center w-full h-8 overflow-auto"
-              :class="{ 'selected-view': profile.hash === store.currentProfile.hash }"
-              @click="store.loadProfile(profile)"
-            >
-              <p class="overflow-hidden text-sm text-ellipsis ml-7 whitespace-nowrap">{{ profile.name }}</p>
-              <div class="grow" />
-              <div class="icon-btn mdi mdi-download" @click.stop="store.exportProfile(profile)" />
-              <div class="icon-btn mdi mdi-content-copy" @click.stop="store.duplicateProfile(profile)" />
-              <div class="icon-btn mdi mdi-cog" @click.stop="renameProfile(profile)" />
-              <div class="icon-btn mdi mdi-trash-can" @click.stop="store.deleteProfile(profile)" />
-            </Button>
+            <div class="flex">
+              <img
+                :src="pickVehicleImage(profile.name)"
+                alt="current-vehicle"
+                class="mr-3 2xl:w-[30px] w-[25px] 2xl:h-[30px] h-[25px] aspect-square"
+              /><span
+                class="text-nowrap wrapclass text-left 2xl:max-w-[250px] xl:max-w-[240px] lg:max-w-[150px] max-w-[120px] mt-[1px] 2xl:text-[18px] xl:text-[18px] text-[16px]"
+                >{{ profile.name }} {{ profile.name.endsWith('profile') ? '' : 'profile' }}</span
+              >
+            </div>
           </div>
-        </TransitionGroup>
-      </div>
-      <div class="flex mt-2">
-        <div class="icon-btn mdi mdi-plus" @click="addNewProfile" />
-        <div class="icon-btn">
-          <label class="flex items-center justify-center w-full h-full cursor-pointer">
-            <input type="file" accept="application/json" hidden @change="(e: Event) => store.importProfile(e)" />
-            <span class="mdi mdi-upload" />
-          </label>
         </div>
-        <div
-          v-tooltip="'Export profiles to vehicle.'"
-          class="icon-btn mdi mdi-briefcase-upload"
-          @click="store.exportProfilesToVehicle"
-        />
-        <div
-          v-tooltip="'Import profiles from vehicle.'"
-          class="icon-btn mdi mdi-briefcase-download"
-          @click="store.importProfilesFromVehicle"
-        />
-        <div
-          v-tooltip="'Reset profiles to default configuration.'"
-          class="icon-btn mdi mdi-restore"
-          @click="resetSavedProfiles"
+      </div>
+      <div class="flex justify-between items-center 2xl:w-[75px] xl:w-[60px] w-[55px]">
+        <v-btn
+          id="select-profile"
+          size="sm"
+          icon="mdi-swap-horizontal"
+          class="bg-transparent 2xl:text-xl xl:text-md text-sm 2xl:-mr-5 ml-1 xl:mb-[2px] mb-[2px]"
+          variant="text"
+          @click="toggleDial"
         />
+        <v-menu offset-y theme="dark">
+          <template #activator="{ props: buttonProps }">
+            <v-btn
+              icon="mdi-dots-vertical"
+              size="xs"
+              variant="text"
+              class="2xl:text-lg xl:text-md text-sm 2xl:mr-[6px] xl:mr-[5px] mr-[2px] 2xl:mb-[5px] xl:mb-[2px] mb-[2px]"
+              v-bind="buttonProps"
+            />
+          </template>
+          <v-list>
+            <div class="flex justify-center max-w-[250px] px-2 gap-x-[5px] pb-2">
+              <p class="whitespace-nowrap">Settings -</p>
+              <p class="overflow-hidden text-ellipsis whitespace-nowrap">{{ store.currentProfile.name }}</p>
+            </div>
+
+            <v-divider />
+            <v-list-item @click="store.exportProfile(store.currentProfile)">
+              <div class="flex w-full justify-between">
+                <v-list-item-title>Export</v-list-item-title>
+                <v-icon size="20">mdi-download</v-icon>
+              </div>
+            </v-list-item>
+            <v-list-item @click="store.duplicateProfile(store.currentProfile)">
+              <div class="flex w-full justify-between">
+                <v-list-item-title>Duplicate</v-list-item-title>
+                <v-icon size="20">mdi-content-copy</v-icon>
+              </div>
+            </v-list-item>
+            <v-list-item @click="renameProfile(store.currentProfile)">
+              <div class="flex w-full justify-between">
+                <v-list-item-title>Config & rename</v-list-item-title>
+                <v-icon size="20">mdi-cog</v-icon>
+              </div>
+            </v-list-item>
+            <v-list-item @click="confirmDelete">
+              <div class="flex w-full justify-between">
+                <v-list-item-title>Delete</v-list-item-title>
+                <v-icon size="20">mdi-trash-can</v-icon>
+              </div>
+            </v-list-item>
+            <v-divider class="mb-1" />
+            <div class="flex justify-center max-w-[250px] px-2 gap-x-[5px] pb-2 pt-1">
+              <p class="whitespace-nowrap">General profile settings</p>
+            </div>
+            <v-divider class="mb-1" />
+            <v-list-item @click="addNewProfile">
+              <div class="flex w-full justify-between mt-[6px]">
+                <v-list-item-title>Add new profile</v-list-item-title>
+                <v-icon size="22">mdi-plus</v-icon>
+              </div>
+            </v-list-item>
+            <v-list-item @click="resetSavedProfiles">
+              <div class="flex w-full justify-between mt-[6px]">
+                <v-list-item-title>Reset saved profiles</v-list-item-title>
+                <v-icon size="20" class="mt-[2px]">mdi-reload</v-icon>
+              </div>
+            </v-list-item>
+          </v-list>
+        </v-menu>
       </div>
     </div>
-    <div class="w-full h-px my-2 sm bg-slate-800/40" />
-    <div ref="viewsContainer" class="flex flex-col items-center justify-between w-full shrink overflow-y-clip h-[30%]">
-      <p class="mb-3 text-lg font-semibold select-none">Views</p>
-      <div class="w-full px-2 overflow-x-hidden overflow-y-auto">
-        <TransitionGroup name="fade-and-suffle">
+    <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"
+    >
+      <v-icon
+        size="sm"
+        :icon="isPanelExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+        class="ml-1 mr-[6px] 2xl:text-[26px] xl:text-[24px] text-[20px]"
+        @click="toggleViewsPanel"
+      />
+      <v-divider vertical />
+      <v-btn-toggle theme="dark" tile divided>
+        <v-btn
+          v-for="view in store.currentProfile.views"
+          :key="view.hash"
+          size="sm"
+          :class="view === store.currentView ? 'bg-[#3B78A8]' : 'bg-transparent'"
+          class="wrapclass 2xl:w-[129px] xl:w-[108px] lg:w-[84px] 2xl:h-[85px] xl:h-[75px] lg:h-[65px] 2xl:text-[16px] xl:text-[14px] text-[11px] text-none overflow-x-hidden"
+          @click="store.selectView(view)"
+        >
+          <span class="wrapclass 2xl:max-w-[119px] xl:max-w-[100px] lg:max-w-[80px]">{{ view.name }}</span>
+        </v-btn>
+      </v-btn-toggle>
+      <v-badge
+        v-if="store.currentProfile.views.length > 3"
+        :content="`+${store.currentProfile.views.length - 3}`"
+        color="#ad1f83"
+        overlap
+        class="absolute right-4 top-[9px] mr-0 elevation-4 cursor-pointer elevation-3 scale-[85%]"
+        @click="toggleViewsPanel"
+      />
+    </div>
+    <div
+      :key="forceUpdate"
+      ref="content"
+      class="bg-[#041e2e99]"
+      :class="['content-expand-collapse', { expanding: isPanelExpanded, collapsing: !isPanelExpanded }]"
+    >
+      <div class="h-full pt-1 bg-[#041e2e99]">
+        <div class="flex justify-center w-full bg-[#CBCBCB09]">
+          <div class="flex w-[350px] justify-center py-[2px]">
+            <p class="overflow-hidden text-[12px] text-ellipsis whitespace-nowrap opacity-60">
+              Views on {{ store.currentProfile.name }}
+            </p>
+          </div>
+        </div>
+        <div
+          v-for="view in store.currentProfile.views"
+          :key="view.hash"
+          class="flex items-center justify-center border-[1px] border-[#FFFFFF24] rounded-md mx-2 my-[3px] 2xl:p-1 pl-1 pr-[2px] py-[2px] cursor-pointer"
+          :class="view === store.currentView ? 'bg-[#CBCBCB64]' : 'bg-[#CBCBCB2A]'"
+          @click="store.selectView(view)"
+        >
+          <p class="overflow-hidden text-sm text-ellipsis ml-3 whitespace-nowrap">{{ view.name }}</p>
+          <div class="grow" />
           <div
-            v-for="view in store.currentProfile.views"
-            :key="view.hash"
-            class="flex items-center justify-between w-full my-1"
-          >
-            <Button
-              class="flex items-center justify-center w-full h-8 overflow-auto"
-              :class="{ 'selected-view': view === store.currentView }"
-              @click="store.selectView(view)"
-            >
-              <p class="overflow-hidden text-sm text-ellipsis ml-7 whitespace-nowrap">{{ view.name }}</p>
-              <div class="grow" />
-              <div
-                class="icon-btn mdi mdi-eye"
-                :class="{ 'mdi-eye-closed': !view.visible }"
-                @click.stop="toggleViewVisibility(view)"
-              />
-              <div class="icon-btn mdi mdi-download" @click.stop="store.exportView(view)" />
-              <div class="icon-btn mdi mdi-content-copy" @click.stop="store.duplicateView(view)" />
-              <div class="icon-btn mdi mdi-cog" @click.stop="renameView(view)" />
-              <div class="icon-btn mdi mdi-trash-can" @click.stop="store.deleteView(view)" />
-            </Button>
+            class="icon-btn mdi mdi-eye"
+            :class="{ 'mdi-eye-closed': !view.visible }"
+            @click.stop="toggleViewVisibility(view)"
+          />
+          <div class="icon-btn mdi mdi-download" @click.stop="store.exportView(view)" />
+          <div class="icon-btn mdi mdi-content-copy" @click.stop="store.duplicateView(view)" />
+          <div class="icon-btn mdi mdi-cog" @click.stop="renameView(view)" />
+          <div class="icon-btn mdi mdi-trash-can" @click.stop="store.deleteView(view)" />
+        </div>
+        <div ref="managementContainer" class="flex items-end justify-end w-full gap-x-2 mt-2 mb-2 -ml-3 opacity-80">
+          <v-icon size="18" icon="mdi-plus-circle" @click="addNewView" />
+          <div>
+            <label class="flex items-center justify-center w-full h-full cursor-pointer">
+              <input type="file" accept="application/json" hidden @change="(e: Event) => store.importView(e)" />
+              <v-icon size="18" icon="mdi-upload" class />
+            </label>
           </div>
-        </TransitionGroup>
+        </div>
       </div>
-      <div class="grow" />
     </div>
-    <div ref="managementContainer" class="flex items-center justify-center w-full px-2 mt-2">
-      <div class="icon-btn mdi mdi-plus" @click="addNewView" />
-      <div class="icon-btn">
-        <label class="flex items-center justify-center w-full h-full cursor-pointer">
-          <input type="file" accept="application/json" hidden @change="(e: Event) => store.importView(e)" />
-          <span class="mdi mdi-upload" />
-        </label>
+    <v-divider />
+    <div id="view-widgets-list" class="overflow-y-auto max-h-[88vh]">
+      <div class="flex justify-center w-full bg-[#CBCBCB09]">
+        <div class="flex 2xl:max-w-[400px] xl:max-w-[330px] lg:max-w-[260px] justify-center 2xl:py-2 py-1 text-md">
+          <p class="overflow-hidden 2xl:text-sm text-xs text-ellipsis whitespace-nowrap opacity-60">
+            Widgets on {{ store.currentView.name }}
+          </p>
+        </div>
       </div>
-      <div />
-    </div>
-    <div class="w-full h-px my-2 sm bg-slate-800/40" />
-    <div
-      v-show="widgetMode === WidgetMode.RegularWidgets"
-      class="flex flex-col items-center justify-between w-full overflow-y-clip h-[35%]"
-    >
-      <p class="text-lg font-semibold select-none">
-        <span class="mr-1 text-slate-400 mdi mdi-swap-vertical" />
-        Current widgets
-      </p>
-      <div class="grow" />
-      <VueDraggable
-        v-model="store.currentView.widgets"
-        class="flex flex-col items-center w-full px-2 overflow-x-hidden overflow-y-auto grow"
-        :animation="150"
-        group="regularWidgetsGroup"
+      <ExpansiblePanel
+        :key="forceUpdate"
+        :compact="interfaceStore.isLg || interfaceStore.isOnSmallScreen ? true : false"
+        invert-chevron
+        hover-effect
+        elevation-effect
+        no-bottom-divider
+        :is-expanded="store.currentView.widgets.length > 0"
       >
-        <TransitionGroup name="fade">
+        <template #title>
           <div
-            v-for="widget in store.currentView.widgets"
-            :key="widget.hash"
-            class="flex items-center justify-between w-full my-1"
+            class="flex w-[90%] justify-between items-center 2xl:text-[18px] xl:text-[16px] lg:text-[14px] -mb-3 font-normal ml-2"
           >
-            <Button
-              class="flex items-center justify-center w-full h-8 pl-3 overflow-auto cursor-grab active:cursor-grabbing"
-              :class="{ '!bg-slate-400': store.widgetManagerVars(widget.hash).highlighted }"
-              @mouseover="store.widgetManagerVars(widget.hash).highlighted = true"
-              @mouseleave="store.widgetManagerVars(widget.hash).highlighted = false"
-            >
-              <span class="mr-3 text-base text-slate-700">⠿</span>
-              <p class="overflow-hidden text-sm text-ellipsis whitespace-nowrap">{{ widget.name }}</p>
-              <div class="grow" />
-              <div
-                class="icon-btn mdi mdi-fullscreen"
-                :class="{ 'mdi-fullscreen-exit': store.isFullScreen(widget) }"
-                @click="store.toggleFullScreen(widget)"
-              />
-              <div class="icon-btn mdi mdi-cog" @click="store.widgetManagerVars(widget.hash).configMenuOpen = true" />
-              <div class="icon-btn mdi mdi-trash-can" @click="store.deleteWidget(widget)" />
-            </Button>
+            Main view area
+            <v-badge
+              :content="store.currentView.widgets.length"
+              color="#3B78A8"
+              rounded="md"
+              class="ml-10 2xl:mb-1 opacity-90"
+              :class="interfaceStore.isLg || interfaceStore.isOnSmallScreen ? 'scale-75' : ''"
+            />
           </div>
-        </TransitionGroup>
-      </VueDraggable>
-      <div class="grow" />
-    </div>
-    <div
-      v-show="widgetMode === WidgetMode.MiniWidgets"
-      class="flex flex-col items-center justify-between w-full overflow-y-auto h-[35%]"
-    >
-      <p class="text-lg font-semibold select-none">Current mini-widgets</p>
-      <div class="grow" />
-      <div
-        v-for="miniWidgetContainer in store.miniWidgetContainersInCurrentView"
-        :key="miniWidgetContainer.name"
-        class="w-full"
+        </template>
+        <template #content>
+          <VueDraggable
+            v-model="store.currentView.widgets"
+            class="flex flex-col items-center w-full 2xl:px-2 px-0 overflow-x-hidden overflow-y-auto grow my-1"
+            :animation="150"
+            group="regularWidgetsGroup"
+          >
+            <TransitionGroup name="fade">
+              <div
+                v-for="widget in store.currentView.widgets"
+                :key="widget.hash"
+                class="flex items-center justify-between w-full"
+              >
+                <div
+                  class="flex items-center justify-center w-full border-[1px] border-[#FFFFFF15] rounded-md 2xl:mx-2 xl:mx-1 my-[3px] 2xl:p-1 pl-1 pr-[2px] py-[2px] cursor-pointer"
+                  :class="store.widgetManagerVars(widget.hash).highlighted ? 'bg-[#CBCBCB64]' : 'bg-[#CBCBCB2A]'"
+                  @mouseover="store.widgetManagerVars(widget.hash).highlighted = true"
+                  @mouseleave="store.widgetManagerVars(widget.hash).highlighted = false"
+                >
+                  <v-icon
+                    icon="mdi-drag"
+                    class="cursor-grab mr-1 -ml-[1px] opacity-40 2xl:text-[24px] xl:text-[22px] text-[18px]"
+                  />
+                  <v-divider vertical />
+                  <p class="ml-3 overflow-hidden 2xl:text-sm text-xs text-ellipsis whitespace-nowrap">
+                    {{ widget.name }}
+                  </p>
+                  <div class="grow" />
+                  <v-divider vertical class="opacity-10 mr-[2px]" />
+                  <div
+                    class="icon-btn mdi mdi-fullscreen"
+                    :class="{ 'mdi-fullscreen-exit': store.isFullScreen(widget) }"
+                    @click="store.toggleFullScreen(widget)"
+                  />
+                  <div
+                    class="icon-btn mdi mdi-cog"
+                    @click="store.widgetManagerVars(widget.hash).configMenuOpen = true"
+                  />
+                  <div class="icon-btn mdi mdi-trash-can" @click="store.deleteWidget(widget)" />
+                </div>
+              </div>
+            </TransitionGroup>
+          </VueDraggable>
+        </template>
+      </ExpansiblePanel>
+      <ExpansiblePanel
+        :compact="interfaceStore.isLg || interfaceStore.isOnSmallScreen ? true : false"
+        invert-chevron
+        hover-effect
+        elevation-effect
+        no-bottom-divider
+        :is-expanded="store.miniWidgetContainersInCurrentView.length > 0"
       >
-        <span class="w-full px-1 text-sm text-left select-none text-slate-400">{{ miniWidgetContainer.name }}</span>
-        <div class="flex flex-col items-center w-full px-3 overflow-x-hidden grow">
-          <TransitionGroup name="fade">
-            <div v-if="miniWidgetContainer.widgets.isEmpty()" class="flex items-center justify-between w-full my-1">
-              ---
+        <template #title>
+          <div
+            class="flex w-[90%] justify-between items-center 2xl:text-[18px] xl:text-[16px] lg:text-[14px] -mb-3 font-normal ml-2"
+          >
+            Top Bar
+            <v-badge
+              :content="
+                store.miniWidgetContainersInCurrentView.reduce((count, container) => {
+                  return count + (container.name.startsWith('Top') ? container.widgets.length : 0)
+                }, 0)
+              "
+              color="#3B78A8"
+              rounded="md"
+              class="ml-10 2xl:mb-1 opacity-90"
+              :class="interfaceStore.isLg || interfaceStore.isOnSmallScreen ? 'scale-75' : ''"
+            />
+          </div>
+        </template>
+        <template #content>
+          <div
+            v-for="miniWidgetContainer in store.miniWidgetContainersInCurrentView"
+            :key="miniWidgetContainer.name"
+            class="w-full mb-1"
+          >
+            <div v-if="miniWidgetContainer.name.startsWith('Top')">
+              <span class="w-full px-1 2xl:text-sm text-xs text-left select-none text-slate-400">{{
+                miniWidgetContainer.name
+              }}</span>
+              <div class="flex flex-col items-center w-full 2xl:px-3 overflow-x-hidden grow">
+                <TransitionGroup name="fade">
+                  <div v-if="miniWidgetContainer.widgets.isEmpty()" class="flex items-center justify-between w-full">
+                    ---
+                  </div>
+                  <div
+                    v-for="widget in miniWidgetContainer.widgets"
+                    :key="widget.hash"
+                    class="flex items-center justify-center w-full border-[1px] border-[#FFFFFF15] rounded-md 2xl:mx-2 my-[3px] 2xl:p-1 pl-1 pr-[2px] py-[2px] cursor-pointer"
+                    :class="store.miniWidgetManagerVars(widget.hash).highlighted ? 'bg-[#CBCBCB64]' : 'bg-[#CBCBCB2A]'"
+                    @mouseover="store.miniWidgetManagerVars(widget.hash).highlighted = true"
+                    @mouseleave="store.miniWidgetManagerVars(widget.hash).highlighted = false"
+                  >
+                    <div class="flex items-center justify-start w-full overflow-auto">
+                      <p class="overflow-hidden select-none text-ellipsis whitespace-nowrap 2xl:text-sm text-xs ml-3">
+                        {{ widget.name || widget.component }}
+                      </p>
+                    </div>
+                    <v-divider vertical class="opacity-10 mr-1" />
+                    <div
+                      class="icon-btn mdi mdi-cog"
+                      @click="store.miniWidgetManagerVars(widget.hash).configMenuOpen = true"
+                    />
+                    <div class="icon-btn mdi mdi-trash-can" @click="store.deleteMiniWidget(widget)" />
+                  </div>
+                </TransitionGroup>
+              </div>
             </div>
-            <div
-              v-for="widget in miniWidgetContainer.widgets"
-              :key="widget.hash"
-              class="flex items-center justify-between w-full h-10 px-2 py-1 my-1 rounded-md"
-              :class="{ 'bg-slate-400': store.miniWidgetManagerVars(widget.hash).highlighted }"
-              @mouseover="store.miniWidgetManagerVars(widget.hash).highlighted = true"
-              @mouseleave="store.miniWidgetManagerVars(widget.hash).highlighted = false"
-            >
-              <div class="flex items-center justify-start w-full overflow-auto">
-                <p class="overflow-hidden select-none text-ellipsis whitespace-nowrap">
-                  {{ widget.name || widget.component }}
-                </p>
+          </div>
+        </template>
+      </ExpansiblePanel>
+      <ExpansiblePanel
+        :compact="interfaceStore.isLg || interfaceStore.isOnSmallScreen ? true : false"
+        invert-chevron
+        hover-effect
+        elevation-effect
+        :is-expanded="store.miniWidgetContainersInCurrentView.length > 0"
+      >
+        <template #title>
+          <div
+            class="flex w-[90%] justify-between items-center 2xl:text-[18px] xl:text-[16px] lg:text-[14px] -mb-3 font-normal ml-2"
+          >
+            Bottom Bar
+            <v-badge
+              :content="
+                store.miniWidgetContainersInCurrentView.reduce((count, container) => {
+                  return count + (container.name.startsWith('Bottom') ? container.widgets.length : 0)
+                }, 0)
+              "
+              color="#3B78A8"
+              rounded="md"
+              class="ml-10 2xl:mb-1 opacity-90"
+              :class="interfaceStore.isLg || interfaceStore.isOnSmallScreen ? 'scale-75' : ''"
+            />
+          </div>
+        </template>
+        <template #content>
+          <div
+            v-for="miniWidgetContainer in store.miniWidgetContainersInCurrentView"
+            :key="miniWidgetContainer.name"
+            class="w-full overflow-y-auto mb-1"
+          >
+            <div v-if="miniWidgetContainer.name.startsWith('Bottom')">
+              <span class="w-full px-1 2xl:text-sm text-xs text-left select-none text-slate-400">{{
+                miniWidgetContainer.name
+              }}</span>
+              <div class="flex flex-col items-center w-full 2xl:px-3 overflow-x-hidden grow">
+                <TransitionGroup name="fade">
+                  <div
+                    v-if="miniWidgetContainer.widgets.isEmpty()"
+                    class="flex items-center justify-between w-full my-1"
+                  >
+                    ---
+                  </div>
+                  <div
+                    v-for="widget in miniWidgetContainer.widgets"
+                    :key="widget.hash"
+                    class="flex items-center justify-center w-full border-[1px] border-[#FFFFFF15] rounded-md mx-2 my-[3px] 2xl:p-1 pl-1 pr-[2px] py-[2px] cursor-pointer"
+                    :class="store.miniWidgetManagerVars(widget.hash).highlighted ? 'bg-[#CBCBCB64]' : 'bg-[#CBCBCB2A]'"
+                    @mouseover="store.miniWidgetManagerVars(widget.hash).highlighted = true"
+                    @mouseleave="store.miniWidgetManagerVars(widget.hash).highlighted = false"
+                  >
+                    <div class="flex items-center justify-start w-full overflow-auto">
+                      <p class="overflow-hidden select-none text-ellipsis whitespace-nowrap 2xl:text-sm text-xs ml-3">
+                        {{ widget.name || widget.component }}
+                      </p>
+                    </div>
+                    <v-divider vertical class="opacity-10 mr-1" />
+                    <div
+                      class="icon-btn mdi mdi-cog"
+                      @click="store.miniWidgetManagerVars(widget.hash).configMenuOpen = true"
+                    />
+                    <div class="icon-btn mdi mdi-trash-can" @click="store.deleteMiniWidget(widget)" />
+                  </div>
+                </TransitionGroup>
               </div>
-              <div
-                class="icon-btn mdi mdi-cog"
-                @click="store.miniWidgetManagerVars(widget.hash).configMenuOpen = true"
-              />
-              <div class="icon-btn mdi mdi-trash-can" @click="store.deleteMiniWidget(widget)" />
             </div>
-          </TransitionGroup>
-        </div>
-      </div>
-      <div class="grow" />
+          </div>
+        </template>
+      </ExpansiblePanel>
     </div>
-    <div class="w-full h-px mt-4 bg-slate-800/40" />
   </div>
-  <div
-    class="flex flex-col items-center justify-center px-3 text-white edit-panel middle-panel"
-    :class="{ active: editMode }"
-  >
-    <Button
-      class="flex items-center justify-center w-full h-8 my-1 hover:bg-slate-500"
-      :class="{ 'bg-slate-700': widgetMode !== WidgetMode.RegularWidgets }"
-      @click="widgetMode = WidgetMode.RegularWidgets"
-    >
-      <p class="overflow-hidden text-ellipsis whitespace-nowrap">Regular widgets</p>
-    </Button>
-    <Button
-      class="flex items-center justify-center w-full h-8 my-1 hover:bg-slate-500"
-      :class="{ 'bg-slate-700': widgetMode !== WidgetMode.MiniWidgets }"
-      @click="widgetMode = WidgetMode.MiniWidgets"
+  <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-7 xl:py-4 lg:py-1"
     >
-      <p class="overflow-hidden text-ellipsis whitespace-nowrap">Mini widgets</p>
-    </Button>
-  </div>
-  <div class="flex items-center justify-between py-2 edit-panel bottom-panel" :class="{ active: editMode }">
-    <div class="w-px h-full mr-2 bg-slate-800/40" />
+      <div>
+        <p class="2xl:text-md text-xs ml-1">Widget type:</p>
+        <v-select
+          v-model="widgetMode"
+          theme="dark"
+          variant="filled"
+          density="compact"
+          :items="['Regular widgets', 'Mini widgets']"
+          class="bg-[#27384255] mt-1 2xl:scale-100 scale-[80%]"
+          hide-details
+          @change="widgetMode = $event"
+        />
+      </div>
+      <div class="flex flex-col items-center justify-start w-full mb-3 pl-2">
+        <div v-show="widgetMode === 'Regular widgets'" class="w-[90%] 2xl:text-[16px] text-xs text-center">
+          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 to add
+        </div>
+        <div v-show="widgetMode === 'Mini widgets'" class="w-[90%] 2xl:text-[16px] text-xs text-center">
+          To be placed on the top and bottom bars
+        </div>
+        <div
+          v-show="widgetMode === 'Mini widgets'"
+          class="2xl:text-md text-sm mt-3 2xl:px-3 px-2 bg-[#3B78A8] rounded-lg"
+        >
+          Drag in place to add
+        </div>
+      </div>
+    </div>
+    <div class="w-px h-full mr-3 bg-[#FFFFFF18]" />
     <div
-      v-show="widgetMode === WidgetMode.RegularWidgets"
+      v-show="widgetMode === 'Regular widgets'"
       ref="availableWidgetsContainer"
-      class="flex items-center justify-between w-full h-full overflow-x-auto text-white aspect-square"
+      class="flex items-center justify-between w-full h-full gap-3 overflow-x-auto text-white -mb-1"
     >
       <div
         v-for="widgetType in availableWidgetTypes"
         :key="widgetType"
-        class="flex flex-col items-center justify-center p-2 mx-3 rounded-md bg-slate-500 h-5/6 aspect-square"
+        class="flex flex-col items-center justify-between rounded-md bg-[#273842] hover:brightness-125 h-[90%] aspect-square cursor-pointer elevation-4"
+        @click="store.addWidget(widgetType, store.currentView)"
       >
-        <div
-          class="flex items-center justify-center w-8 m-2 transition-all rounded-md cursor-pointer bg-slate-700 aspect-square mdi mdi-plus hover:bg-slate-400"
-          @click="store.addWidget(widgetType, store.currentView)"
-        />
-        {{ widgetType }}
+        <v-tooltip text="Click to add" location="top" theme="light">
+          <template #activator="{ props: tooltipProps }">
+            <div />
+            <img
+              v-bind="tooltipProps"
+              :src="`../src/assets/widgets/${widgetType}.png`"
+              alt="widget-icon"
+              class="p-4 max-h-[75%] max-w-[95%]"
+            />
+            <div
+              class="flex items-center justify-center w-full p-1 transition-all cursor-grab 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'
+              }}</span>
+            </div>
+          </template>
+        </v-tooltip>
       </div>
     </div>
     <div
-      v-show="widgetMode === WidgetMode.MiniWidgets"
+      v-show="widgetMode === 'Mini widgets'"
       ref="availableMiniWidgetsContainer"
-      class="flex items-center w-full h-full gap-2 overflow-auto"
+      class="flex items-center w-full h-full gap-3 overflow-auto"
     >
       <div
         v-for="miniWidget in availableMiniWidgetTypes"
         :key="miniWidget.hash"
-        class="flex flex-col items-center justify-center p-2 mx-3 transition-all rounded-md h-5/6 w-fit text-slate-100 cursor-grab"
-        :class="{ 'hover:bg-slate-400': !mousePressed }"
+        class="flex flex-col items-center justify-between rounded-md bg-[#273842] hover:brightness-125 h-[90%] aspect-square cursor-pointer elevation-4"
       >
+        <div />
         <div class="m-2 pointer-events-none select-none">
           <MiniWidgetInstantiator :mini-widget="miniWidget" />
         </div>
+        <div
+          class="flex items-center justify-center w-full p-1 transition-all cursor-grab bg-[#3B78A8] rounded-b-md text-white"
+        >
+          <span class="whitespace-normal text-center">{{
+            miniWidget.name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (str) => str.toUpperCase()) ||
+            'Very Generic Indicator'
+          }}</span>
+        </div>
       </div>
     </div>
   </div>
   <teleport to="body">
-    <v-dialog v-model="viewRenameDialogRevealed" width="20rem">
-      <v-card class="pa-2">
+    <GlassModal :is-visible="viewRenameDialogRevealed" class="rounded-lg">
+      <v-card class="bg-transparent text-white w-[36rem] pt-6 px-4 pb-2">
         <v-card-text>
-          <v-text-field v-model="newViewName" counter="25" label="New view name" />
-          <v-switch
-            v-model="store.currentView.showBottomBarOnBoot"
-            label="Show bottom bar on boot"
-            class="m-2 text-slate-800"
-          />
+          <p>New view name</p>
+          <v-text-field v-model="newViewName" counter="25" variant="filled" />
+          <v-switch v-model="store.currentView.showBottomBarOnBoot" label="Show bottom bar on boot" class="mt-2 mx-2" />
         </v-card-text>
-        <v-card-actions class="flex justify-end">
-          <v-btn @click="viewRenameDialog.confirm">Save</v-btn>
+        <v-divider />
+        <v-card-actions class="flex justify-between pt-3">
           <v-btn @click="viewRenameDialog.cancel">Cancel</v-btn>
+          <v-btn @click="viewRenameDialog.confirm">Save</v-btn>
         </v-card-actions>
       </v-card>
-    </v-dialog>
+    </GlassModal>
   </teleport>
   <teleport to="body">
-    <v-dialog v-model="profileConfigDialogRevealed" width="36rem">
-      <v-card class="pa-2">
+    <GlassModal :is-visible="profileConfigDialogRevealed" class="rounded-lg">
+      <v-card class="bg-transparent text-white w-[36rem] pt-6 px-4 pb-2">
         <v-card-text>
-          <v-text-field v-model="newProfileName" counter="25" label="New profile name" />
-          <div class="flex flex-col items-center w-full my-2">
-            <v-combobox
-              v-model="vehicleTypesAssignedToCurrentProfile"
-              :items="availableVehicleTypes"
-              label="Vehicle types that use this profile by default:"
-              chips
-              multiple
-              variant="outlined"
-              class="w-10/12 m-4"
-            />
-          </div>
+          <p>New profile name</p>
+          <v-text-field v-model="newProfileName" counter="25" variant="filled" density="compact" />
+          <p>Vehicle types that use this profile by default:</p>
+          <v-combobox
+            v-model="vehicleTypesAssignedToCurrentProfile"
+            :items="availableVehicleTypes"
+            chips
+            density="compact"
+            multiple
+            theme="dark"
+            variant="filled"
+            class="w-3/4"
+          />
         </v-card-text>
-        <v-card-actions class="flex justify-end">
-          <v-btn @click="profileConfigDialog.confirm">Save</v-btn>
+        <v-divider />
+        <v-card-actions class="flex justify-between pt-3">
           <v-btn @click="profileConfigDialog.cancel">Cancel</v-btn>
+          <v-btn @click="profileConfigDialog.confirm">Save</v-btn>
         </v-card-actions>
       </v-card>
-    </v-dialog>
+    </GlassModal>
   </teleport>
   <teleport to="body">
     <v-dialog v-model="editMenuDialogRevealed" width="20rem">
@@ -303,7 +578,7 @@
 </template>
 
 <script setup lang="ts">
-import { useConfirmDialog, useMousePressed } from '@vueuse/core'
+import { useConfirmDialog } from '@vueuse/core'
 import Swal from 'sweetalert2'
 import { v4 as uuid } from 'uuid'
 import { computed, onMounted, ref, toRefs, watch } from 'vue'
@@ -311,20 +586,45 @@ import { nextTick } from 'vue'
 import { type UseDraggableOptions, useDraggable, VueDraggable } from 'vue-draggable-plus'
 
 import { defaultMiniWidgetManagerVars } from '@/assets/defaults'
+import BoatThumb from '@/assets/vehicles/BlueBoat_thumb.png'
+import BlueRoboticsLogo from '@/assets/vehicles/BlueRoboticsLogo.png'
+import RovThumb from '@/assets/vehicles/BlueROV_thumb.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 Button from './Button.vue'
+import ExpansiblePanel from './ExpansiblePanel.vue'
+import GlassModal from './GlassModal.vue'
 import MiniWidgetInstantiator from './MiniWidgetInstantiator.vue'
 
+const { showDialog, closeDialog } = useInteractionDialog()
+
+const interfaceStore = useAppInterfaceStore()
 const store = useWidgetManagerStore()
 const trashList = ref<Widget[]>([])
 watch(trashList, () => {
   nextTick(() => (trashList.value = []))
 })
 
+const isDialOpen = ref(false)
+
+const toggleDial = (): void => {
+  isDialOpen.value = !isDialOpen.value
+}
+
+const forceUpdate = ref(0)
+
+watch(
+  () => store.currentView.widgets,
+  () => {
+    forceUpdate.value++
+  },
+  { deep: true }
+)
+
 const props = defineProps<{
   /**
    * Whether or not the interface is in edit mode
@@ -347,6 +647,72 @@ const availableMiniWidgetTypes = computed(() =>
   }))
 )
 
+const confirmDelete = async (): Promise<void> => {
+  showDialog({
+    maxWidth: '500px',
+    message: 'Permanently delete profile?',
+    actions: [
+      {
+        text: 'cancel',
+        action: () => closeDialog(),
+      },
+      {
+        text: 'delete',
+        action: () => {
+          store.deleteProfile(store.currentProfile)
+          closeDialog()
+        },
+      },
+    ],
+    variant: 'warning',
+  }).then((result) => {
+    if (result.isConfirmed) store.deleteProfile(store.currentProfile)
+  })
+}
+
+const pickVehicleImage = (profileName: string): string => {
+  const name = profileName.toLowerCase()
+  if (name.includes('rov')) return RovThumb
+  if (name.includes('boat')) return BoatThumb
+  return BlueRoboticsLogo
+}
+
+const currentImage = ref('')
+
+watch(
+  () => store.currentProfile.name,
+  (newName) => {
+    currentImage.value = pickVehicleImage(newName)
+  },
+  { immediate: true }
+)
+
+const isPanelExpanded = ref(false)
+const toggleViewsPanel = (): void => {
+  isPanelExpanded.value = !isPanelExpanded.value
+}
+
+const content = ref<HTMLElement | null>(null)
+
+watch(isPanelExpanded, (newValue) => {
+  if (content.value) {
+    if (newValue) {
+      content.value.style.maxHeight = content.value.scrollHeight + 'px'
+    } else {
+      content.value.style.maxHeight = content.value.scrollHeight + 'px'
+      setTimeout(() => {
+        content.value!.style.maxHeight = '0px'
+      }, 0)
+    }
+  }
+})
+
+onMounted(() => {
+  if (content.value && !isPanelExpanded.value) {
+    content.value.style.maxHeight = '0px'
+  }
+})
+
 const widgetAddMenuGroupOptions = {
   name: 'generalGroup',
   pull: 'clone',
@@ -378,8 +744,11 @@ profileConfigDialog.onConfirm(() => {
 })
 
 const addNewView = (): void => {
-  store.addView()
-  renameView(store.currentView)
+  if (!viewRenameDialogRevealed.value) {
+    store.addView()
+    forceUpdate.value++
+    renameView(store.currentView)
+  }
 }
 
 const addNewProfile = (): void => {
@@ -449,15 +818,7 @@ onMounted(() => {
   })
 })
 
-// eslint-disable-next-line jsdoc/require-jsdoc, no-redeclare
-enum WidgetMode {
-  RegularWidgets,
-  MiniWidgets,
-}
-
-const widgetMode = ref(WidgetMode.RegularWidgets)
-
-const { pressed: mousePressed } = useMousePressed()
+const widgetMode = ref('Regular widgets' || 'Mini widgets')
 
 const availableVehicleTypes = computed(() => Object.keys(MavType))
 
@@ -489,13 +850,12 @@ const vehicleTypesAssignedToCurrentProfile = computed({
   transition: all 0.2s;
   position: absolute;
   z-index: 60;
-  background-color: rgb(71 85 105);
+  background-color: #041e2e;
 }
 .left-panel {
   top: 0%;
-  height: 80%;
-  width: 20%;
-  left: -20%;
+  width: 22%;
+  left: -22%;
 }
 .left-panel.active {
   left: 0%;
@@ -504,7 +864,7 @@ const vehicleTypesAssignedToCurrentProfile = computed({
   bottom: -20%;
   left: -20%;
   height: 20%;
-  width: 20%;
+  width: 22%;
 }
 .middle-panel.active {
   bottom: 0%;
@@ -512,9 +872,9 @@ const vehicleTypesAssignedToCurrentProfile = computed({
 }
 .bottom-panel {
   right: 0%;
-  bottom: -20%;
-  height: 20%;
-  width: 80%;
+  bottom: -22%;
+  height: 22%;
+  width: 78%;
 }
 .bottom-panel.active {
   bottom: 0%;
@@ -555,13 +915,37 @@ const vehicleTypesAssignedToCurrentProfile = computed({
   transition: all;
   border-radius: 0.125rem;
   cursor: pointer;
-  @apply bg-slate-700;
+  opacity: 0.8;
 }
-.icon-btn:hover {
-  @apply bg-slate-500;
+.icon-bt {
+  opacity: 1;
 }
 
 .selected-view {
   @apply bg-slate-400;
 }
+
+.content-expand-collapse {
+  width: 100%;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+.content-expand-collapse.expanding {
+  max-height: 10000px; /* Set a large enough value to cover the content */
+}
+
+.content-expand-collapse.collapsing {
+  max-height: 0;
+}
+
+.linear-gradient {
+  background: linear-gradient(90deg, rgba(39, 56, 66, 0) 0%, rgba(39, 56, 66, 1) 57%, rgba(39, 56, 66, 1) 100%);
+}
+
+.wrapclass {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/src/components/ExpansiblePanel.vue b/src/components/ExpansiblePanel.vue
index e56d8d7e8..118ef8b45 100644
--- a/src/components/ExpansiblePanel.vue
+++ b/src/components/ExpansiblePanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="text-white w-full">
-    <div class="flex flex-col align-start">
+    <div class="flex flex-col align-start" :class="isElevationEffect && showElevationEffect ? 'elevation-5' : ''">
       <v-divider v-if="!noTopDivider" centered class="opacity-10 border-[#fafafa] w-full" />
       <div
         :class="[
@@ -10,17 +10,21 @@
         @click="togglePanel"
       >
         <div
-          class="flex flex-row align-center"
+          class="flex flex-row w-full align-center"
           :class="isCompact ? 'gap-x-[1vw] py-[0.8vh]' : 'gap-x-[3vw] py-[1.5vh]'"
         >
-          <div>
-            <div class="flex flex-row whitespace-nowrap">
+          <div class="flex flex-col w-full">
+            <div
+              class="flex flex-row whitespace-nowrap"
+              :class="isChevronInverted ? 'justify-between w-full' : 'justify-start'"
+            >
               <v-icon
+                v-if="!isChevronInverted"
                 :size="isCompact ? 20 : 24"
                 :icon="isPanelExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
                 :class="interfaceStore.isOnSmallScreen ? '-mt-[2px] mr-[3px]' : 'mt-[2px] mr-[2px]'"
               />
-              <div class="flex flex-col">
+              <div class="flex w-full flex-col">
                 <div
                   class="font-semibold"
                   :class="interfaceStore.isOnSmallScreen ? `text-[${textSize - 4}px]` : `text-[${textSize}px]`"
@@ -28,6 +32,12 @@
                   <slot name="title" />
                 </div>
               </div>
+              <v-icon
+                v-if="isChevronInverted"
+                :size="isCompact ? 20 : 24"
+                :icon="isPanelExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+                :class="interfaceStore.isOnSmallScreen ? '-mt-[2px] mr-[3px]' : 'mt-[2px] mr-[2px]'"
+              />
             </div>
             <div
               class="font-normal"
@@ -37,7 +47,7 @@
             </div>
           </div>
         </div>
-        <div class="flex w-full justify-between ml-4">
+        <div class="flex justify-between ml-4">
           <div v-if="hasInfoSlot" class="flex items-center w-[10%]">
             <v-btn class="ml-auto rounded-full" size="small" color="transparent" elevation="0" @click.stop="toggleInfo">
               <v-icon :size="interfaceStore.isOnSmallScreen ? 15 : 18" color="white" icon="mdi-information-outline" />
@@ -112,15 +122,15 @@ const interfaceStore = useAppInterfaceStore()
 
 const props = defineProps<{
   /**
-   *
+   * Removes the top divider.
    */
   noTopDivider?: boolean
   /**
-   *
+   * Removes the bottom divider.
    */
   noBottomDivider?: boolean
   /**
-   *
+   * Whether the panel is expanded.
    */
   isExpanded?: boolean
   /**
@@ -139,6 +149,14 @@ const props = defineProps<{
    * Disable hover effect on the panel header.
    */
   hoverEffect?: boolean
+  /**
+   * Invert horizontal position of the chevron icon.
+   */
+  invertChevron?: boolean
+  /**
+   * Elevation effect on the panel header.
+   */
+  elevationEffect?: boolean
 }>()
 
 const slots = useSlots()
@@ -152,14 +170,25 @@ const isMarkExpanded = ref(props.markExpanded ?? false)
 const isCompact = ref(props.compact ?? false)
 const isDarkenContent = ref(props.darkenContent ?? false)
 const isHoverEffect = ref(props.hoverEffect ?? false)
+const isChevronInverted = ref(props.invertChevron ?? false)
+const isElevationEffect = ref(props.elevationEffect ?? false)
 
 const content = ref<HTMLElement | null>(null)
 const infoContent = ref<HTMLElement | null>(null)
 const warningContent = ref<HTMLElement | null>(null)
 const animateWarning = ref(true)
+const showElevationEffect = ref(isPanelExpanded.value || false)
 
 const togglePanel = (): void => {
-  isPanelExpanded.value = !isPanelExpanded.value
+  if (isPanelExpanded.value) {
+    isPanelExpanded.value = false
+    setTimeout(() => {
+      showElevationEffect.value = false
+    }, 300)
+  } else {
+    showElevationEffect.value = true
+    isPanelExpanded.value = true
+  }
 }
 
 const textSize = computed(() => {
diff --git a/src/components/GlassModal.vue b/src/components/GlassModal.vue
index 9d89e66cc..8d29e473f 100644
--- a/src/components/GlassModal.vue
+++ b/src/components/GlassModal.vue
@@ -4,7 +4,7 @@
     ref="modal"
     class="glass-modal"
     :class="[interfaceStore.isOnSmallScreen ? 'rounded-[10px]' : 'rounded-[20px]', selectedOverflow]"
-    :style="[modalPositionStyle, glassModalStyles]"
+    :style="[modalPositionStyle, interfaceStore.globalGlassMenuStyles]"
   >
     <slot></slot>
   </div>
@@ -49,12 +49,6 @@ const selectedOverflow = ref(props.overflow || 'auto')
 const isPersistent = ref(props.isPersistent || false)
 const modal = ref<HTMLElement | null>(null)
 
-const glassModalStyles = computed(() => ({
-  backgroundColor: interfaceStore.UIGlassEffect.bgColor,
-  color: interfaceStore.UIGlassEffect.fontColor,
-  backdropFilter: `blur(${interfaceStore.UIGlassEffect.blur}px)`,
-}))
-
 const modalPositionStyle = computed(() => {
   switch (modalPosition.value) {
     case 'left':
diff --git a/src/components/InteractionDialog.vue b/src/components/InteractionDialog.vue
index 9335712c6..2f485ce72 100644
--- a/src/components/InteractionDialog.vue
+++ b/src/components/InteractionDialog.vue
@@ -1,6 +1,10 @@
 <template>
   <v-dialog v-model="internalShowDialog" :persistent="persistent" :width="maxWidth || '600px'">
-    <v-card :width="maxWidth || '600px'" class="main-dialog px-2 rounded-lg">
+    <v-card
+      :width="maxWidth || '600px'"
+      class="main-dialog px-2 rounded-lg"
+      :style="interfaceStore.globalGlassMenuStyles"
+    >
       <v-card-title>
         <div
           v-if="title"
@@ -206,10 +210,6 @@ const handleAction = (action: () => void): void => {
 
 <style scoped>
 .main-dialog {
-  color: white;
-  border: 1px solid #fafafa33;
-  background-color: #aaaaaa44;
-  backdrop-filter: blur(30px);
   box-shadow: 0px 4px 4px 0px #0000004c, 0px 8px 12px 6px #00000026;
 }
 </style>
diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
index f9483925b..da0c44c8d 100644
--- a/src/components/VideoLibraryModal.vue
+++ b/src/components/VideoLibraryModal.vue
@@ -1,7 +1,7 @@
 <template>
   <v-dialog v-model="isVisible" class="dialog">
     <div class="dialog-frame" :style="dialogStyle">
-      <div class="video-modal" :style="glassModalStyles">
+      <div class="video-modal" :style="interfaceStore.globalGlassMenuStyles">
         <div class="modal-content">
           <!-- Left Vertical Menu -->
           <div class="flex flex-col justify-between h-full px-5 py-3 align-center">
@@ -557,12 +557,6 @@ const dialogStyle = computed(() => {
   }
 })
 
-const glassModalStyles = computed(() => ({
-  backgroundColor: interfaceStore.UIGlassEffect.bgColor,
-  color: interfaceStore.UIGlassEffect.fontColor,
-  backdropFilter: `blur(${interfaceStore.UIGlassEffect.blur}px)`,
-}))
-
 const menuButtons = [
   { name: 'Videos', icon: 'mdi-video-outline', selected: true, disabled: false, tooltip: '' },
   { name: 'Pictures', icon: 'mdi-image-outline', selected: false, disabled: true, tooltip: 'Coming soon' },
diff --git a/src/components/widgets/Attitude.vue b/src/components/widgets/Attitude.vue
index 6ee71e589..cc9e34f8a 100644
--- a/src/components/widgets/Attitude.vue
+++ b/src/components/widgets/Attitude.vue
@@ -2,55 +2,65 @@
   <div class="main">
     <canvas ref="canvasRef" :width="canvasSize.width" :height="canvasSize.height" />
   </div>
-  <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" min-width="400" max-width="35%">
-    <v-card class="pa-2">
-      <v-card-title>Attitude widget config</v-card-title>
+  <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" min-width="400" max-width="45%">
+    <v-card class="pa-4" :style="interfaceStore.globalGlassMenuStyles" style="border-radius: 15px">
+      <v-card-title class="text-center">Attitude widget config</v-card-title>
       <v-card-text>
-        <v-switch
-          class="ma-1"
-          label="Show roll/pitch values"
-          :model-value="widget.options.showRollPitchValues"
-          :color="widget.options.showRollPitchValues ? 'rgb(0, 20, 80)' : undefined"
-          hide-details
-          @change="widget.options.showRollPitchValues = !widget.options.showRollPitchValues"
-        />
-        <v-switch
-          class="ma-1"
-          label="Show center aim"
-          :model-value="widget.options.showCenterAim"
-          :color="widget.options.showCenterAim ? 'rgb(0, 20, 80)' : undefined"
-          hide-details
-          @change="widget.options.showCenterAim = !widget.options.showCenterAim"
-        />
-        <v-switch
-          class="ma-1"
-          label="Show pitch lines"
-          :model-value="widget.options.showPitchLines"
-          :color="widget.options.showPitchLines ? 'rgb(0, 20, 80)' : undefined"
-          hide-details
-          @change="widget.options.showPitchLines = !widget.options.showPitchLines"
-        />
-        <span>Distance between pitch lines</span>
+        <div class="flex justify-center gap-x-8 mb-4">
+          <v-switch
+            class="ma-1"
+            label="Show roll/pitch values"
+            :model-value="widget.options.showRollPitchValues"
+            :color="widget.options.showRollPitchValues ? 'white' : undefined"
+            hide-details
+            @change="widget.options.showRollPitchValues = !widget.options.showRollPitchValues"
+          />
+          <v-switch
+            class="ma-1"
+            label="Show center aim"
+            :model-value="widget.options.showCenterAim"
+            :color="widget.options.showCenterAim ? 'white' : undefined"
+            hide-details
+            @change="widget.options.showCenterAim = !widget.options.showCenterAim"
+          />
+          <v-switch
+            class="ma-1"
+            label="Show pitch lines"
+            :model-value="widget.options.showPitchLines"
+            :color="widget.options.showPitchLines ? 'white' : undefined"
+            hide-details
+            @change="widget.options.showPitchLines = !widget.options.showPitchLines"
+          />
+        </div>
+        <span class="ml-2">Distance between pitch lines</span>
         <v-slider
           v-model="widget.options.pitchHeightFactor"
           label="Pitch lines gain factor"
+          color="white"
           :min="1"
           :max="2500"
           thumb-label
+          class="mt-3"
         />
-        <span>Center circle radius</span>
         <v-slider
           v-model="widget.options.desiredAimRadius"
           label="Center circle radius"
+          color="white"
           :min="10"
           :max="300"
           thumb-label
         />
-        <v-expansion-panels>
-          <v-expansion-panel>
+        <v-expansion-panels theme="dark">
+          <v-expansion-panel class="bg-[#FFFFFF22]">
             <v-expansion-panel-title>Color</v-expansion-panel-title>
             <v-expansion-panel-text class="pa-2">
-              <v-color-picker v-model="widget.options.hudColor" :swatches="colorSwatches" show-swatches />
+              <v-color-picker
+                v-model="widget.options.hudColor"
+                class="ma-1 bg-[#FFFFFF11] text-white"
+                :swatches="colorSwatches"
+                show-swatches
+                width="100%"
+              />
             </v-expansion-panel-text>
           </v-expansion-panel>
         </v-expansion-panels>
@@ -66,11 +76,13 @@ import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, toRefs, wa
 
 import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { constrain, degrees, radians, resetCanvas, round } from '@/libs/utils'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { Widget } from '@/types/widgets'
 
 const widgetStore = useWidgetManagerStore()
+const interfaceStore = useAppInterfaceStore()
 
 datalogger.registerUsage(DatalogVariable.roll)
 datalogger.registerUsage(DatalogVariable.pitch)
diff --git a/src/components/widgets/Compass.vue b/src/components/widgets/Compass.vue
index 7cf9702f9..4c89973cf 100644
--- a/src/components/widgets/Compass.vue
+++ b/src/components/widgets/Compass.vue
@@ -7,14 +7,13 @@
       class="rounded-[15%] bg-slate-950/70"
     ></canvas>
   </div>
-  <Dialog v-model:show="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" class="w-72">
-    <div class="w-full h-full">
-      <div class="flex flex-col items-center justify-around">
-        <div class="flex items-center justify-between w-full my-1">
-          <span class="mr-1 text-slate-100">Heading style</span>
-          <div class="w-40"><Dropdown v-model="widget.options.headingStyle" :options="headingOptions" /></div>
-        </div>
-      </div>
+  <Dialog
+    v-model:show="widgetStore.widgetManagerVars(widget.hash).configMenuOpen"
+    class="flex pa-4 bg-[#ffffff10] text-white backdrop-blur-2xl border-[1px] border-[#FAFAFA12]"
+  >
+    <div class="flex items-center">
+      <span class="mr-3 text-slate-100">Heading style</span>
+      <div class="w-40"><Dropdown v-model="widget.options.headingStyle" :options="headingOptions" /></div>
     </div>
   </Dialog>
 </template>
diff --git a/src/components/widgets/CompassHUD.vue b/src/components/widgets/CompassHUD.vue
index 7784d0c88..f7d488219 100644
--- a/src/components/widgets/CompassHUD.vue
+++ b/src/components/widgets/CompassHUD.vue
@@ -3,13 +3,13 @@
     <canvas ref="canvasRef" :width="canvasSize.width" :height="canvasSize.height" />
   </div>
   <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" min-width="400" max-width="35%">
-    <v-card class="pa-2">
-      <v-card-title>HUD Compass widget config</v-card-title>
+    <v-card class="px-8 pb-6 pt-2" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-center">HUD Compass widget config</v-card-title>
       <v-card-text>
         <v-switch
           class="ma-1"
           label="Show yaw value"
-          :color="widget.options.showYawValue ? 'rgb(0, 20, 80)' : undefined"
+          :color="widget.options.showYawValue ? 'white' : undefined"
           :model-value="widget.options.showYawValue"
           hide-details
           @change="widget.options.showYawValue = !widget.options.showYawValue"
@@ -17,16 +17,23 @@
         <v-switch
           class="ma-1"
           label="Use -180/+180 range"
-          :color="widget.options.useNegativeRange ? 'rgb(0, 20, 80)' : undefined"
+          :color="widget.options.useNegativeRange ? 'white' : undefined"
           :model-value="widget.options.useNegativeRange"
           hide-details
           @change="widget.options.useNegativeRange = !widget.options.useNegativeRange"
         />
         <v-expansion-panels>
-          <v-expansion-panel>
+          <v-expansion-panel class="bg-[#FFFFFF11] text-white mt-2">
             <v-expansion-panel-title>Color</v-expansion-panel-title>
             <v-expansion-panel-text>
-              <v-color-picker v-model="widget.options.hudColor" class="ma-2" :swatches="colorSwatches" show-swatches />
+              <v-color-picker
+                v-model="widget.options.hudColor"
+                theme="dark"
+                class="ma-1 bg-[#FFFFFF11] text-white"
+                :swatches="colorSwatches"
+                width="100%"
+                show-swatches
+              />
             </v-expansion-panel-text>
           </v-expansion-panel>
         </v-expansion-panels>
@@ -43,11 +50,13 @@ import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, toRefs, wa
 
 import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { degrees, radians, resetCanvas } from '@/libs/utils'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { Widget } from '@/types/widgets'
 
 const widgetStore = useWidgetManagerStore()
+const interfaceStore = useAppInterfaceStore()
 
 datalogger.registerUsage(DatalogVariable.heading)
 const store = useMainVehicleStore()
diff --git a/src/components/widgets/DepthHUD.vue b/src/components/widgets/DepthHUD.vue
index c1c472d80..72fa2e272 100644
--- a/src/components/widgets/DepthHUD.vue
+++ b/src/components/widgets/DepthHUD.vue
@@ -3,22 +3,28 @@
     <canvas ref="canvasRef" :width="canvasSize.width" :height="canvasSize.height" />
   </div>
   <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" min-width="400" max-width="35%">
-    <v-card class="pa-2">
+    <v-card class="pa-2" :style="interfaceStore.globalGlassMenuStyles">
       <v-card-title>Depth HUD config</v-card-title>
       <v-card-text>
         <v-switch
           class="ma-1"
           label="Show height value"
           :model-value="widget.options.showDepthValue"
-          :color="widget.options.showDepthValue ? 'rgb(0, 20, 80)' : undefined"
+          :color="widget.options.showDepthValue ? 'white' : undefined"
           hide-details
           @change="widget.options.showDepthValue = !widget.options.showDepthValue"
         />
         <v-expansion-panels>
-          <v-expansion-panel>
+          <v-expansion-panel class="bg-[#FFFFFF22] text-white">
             <v-expansion-panel-title>Color</v-expansion-panel-title>
             <v-expansion-panel-text>
-              <v-color-picker v-model="widget.options.hudColor" class="ma-2" :swatches="colorSwatches" show-swatches />
+              <v-color-picker
+                v-model="widget.options.hudColor"
+                class="ma-2 text-white bg-[#FFFFFF22]"
+                :swatches="colorSwatches"
+                width="100%"
+                show-swatches
+              />
             </v-expansion-panel-text>
           </v-expansion-panel>
         </v-expansion-panels>
@@ -35,9 +41,11 @@ import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, toRefs, wa
 
 import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { constrain, range, resetCanvas, round } from '@/libs/utils'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { Widget } from '@/types/widgets'
+const interfaceStore = useAppInterfaceStore()
 
 const widgetStore = useWidgetManagerStore()
 
diff --git a/src/components/widgets/IFrame.vue b/src/components/widgets/IFrame.vue
index d3c5b2780..7d1328a89 100644
--- a/src/components/widgets/IFrame.vue
+++ b/src/components/widgets/IFrame.vue
@@ -10,26 +10,33 @@
       />
     </teleport>
     <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" min-width="400" max-width="35%">
-      <v-card class="pa-2">
-        <v-card-title>Settings</v-card-title>
+      <v-card class="pa-2" :style="interfaceStore.globalGlassMenuStyles">
+        <v-card-title class="text-center">Settings</v-card-title>
         <v-card-text>
+          <p>Iframe Source</p>
           <div class="flex items-center justify-between">
             <v-text-field
               v-model="inputURL"
-              label="Iframe Source"
-              variant="underlined"
+              variant="filled"
               outlined
               :rules="[validateURL]"
               @keydown.enter="updateURL"
             />
-            <v-btn v-tooltip.bottom="'Set'" icon="mdi-check" class="mx-1 mb-5" rounded="lg" flat @click="updateURL" />
+            <v-btn
+              v-tooltip.bottom="'Set'"
+              icon="mdi-check"
+              class="mx-1 mb-5 bg-[#FFFFFF22]"
+              rounded="lg"
+              flat
+              @click="updateURL"
+            />
           </div>
         </v-card-text>
         <v-card-text>
-          <v-slider v-model="transparency" label="Transparency" :min="0" :max="90" />
+          <v-slider v-model="transparency" label="Transparency" color="white" :min="0" :max="90" />
         </v-card-text>
-        <v-card-actions>
-          <v-btn color="primary" @click="widgetStore.widgetManagerVars(widget.hash).configMenuOpen = false">
+        <v-card-actions class="flex justify-end">
+          <v-btn color="white" @click="widgetStore.widgetManagerVars(widget.hash).configMenuOpen = false">
             Close
           </v-btn>
         </v-card-actions>
@@ -52,8 +59,10 @@ import { computed, defineProps, onBeforeMount, ref, toRefs, watch } from 'vue'
 import { defaultBlueOsAddress } from '@/assets/defaults'
 import Snackbar from '@/components/Snackbar.vue'
 import { isValidURL } from '@/libs/utils'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { Widget } from '@/types/widgets'
+const interfaceStore = useAppInterfaceStore()
 
 const widgetStore = useWidgetManagerStore()
 
diff --git a/src/components/widgets/ImageView.vue b/src/components/widgets/ImageView.vue
index a4fd02f67..6cd4087cf 100755
--- a/src/components/widgets/ImageView.vue
+++ b/src/components/widgets/ImageView.vue
@@ -2,22 +2,27 @@
   <div class="w-full h-full">
     <img :src="src" draggable="false" />
     <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" min-width="400" max-width="35%">
-      <v-card class="pa-2">
-        <v-card-title>Image URL</v-card-title>
+      <v-card class="pa-2" :style="interfaceStore.globalGlassMenuStyles">
+        <v-card-title class="text-center">Image URL</v-card-title>
         <v-card-text>
+          <a>Image URL</a>
           <v-text-field
-            label="Image URL"
             :model-value="widget.options.src"
             outlined
             @change="widget.options.src = $event.srcElement.value"
           ></v-text-field>
           <div>
             <span class="text-xs font-semibold leading-3 text-slate-600">Fit style</span>
-            <Dropdown v-model="widget.options.fitStyle" :options="['cover', 'fill', 'contain']" class="max-w-[144px]" />
+            <Dropdown
+              v-model="widget.options.fitStyle"
+              :options="['cover', 'fill', 'contain']"
+              class="max-w-[144px]"
+              theme="dark"
+            />
           </div>
         </v-card-text>
-        <v-card-actions>
-          <v-btn color="primary" @click="widgetStore.widgetManagerVars(widget.hash).configMenuOpen = false">
+        <v-card-actions class="flex justify-end">
+          <v-btn color="white" @click="widgetStore.widgetManagerVars(widget.hash).configMenuOpen = false">
             Close
           </v-btn>
         </v-card-actions>
@@ -29,8 +34,10 @@
 <script setup lang="ts">
 import { computed, onBeforeMount, toRefs } from 'vue'
 
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { Widget } from '@/types/widgets'
+const interfaceStore = useAppInterfaceStore()
 
 import Dropdown from '../Dropdown.vue'
 
diff --git a/src/components/widgets/Map.vue b/src/components/widgets/Map.vue
index 31915acd0..d5fb9d6e6 100644
--- a/src/components/widgets/Map.vue
+++ b/src/components/widgets/Map.vue
@@ -56,14 +56,14 @@
   </div>
 
   <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" width="auto">
-    <v-card class="pa-2">
-      <v-card-title>Map widget settings</v-card-title>
+    <v-card class="pa-2" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-center">Map widget settings</v-card-title>
       <v-card-text>
         <v-switch
           v-model="widget.options.showVehiclePath"
           class="my-1"
           label="Show vehicle path"
-          :color="widget.options.showVehiclePath ? 'rgb(0, 20, 80)' : undefined"
+          :color="widget.options.showVehiclePath ? 'white' : undefined"
           hide-details
         />
       </v-card-text>
@@ -76,7 +76,7 @@
     height="10"
     absolute
     bottom
-    color="#358AC3"
+    color="white"
   />
 </template>
 
@@ -97,6 +97,7 @@ import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { canByPassCategory, EventCategory, slideToConfirm } from '@/libs/slide-to-confirm'
 import { degrees } from '@/libs/utils'
 import { TargetFollower, WhoToFollow } from '@/libs/utils-map'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
@@ -107,6 +108,7 @@ import type { Widget } from '@/types/widgets'
 // eslint-disable-next-line jsdoc/require-jsdoc
 const props = defineProps<{ widget: Widget }>()
 const widget = toRefs(props).widget
+const interfaceStore = useAppInterfaceStore()
 
 // Instantiate the necessary stores
 const vehicleStore = useMainVehicleStore()
diff --git a/src/components/widgets/URLVideoPlayer.vue b/src/components/widgets/URLVideoPlayer.vue
index 1cbf9bb63..b75b21edc 100644
--- a/src/components/widgets/URLVideoPlayer.vue
+++ b/src/components/widgets/URLVideoPlayer.vue
@@ -12,12 +12,12 @@
       <source :src="widget.options.source" />
     </video>
     <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" min-width="400" max-width="35%">
-      <v-card class="pa-2">
-        <v-card-title>Video Source</v-card-title>
+      <v-card class="pa-2" :style="interfaceStore.globalGlassMenuStyles">
+        <v-card-title class="text-center">Video Source</v-card-title>
         <v-card-text>
+          <a>Video Source</a>
           <v-text-field
-            label="Video Source"
-            variant="underlined"
+            variant="filled"
             :model-value="widget.options.source"
             outlined
             @change="widget.options.source = $event.srcElement.value"
@@ -37,8 +37,8 @@
             <v-checkbox v-model="widget.options.muted" label="Muted" hide-details />
           </div>
         </v-card-text>
-        <v-card-actions>
-          <v-btn color="primary" @click="widgetStore.widgetManagerVars(widget.hash).configMenuOpen = false">
+        <v-card-actions class="flex justify-end">
+          <v-btn color="white" @click="widgetStore.widgetManagerVars(widget.hash).configMenuOpen = false">
             Close
           </v-btn>
         </v-card-actions>
@@ -51,9 +51,12 @@
 import { onBeforeMount, ref, toRefs, watch } from 'vue'
 
 import Dropdown from '@/components/Dropdown.vue'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { Widget } from '@/types/widgets'
 
+const interfaceStore = useAppInterfaceStore()
+
 const widgetStore = useWidgetManagerStore()
 
 const props = defineProps<{
diff --git a/src/components/widgets/VideoPlayer.vue b/src/components/widgets/VideoPlayer.vue
index 852f0d0cd..9b45ef6ee 100644
--- a/src/components/widgets/VideoPlayer.vue
+++ b/src/components/widgets/VideoPlayer.vue
@@ -40,9 +40,9 @@
     </video>
   </div>
   <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" width="auto">
-    <v-card class="pa-2">
-      <v-card-title>Video widget config</v-card-title>
-      <v-card-text>
+    <v-card class="pa-4 text-white" style="border-radius: 15px" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-center">Video widget config</v-card-title>
+      <v-card-text class="flex flex-col gap-y-4">
         <v-select
           v-model="nameSelectedStream"
           label="Stream name"
@@ -72,14 +72,14 @@
           v-model="widget.options.flipHorizontally"
           class="my-1"
           label="Flip horizontally"
-          :color="widget.options.flipHorizontally ? 'rgb(0, 20, 80)' : undefined"
+          :color="widget.options.flipHorizontally ? 'white' : undefined"
           hide-details
         />
         <v-switch
           v-model="widget.options.flipVertically"
           class="my-1"
           label="Flip vertically"
-          :color="widget.options.flipVertically ? 'rgb(0, 20, 80)' : undefined"
+          :color="widget.options.flipVertically ? 'white' : undefined"
           hide-details
         />
         <div class="flex-wrap justify-center d-flex ga-5">
@@ -97,9 +97,11 @@ import Swal from 'sweetalert2'
 import { computed, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vue'
 
 import { isEqual } from '@/libs/utils'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useVideoStore } from '@/stores/video'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { Widget } from '@/types/widgets'
+const interfaceStore = useAppInterfaceStore()
 
 const videoStore = useVideoStore()
 const widgetStore = useWidgetManagerStore()
diff --git a/src/stores/appInterface.ts b/src/stores/appInterface.ts
index 5d36b1388..b423376be 100644
--- a/src/stores/appInterface.ts
+++ b/src/stores/appInterface.ts
@@ -71,6 +71,13 @@ export const useAppInterfaceStore = defineStore('responsive', {
     getUIGlassEffect: (state) => {
       state.UIGlassEffect
     },
+    globalGlassMenuStyles: (state) => ({
+      backgroundColor: state.UIGlassEffect.bgColor,
+      color: state.UIGlassEffect.fontColor,
+      backdropFilter: `blur(${state.UIGlassEffect.blur}px)`,
+      border: '1px solid rgba(255, 255, 255, 0.08)',
+      boxShadow: '0px 4px 4px 0px #0000004c, 0px 8px 12px 6px #00000026',
+    }),
   },
 })