diff --git a/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue b/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
index 1ec5e8df4a..4f759bbdfc 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
@@ -73,6 +73,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .v-button.delete {
 	--v-button-background-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-125);
 }
 
 .ctx-toggle {
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index 317d750fc2..f2a15bfd4b 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -184,7 +184,7 @@
 				<v-card-title>{{ $t('delete_field_are_you_sure', { field: field.field }) }}</v-card-title>
 				<v-card-actions>
 					<v-button @click="deleteActive = false" secondary>{{ $t('cancel') }}</v-button>
-					<v-button :loading="deleting" @click="deleteField">{{ $t('delete') }}</v-button>
+					<v-button :loading="deleting" @click="deleteField" class="delete">{{ $t('delete') }}</v-button>
 				</v-card-actions>
 			</v-card>
 		</v-dialog>
@@ -500,4 +500,9 @@ export default defineComponent({
 
 	@include form-grid;
 }
+
+.delete {
+	--v-button-background-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-125);
+}
 </style>