Index: backend/controllers/forumController.js
===================================================================
--- backend/controllers/forumController.js	(revision f4a06e8b67d1fe13fe3cf4ac51900d9fd39f8267)
+++ backend/controllers/forumController.js	(revision d4e8deb697cf9b2cd8eefcdd5aa6484d2815a246)
@@ -139,5 +139,7 @@
 
   if (!post_id || !content || !authorId || !authorName) {
-    return res.status(400).json({ error: 'post_id, content, authorId, and authorName are required' });
+    return res.status(400).json({
+      error: 'post_id, content, authorId, and authorName are required',
+    });
   }
 
@@ -177,5 +179,7 @@
 
   if (!postId) {
-    return res.status(400).json({ error: 'post_id query parameter is required' });
+    return res
+      .status(400)
+      .json({ error: 'post_id query parameter is required' });
   }
 
Index: client/src/Dashboard/Dashboard.jsx
===================================================================
--- client/src/Dashboard/Dashboard.jsx	(revision f4a06e8b67d1fe13fe3cf4ac51900d9fd39f8267)
+++ client/src/Dashboard/Dashboard.jsx	(revision d4e8deb697cf9b2cd8eefcdd5aa6484d2815a246)
@@ -1,17 +1,17 @@
-import React, { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import logoIcon from "../assets/images/logoIcon.png";
-import logoText from "../assets/images/logoText.png";
-import pp from "../assets/images/pp.svg";
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import logoIcon from '../assets/images/logoIcon.png';
+import logoText from '../assets/images/logoText.png';
+import pp from '../assets/images/pp.svg';
 
-import Task from "./components/Task";
-import LeaderBoardEx from "@/LandingPage/components/LeaderBoardEx";
-import Forum from "./components/Forum";
-import Profile from "./components/Profile";
-import CreatePost from "../CreatePost/CreatePost";
-import ForumPostDetail from "./components/ForumPostDetail";
+import Task from './components/Task';
+import LeaderBoardEx from '@/LandingPage/components/LeaderBoardEx';
+import Forum from './components/Forum';
+import Profile from './components/Profile';
+import CreatePost from '../CreatePost/CreatePost';
+import ForumPostDetail from './components/ForumPostDetail';
 
 const Dashboard = () => {
-  const [activePage, setActivePage] = useState("home");
+  const [activePage, setActivePage] = useState('home');
   const [user, setUser] = useState(null);
   const [selectedForumPost, setSelectedForumPost] = useState(null);
@@ -19,7 +19,7 @@
 
   useEffect(() => {
-    const storedUser = localStorage.getItem("user");
+    const storedUser = localStorage.getItem('user');
     if (!storedUser) {
-      navigate("/login");
+      navigate('/login');
     } else {
       setUser(JSON.parse(storedUser));
@@ -37,13 +37,18 @@
     }
     switch (activePage) {
-      case "home":
+      case 'home':
         return <Task />;
-      case "forum":
-        return <Forum setActivePage={setActivePage} onPostClick={setSelectedForumPost} />;
-      case "leaderboard":
+      case 'forum':
+        return (
+          <Forum
+            setActivePage={setActivePage}
+            onPostClick={setSelectedForumPost}
+          />
+        );
+      case 'leaderboard':
         return <LeaderBoardEx />;
-      case "profile":
+      case 'profile':
         return <Profile />;
-      case "createPost":
+      case 'createPost':
         return <CreatePost setActivePage={setActivePage} />;
       default:
@@ -78,9 +83,9 @@
               <button
                 className={`flex items-center gap-4 px-4 py-3 hover:bg-[#FFB800] hover:text-black rounded-lg transition-colors ${
-                  activePage === "home"
-                    ? "bg-[#FFB800] text-black font-medium"
-                    : ""
+                  activePage === 'home'
+                    ? 'bg-[#FFB800] text-black font-medium'
+                    : ''
                 }`}
-                onClick={() => setActivePage("home")}
+                onClick={() => setActivePage('home')}
               >
                 <svg
@@ -100,9 +105,9 @@
               <button
                 className={`flex items-center gap-4 px-4 py-3 hover:bg-[#FFB800] hover:text-black rounded-lg transition-colors ${
-                  activePage === "leaderboard"
-                    ? "bg-[#FFB800] text-black font-medium"
-                    : ""
+                  activePage === 'leaderboard'
+                    ? 'bg-[#FFB800] text-black font-medium'
+                    : ''
                 }`}
-                onClick={() => setActivePage("leaderboard")}
+                onClick={() => setActivePage('leaderboard')}
               >
                 <svg
@@ -122,9 +127,9 @@
               <button
                 className={`flex items-center gap-4 px-4 py-3 hover:bg-[#FFB800] hover:text-black rounded-lg transition-colors ${
-                  activePage === "forum"
-                    ? "bg-[#FFB800] text-black font-medium"
-                    : ""
+                  activePage === 'forum'
+                    ? 'bg-[#FFB800] text-black font-medium'
+                    : ''
                 }`}
-                onClick={() => setActivePage("forum")}
+                onClick={() => setActivePage('forum')}
               >
                 <svg
@@ -150,7 +155,7 @@
           <button
             className={`flex items-center gap-3  px-4 py-3 hover:bg-[#FFB800] hover:text-black rounded-lg transition-colors ${
-              activePage === "profile" ? "bg-[#FFB800] text-black" : ""
+              activePage === 'profile' ? 'bg-[#FFB800] text-black' : ''
             }`}
-            onClick={() => setActivePage("profile")}
+            onClick={() => setActivePage('profile')}
           >
             <img
@@ -160,5 +165,5 @@
             />
             <div className="flex flex-col items-start">
-              <span className="font-medium text-left">{user.name}</span>
+              <span className="font-medium text-left">{user.username}</span>
               <span className="text-sm text-base-content/70">{user.rank}</span>
             </div>
@@ -167,5 +172,5 @@
       </nav>
 
-      <main className="dashboard__content flex-1 p-6">{renderPage()}</main>
+      <main className="dashboard__content flex-1">{renderPage()}</main>
     </div>
   );
Index: client/src/Dashboard/components/Forum.jsx
===================================================================
--- client/src/Dashboard/components/Forum.jsx	(revision f4a06e8b67d1fe13fe3cf4ac51900d9fd39f8267)
+++ client/src/Dashboard/components/Forum.jsx	(revision d4e8deb697cf9b2cd8eefcdd5aa6484d2815a246)
@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import commentIcon from "../../assets/images/comment.svg";
-import likeIcon from "../../assets/images/like.svg";
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import commentIcon from '../../assets/images/comment.svg';
+import trashIcon from '../../assets/images/delete.svg'; // Add this import
 
 const Forum = ({ setActivePage, onPostClick }) => {
@@ -10,4 +10,5 @@
   const [hasMore, setHasMore] = useState(true);
   const postsPerPage = 5; // Number of posts to fetch per request
+  const user = JSON.parse(localStorage.getItem('user'));
 
   useEffect(() => {
@@ -26,5 +27,5 @@
       if (page === 0) {
         setPosts(data);
-        console.log("Fetched posts:", data);
+        console.log('Fetched posts:', data);
       } else {
         setPosts((prevPosts) => [...prevPosts, ...data]);
@@ -34,5 +35,5 @@
       }
     } catch (error) {
-      console.error("Error fetching forum posts:", error);
+      console.error('Error fetching forum posts:', error);
     }
   };
@@ -45,29 +46,78 @@
     <div className="flex flex-col md:flex-row gap-6 p-6 h-full overflow-y-auto w-full">
       {/* Forum Posts */}
-      <div className="flex-1">
-        <h1 className="text-2xl font-bold mb-4">Forum Posts</h1>
+      <div className="flex-1 ml-8">
+        <h1 className="text-3xl font-bold mb-4">Forum Posts</h1>
         <div className="space-y-4" w-300>
           {posts.map((post) => (
             <div
               key={post.id}
-              className="p-4 border rounded-lg shadow-sm hover:shadow-md transition cursor-pointer"
-              onClick={() => onPostClick && onPostClick(post)}
+              className="p-4 border rounded-lg shadow-sm hover:shadow-md transition  relative"
             >
-              <h2 className="text-lg font-semibold">{post.title}</h2>
-              <p className="text-sm text-gray-500">By {post.authorName}</p>
-              <p className="mt-2 text-gray-700">
+              {(post.authorName === user.name ||
+                post.authorName === user.username) && (
+                <button
+                  className=" absolute top-2 right-2 p-1.5 rounded-full hover:bg-gray-600 transition-colors"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    // Here you would add the delete confirmation and logic
+                    if (
+                      window.confirm(
+                        'Are you sure you want to delete this post?'
+                      )
+                    ) {
+                      // Call your delete post function here
+                      console.log('Delete post:', post.id);
+                    }
+                  }}
+                >
+                  <img src={trashIcon} alt="Delete" className="w-6 h-6" />
+                </button>
+              )}
+
+              <div className="flex items-center gap-4 mt-2">
+                <h2
+                  className="text-3xl font-semibold mb-2 cursor-pointer hover:underline"
+                  onClick={(e) => {
+                    // Prevent clicking the post if the delete button was clicked
+                    if (
+                      e.target.closest('.delete-btn') ||
+                      e.target.classList.contains('delete-btn')
+                    ) {
+                      e.stopPropagation();
+                      return;
+                    }
+                    onPostClick && onPostClick(post);
+                  }}
+                >
+                  {post.title}
+                </h2>
+              </div>
+
+              <p className="text-m text-gray-500">
+                By {post.authorName},{' '}
+                <span>{post.dateCreated.split('T')[0]}</span>
+              </p>
+              <p className="mt-2 text-gray-400 text-xl">
                 {post.content && post.content.length > 300
-                  ? post.content.slice(0, 300) + "..."
+                  ? post.content.slice(0, 300) + '...'
                   : post.content}
               </p>
-              <div className="mt-4 flex gap-4">
+              <div
+                className="mt-4 flex justify-end"
+                onClick={(e) => {
+                  // Prevent clicking the post if the delete button was clicked
+                  if (
+                    e.target.closest('.delete-btn') ||
+                    e.target.classList.contains('delete-btn')
+                  ) {
+                    e.stopPropagation();
+                    return;
+                  }
+                  onPostClick && onPostClick(post);
+                }}
+              >
                 <img
                   src={commentIcon}
                   alt="Comment"
-                  className="w-6 h-6 cursor-pointer hover:opacity-80"
-                />
-                <img
-                  src={likeIcon}
-                  alt="Like"
                   className="w-6 h-6 cursor-pointer hover:opacity-80"
                 />
@@ -89,5 +139,5 @@
         <div className="flex flex-row justify-end p-6 rounded-lg shadow-md">
           <button
-            onClick={() => navigate("/create-post")}
+            onClick={() => navigate('/create-post')}
             className="cursor-pointer px-6 py-3 bg-yellow-500 text-black rounded hover:bg-yellow-600"
           >
Index: client/src/Dashboard/components/ForumPostDetail.jsx
===================================================================
--- client/src/Dashboard/components/ForumPostDetail.jsx	(revision f4a06e8b67d1fe13fe3cf4ac51900d9fd39f8267)
+++ client/src/Dashboard/components/ForumPostDetail.jsx	(revision d4e8deb697cf9b2cd8eefcdd5aa6484d2815a246)
@@ -1,3 +1,3 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 
 const ForumPostDetail = ({ post, onBack }) => {
@@ -5,5 +5,5 @@
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const [commentText, setCommentText] = useState("");
+  const [commentText, setCommentText] = useState('');
   const [posting, setPosting] = useState(false);
 
@@ -14,5 +14,5 @@
     fetch(`/forum/comments?post_id=${post.id}`)
       .then((res) => {
-        if (!res.ok) throw new Error("Failed to fetch comments");
+        if (!res.ok) throw new Error('Failed to fetch comments');
         return res.json();
       })
@@ -32,21 +32,22 @@
     setPosting(true);
     setError(null);
-    const user = JSON.parse(localStorage.getItem("user"));
+    const user = JSON.parse(localStorage.getItem('user'));
+
     try {
-      const response = await fetch("/forum/comments", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+      const response = await fetch('/forum/comments', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           post_id: post.id,
           content: commentText,
           authorId: user?.id,
-          authorName: user?.name,
+          authorName: user?.username,
         }),
       });
       if (!response.ok) {
         const errData = await response.json();
-        throw new Error(errData.error || "Failed to post comment");
+        throw new Error(errData.error || 'Failed to post comment');
       }
-      setCommentText("");
+      setCommentText('');
       // Refresh comments
       fetch(`/forum/comments?post_id=${post.id}`)
@@ -63,15 +64,16 @@
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-base-200 px-2 py-8">
-      <div className="w-full max-w-2xl">
+    <div className="flex flex-col items-center justify-center h-full overflow-y-auto bg-base-200 px-2 py-8">
+      <div className="w-full h-full max-w-2xl">
         <button className="btn btn-ghost mb-4" onClick={onBack}>
           ← Back to Forum
         </button>
-        <div className="card bg-base-100 shadow-xl p-6 mb-8">
+        <div className="card bg-base-100 shadow-xl  p-6 mb-8">
           <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-2">
             <h2 className="card-title text-3xl break-words">{post.title}</h2>
+
             <div className="flex items-center gap-2 mt-2 md:mt-0">
-              <span className="badge badge-primary text-xs">
-                By {post.author_name}
+              <span className="badge badge-tertiary text-xs">
+                By {post.authorName}
               </span>
             </div>
@@ -81,40 +83,10 @@
           </div>
         </div>
+
         <div className="card bg-base-100 shadow-lg p-6 mb-8">
-          <h3 className="text-2xl font-semibold mb-4">Comments</h3>
-          <div className="space-y-4">
-            {loading ? (
-              <div className="text-gray-400">Loading comments...</div>
-            ) : error ? (
-              <div className="text-red-500">{error}</div>
-            ) : comments.length > 0 ? (
-              comments.map((comment, idx) => (
-                <div
-                  key={comment.id || idx}
-                  className="p-4 rounded-lg bg-base-200 border border-base-300"
-                >
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="font-semibold text-base-content">
-                      {comment.authorName}
-                    </span>
-                    <span className="text-xs text-base-content/60">
-                      {comment.dateCreated
-                        ? new Date(comment.dateCreated).toLocaleString()
-                        : ""}
-                    </span>
-                  </div>
-                  <div className="text-base-content/80 text-base break-words">
-                    {comment.content}
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="text-gray-400">No comments yet.</div>
-            )}
-          </div>
           <form className="mt-6" onSubmit={handleSubmit}>
-            <label className="block mb-2 text-base font-medium">
-              Add a comment
-            </label>
+            <h3 className="text-2xl font-semibold mb-4">
+              Comments ({comments.length})
+            </h3>
             <textarea
               className="textarea textarea-bordered w-full min-h-[80px]"
@@ -128,11 +100,44 @@
               <button
                 type="submit"
-                className="btn btn-primary"
+                className="btn btn-tertiary"
                 disabled={posting || !commentText.trim()}
               >
-                {posting ? "Posting..." : "Post Comment"}
+                {posting ? 'Posting...' : 'Post Comment'}
               </button>
             </div>
           </form>
+
+          <div className="mt-8">
+            <div className="h-64 overflow-y-auto pr-2 space-y-4 rounded-md">
+              {loading ? (
+                <div className="text-gray-400 p-3">Loading comments...</div>
+              ) : error ? (
+                <div className="text-red-500 p-3">{error}</div>
+              ) : comments.length > 0 ? (
+                comments.map((comment, idx) => (
+                  <div
+                    key={comment.id || idx}
+                    className="p-4 rounded-lg bg-base-200 border border-base-300"
+                  >
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className="font-semibold text-base-content">
+                        {comment.authorName}
+                      </span>
+                      <span className="text-xs text-base-content/60">
+                        {comment.dateCreated
+                          ? new Date(comment.dateCreated).toLocaleString()
+                          : ''}
+                      </span>
+                    </div>
+                    <div className="text-base-content/80 text-base break-words">
+                      {comment.content}
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <div className="text-gray-400 p-3">No comments yet.</div>
+              )}
+            </div>
+          </div>
         </div>
       </div>
Index: client/src/assets/images/delete.svg
===================================================================
--- client/src/assets/images/delete.svg	(revision d4e8deb697cf9b2cd8eefcdd5aa6484d2815a246)
+++ client/src/assets/images/delete.svg	(revision d4e8deb697cf9b2cd8eefcdd5aa6484d2815a246)
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffb800"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>