diff --git a/packages/frontend/src/components/projects/Dialog/DeleteVariableDialog.tsx b/packages/frontend/src/components/projects/Dialog/DeleteVariableDialog.tsx
new file mode 100644
index 0000000..227fa34
--- /dev/null
+++ b/packages/frontend/src/components/projects/Dialog/DeleteVariableDialog.tsx
@@ -0,0 +1,36 @@
+import ConfirmDialog, {
+  ConfirmDialogProps,
+} from 'components/shared/ConfirmDialog';
+import React from 'react';
+
+interface DeleteVariableDialogProps extends ConfirmDialogProps {
+  variableKey: string;
+}
+
+export const DeleteVariableDialog = ({
+  variableKey,
+  open,
+  handleCancel,
+  handleConfirm,
+  ...props
+}: DeleteVariableDialogProps) => {
+  return (
+    <ConfirmDialog
+      {...props}
+      dialogTitle="Delete variable"
+      handleCancel={handleCancel}
+      open={open}
+      confirmButtonTitle="Yes, confirm delete"
+      handleConfirm={handleConfirm}
+      confirmButtonProps={{ variant: 'danger' }}
+    >
+      <p className="text-sm text-elements-mid-em">
+        Are you sure you want to delete the variable{' '}
+        <span className="text-sm font-mono text-elements-on-secondary bg-controls-secondary rounded px-0.5">
+          {variableKey}
+        </span>
+        ?
+      </p>
+    </ConfirmDialog>
+  );
+};
diff --git a/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx b/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx
index c15c142..0e38298 100644
--- a/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx
+++ b/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx
@@ -5,8 +5,8 @@ import { EnvironmentVariable } from 'gql-client';
 
 import { IconButton, Input, Typography } from '@material-tailwind/react';
 
-import ConfirmDialog from '../../../shared/ConfirmDialog';
-import { useGQLClient } from '../../../../context/GQLClientContext';
+import { useGQLClient } from 'context/GQLClientContext';
+import { DeleteVariableDialog } from 'components/projects/Dialog/DeleteVariableDialog';
 
 const ShowPasswordIcon = ({
   handler,
@@ -161,20 +161,12 @@ const EditEnvironmentVariableRow = ({
           </>
         )}
       </div>
-
-      <ConfirmDialog
-        dialogTitle="Delete variable"
-        handleOpen={() => setDeleteDialogOpen((preVal) => !preVal)}
+      <DeleteVariableDialog
+        handleCancel={() => setDeleteDialogOpen((preVal) => !preVal)}
         open={deleteDialogOpen}
-        confirmButtonTitle="Yes, Confirm delete"
         handleConfirm={removeEnvironmentVariableHandler}
-        color="red"
-      >
-        <Typography variant="small" placeholder={''}>
-          Are you sure you want to delete the variable&nbsp;
-          <span className="bg-blue-100">{variable.key}</span>?
-        </Typography>
-      </ConfirmDialog>
+        variableKey={variable.key}
+      />
     </>
   );
 };