diff --git a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectDeleteDialog.vue b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectDeleteDialog.vue
index 421da37ae7d..e97ff97b6f9 100644
--- a/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectDeleteDialog.vue
+++ b/packages/frontend/editor-ui/src/features/collaboration/projects/components/ProjectDeleteDialog.vue
@@ -9,7 +9,7 @@ import type { ResourceCounts } from '../projects.store';
 import { APP_MODALS_ELEMENT_ID } from '@/app/constants';
 
 import { ElDialog, ElRadio } from 'element-plus';
-import { N8nButton, N8nInput, N8nInputLabel, N8nText } from '@n8n/design-system';
+import { N8nButton, N8nDialogFooter, N8nInput, N8nInputLabel, N8nText } from '@n8n/design-system';
 type Props = {
 	currentProject: Project | null;
 	searchFn?: ProjectSearchFn;
@@ -123,14 +123,16 @@ const onDelete = () => {
 			</div>
 		</div>
 		<template #footer>
-			<N8nButton
-				variant="destructive"
-				type="button"
-				:disabled="!isValid"
-				data-test-id="project-settings-delete-confirm-button"
-				@click.stop.prevent="onDelete"
-				>{{ locale.baseText('projects.settings.danger.deleteProject') }}</N8nButton
-			>
+			<N8nDialogFooter>
+				<N8nButton
+					variant="destructive"
+					type="button"
+					:disabled="!isValid"
+					data-test-id="project-settings-delete-confirm-button"
+					@click.stop.prevent="onDelete"
+					>{{ locale.baseText('projects.settings.danger.deleteProject') }}</N8nButton
+				>
+			</N8nDialogFooter>
 		</template>
 	</ElDialog>
 </template>