diff --git a/ping-viewer-next-frontend/bun.lockb b/ping-viewer-next-frontend/bun.lockb
index 7afa9c45..7c5491fd 100755
Binary files a/ping-viewer-next-frontend/bun.lockb and b/ping-viewer-next-frontend/bun.lockb differ
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..5490ba14 100644
--- a/ping-viewer-next-frontend/src/App.vue
+++ b/ping-viewer-next-frontend/src/App.vue
@@ -4,160 +4,408 @@
       <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(true);
+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';
+    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..f4face18 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-0 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) var(--border-radius) 0 0;
+  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.3);
+  backdrop-filter: blur(25px);
+  border: 1px solid rgba(203, 203, 203, 0.13);
+  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.5);
+}
+
+.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>