diff --git a/src/components/posts/form/form-delete.tsx b/src/components/posts/form/form-delete.tsx
index 9d003cc02..c4c73d802 100644
--- a/src/components/posts/form/form-delete.tsx
+++ b/src/components/posts/form/form-delete.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { useId } from 'react';
+import React, { useId, useState } from 'react';
 import { useAction } from '@/hooks/useAction';
 import { toast } from 'sonner';
 import { deleteQuestion } from '@/actions/question';
@@ -7,11 +7,11 @@ import { deleteAnswer } from '@/actions/answer';
 import { ActionState } from '@/lib/create-safe-action';
 import { useRouter } from 'next/navigation';
 import { Delete } from '@/lib/utils';
-import { Trash2 } from 'lucide-react';
+import { Trash2, X, Check } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 interface IVoteFormProps {
-  questionId: number | undefined;
-  answerId: number | undefined;
+    questionId: number | undefined;
+    answerId: number | undefined;
 }
 type DeleteActionData = { questionId?: number; answerId?: number };
 type DeleteAction = (
@@ -21,6 +21,8 @@ type DeleteAction = (
 const DeleteQAForm: React.FC<IVoteFormProps> = ({ questionId, answerId }) => {
   const idForm = useId();
   const router = useRouter();
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  
   const deleteAction: DeleteAction = async ({ questionId, answerId }) => {
     if (questionId) {
       return deleteQuestion({ questionId });
@@ -41,20 +43,61 @@ const DeleteQAForm: React.FC<IVoteFormProps> = ({ questionId, answerId }) => {
       toast.error(error);
     },
   });
+  
+  const handleDeleteClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setShowConfirmation(true);
+  };
 
-  const hanleDeleteFunction = () => {
+  const handleConfirmDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
     execute(questionId ? { questionId } : { answerId });
+    setShowConfirmation(false);
+  };
+
+  const handleCancelDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setShowConfirmation(false);
   };
 
   return (
-    <Button
-      id={`delete-${idForm}`}
-      onClick={hanleDeleteFunction}
-      size="icon"
-      variant="destructive"
-    >
-      <Trash2 className="size-4" />
-    </Button>
+    <div className="flex items-center">
+      {!showConfirmation ? (
+        <Button
+          id={`delete-${idForm}`}
+          onClick={handleDeleteClick}
+          size="icon"
+          variant="destructive"
+          type="button"
+        >
+          <Trash2 className="size-4" />
+        </Button>
+      ) : (
+        <div className="flex space-x-2">
+          <Button
+            id={`confirm-${idForm}`}
+            onClick={handleConfirmDelete}
+            size="icon"
+            variant="destructive"
+            type="button"
+          >
+            <Check className="size-4" />
+          </Button>
+          <Button
+            id={`cancel-${idForm}`}
+            onClick={handleCancelDelete}
+            size="icon"
+            variant="outline"
+            type="button"
+          >
+            <X className="size-4" />
+          </Button>
+        </div>
+      )}
+    </div>
   );
 };