diff --git a/api/Server.ts b/api/Server.ts
index 7b6f3065..5ff370c1 100755
--- a/api/Server.ts
+++ b/api/Server.ts
@@ -149,6 +149,12 @@ const checkS3Connection = async (): Promise<void> => {
       "Access-Control-Allow-Headers",
       "where, offset, limit, Authorization, Origin, X-Requested-With, Content-Type, Accept, Viewport, if-none-match, cache-control"
     );
+
+    // NOTE: We've seen an instance where the HOST request header is rewritten by the client, which would otherwise break
+    //  some things.  If the host is unknown, default to browse-next.
+    if (!request.headers.host.includes("cacophony.org.nz")) {
+      request.headers.host = "https://browse-next.cacophony.org.nz";
+    }
     next();
   });
   await initialiseApi(app);
diff --git a/api/api/V1/recordingUtil.ts b/api/api/V1/recordingUtil.ts
index ad4c51da..1d9b0ea1 100755
--- a/api/api/V1/recordingUtil.ts
+++ b/api/api/V1/recordingUtil.ts
@@ -1356,6 +1356,9 @@ export function signedToken(
 export const guessMimeType = (type, filename): string => {
   const mimeType = mime.getType(filename);
   if (mimeType) {
+    if (mimeType === "audio/x-aac") {
+      return "audio/mp4";
+    }
     return mimeType;
   }
   switch (type) {
diff --git a/browse-next/src/api/Device.ts b/browse-next/src/api/Device.ts
index 691c257a..5ccf122c 100644
--- a/browse-next/src/api/Device.ts
+++ b/browse-next/src/api/Device.ts
@@ -341,6 +341,7 @@ export const getLatestStatusRecordingForDevice = (
     params.append("max-results", "1");
     params.append("types", "thermal");
     params.append("include-false-positives", true.toString());
+    params.append("devices", deviceId.toString());
     if (use2SecondRecordings) {
       params.append("status-recordings", true.toString());
     }
diff --git a/browse-next/src/components/CptvSingleFrame.vue b/browse-next/src/components/CptvSingleFrame.vue
index 6895223c..4914e3d0 100644
--- a/browse-next/src/components/CptvSingleFrame.vue
+++ b/browse-next/src/components/CptvSingleFrame.vue
@@ -120,6 +120,8 @@ const loadRecording = async () => {
           );
           frameData.value = new ImageData(buffer, 160, 120);
           renderFrame();
+        } else {
+          break;
         }
       }
     }
diff --git a/browse-next/src/components/DeviceRecordingSetup.vue b/browse-next/src/components/DeviceRecordingSetup.vue
index 6006131e..3f14cab6 100644
--- a/browse-next/src/components/DeviceRecordingSetup.vue
+++ b/browse-next/src/components/DeviceRecordingSetup.vue
@@ -4,11 +4,13 @@ import { selectedProjectDevices } from "@models/provides.ts";
 import type {
   ApiDeviceHistorySettings,
   ApiDeviceResponse,
+  AudioModes,
 } from "@typedefs/api/device";
 import { useRoute } from "vue-router";
 import type { DeviceId } from "@typedefs/api/common";
 import type { LoadedResource } from "@api/types.ts";
 import {
+  getDeviceModel,
   getDeviceNodeGroup,
   getSettingsForDevice,
   updateDeviceSettings,
@@ -16,13 +18,12 @@ import {
 import Datepicker from "@vuepic/vue-datepicker";
 import { projectDevicesLoaded } from "@models/LoggedInUser.ts";
 import { resourceIsLoading } from "@/helpers/utils.ts";
-import { DeviceType } from "@typedefs/api/consts.ts";
 type Time = { hours: number; minutes: number; seconds: number };
 const devices = inject(selectedProjectDevices) as Ref<
   ApiDeviceResponse[] | null
 >;
 const route = useRoute();
-const saltNodeGroup = ref<LoadedResource<string>>(null);
+const deviceModel = ref<LoadedResource<"tc2" | "pi">>(null);
 // Device Settings
 const settings = ref<LoadedResource<ApiDeviceHistorySettings>>(null);
 const syncedSettings = ref<LoadedResource<ApiDeviceHistorySettings>>(null);
@@ -53,9 +54,9 @@ const device = computed<ApiDeviceResponse | null>(() => {
 
 const settingsLoading = resourceIsLoading(settings);
 const lastSyncedSettingsLoading = resourceIsLoading(lastSyncedSettings);
-const nodeGroupInfoLoading = resourceIsLoading(saltNodeGroup);
+const nodeGroupInfoLoading = resourceIsLoading(deviceModel);
 const isTc2Device = computed<boolean>(() => {
-  return (saltNodeGroup.value || "").includes("tc2");
+  return deviceModel.value === "tc2";
 });
 const defaultWindows = {
   powerOn: "-30m",
@@ -152,8 +153,8 @@ const loadResource = async (
 const initialised = ref<boolean>(false);
 onBeforeMount(async () => {
   await projectDevicesLoaded();
-  await loadResource(saltNodeGroup, () => getDeviceNodeGroup(deviceId.value));
   await loadResource(settings, fetchSettings);
+  await loadResource(deviceModel, () => getDeviceModel(deviceId.value));
   initialised.value = true;
   if (settings.value && !settings.value.synced) {
     // Load last synced settings
@@ -283,6 +284,233 @@ const customRecordingWindowStop = computed<Time>({
   },
 });
 
+const audioModeOptions = [
+  { value: "Disabled", text: "Disabled" },
+  { value: "AudioOnly", text: "Audio Only" },
+  { value: "AudioAndThermal", text: "Audio and Thermal" },
+  { value: "AudioOrThermal", text: "Audio or Thermal" },
+];
+
+// Computed property for Audio Mode
+const audioMode = computed<AudioModes>({
+  get: () => {
+    return (
+      (settings.value as ApiDeviceHistorySettings)?.audioRecording?.audioMode ??
+      "Disabled"
+    );
+  },
+  set: (val: AudioModes) => {
+    if (settings.value) {
+      (settings.value as ApiDeviceHistorySettings).audioRecording = {
+        ...(settings.value as ApiDeviceHistorySettings).audioRecording,
+        audioMode: val,
+        updated: new Date().toISOString(),
+      };
+    }
+  },
+});
+const audioModeExplanation = computed<string>(() => {
+  switch (audioMode.value) {
+    case "AudioOnly":
+      return "Records audio in a 24-hour window and disables thermal recording.";
+    case "AudioOrThermal":
+      return "Records audio outside of the thermal recording window.";
+    case "AudioAndThermal":
+      return "Records audio in a 24-hour window; however, the camera cannot record during the 1 minute of audio recording.";
+    default:
+      return "";
+  }
+});
+function timeToMinutes(timeStr: string): number {
+  const [hours, minutes] = timeStr.split(":").map(Number);
+  return hours * 60 + minutes;
+}
+
+function timeToPercentage(timeStr: string): number {
+  const totalMinutes = timeToMinutes(timeStr);
+  return (totalMinutes / (24 * 60)) * 100;
+}
+
+function calculateTimePercentagePoints(
+  startTime: string,
+  endTime: string
+): Array<{ left: string; width: string }> {
+  if (startTime === "12:00" && endTime === "12:00")
+    return [{ left: "0%", width: "100%" }];
+  const startPercentage = timeToPercentage(startTime);
+  const endPercentage = timeToPercentage(endTime);
+
+  if (startPercentage <= endPercentage) {
+    return [
+      {
+        left: `${startPercentage}%`,
+        width: `${endPercentage - startPercentage}%`,
+      },
+    ];
+  } else {
+    return [
+      { left: `${startPercentage}%`, width: `${100 - startPercentage}%` },
+      { left: `0%`, width: `${endPercentage}%` },
+    ];
+  }
+}
+
+// Computed property for Thermal Bar Styles
+const thermalBarStyles = computed(() => {
+  if (audioMode.value === "AudioOnly") {
+    return [];
+  }
+
+  const setting = settings.value ? settings.value : undefined;
+  const windows = setting?.windows;
+  const startRecording = windows?.startRecording || "-30m";
+  const stopRecording = windows?.stopRecording || "+30m";
+
+  // Handle relative times (cannot accurately represent without actual sunset/sunrise times)
+  if (
+    startRecording.startsWith("+") ||
+    startRecording.startsWith("-") ||
+    stopRecording.startsWith("+") ||
+    stopRecording.startsWith("-")
+  ) {
+    // Default to full night time (e.g., 18:00 to 06:00)
+    return [
+      { left: "0%", width: "33%" },
+      {
+        left: "66%", // Approximate 18:00
+        width: "34%", // From 18:00 to 06:00
+      },
+    ];
+  }
+
+  const thermalRanges = calculateTimePercentagePoints(
+    startRecording,
+    stopRecording
+  );
+
+  return thermalRanges.map((range) => ({
+    left: range.left,
+    width: range.width,
+  }));
+});
+
+// Computed property for Audio Bar Styles
+const audioBarStyles = computed(() => {
+  if (audioMode.value === "Disabled") {
+    return [];
+  }
+
+  if (
+    audioMode.value === "AudioOnly" ||
+    audioMode.value === "AudioAndThermal"
+  ) {
+    return [
+      {
+        left: "0%",
+        width: "100%",
+      },
+    ];
+  }
+
+  if (audioMode.value === "AudioOrThermal") {
+    const windows = (settings.value ? settings.value : {})?.windows;
+    const startRecording = windows?.startRecording || "-30m";
+    const stopRecording = windows?.stopRecording || "+30m";
+
+    // Handle relative times (cannot accurately represent without actual sunset/sunrise times)
+    if (
+      startRecording.startsWith("+") ||
+      startRecording.startsWith("-") ||
+      stopRecording.startsWith("+") ||
+      stopRecording.startsWith("-")
+    ) {
+      // Default to daytime (outside of night time)
+      return [
+        {
+          left: "33%",
+          width: "33%", // From 00:00 to 18:00
+        },
+      ];
+    }
+
+    const thermalRanges = calculateTimePercentagePoints(
+      startRecording,
+      stopRecording
+    );
+
+    // Audio ranges are inverse of thermal ranges
+    const audioRanges: Array<{ left: string; width: string }> = [];
+
+    if (thermalRanges.length === 1) {
+      const thermalStart = parseFloat(thermalRanges[0].left);
+      const thermalWidth = parseFloat(thermalRanges[0].width);
+
+      // Before thermal recording window
+      if (thermalStart > 0) {
+        audioRanges.push({
+          left: "0%",
+          width: `${thermalStart}%`,
+        });
+      }
+
+      // After thermal recording window
+      const afterThermalStart = thermalStart + thermalWidth;
+      if (afterThermalStart < 100) {
+        audioRanges.push({
+          left: `${afterThermalStart}%`,
+          width: `${100 - afterThermalStart}%`,
+        });
+      }
+    } else if (thermalRanges.length === 2) {
+      // Thermal ranges cross midnight
+      const firstThermalRangeEnd =
+        parseFloat(thermalRanges[0].left) + parseFloat(thermalRanges[0].width);
+
+      const secondThermalRangeStart = parseFloat(thermalRanges[1].left);
+
+      // Audio range between thermal ranges
+      if (firstThermalRangeEnd < secondThermalRangeStart) {
+        audioRanges.push({
+          left: `${firstThermalRangeEnd}%`,
+          width: `${secondThermalRangeStart - firstThermalRangeEnd}%`,
+        });
+      }
+    }
+
+    return audioRanges;
+  }
+
+  return [];
+});
+
+// Computed property for Audio Seed
+const audioSeed = computed<number>({
+  get: () => {
+    return (
+      (settings.value as ApiDeviceHistorySettings)?.audioRecording?.audioSeed ??
+      0
+    );
+  },
+  set: (val: number) => {
+    if (settings.value) {
+      (settings.value as ApiDeviceHistorySettings).audioRecording = {
+        ...((settings.value as ApiDeviceHistorySettings).audioRecording || {}),
+        audioSeed: val,
+        updated: new Date().toISOString(),
+      };
+    }
+  },
+});
+const savingAudioSettings = ref<boolean>(false);
+
+watch([audioMode, audioSeed], async () => {
+  if (settings.value && initialised.value) {
+    savingAudioSettings.value = true;
+    await updateDeviceSettings(deviceId.value, settings.value);
+    savingAudioSettings.value = false;
+  }
+});
+
 const savingPowerModeSettings = ref<boolean>(false);
 const savingRecordingWindowSettings = ref<boolean>(false);
 watch(useLowPowerMode, async () => {
@@ -322,7 +550,8 @@ watch(customRecordingWindowStop, async () => {
     <div
       class="mt-4 mt-lg-0 settings-config w-100 justify-content-center align-items-center"
       v-if="
-        device && [DeviceType.Thermal, DeviceType.Hybrid].includes(device.type)
+        device &&
+        (device.type === 'thermal' || device.type === 'hybrid-thermal-audio')
       "
     >
       <div class="alert alert-info">
@@ -352,12 +581,22 @@ watch(customRecordingWindowStop, async () => {
           <strong>Synced with remote device:</strong>
           {{ settings.synced ? "Yes" : "No" }}
         </div>
-        <span
-          ><span v-if="!settings.synced">Once synced, w</span
-          ><span v-else>W</span>ill {{ recordingWindow }} in
-          <span v-if="useLowPowerMode">low</span> <span v-else>high</span> power
-          mode.</span
-        >
+        <span>
+          <span v-if="!settings.synced">Once synced, w</span>
+          <span v-else>W</span>ill {{ recordingWindow }} in
+          <span v-if="useLowPowerMode">low</span>
+          <span v-else>high</span> power mode
+          <span v-if="audioMode !== 'Disabled'">
+            and
+            <span v-if="audioMode === 'AudioOnly'">audio only</span>
+            <span v-else-if="audioMode === 'AudioAndThermal'"
+              >audio and thermal</span
+            >
+            <span v-else-if="audioMode === 'AudioOrThermal'"
+              >audio or thermal</span
+            > </span
+          >.
+        </span>
         <hr />
         <div v-if="isTc2Device">
           <div class="h5">Set power profile</div>
@@ -387,6 +626,79 @@ watch(customRecordingWindowStop, async () => {
           </p>
           <hr />
         </div>
+        <div v-if="isTc2Device">
+          <div class="h5">Set Audio Recording Settings</div>
+          <p>
+            Audio recordings are made 32 times a day for one minute at random
+            intervals.
+          </p>
+          <div class="alert-light alert">
+            <b-form-group label="Audio Mode">
+              <b-form-select
+                v-model="audioMode"
+                :options="audioModeOptions"
+                :disabled="savingAudioSettings"
+              ></b-form-select>
+            </b-form-group>
+            <div class="d-flex justify-content-end">
+              <b-spinner
+                class="ms-2"
+                v-if="savingAudioSettings"
+                variant="secondary"
+                small
+              />
+            </div>
+            <div class="pt-2">{{ audioModeExplanation }}</div>
+          </div>
+          <div v-if="audioMode !== 'Disabled' || recordingWindow" class="mt-4">
+            <div class="d-flex align-items-center">
+              <div :style="{ width: '71px' }"></div>
+              <div class="d-flex w-100 justify-content-between text-muted">
+                <div>00:00</div>
+                <div>12:00</div>
+                <div>24:00</div>
+              </div>
+            </div>
+            <div class="d-flex flex-column mt-2">
+              <div class="d-flex align-items-center mb-2">
+                <h6 class="text-muted mb-0 py-1" :style="{ width: '71px' }">
+                  Thermal:
+                </h6>
+                <div
+                  class="position-relative flex-fill rounded bg-light p-0"
+                  :style="{ height: '1em' }"
+                >
+                  <!-- Thermal Recording Windows -->
+                  <div
+                    v-if="audioMode !== 'AudioOnly'"
+                    v-for="(style, index) in thermalBarStyles"
+                    :key="'thermal-' + index"
+                    class="position-absolute h-100 bg-success p-0"
+                    :style="style"
+                  ></div>
+                </div>
+              </div>
+              <div class="d-flex align-items-center">
+                <h6 class="text-muted mb-0 py-1" :style="{ width: '71px' }">
+                  Audio:
+                </h6>
+                <div
+                  class="position-relative flex-fill rounded bg-light"
+                  :style="{ height: '1em' }"
+                >
+                  <!-- Audio Recording Windows -->
+                  <div
+                    v-for="(style, index) in audioBarStyles"
+                    :key="'audio-' + index"
+                    class="position-absolute h-100 bg-primary"
+                    :style="style"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <hr />
+        </div>
         <div>
           <div class="h5">Set recording time windows</div>
           <p>
@@ -456,6 +768,7 @@ watch(customRecordingWindowStop, async () => {
             >
           </p>
         </div>
+        <hr />
       </div>
     </div>
   </div>
diff --git a/browse-next/src/views/DevicesView.vue b/browse-next/src/views/DevicesView.vue
index 82df4fb2..fff90be0 100644
--- a/browse-next/src/views/DevicesView.vue
+++ b/browse-next/src/views/DevicesView.vue
@@ -506,6 +506,10 @@ const deviceRecordingMode = computed<"cameras" | "audio">(() => {
   return "cameras";
 });
 
+const cacophonyEpoch = new Date();
+cacophonyEpoch.setFullYear(2010, 0, 0);
+cacophonyEpoch.setHours(0, 0, 0);
+
 const isDevicesRoot = computed(() => {
   return route.name === "devices";
 });
@@ -538,14 +542,13 @@ const isDevicesRoot = computed(() => {
           <b-button
             class="ms-4 align-items-center d-none d-md-flex"
             variant="outline-secondary"
-            v-if="deviceLocation"
             :to="{
           name: 'activity',
           query: {
             devices: [selectedDevice.id],
             //locations: [deviceLocation.id],
-            until: (selectedDeviceLatestRecordingDateTime as Date).toISOString(),
-            from: (selectedDeviceActiveFrom as Date).toISOString(),
+            until: ((selectedDeviceLatestRecordingDateTime || new Date()) as Date).toISOString(),
+            from: ((selectedDeviceActiveFrom || cacophonyEpoch) as Date).toISOString(),
             'display-mode': 'recordings',
             'recording-mode': deviceRecordingMode
           },
diff --git a/browse-next/vite.config.ts b/browse-next/vite.config.ts
index ee18d316..9f2e493f 100644
--- a/browse-next/vite.config.ts
+++ b/browse-next/vite.config.ts
@@ -12,7 +12,6 @@ import { BootstrapVueNextResolver } from "unplugin-vue-components/resolvers";
 export default defineConfig({
   envDir: ".",
   plugins: [
-    vue({ reactivityTransform: true }),
     Components({
       resolvers: [BootstrapVueNextResolver()],
     }),
@@ -22,6 +21,13 @@ export default defineConfig({
       failOnError: false,
       exclude: ["**/consts.ts", "**/node_modules/**", "**/*.js"],
     }),
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag === "spectastiq-viewer",
+        },
+      },
+    }),
   ],
   resolve: {
     alias: {
diff --git a/browse/src/api/Device.api.ts b/browse/src/api/Device.api.ts
index 4dfc3404..38b7e9f1 100644
--- a/browse/src/api/Device.api.ts
+++ b/browse/src/api/Device.api.ts
@@ -288,6 +288,7 @@ async function updateDeviceSettings(
   deviceId: DeviceId,
   settings: ApiDeviceHistorySettings
 ): Promise<FetchResult<{ settings: ApiDeviceHistorySettings }>> {
+  debugger;
   return CacophonyApi.post(`/api/v1/devices/${deviceId}/settings`, {
     settings,
   });
@@ -407,6 +408,38 @@ const getDeviceNodeGroup = (deviceId: DeviceId) => {
     });
   }) as Promise<string | false>;
 };
+
+export const getDeviceModel = async (deviceId: DeviceId) => {
+  try {
+    const nodegroup = await getDeviceNodeGroup(deviceId);
+    if (nodegroup) {
+      const model = nodegroup.includes("tc2")
+        ? "tc2"
+        : nodegroup.includes("pi")
+        ? "pi"
+        : null;
+      if (model !== null) {
+        return model;
+      }
+    }
+    const model = await getLatestEventsByDeviceId(deviceId, {
+      type: "versionData",
+      limit: 1,
+    }).then((response) => {
+      if (response.success && response.result.rows.length) {
+        return response.result.rows[0].EventDetail.details["tc2-agent"]
+          ? "tc2"
+          : "pi";
+      } else {
+        return null;
+      }
+    });
+    return model;
+  } catch (e) {
+    return null;
+  }
+};
+
 export default {
   getDevices,
   getDevice,
@@ -429,5 +462,6 @@ export default {
   set24HourRecordingWindows,
   setCustomRecordingWindows,
   getDeviceNodeGroup,
+  getDeviceModel,
   getLatestEventsByDeviceId,
 };
diff --git a/browse/src/components/Devices/DeviceInfo.vue b/browse/src/components/Devices/DeviceInfo.vue
index 9d00e042..1d7bd170 100644
--- a/browse/src/components/Devices/DeviceInfo.vue
+++ b/browse/src/components/Devices/DeviceInfo.vue
@@ -133,6 +133,34 @@
               >
             </p>
           </div>
+          <hr />
+          <div v-if="isTc2Device">
+            <div>
+              <h5>Set Audio Recording Settings</h5>
+              <p>
+                Audio recordings are made 32 times a day for one minute at
+                random intervals.
+              </p>
+              <div>
+                <b-form-group label="Audio Mode">
+                  <b-form-select
+                    v-model="audioMode"
+                    :options="audioModeOptions"
+                    :disabled="savingAudioSettings"
+                  ></b-form-select>
+                </b-form-group>
+                <div class="d-flex justify-content-end">
+                  <b-spinner
+                    class="ms-2"
+                    v-if="savingAudioSettings"
+                    variant="secondary"
+                    small
+                  />
+                </div>
+                <div class="pb-16">{{ audioModeExplanation }}</div>
+              </div>
+            </div>
+          </div>
         </div>
       </b-col>
       <b-col>
@@ -181,6 +209,7 @@ import {
 import DeviceApi from "@/api/Device.api";
 import {
   ApiDeviceHistorySettings,
+  AudioModes,
   WindowsSettings,
 } from "@typedefs/api/device";
 
@@ -205,6 +234,7 @@ export default defineComponent({
     ];
 
     const showCustomModal = ref(false);
+
     const fetchSettings = async () => {
       try {
         const response = await DeviceApi.getSettingsForDevice(props.deviceId);
@@ -330,9 +360,9 @@ export default defineComponent({
       return rows;
     });
 
-    const saltNodeGroup = ref<string>(null);
+    const deviceModel = ref<"pi" | "tc2">();
     const isTc2Device = computed<boolean>(() => {
-      return (saltNodeGroup.value || "").includes("tc2");
+      return deviceModel.value === "tc2";
     });
     const defaultWindows = {
       powerOn: "-30m",
@@ -340,6 +370,44 @@ export default defineComponent({
       startRecording: "-30m",
       stopRecording: "+30m",
     };
+    const savingAudioSettings = ref<boolean>(false);
+    const audioMode = computed<AudioModes>({
+      get: () => {
+        return settings.value?.audioRecording?.audioMode ?? "Disabled";
+      },
+      set: async (val: AudioModes) => {
+        if (settings.value) {
+          settings.value.audioRecording = {
+            ...settings.value.audioRecording,
+            audioMode: val,
+            updated: new Date().toISOString(),
+          };
+          savingAudioSettings.value = true;
+          await DeviceApi.updateDeviceSettings(props.deviceId, settings.value);
+          savingAudioSettings.value = false;
+        }
+      },
+    });
+    const audioModeExplanation = computed<string>(() => {
+      debugger;
+      switch (audioMode.value) {
+        case "AudioOnly":
+          return "Records audio in a 24-hour window and disables thermal recording.";
+        case "AudioOrThermal":
+          return "Records audio outside of the thermal recording window.";
+        case "AudioAndThermal":
+          return "Records audio in a 24-hour window; however, the camera cannot record during the 1 minute of audio recording.";
+        default:
+          return "";
+      }
+    });
+    // Audio Mode Options
+    const audioModeOptions = [
+      { value: "Disabled", text: "Disabled" },
+      { value: "AudioOnly", text: "Audio Only" },
+      { value: "AudioAndThermal", text: "Audio and Thermal" },
+      { value: "AudioOrThermal", text: "Audio or Thermal" },
+    ];
     const recordingWindowSetting = computed<"default" | "always" | "custom">({
       get: () => {
         const s = settings.value as ApiDeviceHistorySettings;
@@ -500,17 +568,32 @@ export default defineComponent({
     });
     const initialized = ref<boolean>(false);
 
+    watch(
+      () => audioMode.value,
+      async () => {
+        if (settings.value) {
+          savingAudioSettings.value = true;
+          await DeviceApi.updateDeviceSettings(props.deviceId, settings.value);
+          savingAudioSettings.value = false;
+        }
+      }
+    );
+
     onMounted(async () => {
       await fetchSettings();
       initialized.value = true;
-      const nodeGroupRes = await DeviceApi.getDeviceNodeGroup(props.deviceId);
-      if (nodeGroupRes) {
-        saltNodeGroup.value = nodeGroupRes;
+      const res = await DeviceApi.getDeviceModel(props.deviceId);
+      if (res) {
+        deviceModel.value = res;
       }
     });
 
     return {
       isTc2Device,
+      savingAudioSettings,
+      audioMode,
+      audioModeExplanation,
+      audioModeOptions,
       settings,
       currentWindowsType,
       fields,
diff --git a/types/api/device.d.ts b/types/api/device.d.ts
index a948f74d..1bea3614 100644
--- a/types/api/device.d.ts
+++ b/types/api/device.d.ts
@@ -59,6 +59,17 @@ export type ThermalRecordingSettings = {
   useLowPowerMode: boolean;
 } & SettingsBase;
 
+export type AudioModes =
+  | "Disabled"
+  | "AudioOnly"
+  | "AudioAndThermal"
+  | "AudioOrThermal";
+
+export type AudioRecordingSettings = {
+  audioMode?: AudioModes;
+  audioSeed?: number;
+} & SettingsBase;
+
 export type WindowsSettings = {
   startRecording: string;
   stopRecording: string;
@@ -82,6 +93,7 @@ export interface ApiDeviceHistorySettings {
   maskRegions?: MaskRegions;
   ratThresh?: any;
   thermalRecording?: ThermalRecordingSettings;
+  audioRecording?: AudioRecordingSettings;
   windows?: WindowsSettings;
   synced?: boolean;
 }