diff --git a/packages/frontend/src/components/projects/Dialog/DeleteWebhookDialog.tsx b/packages/frontend/src/components/projects/Dialog/DeleteWebhookDialog.tsx
new file mode 100644
index 0000000..c2c82c1
--- /dev/null
+++ b/packages/frontend/src/components/projects/Dialog/DeleteWebhookDialog.tsx
@@ -0,0 +1,36 @@
+import ConfirmDialog, {
+  ConfirmDialogProps,
+} from 'components/shared/ConfirmDialog';
+import React from 'react';
+
+interface DeleteWebhookDialogProps extends ConfirmDialogProps {
+  webhookUrl: string;
+}
+
+export const DeleteWebhookDialog = ({
+  webhookUrl,
+  open,
+  handleCancel,
+  handleConfirm,
+  ...props
+}: DeleteWebhookDialogProps) => {
+  return (
+    <ConfirmDialog
+      {...props}
+      dialogTitle="Delete webhook?"
+      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{' '}
+        <span className="text-sm font-mono text-elements-high-em px-0.5">
+          {webhookUrl}
+        </span>
+        ?
+      </p>
+    </ConfirmDialog>
+  );
+};
diff --git a/packages/frontend/src/components/projects/project/settings/WebhookCard.tsx b/packages/frontend/src/components/projects/project/settings/WebhookCard.tsx
index 0d03e46..80aaf4f 100644
--- a/packages/frontend/src/components/projects/project/settings/WebhookCard.tsx
+++ b/packages/frontend/src/components/projects/project/settings/WebhookCard.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 
-import { Button, Typography } from '@material-tailwind/react';
+import { Button } from '@material-tailwind/react';
 
-import ConfirmDialog from '../../../shared/ConfirmDialog';
+import { DeleteWebhookDialog } from 'components/projects/Dialog/DeleteWebhookDialog';
 
 interface WebhookCardProps {
   webhookUrl: string;
@@ -15,7 +15,6 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
   return (
     <div className="flex justify-between w-full mb-3">
       {webhookUrl}
-
       <div className="flex gap-3">
         <Button
           size="sm"
@@ -38,23 +37,15 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
           X
         </Button>
       </div>
-
-      <ConfirmDialog
-        dialogTitle="Delete webhook"
-        handleOpen={() => setDeleteDialogOpen((preVal) => !preVal)}
+      <DeleteWebhookDialog
+        handleCancel={() => setDeleteDialogOpen((preVal) => !preVal)}
         open={deleteDialogOpen}
-        confirmButtonTitle="Yes, Confirm delete"
         handleConfirm={() => {
           setDeleteDialogOpen((preVal) => !preVal);
           onDelete();
         }}
-        color="red"
-      >
-        <Typography variant="small" placeholder={''}>
-          Are you sure you want to delete the variable{' '}
-          <span className="bg-blue-100 p-0.5 rounded-sm">{webhookUrl}</span>?
-        </Typography>
-      </ConfirmDialog>
+        webhookUrl={webhookUrl}
+      />
     </div>
   );
 };