diff --git a/app/views/profile/index.php b/app/views/profile/index.php
index 6f2d137a38a53444d82532691251d8c92d174235..342f298f2f7ff0acd98f548a4d215f53a63af5db 100644
--- a/app/views/profile/index.php
+++ b/app/views/profile/index.php
@@ -76,7 +76,8 @@ echo "<script>console.log('$id, $fullName, $email, $phone')</script>";
                     <i class="fas fa-edit editIcon" onclick= enablePassword()></i>
                 </div>
                 <hr>
-                <button type="button" class="submitButton" name="save" id="submitButton" onclick="showConfirmation()">Save Change</button>
+                <button type="button" class="saveButton" name="save" id="submitButton" onclick="showConfirmation()">Save Change</button>
+                <button type="button" class="submitButton" name="delete" id="delete" onclick="showConfirmationdelete()">Delete</button>
             </div>
         </div>
     </form>
diff --git a/public/css/profile.css b/public/css/profile.css
index 5ce9aff1e0640537916c8a983901c1c19e10bf17..93e1d20b29f882deddcc37b321fcf7c9c321f57d 100644
--- a/public/css/profile.css
+++ b/public/css/profile.css
@@ -139,9 +139,35 @@ body{
 
 }
 
+.saveButton {
+    background-color: #FFFFFF;
+    border: 1px solid #EF4800;
+    border-radius: 30px;
+    width: 150px;
+    height: 35px;
+    color: #EF4800;
+    text-align: center;
+    text-decoration: none;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    margin-top: 30px;
+    margin-bottom: 50px;
+    margin-right: 20px;
+    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+}
+
+.saveButton:hover{
+    background-color: #EF4800; /* Change the background color on hover */
+    color: #FFFFFF;
+    transform: scale(1.05); /* Slightly scale up on hover */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add a subtle shadow on hover */
+    transition: 0.5s;
+}
+
 
 .submitButton{
-    background-color: #EF4800;
+    background-color: #ff0303;
     border: none;
     border-radius: 30px;
     width: 150px;
@@ -158,6 +184,13 @@ body{
 
 }
 
+.submitButton:hover{
+    background-color: #FF6B00; /* Change the background color on hover */
+    transform: scale(1.05); /* Slightly scale up on hover */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add a subtle shadow on hover */
+    transition: 0.5s;
+}
+
 
 
 .boxKanan{
diff --git a/public/js/editfact.js b/public/js/editfact.js
index d45c9c53787c54fd2bb59e92009cd3c5e9951e63..69f27b9d0499bf6f840f8d82aa11fa2b5d81880c 100644
--- a/public/js/editfact.js
+++ b/public/js/editfact.js
@@ -57,3 +57,4 @@ function hideConfirmation() {
 }
 
 
+
diff --git a/public/js/profile.js b/public/js/profile.js
index 72cf22693d14c2cb91b269c5240ca35bce6202a2..06b526052f2ca4823925d3718101ae9d0dcd619b 100644
--- a/public/js/profile.js
+++ b/public/js/profile.js
@@ -53,4 +53,28 @@ function updatePhoto() {
 function hideConfirmation() {
     const confirmationBox = document.getElementById('confirmationBox');
     confirmationBox.style.display = 'none';
+}
+
+function showConfirmationdelete() {
+    const confirmationBox = document.getElementById('confirmationBox');
+    const confirmButton = document.getElementById('confirmButton');
+    const cancelButton = document.getElementById('cancelButton');
+    const message = document.getElementById('message');
+    message.innerHTML = "Are you sure you want to delte your account?";
+    confirmationBox.style.display = 'flex';
+    confirmButton.type = 'submit';
+    confirmButton.name = 'delete';
+    cancelButton.type = 'button';
+    cancelButton.name = 'cancel';
+    confirmButton.addEventListener('click', function() {
+        // Your code for handling the "Confirm" action here
+        console.log('confirm');
+        hideConfirmation();
+    });
+    
+    cancelButton.addEventListener('click', function() {
+        // Your code for handling the "Cancel" action here
+        console.log('cancel');
+        hideConfirmation();
+    });
 }
\ No newline at end of file