diff --git a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
index b92734fde..cb5b02b27 100644
--- a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
@@ -5,6 +5,7 @@ import { useStateStore } from "@/stores/StateStore";
 import { computed, inject, ref } from "vue";
 import { axiosPost, getResolutionString, parseJsonFile } from "@/lib/PhotonUtils";
 import { useTheme } from "vuetify";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 
 const theme = useTheme();
 
@@ -12,7 +13,7 @@ const props = defineProps<{
   videoFormat: VideoFormat;
 }>();
 
-const confirmRemoveDialog = ref({ show: false, vf: {} as VideoFormat });
+const confirmRemoveDialog = ref({ show: false, vf: props.videoFormat as VideoFormat });
 
 const removeCalibration = (vf: VideoFormat) => {
   axiosPost("/calibration/remove", "delete a camera calibration", {
@@ -20,8 +21,6 @@ const removeCalibration = (vf: VideoFormat) => {
     width: vf.resolution.width,
     height: vf.resolution.height
   });
-
-  confirmRemoveDialog.value.show = false;
 };
 
 const exportCalibration = ref();
@@ -110,17 +109,6 @@ const calibrationImageURL = (index: number) =>
         <v-card-title class="pa-0"> Calibration Details </v-card-title>
       </v-col>
       <v-col cols="12" md="6" class="d-flex align-center pt-0 pt-md-3">
-        <v-btn
-          color="error"
-          :disabled="!currentCalibrationCoeffs"
-          class="mr-2"
-          style="flex: 1"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-          @click="() => (confirmRemoveDialog = { show: true, vf: props.videoFormat })"
-        >
-          <v-icon start size="large">mdi-delete</v-icon>
-          <span>Delete</span>
-        </v-btn>
         <v-btn
           color="buttonPassive"
           class="mr-2"
@@ -140,6 +128,7 @@ const calibrationImageURL = (index: number) =>
         />
         <v-btn
           color="buttonPassive"
+          class="mr-2"
           :disabled="!currentCalibrationCoeffs"
           style="flex: 1"
           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
@@ -154,6 +143,16 @@ const calibrationImageURL = (index: number) =>
           :href="exportCalibrationURL"
           target="_blank"
         />
+        <v-btn
+          color="error"
+          :disabled="!currentCalibrationCoeffs"
+          style="flex: 1"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          @click="() => (confirmRemoveDialog = { show: true, vf: props.videoFormat })"
+        >
+          <v-icon start size="large">mdi-delete</v-icon>
+          <span>Delete</span>
+        </v-btn>
       </v-col>
     </div>
     <v-card-title class="pt-0 pb-0"
@@ -312,32 +311,13 @@ const calibrationImageURL = (index: number) =>
     </v-card-text>
   </v-card>
 
-  <v-dialog v-model="confirmRemoveDialog.show" width="600">
-    <v-card color="surface" dark>
-      <v-card-title>Delete Calibration</v-card-title>
-      <v-card-text class="pt-0">
-        Are you sure you want to delete the calibration for {{ confirmRemoveDialog.vf.resolution.width }}x{{
-          confirmRemoveDialog.vf.resolution.height
-        }}? This cannot be undone.
-        <v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="primary"
-            @click="() => (confirmRemoveDialog.show = false)"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="error"
-            @click="removeCalibration(confirmRemoveDialog.vf)"
-          >
-            Delete
-          </v-btn>
-        </v-card-actions>
-      </v-card-text>
-    </v-card>
-  </v-dialog>
+  <pv-delete-modal
+    v-model="confirmRemoveDialog.show"
+    :width="500"
+    :title="'Delete Calibration'"
+    :description="`Are you sure you want to delete the calibration for '${confirmRemoveDialog.vf.resolution.width}x${confirmRemoveDialog.vf.resolution.height}'? This action cannot be undone.`"
+    :on-confirm="() => removeCalibration(confirmRemoveDialog.vf)"
+  />
 </template>
 
 <style scoped>
diff --git a/photon-client/src/components/cameras/CameraSettingsCard.vue b/photon-client/src/components/cameras/CameraSettingsCard.vue
index cfab1a0e1..a4d91b64a 100644
--- a/photon-client/src/components/cameras/CameraSettingsCard.vue
+++ b/photon-client/src/components/cameras/CameraSettingsCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import PvSelect, { type SelectItem } from "@/components/common/pv-select.vue";
-import PvInput from "@/components/common/pv-input.vue";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 import PvNumberInput from "@/components/common/pv-number-input.vue";
 import PvSwitch from "@/components/common/pv-switch.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
@@ -120,17 +120,9 @@ watchEffect(() => {
 });
 
 const showDeleteCamera = ref(false);
-const yesDeleteMySettingsText = ref("");
-const deletingCamera = ref(false);
 const deleteThisCamera = () => {
-  if (deletingCamera.value) return;
-  deletingCamera.value = true;
-
-  const payload = { cameraUniqueName: useStateStore().currentCameraUniqueName };
-
-  axiosPost("/utils/nukeOneCamera", "delete this camera", payload).finally(() => {
-    deletingCamera.value = false;
-    showDeleteCamera.value = false;
+  axiosPost("/utils/nukeOneCamera", "delete this camera", {
+    cameraUniqueName: useStateStore().currentCameraUniqueName
   });
 };
 const wrappedCameras = computed<SelectItem[]>(() =>
@@ -208,45 +200,13 @@ const wrappedCameras = computed<SelectItem[]>(() =>
       </v-col>
     </v-card-text>
 
-    <v-dialog v-model="showDeleteCamera" width="800">
-      <v-card color="surface" flat>
-        <v-card-title> Delete {{ useCameraSettingsStore().currentCameraSettings.nickname }}? </v-card-title>
-        <v-card-text class="pt-0 pb-10px">
-          Are you sure you want to delete "{{ useCameraSettingsStore().currentCameraSettings.nickname }}"? This cannot
-          be undone.
-        </v-card-text>
-        <v-card-text class="pt-0 pb-10px">
-          <pv-input
-            v-model="yesDeleteMySettingsText"
-            :label="'Type &quot;' + useCameraSettingsStore().currentCameraName + '&quot;:'"
-            :label-cols="6"
-            :input-cols="6"
-          />
-        </v-card-text>
-        <v-card-actions class="pa-5 pt-0">
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="primary"
-            class="text-black"
-            @click="showDeleteCamera = false"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="error"
-            :disabled="
-              yesDeleteMySettingsText.toLowerCase() !== useCameraSettingsStore().currentCameraName.toLowerCase()
-            "
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            :loading="deletingCamera"
-            @click="deleteThisCamera"
-          >
-            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
-            <span class="open-label">Delete</span>
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <pv-delete-modal
+      v-model="showDeleteCamera"
+      title="Delete Camera"
+      :description="`Are you sure you want to delete the camera '${useCameraSettingsStore().currentCameraSettings.nickname}'? This action cannot be undone.`"
+      :expected-confirmation-text="useCameraSettingsStore().currentCameraSettings.nickname"
+      :on-confirm="deleteThisCamera"
+    />
   </v-card>
 </template>
 
diff --git a/photon-client/src/components/common/pv-delete-modal.vue b/photon-client/src/components/common/pv-delete-modal.vue
new file mode 100644
index 000000000..05a0b898f
--- /dev/null
+++ b/photon-client/src/components/common/pv-delete-modal.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useTheme } from "vuetify";
+import pvInput from "./pv-input.vue";
+
+const theme = useTheme();
+
+const value = defineModel<boolean | undefined>({ required: true });
+
+const props = withDefaults(
+  defineProps<{
+    expectedConfirmationText?: string;
+    onBackup?: () => void;
+    onConfirm: () => void;
+    title: string;
+    description?: string;
+    deleteText?: string;
+    width?: number;
+  }>(),
+  {
+    width: 700
+  }
+);
+
+const confirmationText = ref("");
+</script>
+
+<template>
+  <v-dialog v-model="value" :width="props.width" dark>
+    <v-card color="surface" flat>
+      <v-card-title style="display: flex; justify-content: center">
+        {{ title }}
+      </v-card-title>
+      <v-card-text class="pt-0 pb-10px">
+        <span> {{ description }} </span>
+      </v-card-text>
+      <v-card-text v-if="expectedConfirmationText" class="pt-0 pb-0">
+        <pv-input
+          v-model="confirmationText"
+          :label="'Type &quot;' + expectedConfirmationText + '&quot;:'"
+          :label-cols="6"
+          :input-cols="6"
+        />
+      </v-card-text>
+      <v-card-text class="pt-10px">
+        <v-row class="align-center text-white">
+          <v-col v-if="onBackup" cols="6">
+            <v-btn
+              color="buttonActive"
+              style="float: right"
+              width="100%"
+              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              @click="onBackup"
+            >
+              <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
+              <span class="open-label">Backup Data</span>
+            </v-btn>
+          </v-col>
+          <v-col v-if="description" :cols="onBackup ? '6' : '12'">
+            <v-btn
+              color="error"
+              width="100%"
+              :disabled="
+                expectedConfirmationText
+                  ? confirmationText.toLowerCase() !== expectedConfirmationText.toLowerCase()
+                  : false
+              "
+              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              @click="
+                onConfirm();
+                confirmationText = '';
+                value = false;
+              "
+            >
+              <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
+              <span class="open-label">
+                {{ deleteText ?? title }}
+              </span>
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
diff --git a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
index 215e0f6ff..84df7cd47 100644
--- a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
+++ b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
@@ -9,6 +9,7 @@ import PvInput from "@/components/common/pv-input.vue";
 import { PipelineType } from "@/types/PipelineTypes";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { useTheme } from "vuetify";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 
 const theme = useTheme();
 
@@ -422,33 +423,13 @@ const wrappedCameras = computed<SelectItem[]>(() =>
         </v-card-actions>
       </v-card>
     </v-dialog>
-    <v-dialog v-model="showPipelineDeletionConfirmationDialog" width="500">
-      <v-card color="surface">
-        <v-card-title class="pb-0">Delete Pipeline</v-card-title>
-        <v-card-text>
-          Are you sure you want to delete
-          <span style="color: white">"{{ useCameraSettingsStore().currentPipelineSettings.pipelineNickname }}"</span>?
-          This cannot be undone.
-        </v-card-text>
-        <v-card-actions class="pa-5 pt-0">
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="primary"
-            class="text-black"
-            @click="showPipelineDeletionConfirmationDialog = false"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="error"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            @click="confirmDeleteCurrentPipeline"
-          >
-            Delete
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <pv-delete-modal
+      v-model="showPipelineDeletionConfirmationDialog"
+      :width="500"
+      title="Delete Pipeline"
+      description="Are you sure you want to delete the current pipeline? This action cannot be undone."
+      :on-confirm="confirmDeleteCurrentPipeline"
+    />
     <v-dialog v-model="showPipelineTypeChangeDialog" persistent width="600">
       <v-card color="surface" dark>
         <v-card-title class="pb-0">Change Pipeline Type</v-card-title>
diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
index 1bf56b364..4c03121e5 100644
--- a/photon-client/src/components/settings/DeviceControlCard.vue
+++ b/photon-client/src/components/settings/DeviceControlCard.vue
@@ -2,7 +2,7 @@
 import { inject, ref } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 import PvSelect from "@/components/common/pv-select.vue";
-import PvInput from "@/components/common/pv-input.vue";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 import { useTheme } from "vuetify";
 import { axiosPost } from "@/lib/PhotonUtils";
 
@@ -113,12 +113,8 @@ const handleSettingsImport = () => {
 };
 
 const showFactoryReset = ref(false);
-const expected = "Delete Everything";
-const yesDeleteMySettingsText = ref("");
 const nukePhotonConfigDirectory = () => {
   axiosPost("/utils/nukeConfigDirectory", "delete the config directory");
-
-  showFactoryReset.value = false;
 };
 </script>
 
@@ -280,63 +276,15 @@ const nukePhotonConfigDirectory = () => {
         </v-col>
       </v-row>
     </div>
-    <v-dialog v-model="showFactoryReset" width="800" dark>
-      <v-card color="surface" flat>
-        <v-card-title style="display: flex; justify-content: center">
-          <span class="open-label">
-            <v-icon end color="red" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
-            Factory Reset PhotonVision
-            <v-icon end color="red" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
-          </span>
-        </v-card-title>
-        <v-card-text class="pt-0 pb-10px">
-          <v-row class="align-center text-white">
-            <v-col cols="12" md="6">
-              <span> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-btn
-                color="primary"
-                style="float: right"
-                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                @click="openExportSettingsPrompt"
-              >
-                <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
-                <span class="open-label">Backup Settings</span>
-                <a
-                  ref="exportSettings"
-                  style="color: black; text-decoration: none; display: none"
-                  :href="`http://${address}/api/settings/photonvision_config.zip`"
-                  download="photonvision-settings.zip"
-                  target="_blank"
-                />
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-card-text>
-        <v-card-text class="pt-0 pb-0">
-          <pv-input
-            v-model="yesDeleteMySettingsText"
-            :label="'Type &quot;' + expected + '&quot;:'"
-            :label-cols="6"
-            :input-cols="6"
-          />
-        </v-card-text>
-        <v-card-text class="pt-10px">
-          <v-btn
-            color="error"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            :disabled="yesDeleteMySettingsText.toLowerCase() !== expected.toLowerCase()"
-            @click="nukePhotonConfigDirectory"
-          >
-            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
-            <span class="open-label">
-              {{ $vuetify.display.mdAndUp ? "Delete everything, I have backed up what I need" : "Delete Everything" }}
-            </span>
-          </v-btn>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
+    <pv-delete-modal
+      v-model="showFactoryReset"
+      title="Factory Reset PhotonVision"
+      description="This will delete all settings and configurations stored on this device, including network settings. This action cannot be undone."
+      expected-confirmation-text="Delete Everything"
+      :on-confirm="nukePhotonConfigDirectory"
+      :on-backup="openExportSettingsPrompt"
+      delete-text="Factory reset"
+    />
   </v-card>
 </template>
 
diff --git a/photon-client/src/components/settings/ObjectDetectionCard.vue b/photon-client/src/components/settings/ObjectDetectionCard.vue
index acbade2b3..53435b3d8 100644
--- a/photon-client/src/components/settings/ObjectDetectionCard.vue
+++ b/photon-client/src/components/settings/ObjectDetectionCard.vue
@@ -2,8 +2,8 @@
 import { ref, computed, inject } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
-import type { ObjectDetectionModelProperties } from "@/types/SettingTypes";
-import pvInput from "@/components/common/pv-input.vue";
+import { type ObjectDetectionModelProperties } from "@/types/SettingTypes";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 import { useTheme } from "vuetify";
 import { axiosPost } from "@/lib/PhotonUtils";
 
@@ -73,17 +73,9 @@ const handleImport = async () => {
 };
 
 const deleteModel = async (model: ObjectDetectionModelProperties) => {
-  useStateStore().showSnackbarMessage({
-    message: "Deleting Object Detection Model...",
-    color: "secondary",
-    timeout: -1
-  });
-
   axiosPost("/objectdetection/delete", "delete an object detection model", {
     modelPath: model.modelPath
   });
-
-  confirmDeleteDialog.value.show = false;
 };
 
 const renameModel = async (model: ObjectDetectionModelProperties, newName: string) => {
@@ -123,11 +115,8 @@ const openExportIndividualModelPrompt = () => {
 };
 
 const showNukeDialog = ref(false);
-const expected = "Delete Models";
-const yesDeleteMyModelsText = ref("");
 const nukeModels = () => {
   axiosPost("/objectdetection/nuke", "clear and reset object detection models");
-  showNukeDialog.value = false;
 };
 
 const showBulkImportDialog = ref(false);
@@ -378,35 +367,20 @@ const handleBulkImport = () => {
             </tbody>
           </v-table>
 
-          <v-dialog v-model="confirmDeleteDialog.show" width="600">
-            <v-card color="surface" dark>
-              <v-card-title>Delete Object Detection Model</v-card-title>
-              <v-card-text class="pt-0">
-                Are you sure you want to delete the model {{ confirmDeleteDialog.model.nickname }}?
-                <v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
-                  <v-btn
-                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                    color="buttonPassive"
-                    @click="confirmDeleteDialog.show = false"
-                  >
-                    Cancel
-                  </v-btn>
-                  <v-btn
-                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                    color="error"
-                    @click="deleteModel(confirmDeleteDialog.model)"
-                  >
-                    Delete
-                  </v-btn>
-                </v-card-actions>
-              </v-card-text>
-            </v-card>
-          </v-dialog>
+          <pv-delete-modal
+            v-model="confirmDeleteDialog.show"
+            :width="500"
+            :on-confirm="() => deleteModel(confirmDeleteDialog.model)"
+            title="Delete Object Detection Model"
+            :description="`Are you sure you want to delete the model ${confirmDeleteDialog.model.nickname}?`"
+            delete-text="Delete model"
+          />
+
           <v-dialog v-model="showRenameDialog.show" width="600">
             <v-card color="surface" dark>
               <v-card-title>Rename Object Detection Model</v-card-title>
               <v-card-text class="pt-0">
-                Enter a new name for the model {{ showRenameDialog.model.nickname }}:
+                Enter a new name for the model "{{ showRenameDialog.model.nickname }}":
                 <div class="pa-5 pb-0">
                   <v-text-field v-model="showRenameDialog.newName" hide-details label="New Name" variant="underlined" />
                 </div>
@@ -462,64 +436,15 @@ const handleBulkImport = () => {
       </v-row>
     </div>
 
-    <v-dialog v-model="showNukeDialog" width="800" dark>
-      <v-card color="surface" flat>
-        <v-card-title style="display: flex; justify-content: center">
-          <span class="open-label">
-            <v-icon end color="error" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
-            Clear and Reset Object Detection Models
-            <v-icon end color="error" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
-          </span>
-        </v-card-title>
-        <v-card-text class="pt-0 pb-10px">
-          <v-row class="align-center text-white">
-            <v-col cols="12" md="6">
-              <span> This will delete ALL OF YOUR MODELS and re-extract the default models. </span>
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-btn
-                color="buttonActive"
-                style="float: right"
-                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                @click="openExportPrompt"
-              >
-                <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
-                <span class="open-label">Backup Models</span>
-                <a
-                  ref="exportModels"
-                  style="color: black; text-decoration: none; display: none"
-                  :href="`http://${address}/api/objectdetection/export`"
-                  download="photonvision-object-detection-models-export.zip"
-                  target="_blank"
-                />
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-card-text>
-        <v-card-text class="pt-0 pb-0">
-          <pv-input
-            v-model="yesDeleteMyModelsText"
-            :label="'Type &quot;' + expected + '&quot;:'"
-            :label-cols="6"
-            :input-cols="6"
-          />
-        </v-card-text>
-        <v-card-text class="pt-10px">
-          <v-btn
-            color="error"
-            width="100%"
-            :disabled="yesDeleteMyModelsText.toLowerCase() !== expected.toLowerCase()"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            @click="nukeModels"
-          >
-            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
-            <span class="open-label">
-              {{ $vuetify.display.mdAndUp ? "Delete models, I have backed up what I need" : "Delete Models" }}
-            </span>
-          </v-btn>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
+    <pv-delete-modal
+      v-model="showNukeDialog"
+      :on-backup="openExportPrompt"
+      :on-confirm="nukeModels"
+      title="Delete and Reset All Object Detection Models"
+      :description="'This will delete ALL object detection models and re-extract the default object detection models. This action cannot be undone.'"
+      :expected-confirmation-text="'Delete Models'"
+      delete-text="Delete all models"
+    />
   </v-card>
 </template>
 
diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
index 1707ba110..fbba51889 100644
--- a/photon-client/src/views/CameraMatchingView.vue
+++ b/photon-client/src/views/CameraMatchingView.vue
@@ -7,15 +7,13 @@ import {
   PVCameraInfo,
   type PVCSICameraInfo,
   type PVFileCameraInfo,
-  type PVUsbCameraInfo,
-  type UiCameraConfiguration
+  type PVUsbCameraInfo
 } from "@/types/SettingTypes";
 import { axiosPost, getResolutionString } from "@/lib/PhotonUtils";
 import PhotonCameraStream from "@/components/app/photon-camera-stream.vue";
-import PvInput from "@/components/common/pv-input.vue";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 import PvCameraInfoCard from "@/components/common/pv-camera-info-card.vue";
 import PvCameraMatchCard from "@/components/common/pv-camera-match-card.vue";
-import type { WebsocketCameraSettingsUpdate } from "@/types/WebsocketDataTypes";
 import { useTheme } from "vuetify";
 
 const theme = useTheme();
@@ -55,17 +53,14 @@ const deactivateModule = (cameraUniqueName: string) => {
   );
 };
 
-const deletingCamera = ref(false);
-const deleteThisCamera = (cameraName: string) => {
-  if (deletingCamera.value) return;
-  deletingCamera.value = true;
-  const payload = {
-    cameraUniqueName: cameraName
-  };
+const confirmDeleteDialog = ref({ show: false, nickname: "", cameraUniqueName: "" });
+const deletingCamera = ref<string | null>(null);
 
-  axiosPost("/utils/nukeOneCamera", "delete a camera", payload).finally(() => {
-    setCameraDeleting(null);
-    deletingCamera.value = false;
+const deleteThisCamera = (cameraUniqueName: string) => {
+  if (deletingCamera.value) return;
+  deletingCamera.value = cameraUniqueName;
+  axiosPost("/utils/nukeOneCamera", "delete a camera", { cameraUniqueName: cameraUniqueName }).finally(() => {
+    deletingCamera.value = null;
   });
 };
 
@@ -110,15 +105,6 @@ const setCameraView = (camera: PVCameraInfo | null, isConnected: boolean | null)
   viewingCamera.value = [camera, isConnected];
 };
 
-const viewingDeleteCamera = ref(false);
-const cameraToDelete = ref<UiCameraConfiguration | WebsocketCameraSettingsUpdate | null>(null);
-const setCameraDeleting = (camera: UiCameraConfiguration | WebsocketCameraSettingsUpdate | null) => {
-  yesDeleteMySettingsText.value = "";
-  viewingDeleteCamera.value = camera !== null;
-  cameraToDelete.value = camera;
-};
-const yesDeleteMySettingsText = ref("");
-
 /**
  * Get the connection-type-specific camera info from the given PVCameraInfo object.
  */
@@ -274,8 +260,16 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                   class="pa-0"
                   color="error"
                   style="width: 100%"
+                  :loading="module.uniqueName === deletingCamera"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                  @click="setCameraDeleting(module)"
+                  @click="
+                    () =>
+                      (confirmDeleteDialog = {
+                        show: true,
+                        nickname: module.nickname,
+                        cameraUniqueName: module.uniqueName
+                      })
+                  "
                 >
                   <v-icon size="x-large">mdi-trash-can-outline</v-icon>
                 </v-btn>
@@ -360,8 +354,16 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                   class="pa-0"
                   color="error"
                   style="width: 100%"
+                  :loading="module.uniqueName === deletingCamera"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                  @click="setCameraDeleting(module)"
+                  @click="
+                    () =>
+                      (confirmDeleteDialog = {
+                        show: true,
+                        nickname: module.nickname,
+                        cameraUniqueName: module.uniqueName
+                      })
+                  "
                 >
                   <v-icon size="x-large">mdi-trash-can-outline</v-icon>
                 </v-btn>
@@ -465,43 +467,13 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
       </v-card>
     </v-dialog>
 
-    <!-- Camera delete modal -->
-    <v-dialog v-model="viewingDeleteCamera" width="800">
-      <v-card v-if="cameraToDelete !== null" class="dialog-container" color="surface" flat>
-        <v-card-title> Delete {{ cameraToDelete.nickname }}? </v-card-title>
-        <v-card-text class="pb-10px">
-          Are you sure you want to delete "{{ cameraToDelete.nickname }}"? This cannot be undone.
-        </v-card-text>
-        <v-card-text class="pt-0 pb-10px">
-          <pv-input
-            v-model="yesDeleteMySettingsText"
-            :label="'Type &quot;' + cameraToDelete.nickname + '&quot;:'"
-            :label-cols="6"
-            :input-cols="6"
-          />
-        </v-card-text>
-        <v-card-actions class="pa-5 pt-0">
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="primary"
-            class="text-black"
-            @click="cameraToDelete = null"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="error"
-            :disabled="yesDeleteMySettingsText.toLowerCase() !== cameraToDelete.nickname.toLowerCase()"
-            :loading="deletingCamera"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            @click="deleteThisCamera(cameraToDelete.uniqueName)"
-          >
-            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
-            <span class="open-label">Delete</span>
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <pv-delete-modal
+      v-model="confirmDeleteDialog.show"
+      title="Delete Camera"
+      :description="`Are you sure you want to delete the camera '${useCameraSettingsStore().currentCameraSettings.nickname}'? This action cannot be undone.`"
+      :expected-confirmation-text="confirmDeleteDialog.nickname"
+      :on-confirm="() => deleteThisCamera(confirmDeleteDialog.cameraUniqueName)"
+    />
   </div>
 </template>