diff --git a/src/ss_backend/main.mo b/src/ss_backend/main.mo
index b60acbb..bfba7bc 100644
--- a/src/ss_backend/main.mo
+++ b/src/ss_backend/main.mo
@@ -119,6 +119,18 @@ actor {
     };
   };
 
+  public query func getCommentById(commentId : Text) : async Result.Result<Comment, Text> {
+    let comment = comments.get(commentId);
+    switch (comment) {
+      case (?comment) {
+        return #ok(comment);
+      };
+      case (null) {
+        return #err("User not found!");
+      };
+    };
+  };
+
   public query func getAllUsers() : async Result.Result<[User], Text> {
 
     var allUsers = Vector.Vector<User>();
@@ -130,6 +142,25 @@ actor {
     return #ok(Vector.toArray(allUsers));
   };
 
+  public func getAllCommentsAccordingToPost(post : Post) : async Result.Result<[Comment], Text> {
+
+    let commentIds = post.comments;
+    var allComments = Vector.Vector<Comment>();
+    for (commentId in commentIds.vals()) {
+      let comment = await getCommentById(commentId);
+      switch (comment) {
+        case (#ok(comment)) {
+          allComments.add(comment);
+        };
+        case (#err(msg)) {
+
+        };
+      };
+    };
+
+    return #ok(Vector.toArray(allComments));
+  };
+
   //  post
   public func createPost(userId : Principal, description : Text, images : [Text]) : async Bool {
     let newId = await generateUUID();
@@ -348,7 +379,6 @@ actor {
           };
         };
         // comments.put(newId, comment);
-        
 
       };
       case (#err(error)) {
diff --git a/src/ss_frontend/src/components/Comment.jsx b/src/ss_frontend/src/components/Comment.jsx
index 614a078..6543c0b 100644
--- a/src/ss_frontend/src/components/Comment.jsx
+++ b/src/ss_frontend/src/components/Comment.jsx
@@ -1,14 +1,23 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import blank from '../assets/logo/blankprofpic.png'
+import { ss_backend } from '../../../declarations/ss_backend';
 
 
-const Comment = ({chatId}) => {
+const Comment = ({comment}) => {
+    const [name, setName] = useState("");
+    useEffect(() => {
+        const user = ss_backend.getUserById(comment.sender);
+        if(user.ok){
+            setName(user.ok.name);
+        }
+    }, [comment])
     return (
-        <div className='text-3xl  h-20 flex items-center gap-5'>
+        <div className='  h-20 flex items-center gap-5'>
+            {/* assdsadas */}
             <img src={blank} className='h-[60%] rounded-full' alt="" />
             <div className='flex-grow'>
-                <h1 className='text-xl font-medium'>name</h1>
-                <p className='text-base '>aaaaaaa</p>
+                <h1 className='text-lg font-medium'>{name}</h1>
+                <p className='text-base '>{comment.comment}</p>
             </div>
         </div>
     )
diff --git a/src/ss_frontend/src/components/CommentDetailPage.jsx b/src/ss_frontend/src/components/CommentDetailPage.jsx
index bcb4d5d..9c1cfd0 100644
--- a/src/ss_frontend/src/components/CommentDetailPage.jsx
+++ b/src/ss_frontend/src/components/CommentDetailPage.jsx
@@ -1,30 +1,104 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import blank from '../assets/logo/blankprofpic.png'
 import Comment from './Comment'
 import { FaRegComment } from 'react-icons/fa6'
+// import { useMutation } from 'react-query'
+import { useMutation, useMutationState } from '@tanstack/react-query'
+import { ss_backend } from '../../../declarations/ss_backend'
+import { useAuth } from '../hooks/UseAuth'
+
+const CommentDetailPage = ({ currPost, setCurrPost }) => {
+    const [comments, setComments] = useState([]);
+    const {principal} = useAuth();
+    const [comment, setComment] = useState("");
+    const { status: statusFetchingData, mutate: dataMutate } = useMutation({
+        mutationKey: ["checkFetch"],
+        mutationFn: fetchDatas,
+    });
+    async function refetch() {
+        const post = await ss_backend.getPostById(currPost.id);
+        if (post.ok) {
+            setCurrPost(post);
+        }
+    }
+    async function handleComment() {
+        try {
+            const response = await fetch(
+                "https://web-production-d8ae.up.railway.app/analyze",
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({ comment: comment }),
+                }
+            );
+
+            const data = await response.json();
+            if (response.ok) {
+                console.log(principal, currPost.id, comment, data);
+                alert(`Classification: ${data.classification}`);
+                
+                const result = await ss_backend.makeComment(principal, currPost.id, comment, data.classification);
+            } else {
+                alert(`Error: ${data.error}`);
+            }
+        } catch (error) {
+            alert("Failed to send comment. Please try again later.");
+        }
+        window.location.reload();
+        // dataMutate();
+        // refetch();
+    }
+
+    async function fetchDatas() {
+        await fetchComments();
+
+        // await fetchFriendHeader();
+        return true;
+    }
+
+
+    async function fetchComments() {
+        const fetchedComments = await ss_backend.getAllCommentsAccordingToPost(currPost);
+        // console.log("ini komennyaa" + fetchedComments);
+
+        if (fetchedComments.ok) {
+            // console.log(fetchedComments.ok);
+
+            setComments(fetchedComments.ok);
+
+        }
+    }
+
+    useEffect(() => {
+        dataMutate();
+    }, [currPost, comments]);
 
-const CommentDetailPage = () => {
     return (
         <div className='border-gray-200 border flex justify-between flex-col rounded-xl h-[87vh]  p-5 w-[25vw]'>
-            <p className='text-4xl font-medium'>Comments</p>
+            <p className='text-zinc-2xl font-medium'>Comments</p>
             {/* <hr /> */}
-            <div className='flex flex-col gap-4 h-[80%] overflow-y-scroll'>
-                <Comment />
-                <Comment />
-                <Comment />
-                <Comment />
-                <Comment />
-                <Comment />
-                <Comment />
-                <Comment />
+            <div className='flex flex-col gap-3 h-[80%] overflow-y-scroll'>
+                {comments && comments.length &&comments.length != 0 && comments.map((comment) => {
+                    // console.log(comment);
+                    return (
+                        <Comment comment={comment} />
+
+                    )
+                })}
             </div>
             <div className='flex items-center h-[3rem] gap-3'>
                 <input
                     type="text"
                     placeholder="Type here"
                     className="input input-bordered pt-6 pb-6 w-full"
+                    value={comment}
+                    onChange={(e) => {
+                        setComment(e.target.value);
+                    }}
                 />
-                <div className='bg-orange-500 aspect-square h-full flex items-center justify-center rounded-lg'>
+                <div className='bg-orange-500 aspect-square h-full flex items-center justify-center rounded-lg' onClick={handleComment}>
                     <FaRegComment className='size-7 fill-white ' />
 
                 </div>
diff --git a/src/ss_frontend/src/components/DetailPage.jsx b/src/ss_frontend/src/components/DetailPage.jsx
index a4c2f45..93c93c1 100644
--- a/src/ss_frontend/src/components/DetailPage.jsx
+++ b/src/ss_frontend/src/components/DetailPage.jsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react'
 import blank from '../assets/logo/blankprofpic.png'
-import { IoIosHeartEmpty } from "react-icons/io";
+import { IoIosHeartEmpty, IoMdHeart } from "react-icons/io";
 import { FaRegComments } from "react-icons/fa6";
 import { FaRegComment } from "react-icons/fa";
 import { RiMoneyDollarCircleLine } from 'react-icons/ri';
 import { useAuth } from '../hooks/UseAuth';
 import { ss_backend } from '../../../declarations/ss_backend';
 
-const DetailPage = ({ currPost }) => {
+const DetailPage = ({ currPost, setCurrPost }) => {
     const [name, setName] = useState("");
     const { principal } = useAuth();
     const [comment, setComment] = useState("");
@@ -17,6 +17,12 @@ const DetailPage = ({ currPost }) => {
         const liked = await ss_backend.isLiked(principal, currPost.id);
         setLiked(liked);
     }
+    async function refetch() {
+        const post = await ss_backend.getPostById(currPost.id);
+        if (post.ok) {
+            setCurrPost(post);
+        }
+    }
     useEffect(() => {
         checkLiked();
         const user = ss_backend.getUserById(currPost.sender);
@@ -33,7 +39,7 @@ const DetailPage = ({ currPost }) => {
         else {
             console.log("Error");
         }
-        // refetch();
+        refetch();
         checkLiked();
     }
 
@@ -54,7 +60,7 @@ const DetailPage = ({ currPost }) => {
                         <img className='max-w-11/12 max-h-52  px rounded-lg' src={blank} alt="" />
                         <img className='max-w-11/12 max-h-52  px rounded-lg' src={blank} alt="" />
                     </div> */}
-                    {currPost && currPost.images.length != 0 && (
+                    {currPost && currPost.images && currPost.images.length != 0 && (
                         <div className="items-center w-full flex justify-start gap-4 p-4 overflow-x-scroll">
                             {currPost.images.map((imageUrl) => {
                                 return (
@@ -73,7 +79,7 @@ const DetailPage = ({ currPost }) => {
             </div>
             <div className='flex flex-col gap-4'>
 
-            <div className='flex gap-8 justify-end'>
+                <div className='flex gap-8 justify-end'>
                     <div className='flex items-center gap-2 cursor-pointer' onClick={handleLike}>
                         {liked == true ? <>
                             <IoMdHeart className='size-6' />
@@ -91,14 +97,16 @@ const DetailPage = ({ currPost }) => {
                         <p className='text-lg text-gray-500'>{currPost && currPost.investors.length}</p>
                     </div>
                 </div>
-                <button class="btn btn-warning text-lg h-[4rem]">I'm interested in funding this project</button>
-                <details className="dropdown">
-                    <summary className="btn text-gray-500 text-base m-1 w-full">We've detected that this project may have low reliability. Do you agree?</summary>
-                    <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] w-full text-lg p-2 shadow">
-                        <li><a>Yes</a></li>
-                        <li><a>No</a></li>
-                    </ul>
-                </details>
+                <button className="btn btn-warning text-lg h-[4rem]">I'm interested in funding this project</button>
+                {
+                    currPost.votingTriggered && <details className="dropdown">
+                        <summary className="btn text-gray-500 text-base m-1 w-full">We've detected that this project may have low reliability</summary>
+                        <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] w-full text-lg p-2 shadow">
+                            <li><a>Yes</a></li>
+                            <li><a>No</a></li>
+                        </ul>
+                    </details>
+                }
 
             </div>
         </div>
diff --git a/src/ss_frontend/src/components/HomePost.jsx b/src/ss_frontend/src/components/HomePost.jsx
index f7c4617..6676b53 100644
--- a/src/ss_frontend/src/components/HomePost.jsx
+++ b/src/ss_frontend/src/components/HomePost.jsx
@@ -57,7 +57,7 @@ const HomePost = ({ post, choosePost, refetch }) => {
             const data = await response.json();
             if (response.ok) {
                 alert(`Classification: ${data.classification}`);
-                const result = ss_backend.makeComment(principal, post.id, comment, data.classification);
+                const result = await ss_backend.makeComment(principal, post.id, comment, data.classification);
             } else {
                 alert(`Error: ${data.error}`);
             }
diff --git a/src/ss_frontend/src/pages/HomePage.jsx b/src/ss_frontend/src/pages/HomePage.jsx
index 74f92ae..5bd7ef5 100644
--- a/src/ss_frontend/src/pages/HomePage.jsx
+++ b/src/ss_frontend/src/pages/HomePage.jsx
@@ -18,15 +18,15 @@ const HomePage = () => {
             <ProfileSidebar />
           </div>
           {currPost === undefined ?
-            <MiddleHomePart setCurrPost={setCurrPost} currPost={currPost}/> : <DetailPage currPost={currPost}/>}
+            <MiddleHomePart setCurrPost={setCurrPost} currPost={currPost}/> : <DetailPage currPost={currPost} setCurrPost={setCurrPost}/>}
           {
-            currPost === "" ? <div className="sticky self-start top-[5rem]">
+            currPost === undefined ? <div className="sticky self-start top-[5rem]">
               <RightHomePart />
 
-            </div> : <CommentDetailPage />
+            </div> : <CommentDetailPage currPost={currPost} setCurrPost={setCurrPost}/>
           }
 
-          :
+          
 
           {/* <TextInput /> */}
         </div>