diff --git a/components/RecordingsList.vue b/components/RecordingsList.vue
index cb93bee..0628da7 100644
--- a/components/RecordingsList.vue
+++ b/components/RecordingsList.vue
@@ -20,6 +20,24 @@
             v-if="index !== recordingsInternal.length - 1"
             inset
           ></v-divider>
+          <v-dialog v-model="confirmDialog">
+            <v-card>
+              <v-card-title primary-title>
+                Confirm Remove
+              </v-card-title>
+              <v-card-text>
+                Are you sure you want to delete this recording?
+              </v-card-text>
+              <v-card-actions>
+                <v-btn color="success" @click="confirmDialog = false">
+                  Cancel
+                </v-btn>
+                <v-btn color="error" @click="confirmDelete">
+                  Delete Recording
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
         </div>
       </v-slide-y-transition>
     </v-list-item-group>
@@ -45,15 +63,31 @@ export default {
   data() {
     return {
       selected: this.selectedItem,
-      recordingsInternal: this.recordings
+      recordingsInternal: this.recordings,
+      confirmDialog: false,
+      idToRemove: null
     }
   },
   methods: {
     remove(id) {
+      // Save the id to remove so it is available to the confirmDelete method
+      this.idToRemove = id
+      // Show a confirm dialog before deleting recording
+      this.confirmDialog = true
+    },
+    confirmDelete() {
+      if (!this.idToRemove) {
+        return
+      }
+      // close the confirm dialog
+      this.confirmDialog = false
+      // set the temporary storage of idToRemove back to null
+      this.idToRemove = null
+
+      // delete the recording
       const index = this.recordings.findIndex(
-        (recording) => recording.id === id
+        (recording) => recording.id === this.idToRemove
       )
-
       this.recordingsInternal.splice(index, 1)
     }
   }