diff --git a/src/pages/profile/profile.js b/src/pages/profile/profile.js
index 6445a13e373d4d4a1c1db089b07e1d03f7b933f3..c873e4604a869a5f985ca497f0fd8defe77e883f 100644
--- a/src/pages/profile/profile.js
+++ b/src/pages/profile/profile.js
@@ -16,13 +16,12 @@ import NavigationBar from "../../components/navbar/navbar";
 import { useNavigate } from "react-router-dom";
 
 const ProfilePage = () => {
-  const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false);
   const toast = useToast();
   const navigate = useNavigate();
   const baseUrl = (process.env.REACT_APP_AUTH_SERVICE_ENDPOINT);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 
   const handleDeleteAccount = async () => {
-    setIsDeleteAlertOpen(false);
     try {
       const response = await fetch(`${baseUrl}/auth/delete/`, {
         method: 'DELETE',
@@ -51,14 +50,6 @@ const ProfilePage = () => {
     }
   };
 
-  const cancelDeleteAccount = () => {
-    setIsDeleteAlertOpen(false);
-  };
-
-  const handleConfirmDeleteAccount = () => {
-    setIsDeleteAlertOpen(true);
-  };
-
   return (
     <>
       <NavigationBar />
@@ -68,50 +59,39 @@ const ProfilePage = () => {
             <Heading as="h1" fontSize="4xl" fontWeight="bold">
               Manage your account
             </Heading>
-
-            <Box py={4}>
-
-              <Button colorScheme="blue" onClick={() => {
+            <Box py={2} />
+            <Button colorScheme="blue" onClick={() => {
                 localStorage.removeItem('token');
                 navigate("/");
               }}>
                 Sign Out
               </Button>
-            </Box>
 
-            <Box>
-              <Button
-                variant="outline"
-                colorScheme="red"
-                onClick={handleConfirmDeleteAccount}
-              >
-                Delete your account
+            <Box py={4}>
+              <Button colorScheme="red" onClick={() => setIsDeleteDialogOpen(true)}>
+                Delete Account
               </Button>
               <AlertDialog
-                isOpen={isDeleteAlertOpen}
-                leastDestructiveRef={cancelDeleteAccount}
+                isOpen={isDeleteDialogOpen}
+                onClose={() => setIsDeleteDialogOpen(false)}
+                leastDestructiveRef={undefined}
               >
                 <AlertDialogOverlay>
                   <AlertDialogContent>
                     <AlertDialogHeader fontSize="lg" fontWeight="bold">
                       Delete Account
                     </AlertDialogHeader>
+
                     <AlertDialogBody>
                       Are you sure? This action cannot be undone.
                     </AlertDialogBody>
+
                     <AlertDialogFooter>
-                      <Button
-                        ref={cancelDeleteAccount}
-                        onClick={cancelDeleteAccount}
-                      >
-                        Cancel
+                      <Button onClick={() => setIsDeleteDialogOpen(false)}>
+                        No
                       </Button>
-                      <Button
-                        colorScheme="red"
-                        onClick={() => handleDeleteAccount}
-                        ml={3}
-                      >
-                        Delete
+                      <Button colorScheme="red" onClick={handleDeleteAccount} ml={3}>
+                        Yes
                       </Button>
                     </AlertDialogFooter>
                   </AlertDialogContent>
@@ -126,4 +106,4 @@ const ProfilePage = () => {
   );
 };
 
-export default ProfilePage;
+export default ProfilePage;
\ No newline at end of file