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 5c4dccb2..ae715915 100644
--- a/ping-viewer-next-frontend/src/App.vue
+++ b/ping-viewer-next-frontend/src/App.vue
@@ -202,11 +202,11 @@
   </v-app>
 </template>
 <script setup>
-import { ref, computed } from 'vue'
-import { useDisplay, useTheme } from 'vuetify'
+import { computed, ref } from 'vue';
+import { useDisplay, useTheme } from 'vuetify';
 import ConnectionManager from './components/ConnectionManager.vue';
-import Ping360Settings from './components/widgets/sonar360/Ping360Settings.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;
@@ -223,15 +223,9 @@ const currentDeviceAngles = computed(() => {
 });
 
 // Add handlers for device-specific settings
-const handleAngleUpdate = ({ startAngle, endAngle }) => {
-  // Handle angle updates for Ping360
-  console.log('Angle update:', { startAngle, endAngle });
-};
+const handleAngleUpdate = ({ startAngle, endAngle }) => {};
 
-const handleRangeChange = (newRange) => {
-  // Handle range changes
-  console.log('Range change:', newRange);
-};
+const handleRangeChange = (newRange) => {};
 
 const getServerUrl = (wsUrl) => {
   try {
@@ -243,8 +237,8 @@ const getServerUrl = (wsUrl) => {
   }
 };
 
-const { name: breakpoint } = useDisplay()
-const theme = useTheme()
+const { name: breakpoint } = useDisplay();
+const theme = useTheme();
 
 const handleServerUrlUpdate = async (newUrl) => {
   serverUrl.value = newUrl;
@@ -266,16 +260,17 @@ const handleServerUrlUpdate = async (newUrl) => {
   }
 };
 
-const isSpeedDialOpen = ref(false)
-const isGlassMode = ref(true)
-const glass = computed(() => isGlassMode.value)
+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 updateConnectionIcon = () => (isConnectionMenuOpen.value ? 'mdi-close' : 'mdi-connection');
+const updateVisualSettingsIcon = () =>
+  showSettings.value ? 'mdi-close' : 'mdi-white-balance-sunny';
 
 const getStatusColor = computed(() => (status) => {
   switch (status) {
@@ -296,20 +291,20 @@ const speedDialItems = ref([
     dialog: {
       isOpen: false,
       title: 'Information',
-      content: 'Information content goes here'
-    }
+      content: 'Information content goes here',
+    },
   },
   {
     icon: updateConnectionIcon,
     action: () => {
       isConnectionMenuOpen.value = !isConnectionMenuOpen.value;
-    }
+    },
   },
   {
     icon: updateVisualSettingsIcon,
     action: () => {
       showSettings.value = !showSettings.value;
-    }
+    },
   },
   { icon: 'mdi-memory-arrow-down' },
   {
@@ -317,23 +312,23 @@ const speedDialItems = ref([
     dialog: {
       isOpen: false,
       title: 'Settings',
-      content: 'Settings content goes here'
-    }
-  }
-])
+      content: 'Settings content goes here',
+    },
+  },
+]);
 
 const iconColor = computed(() => {
-  return theme.global.current.value.dark ? 'white' : 'black'
-})
+  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
-})
+    default: 'x-large',
+  };
+  return sizes[breakpoint.value] || sizes.default;
+});
 
 const dialogWidth = computed(() => {
   const sizes = {
@@ -341,10 +336,10 @@ const dialogWidth = computed(() => {
     sm: '400px',
     md: '500px',
     lg: '600px',
-    default: '600px'
-  }
-  return sizes[breakpoint.value] || sizes.default
-})
+    default: '600px',
+  };
+  return sizes[breakpoint.value] || sizes.default;
+});
 
 const isConnectionMenuOpen = ref(false);
 const isVisualSettingsMenuOpen = ref(false);
@@ -360,12 +355,12 @@ const selectDevice = async (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 || []];
-    connections.forEach(conn => {
+    const connections = [...(websocket.value?.clients || [])];
+    for (const conn of connections) {
       if (conn.url === oldWebSocket) {
         conn.close();
       }
-    });
+    }
 
     // Clear the active device first
     activeDevice.value = null;
@@ -377,7 +372,7 @@ const selectDevice = async (device) => {
   const component = device.device_type === 'Ping360' ? Ping360Loader : Ping1DLoader;
   activeDevice.value = {
     device,
-    component
+    component,
   };
   isConnectionMenuOpen.value = false;
 };
@@ -385,30 +380,23 @@ const selectDevice = async (device) => {
 // Add this to your reactive state
 const activeDevice = ref(null);
 
-const isMenuOpen = ref(false)
+const isMenuOpen = ref(false);
 const config = ref({
   wifi: true,
   strength: 75,
   network: 'Home Network',
-  autoConnect: true
-})
+  autoConnect: true,
+});
 
-const networkOptions = [
-  'Home Network',
-  'Office Network',
-  'Guest Network',
-  'Public WiFi'
-]
+const networkOptions = ['Home Network', 'Office Network', 'Guest Network', 'Public WiFi'];
 
 const toggleMenu = () => {
-  isMenuOpen.value = !isMenuOpen.value
-}
+  isMenuOpen.value = !isMenuOpen.value;
+};
 
 const saveConfig = () => {
-  console.log('Saving config:', config.value)
-  isMenuOpen.value = false
-}
-
+  isMenuOpen.value = false;
+};
 
 import { onMounted, onUnmounted, provide, reactive, watch } from 'vue';
 import { useRoute } from 'vue-router';
@@ -460,12 +448,10 @@ const deviceSettings = computed(() => {
   };
 });
 
-
 const getWebSocketUrl = (device) => {
   if (!device || !serverUrl.value) return '';
   const url = new URL(serverUrl.value);
   const protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
-  console.log(`${protocol}//${url.host}/ws?device_number=${device.id}`)
   return `${protocol}//${url.host}/ws?device_number=${device.id}`;
 };
 
@@ -634,9 +620,9 @@ const loadSettings = () => {
     const savedPing1D = localStorage.getItem('ping1d-settings');
     const savedPing360 = localStorage.getItem('ping360-settings');
     const savedCustomPalette = localStorage.getItem('customColorPalette');
-    const savedGlassMode = localStorage.getItem('glassMode')
+    const savedGlassMode = localStorage.getItem('glassMode');
     if (savedGlassMode !== null) {
-      isGlassMode.value = savedGlassMode === 'true'
+      isGlassMode.value = savedGlassMode === 'true';
     }
     if (savedCommon) Object.assign(commonSettings, JSON.parse(savedCommon));
     if (savedPing1D) Object.assign(ping1DSettings, JSON.parse(savedPing1D));
@@ -654,7 +640,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())
+    localStorage.setItem('glassMode', isGlassMode.value.toString());
     if (commonSettings.customPalette?.length > 0) {
       localStorage.setItem('customColorPalette', JSON.stringify(commonSettings.customPalette));
     }
@@ -713,9 +699,9 @@ const updateDarkMode = (value) => {
 };
 
 const toggleTheme = () => {
-  theme.global.name.value = isDarkMode.value ? 'dark' : 'light'
-  localStorage.setItem('theme', theme.global.name.value)
-}
+  theme.global.name.value = isDarkMode.value ? 'dark' : 'light';
+  localStorage.setItem('theme', theme.global.name.value);
+};
 
 const toggleFullscreen = () => {
   if (!document.fullscreenElement) {
@@ -831,9 +817,9 @@ provide('deviceSettings', {
 });
 
 const playRecording = (recording) => {
-  showRecordingsMenu.value = false;  // Close the menu
-  isReplayActive.value = true;       // Show the replay view
-  replayData.value = recording;      // Set the recording data
+  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) {
@@ -932,7 +918,7 @@ const formatRecordingDetails = (recording) => {
 };
 
 const deleteRecording = (recording) => {
-  const index = recordings.value.findIndex(r => r.id === recording.id);
+  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
@@ -953,7 +939,6 @@ const saveRecordingsToStorage = () => {
   }
 };
 
-
 // Add these watchers to handle menu state
 watch(isSpeedDialOpen, (newValue) => {
   if (newValue) {
@@ -973,7 +958,6 @@ watch(showRecordingsMenu, (newValue) => {
     isMenuOpen.value = false;
   }
 });
-
 </script>
 <style>
 :root {
diff --git a/ping-viewer-next-frontend/src/components/ConnectionManager.vue b/ping-viewer-next-frontend/src/components/ConnectionManager.vue
index 93fecb1b..e7ddebad 100644
--- a/ping-viewer-next-frontend/src/components/ConnectionManager.vue
+++ b/ping-viewer-next-frontend/src/components/ConnectionManager.vue
@@ -97,7 +97,6 @@
 <script setup>
 import { onMounted, onUnmounted, ref } from 'vue';
 
-
 const props = defineProps({
   serverUrl: {
     type: String,
@@ -229,17 +228,17 @@ const createDevice = async () => {
     const source =
       newDevice.value.connectionType === 'UdpStream'
         ? {
-          UdpStream: {
-            ip: newDevice.value.udp.ip,
-            port: newDevice.value.udp.port,
-          },
-        }
+            UdpStream: {
+              ip: newDevice.value.udp.ip,
+              port: newDevice.value.udp.port,
+            },
+          }
         : {
-          SerialStream: {
-            path: newDevice.value.serial.path,
-            baudrate: newDevice.value.serial.baudrate,
-          },
-        };
+            SerialStream: {
+              path: newDevice.value.serial.path,
+              baudrate: newDevice.value.serial.baudrate,
+            },
+          };
 
     const response = await fetch(`${props.serverUrl}/device_manager/request`, {
       method: 'POST',
diff --git a/ping-viewer-next-frontend/src/components/utils/VisualSettings.vue b/ping-viewer-next-frontend/src/components/utils/VisualSettings.vue
index 802d1ea2..3b90bfdf 100644
--- a/ping-viewer-next-frontend/src/components/utils/VisualSettings.vue
+++ b/ping-viewer-next-frontend/src/components/utils/VisualSettings.vue
@@ -229,7 +229,7 @@
 </template>
 
 <script setup>
-import { reactive, ref, computed, watch, onMounted } 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';
@@ -237,11 +237,11 @@ import ColorPickerField from './ColorPickerField.vue';
 const props = defineProps({
   isOpen: {
     type: Boolean,
-    required: true
+    required: true,
   },
   glass: {
     type: Boolean,
-    default: false
+    default: false,
   },
   commonSettings: {
     type: Object,
@@ -265,12 +265,12 @@ const props = defineProps({
   },
   serverUrl: {
     type: String,
-    required: true
+    required: true,
   },
   yawConnectionStatus: {
     type: String,
-    required: true
-  }
+    required: true,
+  },
 });
 
 const emit = defineEmits([
@@ -295,7 +295,7 @@ const mavlinkStatus = ref('Disconnected');
 const serverSettings = reactive({
   url: props.serverUrl,
   mavlinkUrl: localStorage.getItem('mavlinkUrl') || 'ws://localhost:6040/ws/mavlink',
-  autoConnectMavlink: localStorage.getItem('autoConnectMavlink') === 'true'
+  autoConnectMavlink: localStorage.getItem('autoConnectMavlink') === 'true',
 });
 
 const accessibilityPresets = [
@@ -309,10 +309,14 @@ const accessibilityPresets = [
 
 const mavlinkStatusColor = computed(() => {
   switch (mavlinkStatus.value) {
-    case 'Connected': return 'success';
-    case 'Connecting': return 'warning';
-    case 'Error': return 'error';
-    default: return 'grey';
+    case 'Connected':
+      return 'success';
+    case 'Connecting':
+      return 'warning';
+    case 'Error':
+      return 'error';
+    default:
+      return 'grey';
   }
 });
 
@@ -478,14 +482,14 @@ const toggleMavlinkConnection = async () => {
   if (mavlinkStatus.value === 'Connected') {
     emit('updateMavlink', {
       action: 'disconnect',
-      url: serverSettings.mavlinkUrl
+      url: serverSettings.mavlinkUrl,
     });
   } else {
     mavlinkStatus.value = 'Connecting';
     emit('updateMavlink', {
       action: 'connect',
       url: serverSettings.mavlinkUrl,
-      autoConnect: serverSettings.autoConnectMavlink
+      autoConnect: serverSettings.autoConnectMavlink,
     });
   }
 };
@@ -547,14 +551,14 @@ const saveSettings = () => {
     emit('updateMavlink', {
       action: 'reconnect',
       url: serverSettings.mavlinkUrl,
-      autoConnect: serverSettings.autoConnectMavlink
+      autoConnect: serverSettings.autoConnectMavlink,
     });
   } else if (serverSettings.autoConnectMavlink) {
     // Connect if auto-connect is enabled
     emit('updateMavlink', {
       action: 'connect',
       url: serverSettings.mavlinkUrl,
-      autoConnect: true
+      autoConnect: true,
     });
   }
 
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 c17bd5d8..5a75542e 100644
--- a/ping-viewer-next-frontend/src/components/widgets/sonar1d/Ping1DSettings.vue
+++ b/ping-viewer-next-frontend/src/components/widgets/sonar1d/Ping1DSettings.vue
@@ -88,8 +88,8 @@ const props = defineProps({
   },
   isOpen: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 });
 
 const emit = defineEmits(['update:isOpen']);
@@ -227,12 +227,14 @@ const saveSettings = async () => {
   }
 };
 
-watch(() => props.isOpen, async (newValue) => {
-  if (newValue) {
-    console.log("test")
-    await fetchCurrentSettings();
+watch(
+  () => props.isOpen,
+  async (newValue) => {
+    if (newValue) {
+      await fetchCurrentSettings();
+    }
   }
-});
+);
 
 onMounted(async () => {
   await fetchCurrentSettings();
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 97d5ec53..b0f1b2a6 100644
--- a/ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Loader.vue
+++ b/ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Loader.vue
@@ -206,12 +206,12 @@ const sendGetConfigRequest = () => {
   }
 
   const configRequest = {
-    command: "ModifyDevice",
-    module: "DeviceManager",
+    command: 'ModifyDevice',
+    module: 'DeviceManager',
     payload: {
       uuid: props.device.id, // Using the device id from props
-      modify: "GetPing360Config"
-    }
+      modify: 'GetPing360Config',
+    },
   };
 
   socket.value.send(JSON.stringify(configRequest));
@@ -237,26 +237,27 @@ const connectWebSocket = () => {
         console.debug('Ping360 data:', parsedData);
       }
 
-      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
-      );
-
-      if (config.start_angle === 0 && config.stop_angle === 399) {
-        startAngle.value = 0;
-        endAngle.value = 360;
-      } else {
-        startAngle.value = (gradiansToDegrees(config.start_angle) + 180) % 360;
-        endAngle.value = (gradiansToDegrees(config.stop_angle) + 180) % 360;
+      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
+        );
+
+        if (config.start_angle === 0 && config.stop_angle === 399) {
+          startAngle.value = 0;
+          endAngle.value = 360;
+        } else {
+          startAngle.value = (gradiansToDegrees(config.start_angle) + 180) % 360;
+          endAngle.value = (gradiansToDegrees(config.stop_angle) + 180) % 360;
+        }
+
+        return;
       }
 
-      return;
-    }
-
       const ping360Data = parsedData?.DeviceMessage?.PingMessage?.Ping360;
       if (!ping360Data) return;
 
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 22c3db31..fd8afbf8 100644
--- a/ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Settings.vue
+++ b/ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Settings.vue
@@ -224,8 +224,8 @@ const props = defineProps({
   },
   isOpen: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 });
 
 const emit = defineEmits(['update:range', 'rangeChange', 'update:angles', 'update:isOpen']);
@@ -605,18 +605,20 @@ watch(
   { deep: true, immediate: true }
 );
 
-watch(() => props.isOpen, async (newValue) => {
-  if (newValue) {
-    await fetchCurrentSettings();
+watch(
+  () => props.isOpen,
+  async (newValue) => {
+    if (newValue) {
+      await fetchCurrentSettings();
+    }
   }
-});
+);
 
 onMounted(async () => {
   if (props.isOpen) {
     await fetchCurrentSettings();
   }
 });
-
 </script>
 
 <style>