diff --git a/frontend/app/components/ui/deleteConfirm.vue b/frontend/app/components/ui/deleteConfirm.vue
new file mode 100644
index 0000000..5fcee3c
--- /dev/null
+++ b/frontend/app/components/ui/deleteConfirm.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+  import type {Ref} from "vue";
+
+  const props = defineProps({
+    title: {type: String, required: true},
+    disable: {type: Boolean, required: true},
+  });
+
+  let dialog: Ref<boolean> = ref<boolean>(false);
+  let loading: Ref<boolean> = ref<boolean>(false);
+
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialog"
+      :scrollable="true"
+      width="800"
+      max-height="750"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          :flat="true"
+          v-bind="props"
+          :disabled="disable"
+      >
+        <v-icon>mdi-delete-empty</v-icon>
+        <v-tooltip
+            activator="parent"
+            location="bottom"
+        >
+          Löschen
+        </v-tooltip>
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-card-title>
+        <v-icon size="small">
+          mdi-delete-empty
+        </v-icon>
+
+        {{ title }}
+
+        <v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text>
+        Sind Sie sich sicher das Sie die Aktion ausführen möchten?
+      </v-card-text>
+
+      <v-divider/>
+
+      <v-card-actions>
+        <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="dialog = false"
+        >
+          Abbrechen
+        </v-btn>
+
+        <v-btn
+            variant="text"
+            @click="$emit('delete')"
+        >
+          Löschen
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/app/components/variant/variantRow.vue b/frontend/app/components/variant/variantRow.vue
index 515fed1..0ae1501 100644
--- a/frontend/app/components/variant/variantRow.vue
+++ b/frontend/app/components/variant/variantRow.vue
@@ -2,6 +2,7 @@
   import {useLabelEditorStore} from "~/store/labelEditorStore";
   import type {Ref} from "vue";
   import {Variant} from "~/types/variant";
+  import DeleteConfirm from "~/components/ui/deleteConfirm.vue";
 
   let store = useLabelEditorStore();
 
@@ -68,20 +69,11 @@
 
         <v-divider vertical/>
 
-        <v-btn
-            :flat="true"
-            :disabled="!edit"
-            :hidden="edit"
-            @click="deleteVariant()"
-        >
-          <v-icon>mdi-delete-empty</v-icon>
-          <v-tooltip
-              activator="parent"
-              location="bottom"
-          >
-            Löschen
-          </v-tooltip>
-        </v-btn>
+        <DeleteConfirm
+            title="Variante löschen?"
+            :disable="!edit"
+            @delete="deleteVariant()"
+        />
 
         <v-divider vertical/>