Index: backend/controllers/forumController.js
===================================================================
--- backend/controllers/forumController.js	(revision 074a70e4190d3d24571f1f134621f2dde3572fdd)
+++ backend/controllers/forumController.js	(revision dd98dd52db992e9caa4b0ad46ca764c6437dcf5b)
@@ -135,6 +135,10 @@
 // Comment Functions
 const createComment = async (req, res) => {
-  const { postId } = req.params;
-  const { content, authorId, authorName } = req.body;
+  // Accept post_id, content, authorId, authorName from body
+  const { post_id, content, authorId, authorName } = req.body;
+
+  if (!post_id || !content || !authorId || !authorName) {
+    return res.status(400).json({ error: 'post_id, content, authorId, and authorName are required' });
+  }
 
   try {
@@ -148,5 +152,5 @@
     const savedComment = await prisma.comments.create({
       data: {
-        post_id: postId,
+        post_id: post_id,
         content: comment.content,
         author_id: authorId,
@@ -169,5 +173,10 @@
 
 const getComments = async (req, res) => {
-  const { postId } = req.params;
+  // Get post_id from query string
+  const postId = req.query.post_id;
+
+  if (!postId) {
+    return res.status(400).json({ error: 'post_id query parameter is required' });
+  }
 
   try {
@@ -189,5 +198,5 @@
           content: comment.content,
           authorName: comment.author_name,
-          dateCreated: comment.dateCreated,
+          dateCreated: comment.date_created,
         })
     );
Index: backend/node_modules/.package-lock.json
===================================================================
--- backend/node_modules/.package-lock.json	(revision 074a70e4190d3d24571f1f134621f2dde3572fdd)
+++ backend/node_modules/.package-lock.json	(revision dd98dd52db992e9caa4b0ad46ca764c6437dcf5b)
@@ -519,4 +519,19 @@
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
Index: backend/routers/forumRouter.js
===================================================================
--- backend/routers/forumRouter.js	(revision 074a70e4190d3d24571f1f134621f2dde3572fdd)
+++ backend/routers/forumRouter.js	(revision dd98dd52db992e9caa4b0ad46ca764c6437dcf5b)
@@ -14,4 +14,6 @@
 router.put('/comments/:commentId', forumController.updateComment);
 router.delete('/comments/:commentId', forumController.deleteComment);
+router.post('/comments', forumController.createComment);
+router.get('/comments', forumController.getComments);
 
 module.exports = router;
Index: client/src/Dashboard/Dashboard.jsx
===================================================================
--- client/src/Dashboard/Dashboard.jsx	(revision 074a70e4190d3d24571f1f134621f2dde3572fdd)
+++ client/src/Dashboard/Dashboard.jsx	(revision dd98dd52db992e9caa4b0ad46ca764c6437dcf5b)
@@ -10,8 +10,10 @@
 import Profile from "./components/Profile";
 import CreatePost from "../CreatePost/CreatePost";
+import ForumPostDetail from "./components/ForumPostDetail";
 
 const Dashboard = () => {
   const [activePage, setActivePage] = useState("home");
   const [user, setUser] = useState(null);
+  const [selectedForumPost, setSelectedForumPost] = useState(null);
   const navigate = useNavigate();
 
@@ -26,9 +28,17 @@
 
   const renderPage = () => {
+    if (selectedForumPost) {
+      return (
+        <ForumPostDetail
+          post={selectedForumPost}
+          onBack={() => setSelectedForumPost(null)}
+        />
+      );
+    }
     switch (activePage) {
       case "home":
         return <Task />;
       case "forum":
-        return <Forum setActivePage={setActivePage} />;
+        return <Forum setActivePage={setActivePage} onPostClick={setSelectedForumPost} />;
       case "leaderboard":
         return <LeaderBoardEx />;
Index: client/src/Dashboard/components/Forum.jsx
===================================================================
--- client/src/Dashboard/components/Forum.jsx	(revision 074a70e4190d3d24571f1f134621f2dde3572fdd)
+++ client/src/Dashboard/components/Forum.jsx	(revision dd98dd52db992e9caa4b0ad46ca764c6437dcf5b)
@@ -1,8 +1,8 @@
-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 likeIcon from "../../assets/images/like.svg";
 
-const Forum = ({ setActivePage }) => {
+const Forum = ({ setActivePage, onPostClick }) => {
   const navigate = useNavigate();
   const [posts, setPosts] = useState([]);
@@ -26,4 +26,5 @@
       if (page === 0) {
         setPosts(data);
+        console.log("Fetched posts:", data);
       } else {
         setPosts((prevPosts) => [...prevPosts, ...data]);
@@ -33,5 +34,5 @@
       }
     } catch (error) {
-      console.error('Error fetching forum posts:', error);
+      console.error("Error fetching forum posts:", error);
     }
   };
@@ -42,17 +43,22 @@
 
   return (
-    <div className="flex flex-col md:flex-row gap-6 p-6 h-full overflow-y-auto">
+    <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="space-y-4">
+        <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"
+              className="p-4 border rounded-lg shadow-sm hover:shadow-md transition cursor-pointer"
+              onClick={() => onPostClick && onPostClick(post)}
             >
               <h2 className="text-lg font-semibold">{post.title}</h2>
-              <p className="text-sm text-gray-500">By {post.author_name}</p>
-              <p className="mt-2 text-gray-700">{post.content}</p>
+              <p className="text-sm text-gray-500">By {post.authorName}</p>
+              <p className="mt-2 text-gray-700">
+                {post.content && post.content.length > 300
+                  ? post.content.slice(0, 300) + "..."
+                  : post.content}
+              </p>
               <div className="mt-4 flex gap-4">
                 <img
@@ -81,7 +87,7 @@
       {/* Create a Post Button */}
       <div className="w-full md:w-1/4">
-        <div className=" flex items-center justify-center">
+        <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 dd98dd52db992e9caa4b0ad46ca764c6437dcf5b)
+++ client/src/Dashboard/components/ForumPostDetail.jsx	(revision dd98dd52db992e9caa4b0ad46ca764c6437dcf5b)
@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from "react";
+
+const ForumPostDetail = ({ post, onBack }) => {
+  const [comments, setComments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [commentText, setCommentText] = useState("");
+  const [posting, setPosting] = useState(false);
+
+  useEffect(() => {
+    if (!post) return;
+    setLoading(true);
+    setError(null);
+    fetch(`/forum/comments?post_id=${post.id}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch comments");
+        return res.json();
+      })
+      .then((data) => {
+        setComments(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [post]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!commentText.trim()) return;
+    setPosting(true);
+    setError(null);
+    const user = JSON.parse(localStorage.getItem("user"));
+    try {
+      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,
+        }),
+      });
+      if (!response.ok) {
+        const errData = await response.json();
+        throw new Error(errData.error || "Failed to post comment");
+      }
+      setCommentText("");
+      // Refresh comments
+      fetch(`/forum/comments?post_id=${post.id}`)
+        .then((res) => res.json())
+        .then((data) => setComments(data));
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setPosting(false);
+    }
+  };
+
+  if (!post) return null;
+
+  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">
+        <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="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>
+            </div>
+          </div>
+          <div className="text-base-content/80 text-lg mb-4 whitespace-pre-line break-words">
+            {post.content}
+          </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>
+            <textarea
+              className="textarea textarea-bordered w-full min-h-[80px]"
+              placeholder="Write a comment..."
+              value={commentText}
+              onChange={(e) => setCommentText(e.target.value)}
+              disabled={posting}
+              maxLength={500}
+            />
+            <div className="flex justify-end mt-2">
+              <button
+                type="submit"
+                className="btn btn-primary"
+                disabled={posting || !commentText.trim()}
+              >
+                {posting ? "Posting..." : "Post Comment"}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ForumPostDetail;
Index: package-lock.json
===================================================================
--- package-lock.json	(revision dd98dd52db992e9caa4b0ad46ca764c6437dcf5b)
+++ package-lock.json	(revision dd98dd52db992e9caa4b0ad46ca764c6437dcf5b)
@@ -0,0 +1,125 @@
+{
+  "name": "finkiRanked",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "node_modules/@prisma/client": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-6.9.0.tgz",
+      "integrity": "sha512-Gg7j1hwy3SgF1KHrh0PZsYvAaykeR0PaxusnLXydehS96voYCGt1U5zVR31NIouYc63hWzidcrir1a7AIyCsNQ==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "peerDependencies": {
+        "prisma": "*",
+        "typescript": ">=5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "prisma": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@prisma/config": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/@prisma/config/-/config-6.9.0.tgz",
+      "integrity": "sha512-Wcfk8/lN3WRJd5w4jmNQkUwhUw0eksaU/+BlAJwPQKW10k0h0LC9PD/6TQFmqKVbHQL0vG2z266r0S1MPzzhbA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jiti": "2.4.2"
+      }
+    },
+    "node_modules/@prisma/debug": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.9.0.tgz",
+      "integrity": "sha512-bFeur/qi/Q+Mqk4JdQ3R38upSYPebv5aOyD1RKywVD+rAMLtRkmTFn28ZuTtVOnZHEdtxnNOCH+bPIeSGz1+Fg==",
+      "devOptional": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/engines": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-6.9.0.tgz",
+      "integrity": "sha512-im0X0bwDLA0244CDf8fuvnLuCQcBBdAGgr+ByvGfQY9wWl6EA+kRGwVk8ZIpG65rnlOwtaWIr/ZcEU5pNVvq9g==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "6.9.0",
+        "@prisma/engines-version": "6.9.0-10.81e4af48011447c3cc503a190e86995b66d2a28e",
+        "@prisma/fetch-engine": "6.9.0",
+        "@prisma/get-platform": "6.9.0"
+      }
+    },
+    "node_modules/@prisma/engines-version": {
+      "version": "6.9.0-10.81e4af48011447c3cc503a190e86995b66d2a28e",
+      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-6.9.0-10.81e4af48011447c3cc503a190e86995b66d2a28e.tgz",
+      "integrity": "sha512-Qp9gMoBHgqhKlrvumZWujmuD7q4DV/gooEyPCLtbkc13EZdSz2RsGUJ5mHb3RJgAbk+dm6XenqG7obJEhXcJ6Q==",
+      "devOptional": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/fetch-engine": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-6.9.0.tgz",
+      "integrity": "sha512-PMKhJdl4fOdeE3J3NkcWZ+tf3W6rx3ht/rLU8w4SXFRcLhd5+3VcqY4Kslpdm8osca4ej3gTfB3+cSk5pGxgFg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "6.9.0",
+        "@prisma/engines-version": "6.9.0-10.81e4af48011447c3cc503a190e86995b66d2a28e",
+        "@prisma/get-platform": "6.9.0"
+      }
+    },
+    "node_modules/@prisma/get-platform": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-6.9.0.tgz",
+      "integrity": "sha512-/B4n+5V1LI/1JQcHp+sUpyRT1bBgZVPHbsC4lt4/19Xp4jvNIVcq5KYNtQDk5e/ukTSjo9PZVAxxy9ieFtlpTQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "6.9.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "devOptional": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/prisma": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-6.9.0.tgz",
+      "integrity": "sha512-resJAwMyZREC/I40LF6FZ6rZTnlrlrYrb63oW37Gq+U+9xHwbyMSPJjKtM7VZf3gTO86t/Oyz+YeSXr3CmAY1Q==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/config": "6.9.0",
+        "@prisma/engines": "6.9.0"
+      },
+      "bin": {
+        "prisma": "build/index.js"
+      },
+      "engines": {
+        "node": ">=18.18"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    }
+  }
+}