Index: client/src/Dashboard/components/Forum.jsx
===================================================================
--- client/src/Dashboard/components/Forum.jsx	(revision 8b884909ee30a078441fe0b338db8c32b880eccf)
+++ client/src/Dashboard/components/Forum.jsx	(revision c6895f79f9662d5596d57b15961eeaa42be100ba)
@@ -13,6 +13,30 @@
   const [loading, setLoading] = useState(true);
   const [loadingMore, setLoadingMore] = useState(false);
+  const [modal, setModal] = useState({
+    isOpen: false,
+    message: "",
+    type: "",
+    postId: null,
+  });
+  const [isDeleting, setIsDeleting] = useState(false);
   const postsPerPage = 5;
   const { user } = useAuth();
+
+  const showModal = (message, type = "info", postId = null) => {
+    setModal({ isOpen: true, message, type, postId });
+  };
+
+  const closeModal = () => {
+    setModal({ isOpen: false, message: "", type: "", postId: null });
+  };
+
+  const confirmDelete = async () => {
+    if (modal.postId) {
+      setIsDeleting(true);
+      await handleDeletePost(modal.postId);
+      setIsDeleting(false);
+    }
+    closeModal();
+  };
 
   useEffect(() => {
@@ -95,11 +119,9 @@
                         onClick={(e) => {
                           e.stopPropagation();
-                          if (
-                            window.confirm(
-                              "Are you sure you want to delete this post?"
-                            )
-                          ) {
-                            handleDeletePost(post.id);
-                          }
+                          showModal(
+                            "Are you sure you want to delete this post? This action cannot be undone.",
+                            "confirm",
+                            post.id
+                          );
                         }}
                       >
@@ -186,4 +208,61 @@
         </div>
       </div>
+
+      {/* Modal element */}
+      {modal.isOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-opacity-50 backdrop-blur-xs"
+          aria-labelledby="modal-title"
+          role="dialog"
+          aria-modal="true"
+        >
+          <div className="bg-base-200 rounded-lg shadow-xl p-6 w-full max-w-md mx-4">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center shrink-0">
+                <svg
+                  className="w-5 h-5 text-error-content"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                  ></path>
+                </svg>
+              </div>
+              <h3 className="font-bold text-lg" id="modal-title">
+                Delete Post
+              </h3>
+            </div>
+            <p className="py-4">{modal.message}</p>
+            <div className="flex justify-end gap-3 mt-4">
+              <button
+                className="btn btn-ghost"
+                onClick={closeModal}
+                disabled={isDeleting}
+              >
+                Cancel
+              </button>
+              <button
+                className="btn btn-error"
+                onClick={confirmDelete}
+                disabled={isDeleting}
+              >
+                {isDeleting ? (
+                  <>
+                    <span className="loading loading-spinner loading-sm mr-2"></span>
+                    Deleting...
+                  </>
+                ) : (
+                  "Delete"
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
Index: client/src/Dashboard/components/ForumPostDetail.jsx
===================================================================
--- client/src/Dashboard/components/ForumPostDetail.jsx	(revision 8b884909ee30a078441fe0b338db8c32b880eccf)
+++ client/src/Dashboard/components/ForumPostDetail.jsx	(revision c6895f79f9662d5596d57b15961eeaa42be100ba)
@@ -16,4 +16,11 @@
   const [error, setError] = useState(null);
   const [commentText, setCommentText] = useState("");
+  const [modal, setModal] = useState({
+    isOpen: false,
+    message: "",
+    type: "",
+    commentId: null,
+  });
+  const [isDeleting, setIsDeleting] = useState(false);
   const location = useLocation();
   const statePost = useState(location.state?.post || {});
@@ -23,4 +30,21 @@
   const navigate = useNavigate();
   const { postId } = useParams();
+
+  const showModal = (message, type = "info", commentId = null) => {
+    setModal({ isOpen: true, message, type, commentId });
+  };
+
+  const closeModal = () => {
+    setModal({ isOpen: false, message: "", type: "", commentId: null });
+  };
+
+  const confirmDelete = async () => {
+    if (modal.commentId) {
+      setIsDeleting(true);
+      await handleDeleteComment(modal.commentId);
+      setIsDeleting(false);
+    }
+    closeModal();
+  };
 
   const fetchComments = useCallback(async () => {
@@ -165,13 +189,9 @@
                                 onClick={(e) => {
                                   e.stopPropagation();
-
-                                  if (
-                                    window.confirm(
-                                      "Are you sure you want to delete this comment?"
-                                    )
-                                  ) {
-                                    console.log("Delete comment:", comment.id);
-                                  }
-                                  handleDeleteComment(comment.id);
+                                  showModal(
+                                    "Are you sure you want to delete this comment? This action cannot be undone.",
+                                    "confirm",
+                                    comment.id
+                                  );
                                 }}
                               >
@@ -207,4 +227,61 @@
         </div>
       </div>
+
+      {/* Modal element */}
+      {modal.isOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-opacity-50 backdrop-blur-xs"
+          aria-labelledby="modal-title"
+          role="dialog"
+          aria-modal="true"
+        >
+          <div className="bg-base-200 rounded-lg shadow-xl p-6 w-full max-w-md mx-4">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center shrink-0">
+                <svg
+                  className="w-5 h-5 text-error-content"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                  ></path>
+                </svg>
+              </div>
+              <h3 className="font-bold text-lg" id="modal-title">
+                Delete Comment
+              </h3>
+            </div>
+            <p className="py-4">{modal.message}</p>
+            <div className="flex justify-end gap-3 mt-4">
+              <button
+                className="btn btn-ghost"
+                onClick={closeModal}
+                disabled={isDeleting}
+              >
+                Cancel
+              </button>
+              <button
+                className="btn btn-error"
+                onClick={confirmDelete}
+                disabled={isDeleting}
+              >
+                {isDeleting ? (
+                  <>
+                    <span className="loading loading-spinner loading-sm mr-2"></span>
+                    Deleting...
+                  </>
+                ) : (
+                  "Delete"
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
Index: client/src/Dashboard/components/ManagePosts.jsx
===================================================================
--- client/src/Dashboard/components/ManagePosts.jsx	(revision 8b884909ee30a078441fe0b338db8c32b880eccf)
+++ client/src/Dashboard/components/ManagePosts.jsx	(revision c6895f79f9662d5596d57b15961eeaa42be100ba)
@@ -26,4 +26,9 @@
     post: null,
   });
+  const [isActionLoading, setIsActionLoading] = useState(false);
+
+  const showModal = (message, type, postId = null, post = null) => {
+    setModal({ isOpen: true, message, type, postId, post });
+  };
 
   const closeModal = () => {
@@ -37,10 +42,12 @@
   };
 
-  const confirmAction = () => {
+  const confirmAction = async () => {
+    setIsActionLoading(true);
     if (modal.type === "delete" && modal.postId) {
-      handleDeletePost(modal.postId);
+      await handleDeletePost(modal.postId);
     } else if (modal.type === "approve" && modal.post) {
-      handleApprovePost(modal.post);
-    }
+      await handleApprovePost(modal.post);
+    }
+    setIsActionLoading(false);
     closeModal();
   };
@@ -129,19 +136,16 @@
   const openConfirmationModal = (type, item) => {
     if (type === "delete") {
-      setModal({
-        isOpen: true,
-        message: "Are you sure you want to delete this post permanently?",
-        type: "delete",
-        postId: item,
-        post: null,
-      });
+      showModal(
+        "Are you sure you want to delete this post permanently? This action cannot be undone.",
+        "delete",
+        item
+      );
     } else if (type === "approve") {
-      setModal({
-        isOpen: true,
-        message: "Are you sure you want to approve this post?",
-        type: "approve",
-        postId: item.id,
-        post: item,
-      });
+      showModal(
+        "Are you sure you want to approve this post? It will be published to the forum.",
+        "approve",
+        item.id,
+        item
+      );
     }
   };
@@ -262,63 +266,84 @@
       </div>
 
-      {/* Modal */}
-      <div className={`modal ${modal.isOpen ? "modal-open" : ""}`}>
-        <div className="modal-box">
-          <div className="flex items-center gap-3 mb-4">
-            {modal.type === "approve" && (
-              <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center">
-                <svg
-                  className="w-5 h-5 text-success-content"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M5 13l4 4L19 7"
-                  ></path>
-                </svg>
-              </div>
-            )}
-            {modal.type === "delete" && (
-              <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center">
-                <svg
-                  className="w-5 h-5 text-error-content"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                  ></path>
-                </svg>
-              </div>
-            )}
-            <h3 className="font-bold text-lg">
-              {modal.type === "approve" && "Confirm Approval"}
-              {modal.type === "delete" && "Confirm Deletion"}
-            </h3>
-          </div>
-          <p className="py-4">{modal.message}</p>
-          <div className="modal-action">
-            <button className="btn btn-ghost" onClick={closeModal}>
-              Cancel
-            </button>
-            <button
-              className={`btn ${
-                modal.type === "approve" ? "btn-success" : "btn-error"
-              }`}
-              onClick={confirmAction}
-            >
-              {modal.type === "approve" ? "Approve" : "Delete"}
-            </button>
+      {/* Modal element */}
+      {modal.isOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-opacity-50 backdrop-blur-xs"
+          aria-labelledby="modal-title"
+          role="dialog"
+          aria-modal="true"
+        >
+          <div className="bg-base-200 rounded-lg shadow-xl p-6 w-full max-w-md mx-4">
+            <div className="flex items-center gap-3 mb-4">
+              {modal.type === "approve" && (
+                <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center shrink-0">
+                  <svg
+                    className="w-5 h-5 text-success-content"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M5 13l4 4L19 7"
+                    ></path>
+                  </svg>
+                </div>
+              )}
+              {modal.type === "delete" && (
+                <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center shrink-0">
+                  <svg
+                    className="w-5 h-5 text-error-content"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                    ></path>
+                  </svg>
+                </div>
+              )}
+              <h3 className="font-bold text-lg" id="modal-title">
+                {modal.type === "approve" && "Approve Post"}
+                {modal.type === "delete" && "Delete Post"}
+              </h3>
+            </div>
+            <p className="py-4">{modal.message}</p>
+            <div className="flex justify-end gap-3 mt-4">
+              <button
+                className="btn btn-ghost"
+                onClick={closeModal}
+                disabled={isActionLoading}
+              >
+                Cancel
+              </button>
+              <button
+                className={`btn ${
+                  modal.type === "approve" ? "btn-success" : "btn-error"
+                }`}
+                onClick={confirmAction}
+                disabled={isActionLoading}
+              >
+                {isActionLoading ? (
+                  <>
+                    <span className="loading loading-spinner loading-sm mr-2"></span>
+                    {modal.type === "approve" ? "Approving..." : "Deleting..."}
+                  </>
+                ) : modal.type === "approve" ? (
+                  "Approve"
+                ) : (
+                  "Delete"
+                )}
+              </button>
+            </div>
           </div>
         </div>
-      </div>
+      )}
     </div>
   );
Index: client/src/Dashboard/components/Navbar.jsx
===================================================================
--- client/src/Dashboard/components/Navbar.jsx	(revision 8b884909ee30a078441fe0b338db8c32b880eccf)
+++ client/src/Dashboard/components/Navbar.jsx	(revision c6895f79f9662d5596d57b15961eeaa42be100ba)
@@ -1,4 +1,4 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import logoIcon from "../../assets/images/logoIcon.png";
 import logoText from "../../assets/images/logoText.png";
@@ -9,5 +9,16 @@
 export default function Navbar() {
   const navigate = useNavigate();
+  const location = useLocation();
   const { user } = useAuth();
+
+  const isActive = (path) => {
+    if (path === "/dashboard" && location.pathname === "/dashboard") {
+      return true;
+    }
+    if (path !== "/dashboard" && location.pathname.startsWith(path)) {
+      return true;
+    }
+    return false;
+  };
 
   return (
@@ -24,5 +35,9 @@
           <li>
             <button
-              className={`flex items-center gap-4 px-4 py-3 hover:bg-[#FFB800] hover:text-black rounded-lg transition-colors `}
+              className={`flex items-center gap-4 px-4 py-3 rounded-lg transition-colors ${
+                isActive("/dashboard")
+                  ? "bg-[#FFB800] text-black"
+                  : "hover:bg-[#FFB800] hover:text-black"
+              }`}
               onClick={() => navigate("/dashboard")}
             >
@@ -42,5 +57,9 @@
           <li>
             <button
-              className={`flex items-center gap-4 px-4 py-3 hover:bg-[#FFB800] hover:text-black rounded-lg transition-colors`}
+              className={`flex items-center gap-4 px-4 py-3 rounded-lg transition-colors ${
+                isActive("/dashboard/leaderboard")
+                  ? "bg-[#FFB800] text-black"
+                  : "hover:bg-[#FFB800] hover:text-black"
+              }`}
               onClick={() => navigate("/dashboard/leaderboard")}
             >
@@ -60,5 +79,9 @@
           <li>
             <button
-              className={`flex items-center gap-4 px-4 py-3 hover:bg-[#FFB800] hover:text-black rounded-lg transition-colors`}
+              className={`flex items-center gap-4 px-4 py-3 rounded-lg transition-colors ${
+                isActive("/dashboard/forum")
+                  ? "bg-[#FFB800] text-black"
+                  : "hover:bg-[#FFB800] hover:text-black"
+              }`}
               onClick={() => navigate("/dashboard/forum")}
             >
@@ -82,5 +105,9 @@
             <li>
               <button
-                className={`flex items-center gap-4 px-4 py-3 hover:bg-[#FFB800] hover:text-black rounded-lg transition-colors`}
+                className={`flex items-center gap-4 px-4 py-3 rounded-lg transition-colors ${
+                  isActive("/dashboard/manage-posts")
+                    ? "bg-[#FFB800] text-black"
+                    : "hover:bg-[#FFB800] hover:text-black"
+                }`}
                 onClick={() => navigate("/dashboard/manage-posts")}
               >
@@ -108,5 +135,9 @@
       <div className="absolute bottom-0 left-0 w-64 right-0 p-4 border-t border-base-content/10">
         <button
-          className={`flex items-center gap-3  px-4 py-3 hover:bg-[#FFB800] hover:text-black rounded-lg transition-colors `}
+          className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
+            isActive("/dashboard/profile")
+              ? "bg-[#FFB800] text-black"
+              : "hover:bg-[#FFB800] hover:text-black"
+          }`}
           onClick={() => navigate("/dashboard/profile")}
         >
Index: client/src/Dashboard/components/Task.jsx
===================================================================
--- client/src/Dashboard/components/Task.jsx	(revision 8b884909ee30a078441fe0b338db8c32b880eccf)
+++ client/src/Dashboard/components/Task.jsx	(revision c6895f79f9662d5596d57b15961eeaa42be100ba)
@@ -211,6 +211,6 @@
 
   return (
-    <div data-theme="luxury" className="dashboard h-screen flex bg-base-100">
-      <div className="flex-1 overflow-y-auto">
+    <div data-theme="luxury" className="dashboard  flex bg-base-100">
+      <div className="flex-1 overflow-y-auto flex items-center justify-center min-h-full">
         <div className="container mx-auto max-w-4xl p-6" data-theme="luxury">
           {!showTask ? (