From c58bd65f8536caa3487b28b448b647bb57f93313 Mon Sep 17 00:00:00 2001
From: Raul Victor Trombin <raulvtrombin@gmail.com>
Date: Fri, 20 Dec 2024 16:06:31 -0300
Subject: [PATCH] test

---
 ping-viewer-next-frontend/bun.lockb           |  Bin 181739 -> 190793 bytes
 ping-viewer-next-frontend/package.json        |   18 +-
 ping-viewer-next-frontend/src/App.vue         | 1100 ++++++++++++++---
 .../src/components/ConnectionManager.vue      |  345 ++++++
 .../src/components/utils/ServerConnection.vue |  215 ++--
 .../src/components/utils/VisualSettings.vue   |  530 +++++---
 .../src/components/views/ReplayView.vue       |   56 +-
 .../src/components/widgets/DataPlayer.vue     |   90 +-
 .../components/widgets/FloatingControls.vue   |  142 ++-
 .../widgets/sonar1d/Ping1DLoader.vue          |   11 +
 .../widgets/sonar1d/Ping1DSettings.vue        |   31 +-
 .../widgets/sonar360/Ping360Loader.vue        |   43 +-
 .../widgets/sonar360/Ping360Settings.vue      |   43 +-
 13 files changed, 1956 insertions(+), 668 deletions(-)
 create mode 100644 ping-viewer-next-frontend/src/components/ConnectionManager.vue

diff --git a/ping-viewer-next-frontend/bun.lockb b/ping-viewer-next-frontend/bun.lockb
index 7afa9c457aa1f40b5d255e131098ab60d07ae597..7c5491fd65730a45ca0259dba140614020620f7f 100755
GIT binary patch
delta 35693
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

delta 31520
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%0DJ!fa1Qt$psN^KD}gNl
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

diff --git a/ping-viewer-next-frontend/package.json b/ping-viewer-next-frontend/package.json
index 9e005eb1..ffb6b4a9 100644
--- a/ping-viewer-next-frontend/package.json
+++ b/ping-viewer-next-frontend/package.json
@@ -12,11 +12,11 @@
     "core-js": "^3.39.0",
     "roboto-fontface": "^0.10.0",
     "vue": "3.5.8",
-    "vuetify": "^3.7.4"
+    "vuetify": "^3.7.6"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.2",
-    "@vitejs/plugin-vue": "^5.1.5",
+    "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
     "eslint-config-standard": "^17.1.0",
@@ -25,18 +25,18 @@
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.6.0",
-    "eslint-plugin-vue": "^9.31.0",
-    "pinia": "^2.2.6",
+    "eslint-plugin-vue": "^9.32.0",
+    "pinia": "^2.3.0",
     "postcss": "^8.4.49",
     "sass": "1.77.6",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^3.4.17",
     "unplugin-auto-import": "^0.17.8",
-    "unplugin-fonts": "^1.1.1",
-    "unplugin-vue-components": "^0.27.4",
-    "unplugin-vue-router": "^0.10.8",
+    "unplugin-fonts": "^1.3.1",
+    "unplugin-vue-components": "^0.27.5",
+    "unplugin-vue-router": "^0.10.9",
     "vite": "^5.4.11",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-plugin-vuetify": "^2.0.4",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.5.0"
   }
 }
diff --git a/ping-viewer-next-frontend/src/App.vue b/ping-viewer-next-frontend/src/App.vue
index 1eb1676c..7644dd33 100644
--- a/ping-viewer-next-frontend/src/App.vue
+++ b/ping-viewer-next-frontend/src/App.vue
@@ -1,163 +1,411 @@
 <template>
   <template v-if="isWidgetRoute">
-    <v-app class="h-screen w-screen bg-transparent " :theme="theme">
+    <v-app class="h-screen w-screen bg-transparent">
       <router-view />
     </v-app>
   </template>
-
   <template v-else>
-    <v-app class="h-screen w-screen" :theme="theme">
+  <v-app>
+
+
+    <v-main class="bg-gradient-to-r from-cyan-500 to-blue-500">
       <ServerConnection v-if="!serverUrl" @serverConnected="onServerConnected" />
 
-      <template v-else>
-        <v-app-bar class="flex-none">
-          <v-menu location="bottom">
-            <template v-slot:activator="{ props }">
-              <v-btn v-bind="props" icon>
-                <v-icon>mdi-menu</v-icon>
-              </v-btn>
-            </template>
+      <div v-if="activeDevice" class="device-viewer" :class="{ 'glass disable-hover': glass }">
+        <div class="device-header" :class="{ 'glass-inner disable-hover': glass }">
+          <v-btn icon="mdi-close" variant="text" @click="activeDevice = null" />
+          <div class="device-info">
+            <span class="device-type">{{ activeDevice.device.device_type }}</span>
+            <v-chip size="small" :color="getStatusColor(activeDevice.device.status)">
+              {{ activeDevice.device.status }}
+            </v-chip>
+          </div>
+        </div>
+
+        <component :is="activeDevice.component" :device="activeDevice.device"
+          :websocketUrl="getWebSocketUrl(activeDevice.device)" v-bind="deviceSettings" class="device-content" />
+      </div>
+
+      <div v-if="isReplayActive" class="device-viewer" :class="{ 'glass disable-hover': glass }">
+        <div class="device-header" :class="{ 'glass-inner disable-hover': glass }">
+          <v-btn icon="mdi-close" variant="text" @click="closeReplay" />
+          <div class="device-info">
+            <span class="device-type">{{ replayData.deviceType }} Replay</span>
+            <v-chip size="small" color="info">
+              Replay Mode
+            </v-chip>
+          </div>
+          <div class="replay-controls" :class="{ 'glass-inner disable-hover': glass }">
+            <DataPlayer ref="dataPlayer" @update:currentFrame="handleReplayFrame"
+              @loadedData="handleReplayDataLoaded" />
+          </div>
+        </div>
 
-            <v-list>
-              <v-list-item v-for="(item, index) in menuItems" :key="index" @click="selectView(item.value)">
-                <template v-slot:prepend>
-                  <v-icon>{{ item.icon }}</v-icon>
-                </template>
-                <v-list-item-title>{{ item.text }}</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-
-          <v-app-bar-title>Ping Viewer Next</v-app-bar-title>
-
-          <v-tooltip location="bottom">
-            <template v-slot:activator="{ props }">
-              <v-icon v-bind="props" :color="yawConnectionStatus === 'Connected' ? 'success' : 'error'" class="mr-2">
-                mdi-compass
-              </v-icon>
-            </template>
-            MAVLink: {{ yawConnectionStatus }}
-          </v-tooltip>
-
-          <v-menu location="bottom end">
-            <template v-slot:activator="{ props }">
-              <v-btn v-bind="props" icon class="mr-2">
-                <v-badge :content="undownloadedRecordings.length.toString()"
-                  :model-value="undownloadedRecordings.length > 0" color="error">
-                  <v-icon>mdi-movie</v-icon>
-                </v-badge>
-              </v-btn>
-            </template>
 
-            <v-card min-width="300" class="recordings-menu">
-              <v-card-title class="d-flex align-center py-2">
-                <span class="text-h6">Recordings</span>
-                <v-spacer></v-spacer>
-                <v-btn v-if="recordings.length" density="comfortable" variant="text" @click="selectView('Replay')">
-                  Open Replay View
-                </v-btn>
-              </v-card-title>
-
-              <v-divider></v-divider>
-
-              <v-list v-if="recordings.length" class="recordings-list">
-                <v-list-item v-for="recording in recordings" :key="recording.id"
-                  :class="{ 'new-recording': !recording.downloaded }">
-                  <template v-slot:prepend>
-                    <v-icon :icon="recording.deviceType === 'Ping360' ? 'mdi-radar' : 'mdi-altimeter'"></v-icon>
-                  </template>
-
-                  <v-list-item-title class="text-truncate">
-                    {{ recording.fileName }}
-                  </v-list-item-title>
-                  <v-list-item-subtitle>
-                    {{ new Date(recording.timestamp).toLocaleString() }}
-                  </v-list-item-subtitle>
-
-                  <template v-slot:append>
-                    <div class="d-flex gap-2">
-                      <v-btn icon="mdi-play" variant="text" size="small" @click="playRecording(recording)"
-                        v-if="recording.downloaded"></v-btn>
-                      <v-btn icon="mdi-download" variant="text" size="small" @click="downloadRecording(recording)"
-                        v-if="!recording.downloaded"></v-btn>
-                    </div>
-                  </template>
-                </v-list-item>
-              </v-list>
-
-              <v-card-text v-else class="text-center py-4">
-                No recordings available
-              </v-card-text>
-            </v-card>
-          </v-menu>
-
-          <template v-slot:append>
-            <v-menu location="bottom end">
-              <template v-slot:activator="{ props }">
-                <v-btn v-bind="props" icon>
-                  <v-icon>mdi-dots-vertical</v-icon>
-                </v-btn>
-              </template>
 
-              <v-list>
-
-                <v-list-item @click="showSettings = true">
-                  <template v-slot:prepend>
-                    <v-icon>mdi-cog</v-icon>
-                  </template>
-                  <v-list-item-title>Visual Settings</v-list-item-title>
-                </v-list-item>
-
-                <v-list-item @click="toggleFullscreen">
-                  <template v-slot:prepend>
-                    <v-icon>{{ isFullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen' }}</v-icon>
-                  </template>
-                  <v-list-item-title>{{ isFullscreen ? 'Exit Fullscreen' : 'Fullscreen' }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
+        <ReplayView ref="replayViewRef" class="device-content" v-bind="deviceSettings" />
+      </div>
+
+      <div class="speed-dial-container" :class="{ 'speed-dial-open': isSpeedDialOpen, glass: glass }"
+        :style="{ '--items-count': speedDialItems.length }">
+        <v-btn class="main-trigger square-button" :class="{ 'glass-inner': glass }"
+          @click="isSpeedDialOpen = !isSpeedDialOpen" variant="text">
+          <v-icon :icon="isSpeedDialOpen ? 'mdi-menu-open' : 'mdi-menu'" :size="iconSize" :color="iconColor" />
+        </v-btn>
+
+        <transition-group name="speed-dial-items">
+          <template v-for="(item, index) in speedDialItems" :key="item.icon + index">
+            <v-btn v-show="isSpeedDialOpen" class="speed-dial-item" :class="{ 'glass-inner': glass }"
+              :style="{ '--delay': `${index * 0.05}s` }" @click="item.action && item.action()">
+              <transition name="icon-flip" mode="out-in">
+                <v-icon :key="item.icon" :icon="typeof item.icon === 'function' ? item.icon() : item.icon"
+                  :size="iconSize" :color="iconColor" />
+              </transition>
+            </v-btn>
           </template>
-        </v-app-bar>
+        </transition-group>
+
+
+      </div>
+
+      <v-card class="connection-menu-wrapper" :class="{ 'glass': glass }" v-if="isConnectionMenuOpen">
+        <ConnectionManager v-if="serverUrl" :server-url="serverUrl" :glass="glass" :is-open="isConnectionMenuOpen"
+          @update:is-open="isConnectionMenuOpen = $event" @select-device="handleDeviceSelection" />
+      </v-card>
+
+      <v-card class="connection-menu-wrapper" :class="{ 'glass': glass }" v-if="showSettings">
+        <VisualSettings :is-open="showSettings" :glass="glass" :common-settings="commonSettings"
+          :ping1DSettings="ping1DSettings" :ping360Settings="ping360Settings" :is-dark-mode="isDarkMode"
+          :is-glass-mode="isGlassMode" :server-url="serverUrl" :yaw-connection-status="yawConnectionStatus"
+          @update:is-open="showSettings = $event" @update:common-settings="updateCommonSettings"
+          @update:ping1D-settings="updatePing1DSettings" @update:ping360-settings="updatePing360Settings"
+          @update:is-dark-mode="updateDarkMode" @update:is-glass-mode="updateGlassMode"
+          @update:server-url="handleServerUrlUpdate" @updateMavlink="handleMavlinkUpdate" @save="saveSettings"
+          @reset="resetSettings" />
+      </v-card>
+
+      <div class="middle-section" :class="{ 'menu-open': isMenuOpen }">
+        <v-btn class="middle-button square-button" :class="{ glass }" @click="toggleMenu">
+          <v-icon :icon="isMenuOpen ? 'mdi-close' : 'mdi-wifi'" :size="iconSize" :color="iconColor"
+            :class="{ 'rotate-180': !isMenuOpen }" />
+        </v-btn>
+
+        <div class="connection-menu" :class="{ 'glass disable-hover': glass }" v-show="isMenuOpen">
+          <div :class="[{ 'glass-inner disable-hover': glass }]">
+
+
+            <!-- Dynamic Device Settings -->
+            <template v-if="activeDevice">
+              <component :class="['menu-content', { 'glass-inner disable-hover': glass }]"
+                :is="getDeviceSettingsComponent" :server-url="serverUrl" :device-id="activeDevice.device.id"
+                :initial-angles="currentDeviceAngles" :is-open="isMenuOpen" @update:angles="handleAngleUpdate"
+                @rangeChange="handleRangeChange" />
+            </template>
+            <template v-else>
 
-        <v-main class="flex-1">
-          <div class="h-full overflow-auto">
-            <component :is="views[selectedView]" :serverUrl="serverUrl" :websocket="websocket"
-              :websocketStatus="websocketStatus" :deviceData="deviceData" @send-message="sendWebSocketMessage"
-              class="h-full w-full" />
+              <div class="menu-content text-center pa-4 text-medium-emphasis">
+                <v-icon size="48" class="mb-2">mdi-devices</v-icon>
+                <div>No device selected.</div>
+                <div class="text-caption">Try clicking 'Auto Create' to discover devices.</div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <v-card class="recordings-menu-wrapper" :class="{ 'glass': glass }" v-if="showRecordingsMenu">
+        <div :class="['menu-content', { 'glass-inner disable-hover': glass }]">
+          <div class="d-flex justify-space-between align-center mb-4">
+            <div class="text-h6">Recordings</div>
+            <v-btn icon="mdi-close" variant="text" @click="showRecordingsMenu = false" />
           </div>
-        </v-main>
-
-        <v-dialog v-model="showSettings" max-width="600px">
-          <v-card>
-            <v-card-title class="text-h5 pb-2">VisualSettings</v-card-title>
-
-            <v-card-text>
-              <VisualSettings :common-settings="commonSettings" :ping1DSettings="ping1DSettings"
-                :ping360Settings="ping360Settings" :is-dark-mode="isDarkMode"
-                @update:common-settings="updateCommonSettings" @update:ping1D-settings="updatePing1DSettings"
-                @update:ping360-settings="updatePing360Settings" @update:is-dark-mode="updateDarkMode"
-                @save="saveSettings" @reset="resetSettings" @close="showSettings = false" />
-            </v-card-text>
-
-          </v-card>
-        </v-dialog>
-      </template>
-
-      <v-snackbar v-model="showNotification" :timeout="3000" location="top right">
-        New recording is ready to download
-        <template v-slot:actions>
-          <v-btn color="primary" variant="text" @click="showNotification = false">
-            Close
+
+          <v-btn block color="primary" class="mb-4" @click="playRecording" prepend-icon="mdi-replay">
+            Play records
           </v-btn>
-        </template>
-      </v-snackbar>
-    </v-app>
-  </template>
 
+          <div v-if="recordings.length === 0" class="text-center pa-4 text-medium-emphasis">
+            <v-icon size="48" class="mb-2">mdi-video-off</v-icon>
+            <div>No recordings available</div>
+            <div class="text-caption mt-2">
+              Records will appear here when you capture data from devices
+            </div>
+          </div>
+
+          <v-list v-else :class="{ 'glass-inner': glass }">
+            <v-list-subheader>Recent Recordings</v-list-subheader>
+
+            <v-list-item v-for="recording in recordings" :key="recording.id"
+              :class="{ 'new-recording': !recording.downloaded }">
+              <template v-slot:prepend>
+                <v-icon :icon="recording.deviceType === 'Ping360' ? 'mdi-radar' : 'mdi-altimeter'" />
+              </template>
+
+              <v-list-item-title class="text-truncate">
+                {{ recording.fileName }}
+              </v-list-item-title>
+
+              <v-list-item-subtitle>
+                {{ formatRecordingDate(recording.timestamp) }}
+              </v-list-item-subtitle>
+
+              <v-list-item-subtitle v-if="recording.settings" class="text-caption">
+                {{ formatRecordingDetails(recording) }}
+              </v-list-item-subtitle>
+
+              <template v-slot:append>
+                <div class="d-flex gap-2">
+                  <v-tooltip location="top" text="Play Recording">
+                    <template v-slot:activator="{ props }">
+                      <v-btn v-bind="props" icon="mdi-play" variant="text" size="small"
+                        @click="playRecording(recording)" :disabled="isReplayActive" />
+                    </template>
+                  </v-tooltip>
+
+                  <v-tooltip location="top" text="Download Recording">
+                    <template v-slot:activator="{ props }">
+                      <v-btn v-bind="props" icon="mdi-download" variant="text" size="small"
+                        @click="downloadRecording(recording)" />
+                    </template>
+                  </v-tooltip>
+
+                  <v-tooltip location="top" text="Delete Recording">
+                    <template v-slot:activator="{ props }">
+                      <v-btn v-bind="props" icon="mdi-delete" variant="text" size="small" color="error"
+                        @click="deleteRecording(recording)" />
+                    </template>
+                  </v-tooltip>
+                </div>
+              </template>
+            </v-list-item>
+          </v-list>
+
+          <v-card-actions v-if="recordings.length > 0" class="mt-4">
+            <v-spacer />
+            <v-btn color="error" variant="text" @click="clearRecordings">
+              Clear All
+            </v-btn>
+          </v-card-actions>
+        </div>
+      </v-card>
 
+      <v-btn class="bottom-button square-button" :class="{ glass }" @click="showRecordingsMenu = !showRecordingsMenu">
+        <v-badge :content="undownloadedRecordings.length.toString()" :model-value="undownloadedRecordings.length > 0"
+          color="error" location="top end" offset-x="-6" offset-y="-6">
+          <v-icon icon="mdi-video-image" :size="iconSize" :color="iconColor" />
+        </v-badge>
+      </v-btn>
+
+      <v-btn class="bottom-right-button square-button" :class="{ glass }">
+        <v-icon icon="mdi-bell" :size="iconSize" :color="iconColor" />
+      </v-btn>
+
+
+    </v-main>
+
+
+
+  </v-app>
+</template>
 </template>
 <script setup>
-import { computed, onMounted, onUnmounted, provide, reactive, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
+import { useDisplay, useTheme } from 'vuetify';
+import ConnectionManager from './components/ConnectionManager.vue';
+import Ping1DSettings from './components/widgets/sonar1d/Ping1DSettings.vue';
+import Ping360Settings from './components/widgets/sonar360/Ping360Settings.vue';
+
+const getDeviceSettingsComponent = computed(() => {
+  if (!activeDevice.value) return null;
+  return activeDevice.value.device.device_type === 'Ping360' ? Ping360Settings : Ping1DSettings;
+});
+
+// Add computed property for current device angles (for Ping360)
+const currentDeviceAngles = computed(() => {
+  if (!activeDevice.value || activeDevice.value.device.device_type !== 'Ping360') {
+    return { startAngle: 0, endAngle: 360 };
+  }
+  // Return actual angles if they're stored in your state
+  return { startAngle: 0, endAngle: 360 }; // Replace with actual angle values
+});
+
+// Add handlers for device-specific settings
+const handleAngleUpdate = ({ startAngle, endAngle }) => {};
+
+const handleRangeChange = (newRange) => {};
+
+const getServerUrl = (wsUrl) => {
+  try {
+    const url = new URL(wsUrl);
+    return `http${url.protocol === 'wss:' ? 's' : ''}://${url.host}`;
+  } catch (error) {
+    console.error('Error parsing WebSocket URL:', error);
+    return '';
+  }
+};
+
+const { name: breakpoint } = useDisplay();
+const theme = useTheme();
+
+const handleServerUrlUpdate = async (newUrl) => {
+  serverUrl.value = newUrl;
+
+  // Reconnect main websocket
+  if (websocket.value) {
+    websocket.value.close();
+  }
+  await nextTick();
+  connectWebSocket();
+
+  // Update MAVLink connection if auto-connect is enabled
+  const autoConnectMavlink = localStorage.getItem('autoConnectMavlink') === 'true';
+  if (autoConnectMavlink) {
+    const mavlinkUrl = localStorage.getItem('mavlinkUrl');
+    if (mavlinkUrl) {
+      connectYawWebSocket(mavlinkUrl);
+    }
+  }
+};
+
+const isSpeedDialOpen = ref(false);
+const isGlassMode = ref(false);
+const glass = computed(() => isGlassMode.value);
+const updateGlassMode = (value) => {
+  isGlassMode.value = value;
+  localStorage.setItem('glassMode', value.toString());
+};
+
+const updateConnectionIcon = () => (isConnectionMenuOpen.value ? 'mdi-close' : 'mdi-connection');
+const updateVisualSettingsIcon = () =>
+  showSettings.value ? 'mdi-close' : 'mdi-white-balance-sunny';
+
+const getStatusColor = computed(() => (status) => {
+  switch (status) {
+    case 'ContinuousMode':
+      return 'success';
+    case 'Running':
+      return 'info';
+    case 'Error':
+      return 'error';
+    default:
+      return 'warning';
+  }
+});
+
+const speedDialItems = ref([
+  {
+    icon: 'mdi-information-outline',
+    dialog: {
+      isOpen: false,
+      title: 'Information',
+      content: 'Information content goes here',
+    },
+  },
+  {
+    icon: updateConnectionIcon,
+    action: () => {
+      isConnectionMenuOpen.value = !isConnectionMenuOpen.value;
+    },
+  },
+  {
+    icon: updateVisualSettingsIcon,
+    action: () => {
+      showSettings.value = !showSettings.value;
+    },
+  },
+  { icon: 'mdi-memory-arrow-down' },
+  {
+    icon: 'mdi-settings',
+    dialog: {
+      isOpen: false,
+      title: 'Settings',
+      content: 'Settings content goes here',
+    },
+  },
+]);
+
+const iconColor = computed(() => {
+  return theme.global.current.value.dark ? 'white' : 'black';
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    xs: 'default',
+    sm: 'large',
+    default: 'x-large',
+  };
+  return sizes[breakpoint.value] || sizes.default;
+});
+
+const dialogWidth = computed(() => {
+  const sizes = {
+    xs: '90vw',
+    sm: '400px',
+    md: '500px',
+    lg: '600px',
+    default: '600px',
+  };
+  return sizes[breakpoint.value] || sizes.default;
+});
+
+const isConnectionMenuOpen = ref(false);
+const isVisualSettingsMenuOpen = ref(false);
+
+const handleDeviceSelection = (device) => {
+  selectDevice(device);
+  isConnectionMenuOpen.value = false;
+};
+
+// Add this where your other functions are defined
+const selectDevice = async (device) => {
+  // Clear current device
+  if (activeDevice.value) {
+    // Clean up any existing websocket connections
+    const oldWebSocket = `ws://${new URL(serverUrl.value).host}/ws?device_number=${activeDevice.value.device.id}`;
+    const connections = [...(websocket.value?.clients || [])];
+    for (const conn of connections) {
+      if (conn.url === oldWebSocket) {
+        conn.close();
+      }
+    }
+
+    // Clear the active device first
+    activeDevice.value = null;
+    // Wait for cleanup
+    await nextTick();
+  }
+
+  // Set new device
+  const component = device.device_type === 'Ping360' ? Ping360Loader : Ping1DLoader;
+  activeDevice.value = {
+    device,
+    component,
+  };
+  isConnectionMenuOpen.value = false;
+};
+
+// Add this to your reactive state
+const activeDevice = ref(null);
+
+const isMenuOpen = ref(false);
+const config = ref({
+  wifi: true,
+  strength: 75,
+  network: 'Home Network',
+  autoConnect: true,
+});
+
+const networkOptions = ['Home Network', 'Office Network', 'Guest Network', 'Public WiFi'];
+
+const toggleMenu = () => {
+  isMenuOpen.value = !isMenuOpen.value;
+};
+
+const saveConfig = () => {
+  isMenuOpen.value = false;
+};
+
+import { onMounted, onUnmounted, provide, reactive, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import ServerConnection from './components/utils/ServerConnection.vue';
 import VisualSettings from './components/utils/VisualSettings.vue';
@@ -166,6 +414,8 @@ import MultiView from './components/views/MultiView.vue';
 import ReplayView from './components/views/ReplayView.vue';
 import SettingsView from './components/views/SettingsView.vue';
 import WebSocketAnalysisView from './components/views/WebsocketAnalysisView.vue';
+import Ping1DLoader from './components/widgets/sonar1d/Ping1DLoader.vue';
+import Ping360Loader from './components/widgets/sonar360/Ping360Loader.vue';
 
 const selectedView = ref('Devices');
 const serverUrl = ref(null);
@@ -175,10 +425,11 @@ const deviceData = reactive({});
 const showSettings = ref(false);
 const isFullscreen = ref(false);
 const isDarkMode = ref(true);
-const theme = ref('dark');
 const recordings = ref([]);
 const showNotification = ref(false);
 const route = useRoute();
+const replayData = ref(null);
+const isReplayActive = ref(false);
 
 const yawAngle = ref(0);
 const yawConnectionStatus = ref('Disconnected');
@@ -193,6 +444,24 @@ const undownloadedRecordings = computed(() => {
   return recordings.value.filter((recording) => !recording.downloaded);
 });
 
+const deviceSettings = computed(() => {
+  if (!activeDevice.value) return {};
+
+  return {
+    ...commonSettings,
+    ...(activeDevice.value.device.device_type === 'Ping360' ? ping360Settings : ping1DSettings),
+    width: activeDevice.value?.width || window.innerWidth,
+    height: activeDevice.value?.height || window.innerHeight,
+  };
+});
+
+const getWebSocketUrl = (device) => {
+  if (!device || !serverUrl.value) return '';
+  const url = new URL(serverUrl.value);
+  const protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
+  return `${protocol}//${url.host}/ws?device_number=${device.id}`;
+};
+
 const handleRecordingComplete = (recordingData) => {
   recordings.value.unshift(recordingData);
   showNotification.value = true;
@@ -227,9 +496,11 @@ const connectYawWebSocket = (url) => {
 
   try {
     yawWebSocket = new WebSocket(url);
+    yawConnectionStatus.value = 'Connecting';
 
     yawWebSocket.onopen = () => {
       yawConnectionStatus.value = 'Connected';
+      localStorage.setItem('yawWebsocketUrl', url); // Save successful connection URL
     };
 
     yawWebSocket.onmessage = (event) => {
@@ -251,10 +522,15 @@ const connectYawWebSocket = (url) => {
     yawWebSocket.onclose = () => {
       yawConnectionStatus.value = 'Disconnected';
       yawWebSocket = null;
-      if (reconnectTimeout) clearTimeout(reconnectTimeout);
-      reconnectTimeout = setTimeout(() => {
-        connectYawWebSocket(url);
-      }, 5000);
+
+      // Only attempt reconnection if auto-connect is enabled
+      const autoConnectMavlink = localStorage.getItem('autoConnectMavlink') === 'true';
+      if (autoConnectMavlink) {
+        if (reconnectTimeout) clearTimeout(reconnectTimeout);
+        reconnectTimeout = setTimeout(() => {
+          connectYawWebSocket(url);
+        }, 5000);
+      }
     };
   } catch (error) {
     console.error('Failed to create Yaw WebSocket:', error);
@@ -262,6 +538,18 @@ const connectYawWebSocket = (url) => {
   }
 };
 
+const handleMavlinkUpdate = async ({ action, url, autoConnect }) => {
+  if (action === 'disconnect') {
+    cleanupYawConnection();
+  } else if (action === 'connect' || action === 'reconnect') {
+    if (action === 'reconnect') {
+      cleanupYawConnection();
+      await nextTick();
+    }
+    connectYawWebSocket(url);
+  }
+};
+
 const cleanupYawConnection = () => {
   if (reconnectTimeout) {
     clearTimeout(reconnectTimeout);
@@ -339,7 +627,10 @@ const loadSettings = () => {
     const savedPing1D = localStorage.getItem('ping1d-settings');
     const savedPing360 = localStorage.getItem('ping360-settings');
     const savedCustomPalette = localStorage.getItem('customColorPalette');
-
+    const savedGlassMode = localStorage.getItem('glassMode');
+    if (savedGlassMode !== null) {
+      isGlassMode.value = savedGlassMode === 'true';
+    }
     if (savedCommon) Object.assign(commonSettings, JSON.parse(savedCommon));
     if (savedPing1D) Object.assign(ping1DSettings, JSON.parse(savedPing1D));
     if (savedPing360) Object.assign(ping360Settings, JSON.parse(savedPing360));
@@ -356,6 +647,7 @@ const saveSettings = () => {
     localStorage.setItem('common-settings', JSON.stringify(commonSettings));
     localStorage.setItem('ping1d-settings', JSON.stringify(ping1DSettings));
     localStorage.setItem('ping360-settings', JSON.stringify(ping360Settings));
+    localStorage.setItem('glassMode', isGlassMode.value.toString());
     if (commonSettings.customPalette?.length > 0) {
       localStorage.setItem('customColorPalette', JSON.stringify(commonSettings.customPalette));
     }
@@ -414,8 +706,8 @@ const updateDarkMode = (value) => {
 };
 
 const toggleTheme = () => {
-  theme.value = isDarkMode.value ? 'dark' : 'light';
-  localStorage.setItem('theme', theme.value);
+  theme.global.name.value = isDarkMode.value ? 'dark' : 'light';
+  localStorage.setItem('theme', theme.global.name.value);
 };
 
 const toggleFullscreen = () => {
@@ -426,6 +718,17 @@ const toggleFullscreen = () => {
   }
 };
 
+const replayViewRef = ref(null);
+const dataPlayer = ref(null);
+
+const handleReplayFrame = (frame) => {
+  replayViewRef.value?.updateCurrentDeviceData(frame);
+};
+
+const handleReplayDataLoaded = (data) => {
+  replayViewRef.value?.onDataLoaded(data);
+};
+
 const handleFullscreenChange = () => {
   isFullscreen.value = !!document.fullscreenElement;
 };
@@ -521,13 +824,19 @@ provide('deviceSettings', {
 });
 
 const playRecording = (recording) => {
-  selectView('Replay');
-  nextTick(() => {
-    const replayView = views.Replay;
-    if (replayView?.loadRecording) {
-      replayView.loadRecording(recording);
-    }
-  });
+  showRecordingsMenu.value = false; // Close the menu
+  isReplayActive.value = true; // Show the replay view
+  replayData.value = recording; // Set the recording data
+
+  // Optional: Close any active device view
+  if (activeDevice.value) {
+    activeDevice.value = null;
+  }
+};
+
+const closeReplay = () => {
+  isReplayActive.value = false;
+  replayData.value = null;
 };
 
 onMounted(() => {
@@ -536,14 +845,31 @@ onMounted(() => {
 
   const savedTheme = localStorage.getItem('theme');
   if (savedTheme) {
-    theme.value = savedTheme;
+    theme.global.name.value = savedTheme;
     isDarkMode.value = savedTheme === 'dark';
   } else {
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    theme.value = prefersDark ? 'dark' : 'light';
+    const prefersDark = window.matchMedia('(prefers-color-scheme: light)').matches;
+    theme.global.name.value = prefersDark ? 'dark' : 'light';
     isDarkMode.value = prefersDark;
   }
 
+  try {
+    const savedRecordings = localStorage.getItem('sonar-recordings');
+    if (savedRecordings) {
+      recordings.value = JSON.parse(savedRecordings);
+    }
+  } catch (error) {
+    console.error('Error loading saved recordings:', error);
+  }
+
+  const autoConnectMavlink = localStorage.getItem('autoConnectMavlink') === 'true';
+  if (autoConnectMavlink) {
+    const mavlinkUrl = localStorage.getItem('mavlinkUrl');
+    if (mavlinkUrl) {
+      connectYawWebSocket(mavlinkUrl);
+    }
+  }
+
   document.addEventListener('fullscreenchange', handleFullscreenChange);
 });
 
@@ -556,65 +882,461 @@ onUnmounted(() => {
 });
 
 watch(
-  () => theme.value,
+  () => theme.global.name.value,
   (newTheme) => {
     document.documentElement.className = newTheme;
   }
 );
 
+watch(isSpeedDialOpen, (newValue) => {
+  if (!newValue) {
+    isConnectionMenuOpen.value = false;
+  }
+});
+
 provide('recordings', {
   recordings,
   handleRecordingComplete,
 });
-</script>
 
+const showRecordingsMenu = ref(false);
+
+const formatRecordingDate = (timestamp) => {
+  return new Date(timestamp).toLocaleString();
+};
+
+const formatRecordingDetails = (recording) => {
+  if (!recording.settings) return '';
+
+  const details = [];
+  if (recording.deviceType === 'Ping360') {
+    if (recording.settings.startAngle !== undefined) {
+      details.push(`${recording.settings.startAngle}° - ${recording.settings.endAngle}°`);
+    }
+    if (recording.settings.currentRange) {
+      details.push(`${recording.settings.currentRange}m range`);
+    }
+  } else {
+    if (recording.settings.maxDepth) {
+      details.push(`${recording.settings.maxDepth}m depth`);
+    }
+  }
+  return details.join(' | ');
+};
+
+const deleteRecording = (recording) => {
+  const index = recordings.value.findIndex((r) => r.id === recording.id);
+  if (index !== -1) {
+    recordings.value.splice(index, 1);
+    // Also remove from localStorage if you're storing them there
+    saveRecordingsToStorage();
+  }
+};
+
+const clearRecordings = () => {
+  recordings.value = [];
+  saveRecordingsToStorage();
+};
+
+const saveRecordingsToStorage = () => {
+  try {
+    localStorage.setItem('sonar-recordings', JSON.stringify(recordings.value));
+  } catch (error) {
+    console.error('Error saving recordings to storage:', error);
+  }
+};
+
+// Add these watchers to handle menu state
+watch(isSpeedDialOpen, (newValue) => {
+  if (newValue) {
+    showRecordingsMenu.value = false;
+  }
+});
+
+watch(isMenuOpen, (newValue) => {
+  if (newValue) {
+    showRecordingsMenu.value = false;
+  }
+});
+
+watch(showRecordingsMenu, (newValue) => {
+  if (newValue) {
+    isSpeedDialOpen.value = false;
+    isMenuOpen.value = false;
+  }
+});
+</script>
 <style>
-* {
-  margin: 0;
+:root {
+  --button-size: 3.25rem;
+  --button-gap: 0.5rem;
+  --border-radius: 0.5rem;
+  /* Set border as global value */
+  /* border: 1px solid rgba(203, 203, 203, 0.13) !important; */
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3),
+    0px 8px 12px 6px rgba(0, 0, 0, 0.15) !important;
+}
+
+/* Glass effects */
+.glass {
+  background-color: rgba(var(--v-theme-background), 0.3) !important;
+  backdrop-filter: blur(25px) !important;
+  /* border: 1px solid rgba(203, 203, 203, 0.13) !important;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3),
+    0px 8px 12px 6px rgba(0, 0, 0, 0.15) !important; */
+}
+
+.glass-inner {
+  background-color: rgba(var(--v-theme-background), 0) !important;
+  /* border: 1px solid rgba(203, 203, 203, 0.0) !important; */
+}
+
+.glass:not(.disable-hover):hover {
+  background: rgba(var(--v-theme-background), 0.5) !important;
+}
+
+.glass-inner:not(.disable-hover):hover {
+  background: rgba(var(--v-theme-background), 0.5) !important;
+}
+</style>
+
+<style scoped>
+/* Base button styles */
+.square-button {
+  width: var(--button-size) !important;
+  height: var(--button-size) !important;
+  min-width: var(--button-size) !important;
+  padding: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Speed dial item styles */
+.speed-dial-item {
+  width: var(--button-size) !important;
+  height: var(--button-size) !important;
+  min-width: var(--button-size) !important;
+  padding: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  opacity: 1;
+  box-shadow: none !important;
+  background: none !important;
+}
+
+.speed-dial-item:hover {
+  opacity: 1;
+}
+
+.icon-flip-enter-active,
+.icon-flip-leave-active {
+  transition: all 0.3s ease;
+}
+
+.icon-flip-enter-from,
+.icon-flip-leave-to {
+  transform: rotateY(180deg);
+  opacity: 0;
+}
+
+.connection-menu {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: calc(var(--button-size) + var(--button-gap));
+  z-index: 999;
+  border-radius: var(--border-radius);
+}
+
+.connection-menu-wrapper {
+  position: fixed;
+  top: calc(var(--button-size) + var(--button-gap));
+  left: calc(var(--button-size) + var(--button-gap));
+  z-index: 999;
+  border-radius: var(--border-radius);
+}
+
+/* Container layout and positioning */
+.speed-dial-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--button-gap);
+  z-index: 1000;
   padding: 0;
-  box-sizing: border-box;
+  height: var(--button-size);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border-radius: 0 0 var(--border-radius) 0 !important;
+  background: rgb(var(--v-theme-background));
+  /* border: 1px solid rgba(203, 203, 203, 0.13) !important; */
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3),
+    0px 8px 12px 6px rgba(0, 0, 0, 0.15) !important;
 }
 
-html,
-body {
-  height: 100%;
+.speed-dial-container.speed-dial-open {
+  height: calc((var(--button-size) * var(--items-count)) + (var(--button-gap) * (var(--items-count) - 1)));
 }
 
-.recordings-menu {
-  max-height: 400px;
-  overflow-y: auto;
+.speed-dial-menu-section {
+  display: flex;
+  align-items: center;
+  position: relative;
 }
 
-.new-recording {
-  background-color: rgba(var(--v-theme-primary), 0.1);
+/* Middle section styles */
+.middle-section {
+  position: fixed;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
 }
 
-.recordings-list {
-  max-height: 300px;
-  overflow-y: auto;
+.middle-button {
+  position: static;
+  transform: none;
+  border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
+  border-left: none !important;
 }
 
-.settings-scroll {
-  overflow-y: auto;
-  max-height: calc(80vh - 64px);
-  padding: 16px;
+/* Bottom button positioning */
+.bottom-button {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 1000;
+  border-radius: 0 var(--border-radius) 0 0 !important;
+  border-left: none !important;
+}
+
+.bottom-right-button {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  border-radius: var(--border-radius) 0 0 0 !important;
+  border-right: none !important;
+}
+
+/* Speed dial animations */
+.speed-dial-items-enter-active,
+.speed-dial-items-leave-active {
+  transition: all 0.3s ease;
 }
 
-.settings-scroll::-webkit-scrollbar {
-  width: 8px;
+.speed-dial-items-enter-from,
+.speed-dial-items-leave-to {
+  opacity: 0;
+  transform: translateX(calc(var(--button-size) * -1.2));
 }
 
-.settings-scroll::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
+/* Menu styles */
+.config-menu {
+  width: 0;
+  height: auto;
+  overflow: hidden;
+  transition: width 0.3s ease;
+  border-radius: var(--border-radius);
+  background: rgb(var(--v-theme-background));
+  border: 1px solid rgba(203, 203, 203, 0.13) !important;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3),
+    0px 8px 12px 6px rgba(0, 0, 0, 0.15) !important;
 }
 
-.settings-scroll::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
+
+/* Menu styles (continued) */
+.speed-dial-container .config-menu {
+  position: absolute;
+  left: calc(var(--button-size) + var(--button-gap));
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: auto;
+  overflow: hidden;
+  transition: width 0.3s ease;
+  border-radius: var(--border-radius);
+  background: rgb(var(--v-theme-background));
+  border: 1px solid rgba(203, 203, 203, 0.13) !important;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3),
+    0px 8px 12px 6px rgba(0, 0, 0, 0.15) !important;
 }
 
-.settings-scroll::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3);
+.speed-dial-container .config-menu,
+.menu-open .config-menu {
+  width: 300px;
+}
+
+.menu-content {
+  width: 300px;
+  padding: 1rem;
+}
+
+.v-list {
+  background: inherit;
+}
+
+.menu-actions {
+  margin-top: 1rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+
+
+/* Icon transition */
+.v-icon {
+  transition: transform 0.3s ease;
+}
+
+.rotate-180 {
+  transform: rotate(180deg);
+}
+
+/* Mobile responsive adjustments */
+@media (max-width: 600px) {
+  :root {
+    --button-gap: 0.25rem;
+  }
+
+  .speed-dial-container,
+  .middle-button,
+  .bottom-button,
+  .bottom-right-button {
+    border-width: 0.5px !important;
+  }
+
+  .menu-open .config-menu {
+    width: calc(100vw - var(--button-size));
+    max-width: 300px;
+  }
+}
+
+/* Animated background */
+.animated-background {
+  background: linear-gradient(-45deg,
+      #0501ff,
+      #004b92,
+      #23a6d5,
+      #23d5ab);
+  background-size: 400% 400%;
+  animation: gradient 5s ease infinite;
+  min-height: 100vh;
+  position: relative;
+  width: 100%;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* Safe area handling for mobile devices */
+@supports (padding: max(0px)) {
+
+  .bottom-button,
+  .bottom-right-button {
+    bottom: max(0px, env(safe-area-inset-bottom));
+  }
+}
+
+.device-viewer {
+  padding: 0 3.5rem 0 3.5rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  background: rgb(var(--v-theme-surface));
+  display: flex;
+  flex-direction: column;
+}
+
+
+.device-header {
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: rgb(var(--v-theme-surface));
+  border-bottom: 1px solid rgba(var(--v-border-color), 0.12);
+}
+
+.device-header.glass-inner {
+  background: rgba(var(--v-theme-background), 0);
+}
+
+.device-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.device-type {
+  font-weight: 500;
+}
+
+.device-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+@media (max-width: 600px) {
+  .device-header {
+    padding: 0.5rem;
+  }
+}
+
+.recordings-menu-wrapper {
+  position: fixed;
+  bottom: calc(var(--button-size) + var(--button-gap));
+  left: var(--button-gap);
+  z-index: 999;
+  border-radius: var(--border-radius);
+  /* width: 400px;
+  max-width: calc(100vw - var(--button-size) - var(--button-gap) * 2); */
+}
+
+.recordings-list {
+  max-height: 20vh;
+  overflow-y: auto;
+}
+
+.new-recording {
+  background: rgba(var(--v-theme-primary), 0.1);
+}
+
+.replay-controls {
+  /* padding: 1rem; */
+  border-bottom: 1px solid rgba(var(--v-border-color), 0.12);
+}
+
+/* .device-content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+} */
+
+@media (max-width: 600px) {
+  .recordings-menu-wrapper {
+    width: calc(100vw - var(--button-size) - var(--button-gap) * 2);
+  }
 }
 </style>
\ No newline at end of file
diff --git a/ping-viewer-next-frontend/src/components/ConnectionManager.vue b/ping-viewer-next-frontend/src/components/ConnectionManager.vue
new file mode 100644
index 00000000..e7ddebad
--- /dev/null
+++ b/ping-viewer-next-frontend/src/components/ConnectionManager.vue
@@ -0,0 +1,345 @@
+<template>
+  <div class="connection-manager">
+    <div class="config-menu" :class="{ 'glass disable-hover': glass }" v-show="isOpen">
+      <div :class="['menu-content', { 'glass-inner disable-hover': glass }]">
+        <!-- Header Section -->
+        <div class="menu-header d-flex justify-space-between align-center mb-4">
+          <div class="text-h6">Device Management</div>
+          <div class="d-flex gap-2">
+            <v-btn color="primary" size="small" @click="autoCreateDevices" :loading="isAutoCreating">
+              <v-icon start>mdi-plus-network</v-icon>
+              Auto Create
+            </v-btn>
+            <v-btn color="primary" size="small" @click="refreshDevices" :loading="isRefreshing">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </div>
+        </div>
+
+        <!-- Device List -->
+        <div class="device-list mb-4">
+          <div v-if="isLoading" class="d-flex justify-center my-4">
+            <v-progress-circular indeterminate />
+          </div>
+
+          <div v-else-if="devices.length === 0" class="text-center pa-4 text-medium-emphasis">
+            <v-icon size="48" class="mb-2">mdi-devices</v-icon>
+            <div>No devices found.</div>
+            <div class="text-caption">Try clicking 'Auto Create' to discover devices.</div>
+          </div>
+
+          <v-list v-else :class="{ 'glass-inner': glass }" density="compact">
+            <v-list-item v-for="device in devices" :key="device.id" :value="device" class="mb-2"
+              :class="{ 'glass-inner': glass }">
+              <template v-slot:prepend>
+                <v-icon :icon="device.device_type === 'Ping360' ? 'mdi-radar' : 'mdi-altimeter'" />
+              </template>
+
+              <v-list-item-title>{{ device.device_type }}</v-list-item-title>
+              <v-list-item-subtitle class="text-truncate">{{ device.id }}</v-list-item-subtitle>
+
+              <template v-slot:append>
+                <div class="d-flex align-center">
+                  <v-chip :color="getStatusColor(device.status)" size="small" class="mr-2">
+                    {{ device.status }}
+                  </v-chip>
+                  <v-btn color="primary" size="small" @click="selectDevice(device)">
+                    Open
+                  </v-btn>
+                </div>
+              </template>
+            </v-list-item>
+          </v-list>
+        </div>
+
+        <!-- Manual Creation Section -->
+        <v-expand-transition>
+          <div v-if="showManualCreate" :class="{ 'glass-inner': glass }" class="pa-4 rounded">
+            <v-form @submit.prevent="createDevice">
+              <v-select v-model="newDevice.device_selection" :items="deviceTypes" label="Device Type" class="mb-4" />
+              <v-select v-model="newDevice.connectionType" :items="connectionTypes" label="Connection Type"
+                class="mb-4" />
+
+              <template v-if="newDevice.connectionType === 'UdpStream'">
+                <v-text-field v-model="newDevice.udp.ip" label="IP Address" class="mb-4"
+                  :rules="[v => !!v || 'IP is required']" />
+                <v-text-field v-model.number="newDevice.udp.port" type="number" label="Port" class="mb-4"
+                  :rules="[v => !!v || 'Port is required']" />
+              </template>
+
+              <template v-else-if="newDevice.connectionType === 'SerialStream'">
+                <v-text-field v-model="newDevice.serial.path" label="Serial Path" class="mb-4"
+                  :rules="[v => !!v || 'Path is required']" />
+                <v-text-field v-model.number="newDevice.serial.baudrate" type="number" label="Baudrate" class="mb-4"
+                  :rules="[v => !!v || 'Baudrate is required']" />
+              </template>
+
+              <div class="d-flex justify-end gap-2">
+                <v-btn color="error" variant="text" @click="showManualCreate = false">Cancel</v-btn>
+                <v-btn color="primary" :loading="isCreating" type="submit">Create</v-btn>
+              </div>
+            </v-form>
+          </div>
+        </v-expand-transition>
+
+        <!-- Footer Actions -->
+        <div class="menu-actions mt-4">
+          <v-btn block :class="{ 'glass-inner': glass }" @click="showManualCreate = !showManualCreate">
+            <v-icon start>{{ showManualCreate ? 'mdi-minus' : 'mdi-plus' }}</v-icon>
+            {{ showManualCreate ? 'Cancel Manual Creation' : 'Manual Create' }}
+          </v-btn>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+  serverUrl: {
+    type: String,
+    required: true,
+  },
+  glass: {
+    type: Boolean,
+    default: false,
+  },
+  isOpen: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:isOpen', 'select-device']);
+
+// State
+const devices = ref([]);
+const isLoading = ref(false);
+const isRefreshing = ref(false);
+const isAutoCreating = ref(false);
+const isCreating = ref(false);
+const showManualCreate = ref(false);
+const error = ref(null);
+
+// Form state
+const newDevice = ref({
+  device_selection: 'Auto',
+  connectionType: 'UdpStream',
+  udp: {
+    ip: 'blueos.local',
+    port: 12345,
+  },
+  serial: {
+    path: '/dev/ttyUSB0',
+    baudrate: 2500000,
+  },
+});
+
+// Constants
+const deviceTypes = [
+  { title: 'Auto Detect', value: 'Auto' },
+  { title: 'Ping1D', value: 'Ping1D' },
+  { title: 'Ping360', value: 'Ping360' },
+];
+
+const connectionTypes = [
+  { title: 'UDP', value: 'UdpStream' },
+  { title: 'Serial', value: 'SerialStream' },
+];
+
+// Utility functions
+const getStatusColor = (status) => {
+  switch (status) {
+    case 'ContinuousMode':
+      return 'success';
+    case 'Running':
+      return 'info';
+    case 'Error':
+      return 'error';
+    default:
+      return 'warning';
+  }
+};
+
+// API functions
+const fetchDevices = async () => {
+  try {
+    const response = await fetch(`${props.serverUrl}/device_manager/request`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        command: 'List',
+        module: 'DeviceManager',
+      }),
+    });
+
+    if (!response.ok) throw new Error('Failed to fetch devices');
+
+    const data = await response.json();
+    devices.value = data.DeviceInfo || [];
+    error.value = null;
+  } catch (err) {
+    console.error('Error fetching devices:', err);
+    error.value = `Failed to fetch devices: ${err.message}`;
+  }
+};
+
+const refreshDevices = async () => {
+  isRefreshing.value = true;
+  await fetchDevices();
+  isRefreshing.value = false;
+};
+
+const autoCreateDevices = async () => {
+  isAutoCreating.value = true;
+  error.value = null;
+
+  try {
+    const response = await fetch(`${props.serverUrl}/device_manager/request`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        command: 'AutoCreate',
+        module: 'DeviceManager',
+      }),
+    });
+
+    if (!response.ok) throw new Error('Failed to auto-create devices');
+    await refreshDevices();
+  } catch (err) {
+    console.error('Error auto-creating devices:', err);
+    error.value = `Failed to auto-create devices: ${err.message}`;
+  } finally {
+    isAutoCreating.value = false;
+  }
+};
+
+const createDevice = async () => {
+  isCreating.value = true;
+  error.value = null;
+
+  try {
+    const source =
+      newDevice.value.connectionType === 'UdpStream'
+        ? {
+            UdpStream: {
+              ip: newDevice.value.udp.ip,
+              port: newDevice.value.udp.port,
+            },
+          }
+        : {
+            SerialStream: {
+              path: newDevice.value.serial.path,
+              baudrate: newDevice.value.serial.baudrate,
+            },
+          };
+
+    const response = await fetch(`${props.serverUrl}/device_manager/request`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        command: 'Create',
+        module: 'DeviceManager',
+        payload: {
+          device_selection: newDevice.value.device_selection,
+          source,
+        },
+      }),
+    });
+
+    if (!response.ok) throw new Error('Failed to create device');
+
+    await refreshDevices();
+    showManualCreate.value = false;
+  } catch (err) {
+    console.error('Error creating device:', err);
+    error.value = `Failed to create device: ${err.message}`;
+  } finally {
+    isCreating.value = false;
+  }
+};
+
+const selectDevice = (device) => {
+  emit('select-device', device);
+  emit('update:isOpen', false);
+};
+
+// Lifecycle hooks
+let refreshInterval;
+
+onMounted(() => {
+  isLoading.value = true;
+  fetchDevices().finally(() => {
+    isLoading.value = false;
+  });
+  refreshInterval = setInterval(fetchDevices, 5000);
+});
+
+onUnmounted(() => {
+  if (refreshInterval) {
+    clearInterval(refreshInterval);
+  }
+});
+</script>
+
+<style scoped>
+.connection-manager {
+  transition: all 0.3s ease;
+  transform-origin: top left;
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+  .connection-menu-wrapper .config-menu {
+    width: calc(100vw - var(--button-size) - var(--button-gap) * 2);
+    max-width: 400px;
+  }
+}
+
+.config-menu {
+  width: 400px;
+  max-width: calc(100vw - var(--button-size));
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  background: rgb(var(--v-theme-background));
+}
+
+.menu-content {
+  padding: 1rem;
+}
+
+.device-list {
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+/* :deep(.v-list) {
+  background: transparent;
+} */
+
+.menu-actions {
+  border-top: 1px solid rgba(var(--v-border-color), 0.12);
+  padding-top: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/ping-viewer-next-frontend/src/components/utils/ServerConnection.vue b/ping-viewer-next-frontend/src/components/utils/ServerConnection.vue
index 7f080f24..74234e2b 100644
--- a/ping-viewer-next-frontend/src/components/utils/ServerConnection.vue
+++ b/ping-viewer-next-frontend/src/components/utils/ServerConnection.vue
@@ -1,94 +1,88 @@
 <template>
-	<div class="fixed inset-0 backdrop-blur-sm flex items-center justify-center">
-	  <div class="p-8 rounded-xl shadow-xl w-[450px] relative overflow-hidden">
-		<div class="mb-6">
-		  <h2 class="text-2xl font-bold">Ping Viewer Next</h2>
-		  <p class="mt-1">Establishing connection to server...</p>
-		</div>
-
-		<div v-if="!serverInfo" class="space-y-4">
-		  <div v-for="step in 4" :key="step"
-			:class="['transition-all duration-300 py-3 px-4 rounded-lg',
-			  currentStep === step ? 'bg-surface' : '']">
-			<div class="flex items-center">
-			  <div class="w-6 h-6 rounded-full flex items-center justify-center mr-3">
-				<svg v-if="currentStep > step" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-				</svg>
-				<span v-else class="text-sm">{{ step }}</span>
-			  </div>
-			  <span>{{ getStepText(step) }}</span>
-			  <div v-if="currentStep === step && loading" class="ml-auto">
-				<div class="w-5 h-5 border-2 border-t-transparent rounded-full animate-spin"></div>
-			  </div>
-			</div>
-			<div v-if="currentStep === step && error" class="mt-2 ml-9 text-sm">
-			  {{ error }}
-			</div>
-
-			<div v-if="step === 4 && currentStep === 4" class="mt-3 ml-9">
-			  <input v-model="remoteAddress" type="text"
-				class="w-full px-3 py-2 rounded border"
-				placeholder="e.g. pingviewernext:8080"
-				@keyup.enter="connectToRemote" />
-			  <v-btn block class="mt-2" @click="connectToRemote">
-				Connect to Remote Server
-			  </v-btn>
-			</div>
-		  </div>
-		</div>
-
-		<div v-if="serverInfo" class="relative">
-		  <div class="flex justify-center mb-6">
-			<div class="relative">
-			  <div class="w-16 h-16 rounded-full border-4 flex items-center justify-center">
-				<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-				</svg>
-			  </div>
-			  <div class="absolute inset-0 rounded-full border-4 border-t-transparent animate-spin"
-				:style="{ animationDuration: '3s' }">
-			  </div>
-			</div>
-		  </div>
-
-		  <div class="text-center mb-6">
-			<p class="font-bold text-lg mb-1">Connected Successfully</p>
-			<p>
-			  {{ serverInfo.name }} (v{{ serverInfo.version }})
-			</p>
-			<p v-if="autoConfirmCountdown > 0" class="text-sm mt-2">
-			  Auto-continuing in {{ autoConfirmCountdown }}s...
-			</p>
-		  </div>
-
-		  <div class="flex justify-between items-center">
-			<v-btn variant="text" @click="editServer">
-			  Change Server
-			</v-btn>
-			<v-btn color="primary" @click="confirmConnection">
-			  Continue
-			</v-btn>
-		  </div>
-		</div>
-	  </div>
-	</div>
-  </template>
-
-  <script setup>
+  <v-dialog v-model="dialog" persistent width="500" class="server-connection">
+    <v-card>
+      <v-card-title class="text-h5 pb-2">
+        <v-icon start icon="mdi-connection" class="mr-2" />
+        Ping Viewer Next
+      </v-card-title>
+
+      <v-card-text>
+        <div v-if="!serverInfo">
+          <v-stepper v-model="currentStep" class="">
+            <v-stepper-items>
+              <v-stepper-item v-for="step in 4" :key="step" :value="step">
+                <div class="d-flex align-center py-2">
+                  <div class="mr-4">
+                    <v-icon v-if="currentStep > step" color="success">mdi-check-circle</v-icon>
+                    <v-progress-circular v-else-if="currentStep === step && loading" indeterminate size="24" />
+                    <span v-else>{{ step }}</span>
+                  </div>
+                  <div class="flex-grow-1">
+                    <div>{{ getStepText(step) }}</div>
+                    <div v-if="currentStep === step && error" class="text-error text-body-2 mt-1">
+                      {{ error }}
+                    </div>
+                  </div>
+                </div>
+
+                <div v-if="step === 4 && currentStep === 4" class="mt-4">
+                  <v-text-field v-model="remoteAddress" label="Server Address" placeholder="e.g. pingviewernext:8080"
+                    hint="Enter the server address to connect" persistent-hint @keyup.enter="connectToRemote" />
+                  <v-btn block color="primary" class="mt-4" @click="connectToRemote" :loading="loading">
+                    Connect to Remote Server
+                  </v-btn>
+                </div>
+              </v-stepper-item>
+            </v-stepper-items>
+          </v-stepper>
+        </div>
+
+        <div v-else>
+          <v-row justify="center" class="mb-6">
+            <v-col cols="auto">
+              <v-progress-circular :model-value="autoConfirmCountdown * 20" color="primary" size="92">
+                <v-icon size="40" color="primary">mdi-check</v-icon>
+              </v-progress-circular>
+            </v-col>
+          </v-row>
+
+          <div class="text-center mb-6">
+            <div class="text-h6 mb-2">Connected Successfully</div>
+            <div class="text-body-1">{{ serverInfo.name }} (v{{ serverInfo.version }})</div>
+            <div v-if="autoConfirmCountdown > 0" class="text-body-2 mt-2">
+              Auto-continuing in {{ autoConfirmCountdown }}s...
+            </div>
+          </div>
+
+          <v-card-actions class="px-0">
+            <v-spacer />
+            <v-btn variant="text" @click="editServer">
+              Change Server
+            </v-btn>
+            <v-btn color="primary" @click="confirmConnection">
+              Continue
+            </v-btn>
+          </v-card-actions>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
+const emit = defineEmits(['serverConnected']);
+
+const dialog = ref(true);
 const currentStep = ref(1);
 const loading = ref(false);
 const error = ref(null);
 const serverInfo = ref(null);
 const remoteAddress = ref('');
-const lastUsedServer = ref(null);
 const autoConfirmCountdown = ref(0);
 let countdownTimer = null;
 
-const emit = defineEmits(['serverConnected']);
-
 const CACHE_KEY = 'pingviewer-server';
 
 const stepTexts = [
@@ -167,7 +161,6 @@ const tryConnect = async (url) => {
         const data = await response.json();
         serverInfo.value = data;
         loading.value = false;
-
         startAutoConfirmCountdown();
         return true;
       }
@@ -192,6 +185,30 @@ const getServerUrl = (host) => {
   return `${protocol}//${host}/register_service`;
 };
 
+const connectToRemote = async () => {
+  if (!remoteAddress.value) {
+    error.value = 'Please enter a remote server address.';
+    return;
+  }
+
+  const success = await tryConnect(`http://${remoteAddress.value}/register_service`);
+
+  if (!success) {
+    error.value = 'Could not connect to the specified remote server.';
+    return;
+  }
+
+  saveLastUsedServer(remoteAddress.value);
+};
+
+const confirmConnection = () => {
+  stopAutoConfirmCountdown();
+  const url = `http://${remoteAddress.value}`;
+  saveLastUsedServer(remoteAddress.value);
+  dialog.value = false;
+  emit('serverConnected', url);
+};
+
 onMounted(async () => {
   // Step 1: Try last used server
   const lastServer = loadLastUsedServer();
@@ -220,30 +237,6 @@ onMounted(async () => {
   error.value = 'Could not connect to any known servers. Please enter a custom address.';
 });
 
-const connectToRemote = async () => {
-  if (!remoteAddress.value) {
-    error.value = 'Please enter a remote server address.';
-    return;
-  }
-
-  const success = await tryConnect(`http://${remoteAddress.value}/register_service`);
-
-  if (!success) {
-    error.value = 'Could not connect to the specified remote server.';
-    return;
-  }
-
-  saveLastUsedServer(remoteAddress.value);
-};
-
-const confirmConnection = () => {
-  stopAutoConfirmCountdown();
-  const url = `http://${remoteAddress.value}`;
-  saveLastUsedServer(remoteAddress.value);
-  emit('serverConnected', url);
-};
-
-// Watch for changes to serverInfo to handle cleanup
 watch(serverInfo, (newValue, oldValue) => {
   if (!newValue && oldValue) {
     stopAutoConfirmCountdown();
@@ -253,4 +246,14 @@ watch(serverInfo, (newValue, oldValue) => {
 onUnmounted(() => {
   stopAutoConfirmCountdown();
 });
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.server-connection :deep(.v-stepper) {
+  box-shadow: none;
+}
+
+.server-connection :deep(.v-stepper-item) {
+  margin-bottom: 16px;
+}
+</style>
\ No newline at end of file
diff --git a/ping-viewer-next-frontend/src/components/utils/VisualSettings.vue b/ping-viewer-next-frontend/src/components/utils/VisualSettings.vue
index cf551ad0..3b90bfdf 100644
--- a/ping-viewer-next-frontend/src/components/utils/VisualSettings.vue
+++ b/ping-viewer-next-frontend/src/components/utils/VisualSettings.vue
@@ -1,180 +1,223 @@
 <template>
-  <div class="settings-container p-2">
-    <v-tabs v-model="activeSettingsTab" class="border-b mb-2">
-      <v-tab value="general">
-        <v-icon start>mdi-cog</v-icon>
-        General
-      </v-tab>
-      <v-tab value="ping1d">
-        <v-icon start>mdi-altimeter</v-icon>
-        Ping1D
-      </v-tab>
-      <v-tab value="ping360">
-        <v-icon start>mdi-radar</v-icon>
-        Ping360
-      </v-tab>
-      <v-tab value="presets">
-        <v-icon start>mdi-palette-swatch</v-icon>
-        Presets
-      </v-tab>
-    </v-tabs>
-
-    <v-window v-model="activeSettingsTab">
-      <v-window-item value="general">
-        <div class="px-4">
-          <v-list-subheader class="px-0 ">Palette</v-list-subheader>
-          <div>
-            <SonarColorOptions :initial-palette="localCommonSettings.colorPalette"
-              @update:colorPalette="updateColorPalette" />
-          </div>
-          <section>
-            <v-list-subheader class="px-0 ">Display Options</v-list-subheader>
-            <div class="d-flex align-center justify-space-between">
-              <span class="text-body-2 px-3">Dark Mode</span>
-              <v-switch class="px-3" :model-value="isDarkMode" @update:model-value="$emit('update:isDarkMode', $event)"
-                hide-details></v-switch>
-            </div>
-          </section>
-        </div>
-      </v-window-item>
-
-      <v-window-item value="ping1d">
-        <div class="px-4">
-          <section>
-            <v-list-subheader class="px-0 ">Display Settings</v-list-subheader>
-            <div class="d-flex flex-column gap-4 px-3">
-              <v-text-field v-model.number="localPing1DSettings.columnCount" type="number" label="Column Count"
-                hide-details density="compact"></v-text-field>
-              <v-text-field v-model.number="localPing1DSettings.tickCount" type="number" label="Tick Count" hide-details
-                density="compact"></v-text-field>
-            </div>
-          </section>
-
-          <section>
-            <v-list-subheader class="px-0 ">Display Options</v-list-subheader>
-            <div class="d-flex align-center justify-space-between pe-3">
-              <span class="text-body-2 px-3">Debug Mode</span>
-              <v-switch v-model="localPing1DSettings.debug" hide-details></v-switch>
+  <div class="settings-menu" :class="{ 'glass-inner disable-hover': glass }">
+    <div :class="['menu-content', { 'glass-inner disable-hover': glass }]">
+      <v-tabs v-model="activeSettingsTab" class="mb-2">
+        <v-tab value="general">
+          <v-icon start>mdi-cog</v-icon>
+          General
+        </v-tab>
+        <v-tab value="ping1d">
+          <v-icon start>mdi-altimeter</v-icon>
+          Ping1D
+        </v-tab>
+        <v-tab value="ping360">
+          <v-icon start>mdi-radar</v-icon>
+          Ping360
+        </v-tab>
+        <v-tab value="presets">
+          <v-icon start>mdi-palette-swatch</v-icon>
+          Presets
+        </v-tab>
+        <v-tab value="server">
+          <v-icon start>mdi-server</v-icon>
+          Server
+        </v-tab>
+      </v-tabs>
+
+      <v-window v-model="activeSettingsTab">
+        <!-- General Settings -->
+        <v-window-item value="general">
+          <div class="px-4">
+            <v-list-subheader class="px-0">Palette</v-list-subheader>
+            <div>
+              <SonarColorOptions :initial-palette="localCommonSettings.colorPalette"
+                @update:colorPalette="updateColorPalette" />
             </div>
-          </section>
-
-          <section>
-            <v-list-subheader class="px-0 ">Colors</v-list-subheader>
-            <div class="d-flex flex-column">
+            <section>
+              <v-list-subheader class="px-0">Display Options</v-list-subheader>
               <div class="d-flex align-center justify-space-between">
-                <span class="text-body-2 px-3">Depth Line Color</span>
-                <ColorPickerField v-model="localPing1DSettings.depthLineColor" :defaultValue="'#ffeb3b'" />
+                <span class="text-body-2 px-3">Dark Mode</span>
+                <v-switch class="px-3" :model-value="isDarkMode"
+                  @update:model-value="$emit('update:isDarkMode', $event)" hide-details></v-switch>
               </div>
               <div class="d-flex align-center justify-space-between">
-                <span class="text-body-2 px-3">Depth Line Color</span>
-                <ColorPickerField v-model="localPing1DSettings.depthLineColor" :defaultValue="'#ffeb3b'" />
+                <span class="text-body-2 px-3">Glass Effect</span>
+                <v-switch class="px-3" :model-value="isGlassMode"
+                  @update:model-value="$emit('update:isGlassMode', $event)" hide-details></v-switch>
               </div>
-              <div class="d-flex align-center justify-space-between">
-                <span class="text-body-2 px-3">Depth Text Color</span>
-                <ColorPickerField v-model="localPing1DSettings.depthTextColor" :defaultValue="'#ffeb3b'" />
+            </section>
+          </div>
+        </v-window-item>
+
+        <!-- Ping1D Settings -->
+        <v-window-item value="ping1d">
+          <div class="px-4">
+            <section>
+              <v-list-subheader class="px-0">Display Settings</v-list-subheader>
+              <div class="d-flex flex-column gap-4 px-3">
+                <v-text-field v-model.number="localPing1DSettings.columnCount" type="number" label="Column Count"
+                  hide-details density="compact"></v-text-field>
+                <v-text-field v-model.number="localPing1DSettings.tickCount" type="number" label="Tick Count"
+                  hide-details density="compact"></v-text-field>
               </div>
-              <div class="d-flex align-center justify-space-between">
-                <span class="text-body-2 px-3">Current Depth Color</span>
-                <ColorPickerField v-model="localPing1DSettings.currentDepthColor" :defaultValue="'#ffeb3b'" />
+            </section>
+
+            <section>
+              <v-list-subheader class="px-0">Display Options</v-list-subheader>
+              <div class="d-flex align-center justify-space-between pe-3">
+                <span class="text-body-2 px-3">Debug Mode</span>
+                <v-switch v-model="localPing1DSettings.debug" hide-details></v-switch>
               </div>
-              <div class="d-flex align-center justify-space-between">
-                <span class="text-body-2 px-3">Confidence Color</span>
-                <ColorPickerField v-model="localPing1DSettings.confidenceColor" :defaultValue="'#4caf50'" />
+            </section>
+
+            <section>
+              <v-list-subheader class="px-0">Colors</v-list-subheader>
+              <div class="d-flex flex-column">
+                <div class="d-flex align-center justify-space-between">
+                  <span class="text-body-2 px-3">Depth Line Color</span>
+                  <ColorPickerField v-model="localPing1DSettings.depthLineColor" :defaultValue="'#ffeb3b'" />
+                </div>
+                <div class="d-flex align-center justify-space-between">
+                  <span class="text-body-2 px-3">Depth Text Color</span>
+                  <ColorPickerField v-model="localPing1DSettings.depthTextColor" :defaultValue="'#ffeb3b'" />
+                </div>
+                <div class="d-flex align-center justify-space-between">
+                  <span class="text-body-2 px-3">Current Depth Color</span>
+                  <ColorPickerField v-model="localPing1DSettings.currentDepthColor" :defaultValue="'#ffeb3b'" />
+                </div>
+                <div class="d-flex align-center justify-space-between">
+                  <span class="text-body-2 px-3">Confidence Color</span>
+                  <ColorPickerField v-model="localPing1DSettings.confidenceColor" :defaultValue="'#4caf50'" />
+                </div>
+                <div class="d-flex align-center justify-space-between">
+                  <span class="text-body-2 px-3">Depth Arrow Color</span>
+                  <ColorPickerField v-model="localPing1DSettings.depthArrowColor" :defaultValue="'#f44336'" />
+                </div>
+                <div class="d-flex align-center justify-space-between">
+                  <span class="text-body-2 px-3">Text Background Color</span>
+                  <ColorPickerField v-model="localPing1DSettings.textBackground" :defaultValue="'rgba(0, 0, 0, 0.5)'" />
+                </div>
               </div>
-              <div class="d-flex align-center justify-space-between">
-                <span class="text-body-2 px-3">Depth Arrow Color</span>
-                <ColorPickerField v-model="localPing1DSettings.depthArrowColor" :defaultValue="'#f44336'" />
+            </section>
+          </div>
+        </v-window-item>
+
+        <!-- Ping360 Settings -->
+        <v-window-item value="ping360">
+          <div class="px-4">
+            <section class="mb-2">
+              <v-list-subheader class="px-0">Display Settings</v-list-subheader>
+              <div class="d-flex flex-column gap-4 px-3">
+                <v-text-field v-model.number="localPing360Settings.numMarkers" type="number" label="Number of Markers"
+                  hide-details density="compact"></v-text-field>
+                <v-text-field v-model.number="localPing360Settings.lineWidth" type="number" step="0.1"
+                  label="Line Width" hide-details density="compact"></v-text-field>
+                <v-text-field v-model.number="localPing360Settings.radiusLineWidth" type="number" step="0.1"
+                  label="Radius Line Width" hide-details density="compact"></v-text-field>
               </div>
-              <div class="d-flex align-center justify-space-between">
-                <span class="text-body-2 px-3">Text Background Color</span>
-                <ColorPickerField v-model="localPing1DSettings.textBackground" :defaultValue="'rgba(0, 0, 0, 0.5)'" />
+            </section>
+
+            <section class="mb-2">
+              <v-list-subheader>Display Options</v-list-subheader>
+              <div class="d-flex flex-column px-3">
+                <div class="d-flex align-center justify-space-between -mb-5">
+                  <span class="text-body-2">Show Radius Lines</span>
+                  <v-switch v-model="localPing360Settings.showRadiusLines" hide-details></v-switch>
+                </div>
+                <div class="d-flex align-center justify-space-between -mb-5">
+                  <span class="text-body-2">Show Markers</span>
+                  <v-switch v-model="localPing360Settings.showMarkers" hide-details></v-switch>
+                </div>
+                <div class="d-flex align-center justify-space-between -mb-5">
+                  <span class="text-body-2">Debug Mode</span>
+                  <v-switch v-model="localPing360Settings.debug" hide-details></v-switch>
+                </div>
               </div>
-            </div>
-          </section>
-        </div>
-      </v-window-item>
-
-      <v-window-item value="ping360">
-        <div class="px-4">
-
-          <section class="mb-2">
-            <v-list-subheader class="px-0 ">Display Settings</v-list-subheader>
-            <div class="d-flex flex-column gap-4 px-3">
-              <v-text-field v-model.number="localPing360Settings.numMarkers" type="number" label="Number of Markers"
-                hide-details density="compact"></v-text-field>
-              <v-text-field v-model.number="localPing360Settings.lineWidth" type="number" step="0.1" label="Line Width"
-                hide-details density="compact"></v-text-field>
-              <v-text-field v-model.number="localPing360Settings.radiusLineWidth" type="number" step="0.1"
-                label="Radius Line Width" hide-details density="compact"></v-text-field>
-            </div>
-          </section>
-
-          <section class="mb-2">
-            <v-list-subheader>Display Options</v-list-subheader>
-            <div class="d-flex flex-column px-3">
-              <div class="d-flex align-center justify-space-between -mb-5 ">
-                <span class="text-body-2">Show Radius Lines</span>
-                <v-switch v-model="localPing360Settings.showRadiusLines" hide-details></v-switch>
+            </section>
+
+            <section>
+              <v-list-subheader class="px-0">Colors</v-list-subheader>
+              <div class="d-flex flex-column">
+                <div class="d-flex align-center justify-space-between">
+                  <span class="text-body-2 px-3">Line Color</span>
+                  <ColorPickerField v-model="localPing360Settings.lineColor" :defaultValue="'#f44336'" />
+                </div>
+                <div class="d-flex align-center justify-space-between">
+                  <span class="text-body-2 px-3">Marker Color</span>
+                  <ColorPickerField v-model="localPing360Settings.markerColor" :defaultValue="'#4caf50'" />
+                </div>
+                <div class="d-flex align-center justify-space-between">
+                  <span class="text-body-2 px-3">Radius Line Color</span>
+                  <ColorPickerField v-model="localPing360Settings.radiusLineColor" :defaultValue="'#4caf50'" />
+                </div>
               </div>
-              <div class="d-flex align-center justify-space-between -mb-5 ">
-                <span class="text-body-2">Show Markers</span>
-                <v-switch v-model="localPing360Settings.showMarkers" hide-details></v-switch>
+            </section>
+          </div>
+        </v-window-item>
+
+        <!-- Presets -->
+        <v-window-item value="presets">
+          <div class="px-4">
+            <section class="mb-2">
+              <div class="mb-4">Accessibility Presets</div>
+              <v-select v-model="selectedPreset" :items="accessibilityPresets" label="Color Vision Mode"
+                @update:model-value="handlePresetChange" variant="outlined" density="comfortable" />
+            </section>
+
+            <v-alert v-if="selectedPreset !== 'default'" color="info" variant="tonal">
+              {{ getPresetDescription(selectedPreset) }}
+              <div class="text-caption mt-2">
+                You can still adjust individual settings in other tabs.
               </div>
-              <div class="d-flex align-center justify-space-between -mb-5">
-                <span class="text-body-2">Debug Mode</span>
-                <v-switch v-model="localPing360Settings.debug" hide-details></v-switch>
+            </v-alert>
+          </div>
+        </v-window-item>
+
+        <!-- Server Settings -->
+        <v-window-item value="server">
+          <div class="px-4">
+            <!-- Server Configuration -->
+            <section class="mb-6">
+              <v-list-subheader class="px-0">Server Configuration</v-list-subheader>
+              <v-text-field v-model="serverSettings.url" label="Server URL" placeholder="http://localhost:8080"
+                hint="Enter the server URL" persistent-hint class="mb-4" />
+            </section>
+
+            <!-- MAVLink Configuration -->
+            <section class="mb-6">
+              <v-list-subheader class="px-0">MAVLink Connection</v-list-subheader>
+              <v-text-field v-model="serverSettings.mavlinkUrl" label="MAVLink WebSocket URL"
+                placeholder="ws://localhost:6040/ws/mavlink" hint="WebSocket URL for MAVLink connection" persistent-hint
+                class="mb-4" />
+
+              <div class="d-flex align-center mb-4">
+                <v-switch v-model="serverSettings.autoConnectMavlink" hide-details class="mr-2" />
+                <span class="text-body-2">Auto-connect to MAVLink on startup</span>
               </div>
-            </div>
-          </section>
 
-          <section>
-            <v-list-subheader class="px-0 ">Colors</v-list-subheader>
-            <div class="d-flex flex-column">
-              <div class="d-flex align-center justify-space-between">
-                <span class="text-body-2 px-3">Line Color</span>
-                <ColorPickerField v-model="localPing360Settings.lineColor" :defaultValue="'#f44336'" />
-              </div>
-              <div class="d-flex align-center justify-space-between">
-                <span class="text-body-2 px-3">Marker Color</span>
-                <ColorPickerField v-model="localPing360Settings.markerColor" :defaultValue="'#4caf50'" />
+              <div class="d-flex align-center mb-4">
+                <div class="mr-4 d-flex align-center">
+                  <div class="mr-2">Status:</div>
+                  <v-chip :color="mavlinkStatusColor" size="small">
+                    {{ mavlinkStatus }}
+                  </v-chip>
+                </div>
+
+                <v-btn :color="mavlinkStatus === 'Connected' ? 'error' : 'success'" size="small"
+                  @click="toggleMavlinkConnection" :loading="mavlinkStatus === 'Connecting'">
+                  {{ mavlinkStatus === 'Connected' ? 'Disconnect' : 'Connect' }}
+                </v-btn>
               </div>
-              <div class="d-flex align-center justify-space-between">
-                <span class="text-body-2 px-3">Radius Line Color</span>
-                <ColorPickerField v-model="localPing360Settings.radiusLineColor" :defaultValue="'#4caf50'" />
-              </div>
-            </div>
-          </section>
-        </div>
-      </v-window-item>
-
-      <v-window-item value="presets">
-        <div class="px-4">
-          <section class="mb-2">
-            <div class=" mb-4">Accessibility Presets</div>
-            <v-select v-model="selectedPreset" :items="accessibilityPresets" label="Color Vision Mode"
-              @update:model-value="handlePresetChange" variant="outlined" density="comfortable" />
-          </section>
-
-          <v-alert v-if="selectedPreset !== 'default'" color="info" variant="tonal">
-            {{ getPresetDescription(selectedPreset) }}
-            <div class="text-caption mt-2">
-              You can still adjust individual settings in other tabs.
-            </div>
-          </v-alert>
-        </div>
-      </v-window-item>
-    </v-window>
+            </section>
+          </div>
+        </v-window-item>
 
-    <v-divider class="my-2"></v-divider>
+      </v-window>
 
-    <div class="d-flex -mb-6 justify-space-between">
-      <div class="d-flex gap-4">
-        <v-btn variant="text" @click="$emit('close')">
-          Close
-        </v-btn>
-      </div>
-      <div class="d-flex gap-4">
-        <v-btn color="error" variant="text" @click="handleReset">
+      <v-divider class="my-2"></v-divider>
+
+      <div class="d-flex justify-end pa-2">
+        <v-btn color="error" variant="text" @click="handleReset" class="mr-2">
           Reset
         </v-btn>
         <v-btn color="primary" variant="text" @click="saveSettings">
@@ -186,12 +229,20 @@
 </template>
 
 <script setup>
-import { reactive, ref, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import SonarColorOptions from '../widgets/SonarColorOptions.vue';
 import { colorPalettes } from '../widgets/SonarColorOptions.vue';
 import ColorPickerField from './ColorPickerField.vue';
 
 const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    required: true,
+  },
+  glass: {
+    type: Boolean,
+    default: false,
+  },
   commonSettings: {
     type: Object,
     required: true,
@@ -208,16 +259,31 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
+  isGlassMode: {
+    type: Boolean,
+    required: true,
+  },
+  serverUrl: {
+    type: String,
+    required: true,
+  },
+  yawConnectionStatus: {
+    type: String,
+    required: true,
+  },
 });
 
 const emit = defineEmits([
+  'update:isOpen',
   'update:commonSettings',
   'update:ping1DSettings',
   'update:ping360Settings',
   'update:isDarkMode',
+  'update:isGlassMode',
+  'update:serverUrl',
+  'updateMavlink',
   'save',
   'reset',
-  'close',
 ]);
 
 const activeSettingsTab = ref('general');
@@ -225,6 +291,12 @@ const selectedPreset = ref('default');
 const localCommonSettings = reactive({ ...props.commonSettings });
 const localPing1DSettings = reactive({ ...props.ping1DSettings });
 const localPing360Settings = reactive({ ...props.ping360Settings });
+const mavlinkStatus = ref('Disconnected');
+const serverSettings = reactive({
+  url: props.serverUrl,
+  mavlinkUrl: localStorage.getItem('mavlinkUrl') || 'ws://localhost:6040/ws/mavlink',
+  autoConnectMavlink: localStorage.getItem('autoConnectMavlink') === 'true',
+});
 
 const accessibilityPresets = [
   { title: 'Default', value: 'default' },
@@ -235,6 +307,19 @@ const accessibilityPresets = [
   { title: 'High Contrast', value: 'highContrast' },
 ];
 
+const mavlinkStatusColor = computed(() => {
+  switch (mavlinkStatus.value) {
+    case 'Connected':
+      return 'success';
+    case 'Connecting':
+      return 'warning';
+    case 'Error':
+      return 'error';
+    default:
+      return 'grey';
+  }
+});
+
 const presetConfigs = {
   default: {
     description: 'Default color settings',
@@ -382,9 +467,33 @@ const getPresetDescription = (preset) => {
 const handleReset = () => {
   selectedPreset.value = 'default';
   emit('reset');
+
+  // Reset server settings
+  serverSettings.url = props.serverUrl;
+  serverSettings.mavlinkUrl = 'ws://localhost:6040/ws/mavlink';
+  serverSettings.autoConnectMavlink = false;
+  localStorage.removeItem('mavlinkUrl');
+  localStorage.removeItem('autoConnectMavlink');
+
   localStorage.removeItem('selectedAccessibilityPreset');
 };
 
+const toggleMavlinkConnection = async () => {
+  if (mavlinkStatus.value === 'Connected') {
+    emit('updateMavlink', {
+      action: 'disconnect',
+      url: serverSettings.mavlinkUrl,
+    });
+  } else {
+    mavlinkStatus.value = 'Connecting';
+    emit('updateMavlink', {
+      action: 'connect',
+      url: serverSettings.mavlinkUrl,
+      autoConnect: serverSettings.autoConnectMavlink,
+    });
+  }
+};
+
 const handlePresetChange = (preset) => {
   if (preset === 'default') {
     handleReset();
@@ -415,15 +524,8 @@ const handlePresetChange = (preset) => {
   localStorage.setItem('selectedAccessibilityPreset', preset);
 };
 
-const updateColorPalette = (newPalette) => {
-  localCommonSettings.colorPalette = newPalette;
-  if (newPalette === 'Custom') {
-    localCommonSettings.customPalette = colorPalettes.Custom;
-  }
-  emit('update:commonSettings', { ...localCommonSettings });
-};
-
 const saveSettings = () => {
+  // Save visual settings
   localStorage.setItem('common-settings', JSON.stringify(localCommonSettings));
   localStorage.setItem('ping1d-settings', JSON.stringify(localPing1DSettings));
   localStorage.setItem('ping360-settings', JSON.stringify(localPing360Settings));
@@ -432,7 +534,44 @@ const saveSettings = () => {
     localStorage.setItem('customColorPalette', JSON.stringify(localCommonSettings.customPalette));
   }
 
+  if (serverSettings.url !== props.serverUrl) {
+    emit('update:serverUrl', serverSettings.url);
+  }
+
+  // Save server settings
+  localStorage.setItem('serverUrl', serverSettings.url);
+  localStorage.setItem('mavlinkUrl', serverSettings.mavlinkUrl);
+  localStorage.setItem('autoConnectMavlink', serverSettings.autoConnectMavlink.toString());
+
+  localStorage.setItem('mavlinkUrl', serverSettings.mavlinkUrl);
+  localStorage.setItem('autoConnectMavlink', serverSettings.autoConnectMavlink.toString());
+
+  if (mavlinkStatus.value === 'Connected') {
+    // Reconnect with new settings if already connected
+    emit('updateMavlink', {
+      action: 'reconnect',
+      url: serverSettings.mavlinkUrl,
+      autoConnect: serverSettings.autoConnectMavlink,
+    });
+  } else if (serverSettings.autoConnectMavlink) {
+    // Connect if auto-connect is enabled
+    emit('updateMavlink', {
+      action: 'connect',
+      url: serverSettings.mavlinkUrl,
+      autoConnect: true,
+    });
+  }
+
   emit('save');
+  emit('update:isOpen', false);
+};
+
+const updateColorPalette = (newPalette) => {
+  localCommonSettings.colorPalette = newPalette;
+  if (newPalette === 'Custom') {
+    localCommonSettings.customPalette = colorPalettes.Custom;
+  }
+  emit('update:commonSettings', { ...localCommonSettings });
 };
 
 watch(
@@ -482,29 +621,52 @@ watch(
   },
   { deep: true }
 );
+
+watch(
+  () => props.yawConnectionStatus,
+  (newStatus) => {
+    mavlinkStatus.value = newStatus;
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  // Load saved settings
+  if (serverSettings.autoConnectMavlink && mavlinkStatus.value === 'Disconnected') {
+    toggleMavlinkConnection();
+  }
+});
 </script>
-<style>
-.settings-scroll {
-  overflow-y: auto;
-  max-height: calc(80vh - 64px);
-  padding: 16px;
+
+<style scoped>
+.settings-menu {
+  transition: all 0.3s ease;
 }
 
-.settings-scroll::-webkit-scrollbar {
-  width: 8px;
+.menu-content {
+  padding: 1rem;
 }
 
-.settings-scroll::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
+:deep(.v-tabs) {
+  background-color: transparent !important;
 }
 
-.settings-scroll::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
+:deep(.v-tab) {
+  color: rgba(var(--v-theme-on-surface), 0.7);
 }
 
-.settings-scroll::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3);
+:deep(.v-tab--selected) {
+  color: rgb(var(--v-theme-on-surface));
+}
+
+:deep(.v-window) {
+  background-color: transparent !important;
+}
+
+@media (max-width: 600px) {
+  .settings-menu {
+    width: calc(100vw - var(--button-size) - var(--button-gap) * 2);
+    max-width: 400px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/ping-viewer-next-frontend/src/components/views/ReplayView.vue b/ping-viewer-next-frontend/src/components/views/ReplayView.vue
index ae5bf116..2554e6d8 100644
--- a/ping-viewer-next-frontend/src/components/views/ReplayView.vue
+++ b/ping-viewer-next-frontend/src/components/views/ReplayView.vue
@@ -1,33 +1,24 @@
 <template>
-	<div class="bg-black text-white h-full flex flex-col">
-	  <div class="container mx-auto p-4 flex flex-col h-full">
-		<h1 class="text-2xl font-bold mb-4">Recorded Data Viewer</h1>
-
-		<DataPlayer ref="dataPlayer" @update:currentFrame="updateCurrentDeviceData" @loadedData="onDataLoaded"
-		  class="mb-4" />
-
-		<div v-if="currentDeviceData" class="flex-grow overflow-hidden flex items-center justify-center" ref="deviceView">
-		  <div ref="componentContainer" class="relative" :style="containerStyle">
-			<component v-if="isComponentReady" :is="deviceComponent" :device="currentDeviceData.device" v-bind="deviceSpecificProps"
-			  class="w-full h-full" />
-		  </div>
-		</div>
-	  </div>
-	</div>
-  </template>
-
-  <script setup>
+  <div class="py-10 relative">
+    <component
+      v-if="isComponentReady"
+      :is="deviceComponent"
+      :device="currentDeviceData.device"
+      v-bind="deviceSpecificProps"
+      class="z-10"
+    ></component>
+  </div>
+</template>
+
+<script setup>
 import { computed, inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
-import DataPlayer from '../widgets/DataPlayer.vue';
 import Ping1D from '../widgets/sonar1d/Ping1D.vue';
 import Ping360 from '../widgets/sonar360/Ping360.vue';
 
 const { commonSettings, ping1DSettings, ping360Settings } = inject('deviceSettings');
 
-const dataPlayer = ref(null);
 const currentDeviceData = ref(null);
 const deviceView = ref(null);
-const componentContainer = ref(null);
 const isComponentReady = ref(false);
 const loadedDeviceType = ref(null);
 
@@ -36,13 +27,6 @@ const componentDimensions = ref({
   height: 600,
 });
 
-const containerStyle = computed(() => ({
-  width: `${componentDimensions.value.width}px`,
-  height: `${componentDimensions.value.height}px`,
-  maxWidth: '100%',
-  maxHeight: '100%',
-}));
-
 const deviceComponent = computed(() => {
   if (!currentDeviceData.value) return null;
   return currentDeviceData.value.device.device_type === 'Ping360' ? Ping360 : Ping1D;
@@ -165,4 +149,18 @@ onUnmounted(() => {
   currentDeviceData.value = null;
   loadedDeviceType.value = null;
 });
-</script>
\ No newline at end of file
+
+defineExpose({
+  updateCurrentDeviceData,
+  onDataLoaded,
+});
+</script>
+
+<!-- <style scoped>
+.replay-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style> -->
\ No newline at end of file
diff --git a/ping-viewer-next-frontend/src/components/widgets/DataPlayer.vue b/ping-viewer-next-frontend/src/components/widgets/DataPlayer.vue
index e46bfae9..c1f278bf 100644
--- a/ping-viewer-next-frontend/src/components/widgets/DataPlayer.vue
+++ b/ping-viewer-next-frontend/src/components/widgets/DataPlayer.vue
@@ -1,58 +1,42 @@
 <template>
-  <div class="mb-4">
-    <input type="file" @change="loadFile" accept=".json" class="mb-2" />
-    <div v-if="loadedData.length > 0" class="mt-4">
-      <div class="flex items-center space-x-2">
-        <button
-          @click="play"
-          :disabled="isPlaying"
-          class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 disabled:opacity-50"
-        >
-          Play
-        </button>
-        <button
-          @click="pause"
-          :disabled="!isPlaying"
-          class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600 disabled:opacity-50"
-        >
-          Pause
-        </button>
-        <button
-          @click="stop"
-          class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
-        >
-          Stop
-        </button>
-        <input
-          type="range"
-          v-model.number="playbackSpeed"
-          min="0.1"
-          max="10"
-          step="0.1"
-          class="w-32"
-        />
-        <span>Speed: {{ playbackSpeed }}x</span>
-      </div>
-      <div class="mt-2">
-        <input
-          type="range"
-          v-model.number="currentFrame"
-          :min="0"
-          :max="loadedData.length - 1"
-          class="w-full"
-          @input="handleFrameChange"
-        />
-        <div class="flex justify-between">
-          <span>Frame: {{ displayedFrame }} / {{ loadedData.length }}</span>
-          <span
-            >Time: {{ formatTime(loadedData[currentFrame]?.timestamp) }}</span
-          >
-        </div>
-      </div>
-    </div>
-  </div>
+  <v-container class="pa-0">
+    <v-row>
+      <v-col class="mr-2">
+        <input type="file" @change="loadFile" accept=".json" />
+      </v-col>
+
+      <template v-if="loadedData.length > 0">
+        <v-col cols="auto" class="d-flex align-center">
+          <v-btn color="success" @click="play" :disabled="isPlaying" density="compact" class="mr-1">
+            <v-icon left>mdi-play</v-icon>
+          </v-btn>
+
+          <v-btn color="warning" @click="pause" :disabled="!isPlaying" density="compact" class="mr-1">
+            <v-icon left>mdi-pause</v-icon>
+          </v-btn>
+
+          <v-btn color="error" @click="stop" density="compact" class="mr-1">
+            <v-icon left>mdi-stop</v-icon>
+          </v-btn>
+        </v-col>
+
+        <v-col cols="2" class="d-flex flex-column justify-center mr-4">
+          <input type="range" v-model.number="playbackSpeed" min="0.1" max="10" step="0.1" class="w-100" />
+          <div class="text-caption">Speed: {{ playbackSpeed }}x</div>
+        </v-col>
+
+        <v-col class="d-flex flex-column justify-center">
+          <input type="range" v-model.number="currentFrame" :min="0" :max="loadedData.length - 1" class="w-100"
+            @input="handleFrameChange" />
+          <div class="d-flex justify-space-between">
+            <span class="text-caption">Frame: {{ displayedFrame }} / {{ loadedData.length }}</span>
+            <span class="text-caption">Time: {{ formatTime(loadedData[currentFrame]?.timestamp) }}</span>
+          </div>
+        </v-col>
+      </template>
+    </v-row>
+  </v-container>
 </template>
-
 <script setup>
 import { computed, ref, watch } from 'vue';
 
diff --git a/ping-viewer-next-frontend/src/components/widgets/FloatingControls.vue b/ping-viewer-next-frontend/src/components/widgets/FloatingControls.vue
index 401156c0..00e20b95 100644
--- a/ping-viewer-next-frontend/src/components/widgets/FloatingControls.vue
+++ b/ping-viewer-next-frontend/src/components/widgets/FloatingControls.vue
@@ -1,46 +1,25 @@
 <template>
+  <div class="absolute bottom-5 left-1/2 -translate-x-1/2 z-10">
     <div
-      class="absolute bottom-5 left-1/2 -translate-x-1/2 z-10"
+      class="square-button-container"
+      :class="{ 'expanded': isExpanded, 'glass': true }"
       @mouseenter="handleShowControls"
       @mouseleave="handleHideControls"
     >
-      <div
-        class="rounded-full backdrop-blur-sm bg-white/5 border border-white/10 p-1.5 cursor-pointer transition-all duration-500 flex items-center justify-center group hover:bg-white/10 relative"
-        :class="{
-          'w-auto h-auto': isExpanded,
-          'w-8 h-8': !isExpanded,
-          'opacity-40 hover:opacity-100': !isExpanded && !isRecording
-        }"
-      >
-        <div
-          class="flex items-center gap-2 transition-all duration-500 overflow-hidden text-white/70"
-          :class="{
-            'opacity-100 w-auto': isExpanded,
-            'opacity-0 w-0': !isExpanded
-          }"
-        >
-          <slot></slot>
-        </div>
-
-        <div
-          class="absolute transition-all duration-500 text-white/70"
-          :class="{
-            'opacity-0 scale-0': isExpanded,
-            'opacity-100 scale-100': !isExpanded
-          }"
-        >
-          <v-icon size="small">mdi-chevron-up</v-icon>
-        </div>
-
-        <div
-          v-if="isRecording"
-          class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-red-400/60 rounded-full animate-pulse shadow-sm"
-        ></div>
+      <div class="button-content" :class="{ 'expanded': isExpanded }">
+        <slot></slot>
       </div>
+
+      <div class="expand-icon" :class="{ 'hidden': isExpanded }">
+        <v-icon size="small">mdi-chevron-up</v-icon>
+      </div>
+
+      <div v-if="isRecording" class="recording-indicator"></div>
     </div>
-  </template>
+  </div>
+</template>
 
-  <script setup>
+<script setup>
 import { ref } from 'vue';
 
 defineProps({
@@ -65,24 +44,81 @@ const handleHideControls = () => {
 };
 </script>
 
-  <style scoped>
-  @keyframes pulse {
-    0% {
-      opacity: 0.6;
-    }
-    50% {
-      opacity: 0.3;
-    }
-    100% {
-      opacity: 0.6;
-    }
-  }
+<style scoped>
+.square-button-container {
+  --button-size: 3.25rem;
+  --button-gap: 0.5rem;
+  --border-radius: 0.5rem;
 
-  .animate-pulse {
-    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
+  width: var(--button-size);
+  height: var(--button-size);
+  border-radius: var(--border-radius);
+  position: relative;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(var(--v-theme-background), 0.1) !important;
+  backdrop-filter: blur(1px) !important;
+  border: 1px solid rgba(203, 203, 203, 0.25);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
+}
+
+.square-button-container:hover {
+  background-color: rgba(var(--v-theme-background), 0.3) !important;
+}
+
+.square-button-container.expanded {
+  width: auto;
+  height: auto;
+  padding: 0.375rem;
+}
 
-  .transition-all {
-    transition: all 0.5s ease-in-out;
+.button-content {
+  display: flex;
+  align-items: center;
+  gap: var(--button-gap);
+  opacity: 0;
+  width: 0;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.button-content.expanded {
+  opacity: 1;
+  width: auto;
+  overflow: visible;
+}
+
+.expand-icon {
+  position: absolute;
+  transition: all 0.3s ease;
+  color: rgba(var(--v-theme-on-surface), 0.7);
+}
+
+.expand-icon.hidden {
+  opacity: 0;
+  transform: scale(0);
+}
+
+.recording-indicator {
+  position: absolute;
+  top: -0.125rem;
+  right: -0.125rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: rgba(239, 68, 68, 0.6);
+  border-radius: 9999px;
+  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.3;
   }
-  </style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/ping-viewer-next-frontend/src/components/widgets/sonar1d/Ping1DLoader.vue b/ping-viewer-next-frontend/src/components/widgets/sonar1d/Ping1DLoader.vue
index 14607444..44713ebf 100644
--- a/ping-viewer-next-frontend/src/components/widgets/sonar1d/Ping1DLoader.vue
+++ b/ping-viewer-next-frontend/src/components/widgets/sonar1d/Ping1DLoader.vue
@@ -17,10 +17,16 @@
       >
         <v-icon>{{ isFreeze ? 'mdi-play' : 'mdi-pause' }}</v-icon>
       </v-btn>
+      <v-btn icon color="primary" @click="openSettings" class="elevation-4" size="large">
+			    <v-icon>mdi-cog</v-icon>
+		    </v-btn>
+        <v-dialog v-model="isSettingsOpen" max-width="300px">
       <Ping1DSettings
+        :isOpen="isSettingsOpen"
         :server-url="getServerUrl(websocketUrl)"
         :device-id="device.id"
       />
+        </v-dialog>
     </FloatingControls>
 
     <Ping1D
@@ -106,6 +112,7 @@ const socket = ref(null);
 const dataRecorder = ref(null);
 const isRecording = ref(false);
 const isFreeze = ref(false);
+const isSettingsOpen = ref(false);
 
 const liveData = ref({
   sensorData: [],
@@ -223,6 +230,10 @@ const disconnectWebSocket = () => {
   }
 };
 
+const openSettings = async () => {
+  isSettingsOpen.value = true;
+};
+
 onMounted(() => {
   connectWebSocket();
 });
diff --git a/ping-viewer-next-frontend/src/components/widgets/sonar1d/Ping1DSettings.vue b/ping-viewer-next-frontend/src/components/widgets/sonar1d/Ping1DSettings.vue
index 9e25e6db..5a75542e 100644
--- a/ping-viewer-next-frontend/src/components/widgets/sonar1d/Ping1DSettings.vue
+++ b/ping-viewer-next-frontend/src/components/widgets/sonar1d/Ping1DSettings.vue
@@ -1,13 +1,6 @@
 <template>
-  <div>
-    <v-btn icon color="primary" @click="isOpen = !isOpen" class="elevation-4" size="large">
-      <v-icon>mdi-cog</v-icon>
-    </v-btn>
-
-    <v-dialog v-model="isOpen" max-width="300px">
       <v-card>
         <v-card-title class="text-h5 pb-2">Ping1D Settings</v-card-title>
-
         <v-card-text>
           <div class="mb-4">
             <div class="d-flex align-center justify-space-between mb-4">
@@ -79,8 +72,6 @@
           </div>
         </v-card-text>
       </v-card>
-    </v-dialog>
-  </div>
 </template>
 
 <script setup>
@@ -95,9 +86,13 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  isOpen: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const isOpen = ref(false);
+const emit = defineEmits(['update:isOpen']);
 const isSaving = ref(false);
 const rawAutoMode = ref(1);
 
@@ -178,6 +173,7 @@ const fetchCurrentSettings = async () => {
     }
   } catch (error) {
     console.error('Error fetching settings:', error);
+  } finally {
   }
 };
 
@@ -223,7 +219,7 @@ const saveSettings = async () => {
       await handleGainChange();
     }
     await handleSpeedOfSoundChange();
-    isOpen.value = false;
+    emit('update:isOpen', false);
   } catch (error) {
     console.error('Error saving settings:', error);
   } finally {
@@ -231,10 +227,17 @@ const saveSettings = async () => {
   }
 };
 
-watch(isOpen, (newValue, oldValue) => {
-  if (newValue && !oldValue) {
-    fetchCurrentSettings();
+watch(
+  () => props.isOpen,
+  async (newValue) => {
+    if (newValue) {
+      await fetchCurrentSettings();
+    }
   }
+);
+
+onMounted(async () => {
+  await fetchCurrentSettings();
 });
 </script>
 
diff --git a/ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Loader.vue b/ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Loader.vue
index f317e152..b0f1b2a6 100644
--- a/ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Loader.vue
+++ b/ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Loader.vue
@@ -18,14 +18,21 @@
         >
           <v-icon>{{ isFreeze ? 'mdi-play' : 'mdi-pause' }}</v-icon>
         </v-btn>
+        <v-btn icon color="primary" @click="openSettings" class="elevation-4" size="large">
+			    <v-icon>mdi-cog</v-icon>
+		    </v-btn>
+        <v-dialog v-model="isSettingsOpen" max-width="300px">
+
         <Ping360Settings
           ref="settingsRef"
           :server-url="getServerUrl(websocketUrl)"
           :device-id="device.id"
           :initial-angles="{ startAngle, endAngle }"
+          :isOpen="isSettingsOpen"
           @update:angles="handleAngleUpdate"
           @rangeChange="handleRangeChange"
         />
+      </v-dialog>
       </FloatingControls>
 
       <Ping360
@@ -136,6 +143,7 @@ const socket = ref(null);
 const settingsRef = ref(null);
 const isFreeze = ref(false);
 const isRecording = ref(false);
+const isSettingsOpen = ref(false);
 
 const yawAngle = inject('yawAngle', ref(0));
 
@@ -191,6 +199,27 @@ function gradiansToDegrees(gradians) {
   return Math.round((gradians * 360) / 400);
 }
 
+const sendGetConfigRequest = () => {
+  if (!socket.value || socket.value.readyState !== WebSocket.OPEN) {
+    console.error('WebSocket is not connected');
+    return;
+  }
+
+  const configRequest = {
+    command: 'ModifyDevice',
+    module: 'DeviceManager',
+    payload: {
+      uuid: props.device.id, // Using the device id from props
+      modify: 'GetPing360Config',
+    },
+  };
+
+  socket.value.send(JSON.stringify(configRequest));
+  if (props.debug) {
+    console.debug('Sent GetPing360Config request:', configRequest);
+  }
+};
+
 const connectWebSocket = () => {
   if (socket.value) return;
 
@@ -198,6 +227,7 @@ const connectWebSocket = () => {
 
   socket.value.onopen = () => {
     connectionStatus.value = 'Connected';
+    sendGetConfigRequest();
   };
 
   socket.value.onmessage = (event) => {
@@ -207,9 +237,11 @@ const connectWebSocket = () => {
         console.debug('Ping360 data:', parsedData);
       }
 
-      if (parsedData.DeviceConfig?.ConfigAcknowledge?.modify?.SetPing360Config) {
-        const config = parsedData.DeviceConfig.ConfigAcknowledge.modify.SetPing360Config;
+      const config =
+        parsedData.DeviceConfig?.ConfigAcknowledge?.modify?.SetPing360Config ||
+        parsedData.DeviceConfig?.Ping360Config;
 
+      if (config) {
         const SAMPLE_PERIOD_TICK_DURATION = 25e-9;
         currentRange.value = Math.round(
           (config.sample_period * SAMPLE_PERIOD_TICK_DURATION * config.number_of_samples * 1500) / 2
@@ -284,6 +316,10 @@ const handleRangeChange = (newRange) => {
   currentRange.value = newRange;
 };
 
+const openSettings = async () => {
+  isSettingsOpen.value = true;
+};
+
 watch(
   () => props.websocketUrl,
   (newUrl, oldUrl) => {
@@ -301,9 +337,6 @@ watch(yawAngle, (newYaw) => {
 });
 
 onMounted(async () => {
-  if (props.showControls && settingsRef.value?.fetchCurrentSettings) {
-    await settingsRef.value.fetchCurrentSettings();
-  }
   connectWebSocket();
 });
 
diff --git a/ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Settings.vue b/ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Settings.vue
index 471cdc68..fd8afbf8 100644
--- a/ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Settings.vue
+++ b/ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Settings.vue
@@ -1,10 +1,4 @@
 <template>
-	<div>
-		<v-btn icon color="primary" @click="openSettings" class="elevation-4" size="large">
-			<v-icon>mdi-cog</v-icon>
-		</v-btn>
-
-		<v-dialog v-model="isOpen" max-width="300px">
 			<v-card>
 				<v-card-title class="text-h5 pb-2">Sonar Settings</v-card-title>
 
@@ -210,8 +204,6 @@
 					</div>
 				</v-card-text>
 			</v-card>
-		</v-dialog>
-	</div>
 </template>
 
 <script setup>
@@ -230,9 +222,13 @@ const props = defineProps({
     type: Object,
     default: () => ({ startAngle: 0, endAngle: 360 }),
   },
+  isOpen: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['update:range', 'rangeChange', 'update:angles']);
+const emit = defineEmits(['update:range', 'rangeChange', 'update:angles', 'update:isOpen']);
 
 // Constants from Ping360 specs
 const SAMPLE_PERIOD_TICK_DURATION = 25e-9;
@@ -243,10 +239,8 @@ const MAX_NUMBER_OF_POINTS = 1200;
 const MIN_TRANSMIT_DURATION = 1;
 const MAX_TRANSMIT_DURATION = 1000;
 
-const isOpen = ref(false);
 const isSaving = ref(false);
 const isLoading = ref(false);
-const isInitialized = ref(false);
 const showAdvanced = ref(false);
 const autoMode = ref(true);
 const range = ref(10);
@@ -279,13 +273,6 @@ const transmitDurationMax = computed(() => {
   );
 });
 
-const openSettings = async () => {
-  isOpen.value = true;
-  if (!isInitialized.value) {
-    await fetchCurrentSettings();
-  }
-};
-
 function degreesToGradians(degrees) {
   if (degrees === 360) {
     return 399;
@@ -349,7 +336,6 @@ const fetchCurrentSettings = async () => {
     console.error('Error fetching settings:', error);
   } finally {
     isLoading.value = false;
-    isInitialized.value = true;
   }
 };
 
@@ -553,7 +539,7 @@ const saveSettings = async () => {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
 
-    isOpen.value = false;
+    emit('update:isOpen', false);
   } catch (error) {
     console.error('Error saving settings:', error);
   } finally {
@@ -619,14 +605,19 @@ watch(
   { deep: true, immediate: true }
 );
 
-watch(isOpen, (newValue, oldValue) => {
-  if (newValue && !oldValue) {
-    fetchCurrentSettings();
+watch(
+  () => props.isOpen,
+  async (newValue) => {
+    if (newValue) {
+      await fetchCurrentSettings();
+    }
   }
-});
+);
 
-onMounted(() => {
-  angleRange.value = [props.initialAngles.startAngle, props.initialAngles.endAngle];
+onMounted(async () => {
+  if (props.isOpen) {
+    await fetchCurrentSettings();
+  }
 });
 </script>