diff --git a/app/(landing)/projects/[id]/page.tsx b/app/(landing)/projects/[id]/page.tsx
index 02d68139d..140bc2e46 100644
--- a/app/(landing)/projects/[id]/page.tsx
+++ b/app/(landing)/projects/[id]/page.tsx
@@ -68,6 +68,7 @@ async function ProjectContent({ id }: { id: string }) {
     // Try to fetch as crowdfunding project first
     try {
       const response = await getCrowdfundingProject(id);
+
       if (response.success && response.data) {
         projectData = transformCrowdfundingProject(
           response.data.project,
@@ -80,6 +81,7 @@ async function ProjectContent({ id }: { id: string }) {
       // If crowdfunding project fails, try regular project
       try {
         const regularProject = await getProjectDetails(id);
+
         // Transform regular project data if needed
         // For regular projects, we need to create a mock CrowdfundingProject structure
         const mockProject: CrowdfundingProject = {
diff --git a/components/project-details/comment-section/comment-input.tsx b/components/project-details/comment-section/comment-input.tsx
new file mode 100644
index 000000000..5f052c147
--- /dev/null
+++ b/components/project-details/comment-section/comment-input.tsx
@@ -0,0 +1,74 @@
+'use client';
+import type React from 'react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Smile } from 'lucide-react';
+
+interface CommentInputProps {
+  onSubmit: (content: string) => void;
+  placeholder?: string;
+  autoFocus?: boolean;
+  onCancel?: () => void;
+  showCancel?: boolean;
+}
+
+export function CommentInput({
+  onSubmit,
+  placeholder = 'Leave a comment...',
+  autoFocus = false,
+  onCancel,
+  showCancel = false,
+}: CommentInputProps) {
+  const [comment, setComment] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (comment.trim()) {
+      onSubmit(comment.trim());
+      setComment('');
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className='flex items-center gap-4 rounded-lg border border-neutral-800 bg-black px-6 py-5'
+    >
+      <div className='shrink-0'>
+        <Smile className='size-10 text-neutral-500' />
+      </div>
+
+      <div className='flex-1 rounded-xl border border-[#919191] bg-[#101010] px-6 py-3.5'>
+        <input
+          value={comment}
+          onChange={e => setComment(e.target.value)}
+          placeholder={placeholder}
+          autoFocus={autoFocus}
+          className='w-full text-base text-neutral-200 placeholder:text-neutral-500 focus:outline-none'
+        />
+      </div>
+
+      <Button
+        type='submit'
+        variant='ghost'
+        size='sm'
+        className='shrink-0 px-0 text-base font-normal text-neutral-400 hover:bg-transparent hover:text-white disabled:opacity-50'
+        disabled={!comment.trim()}
+      >
+        Reply
+      </Button>
+
+      {showCancel && (
+        <Button
+          type='button'
+          variant='ghost'
+          size='sm'
+          onClick={onCancel}
+          className='shrink-0 text-base text-neutral-400 hover:text-white'
+        >
+          Cancel
+        </Button>
+      )}
+    </form>
+  );
+}
diff --git a/components/project-details/comment-section/comment-item.tsx b/components/project-details/comment-section/comment-item.tsx
new file mode 100644
index 000000000..a493f2f3e
--- /dev/null
+++ b/components/project-details/comment-section/comment-item.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+import { useState } from 'react';
+import { Heart, ChevronUp, ChevronDown } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { CommentInput } from './comment-input';
+import { Comment } from '@/lib/data/comments-mock';
+
+interface CommentItemProps {
+  comment: Comment;
+  isReply?: boolean;
+  onAddReply: (commentId: string, content: string) => void;
+}
+
+export function CommentItem({
+  comment,
+  isReply = false,
+  onAddReply,
+}: CommentItemProps) {
+  const [isLiked, setIsLiked] = useState(false);
+  const [showReplies, setShowReplies] = useState(false);
+  const [showReplyInput, setShowReplyInput] = useState(false);
+  const hasReplies = comment.replies && comment.replies.length > 0;
+
+  const handleReplySubmit = (content: string) => {
+    onAddReply(comment.id, content);
+    setShowReplyInput(false);
+    setShowReplies(true);
+  };
+
+  return (
+    <div className={cn('flex gap-3', isReply && 'ml-12 md:ml-14')}>
+      <Avatar className='size-8 shrink-0 md:size-10'>
+        <AvatarImage src={comment.author.avatar} alt={comment.author.name} />
+        <AvatarFallback>{comment.author.name[0]}</AvatarFallback>
+      </Avatar>
+
+      <div className='min-w-0 flex-1'>
+        <div className='flex items-start justify-between gap-2'>
+          <div className='min-w-0 flex-1'>
+            <button className='text-sm font-medium text-white underline-offset-2 hover:underline'>
+              {comment.author.name}
+            </button>
+            <p className='mt-1 text-sm break-words text-white md:text-base'>
+              {comment.content}
+            </p>
+          </div>
+        </div>
+
+        <div className='mt-2 flex items-center gap-4'>
+          <span className='text-xs text-zinc-400 md:text-sm'>
+            {comment.timestamp}
+          </span>
+          <Button
+            variant='ghost'
+            size='sm'
+            onClick={() => setShowReplyInput(!showReplyInput)}
+            className='h-auto p-0 text-xs text-zinc-400 hover:bg-transparent hover:text-white md:text-sm'
+          >
+            Reply
+          </Button>
+          <button
+            onClick={() => setIsLiked(!isLiked)}
+            className='group flex items-center gap-1.5'
+          >
+            <Heart
+              className={cn(
+                'size-4 transition-colors',
+                isLiked
+                  ? 'fill-red-500 text-red-500'
+                  : 'text-zinc-400 group-hover:text-white'
+              )}
+            />
+            <span className='text-xs text-zinc-400 group-hover:text-white md:text-sm'>
+              {comment.likes}
+            </span>
+          </button>
+        </div>
+
+        {showReplyInput && (
+          <div className='mt-3 -ml-12 md:-ml-14'>
+            <CommentInput
+              onSubmit={handleReplySubmit}
+              placeholder='Write a reply...'
+              autoFocus
+              onCancel={() => setShowReplyInput(false)}
+              showCancel
+            />
+          </div>
+        )}
+
+        {hasReplies && (
+          <>
+            <button
+              onClick={() => setShowReplies(!showReplies)}
+              className='mt-3 flex items-center gap-2 text-xs text-zinc-400 transition-colors hover:text-white md:text-sm'
+            >
+              <div className='h-px w-8 bg-zinc-700 md:w-12' />
+              <span>
+                {showReplies ? 'Hide' : 'Show'} replies (
+                {comment.replies?.length})
+              </span>
+              {showReplies ? (
+                <ChevronUp className='size-3.5' />
+              ) : (
+                <ChevronDown className='size-3.5' />
+              )}
+            </button>
+
+            {showReplies && (
+              <div className='mt-4 space-y-4'>
+                {comment.replies?.map(reply => (
+                  <CommentItem
+                    key={reply.id}
+                    comment={reply}
+                    isReply
+                    onAddReply={onAddReply}
+                  />
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/project-details/comment-section/comments-empty-state.tsx b/components/project-details/comment-section/comments-empty-state.tsx
new file mode 100644
index 000000000..f84405ccd
--- /dev/null
+++ b/components/project-details/comment-section/comments-empty-state.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import Image from 'next/image';
+import { CommentInput } from './comment-input';
+
+interface CommentsEmptyStateProps {
+  onAddComment: (content: string) => void;
+}
+
+export function CommentsEmptyState({ onAddComment }: CommentsEmptyStateProps) {
+  return (
+    <div className='flex w-full flex-col'>
+      <div className='flex flex-col items-center justify-center px-4 py-16 md:py-20'>
+        <div className='relative mb-8 h-48 w-48 md:h-56 md:w-56'>
+          <Image
+            src='/Humanoid.png'
+            alt='No comments yet'
+            fill
+            className='object-contain'
+            priority
+          />
+        </div>
+        <h3 className='mb-8 text-center text-base font-medium text-white md:text-lg'>
+          Be the first to Leave a Comment
+        </h3>
+      </div>
+      <CommentInput onSubmit={onAddComment} />
+    </div>
+  );
+}
diff --git a/components/project-details/comment-section/comments-sort-dropdown.tsx b/components/project-details/comment-section/comments-sort-dropdown.tsx
new file mode 100644
index 000000000..dc4df738b
--- /dev/null
+++ b/components/project-details/comment-section/comments-sort-dropdown.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { useState } from 'react';
+import { ListFilter } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+
+type SortOption = 'latest' | 'oldest' | 'most-relevant';
+
+const sortLabels: Record<SortOption, string> = {
+  latest: 'Latest',
+  oldest: 'Oldest',
+  'most-relevant': 'Most relevant',
+};
+
+export function CommentsSortDropdown() {
+  const [sortBy, setSortBy] = useState<SortOption>('latest');
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant='outline'
+          size='sm'
+          className='h-8 gap-2 border-[#22c55e]/30 bg-black px-3 text-[#22c55e] hover:bg-[#22c55e]/10 hover:text-[#22c55e] md:h-9 md:px-4'
+        >
+          <ListFilter className='size-4' />
+          <span className='hidden md:inline'>{sortLabels[sortBy]}</span>
+          <span className='md:hidden'>Latest</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align='start'
+        className='w-48 border-zinc-800 bg-black'
+      >
+        <DropdownMenuRadioGroup
+          value={sortBy}
+          onValueChange={value => setSortBy(value as SortOption)}
+        >
+          <DropdownMenuRadioItem
+            value='latest'
+            className='text-white data-[state=checked]:text-[#22c55e]'
+          >
+            Latest
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem
+            value='oldest'
+            className='text-white data-[state=checked]:text-[#22c55e]'
+          >
+            Oldest
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem
+            value='most-relevant'
+            className='text-white data-[state=checked]:text-[#22c55e]'
+          >
+            Most relevant
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/components/project-details/comment-section/project-comments.tsx b/components/project-details/comment-section/project-comments.tsx
new file mode 100644
index 000000000..bbcfc7819
--- /dev/null
+++ b/components/project-details/comment-section/project-comments.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import { useState } from 'react';
+import { CommentsSortDropdown } from './comments-sort-dropdown';
+import { CommentItem } from './comment-item';
+import { CommentInput } from './comment-input';
+import { CommentsEmptyState } from './comments-empty-state';
+import { mockComments, type Comment } from '@/lib/data/comments-mock';
+
+export function ProjectComments() {
+  const [comments, setComments] = useState<Comment[]>(mockComments);
+  const isEmpty = comments.length === 0;
+
+  const handleAddComment = (content: string) => {
+    const newComment: Comment = {
+      id: Date.now().toString(),
+      author: {
+        name: 'User',
+        avatar: '/diverse-user-avatars.png',
+      },
+      content,
+      timestamp: 'Just now',
+      likes: 0,
+      replies: [],
+    };
+    setComments([newComment, ...comments]);
+  };
+
+  const handleAddReply = (commentId: string, content: string) => {
+    const newReply: Comment = {
+      id: `${commentId}-${Date.now()}`,
+      author: {
+        name: 'User',
+        avatar: '/user-icon.png',
+      },
+      content,
+      timestamp: 'Just now',
+      likes: 0,
+    };
+
+    const addReplyToComment = (comments: Comment[]): Comment[] => {
+      return comments.map(comment => {
+        if (comment.id === commentId) {
+          return {
+            ...comment,
+            replies: [...(comment.replies || []), newReply],
+          };
+        }
+        if (comment.replies) {
+          return {
+            ...comment,
+            replies: addReplyToComment(comment.replies),
+          };
+        }
+        return comment;
+      });
+    };
+
+    setComments(addReplyToComment(comments));
+  };
+
+  if (isEmpty) {
+    return <CommentsEmptyState onAddComment={handleAddComment} />;
+  }
+
+  return (
+    <div className='w-full'>
+      <div className='px-4 py-3 md:px-6 md:py-4'>
+        <CommentsSortDropdown />
+      </div>
+
+      <div className='space-y-6 px-4 pb-6 md:px-6'>
+        {comments.map(comment => (
+          <CommentItem
+            key={comment.id}
+            comment={comment}
+            onAddReply={handleAddReply}
+          />
+        ))}
+      </div>
+
+      <CommentInput onSubmit={handleAddComment} />
+    </div>
+  );
+}
diff --git a/components/project-details/project-layout.tsx b/components/project-details/project-layout.tsx
index 49dfab7ad..0ed05782c 100644
--- a/components/project-details/project-layout.tsx
+++ b/components/project-details/project-layout.tsx
@@ -8,6 +8,7 @@ import { ProjectAbout } from './project-about';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { CrowdfundingProject, CrowdfundData } from '@/lib/api/types';
 import { ChevronLeftCircle, ChevronRightCircle } from 'lucide-react';
+import { ProjectComments } from './comment-section/project-comments';
 
 interface ProjectLayoutProps {
   project: CrowdfundingProject & {
@@ -278,13 +279,13 @@ export function ProjectLayout({ project }: ProjectLayoutProps) {
                 </div>
               </TabsContent>
               <TabsContent value='voters' className='mt-0'>
-                <div className='text-white'>Voters content coming soon...</div>
-              </TabsContent>
-              <TabsContent value='comments' className='mt-0'>
                 <div className='text-white'>
-                  Comments content coming soon...
+                  Voters content coming soon.rgngogogo5gmomo..
                 </div>
               </TabsContent>
+              <TabsContent value='comments' className='mt-0'>
+                <ProjectComments />
+              </TabsContent>
             </Tabs>
           </div>
         </div>
@@ -436,9 +437,7 @@ export function ProjectLayout({ project }: ProjectLayoutProps) {
                   </div>
                 </TabsContent>
                 <TabsContent value='comments' className='mt-0'>
-                  <div className='text-white'>
-                    Comments content coming soon...
-                  </div>
+                  <ProjectComments />
                 </TabsContent>
               </div>
             </Tabs>
diff --git a/lib/data/comments-mock.ts b/lib/data/comments-mock.ts
new file mode 100644
index 000000000..113653d5b
--- /dev/null
+++ b/lib/data/comments-mock.ts
@@ -0,0 +1,104 @@
+export interface Comment {
+  id: string;
+  author: {
+    name: string;
+    avatar: string;
+  };
+  content: string;
+  timestamp: string;
+  likes: number;
+  replies?: Comment[];
+}
+
+export const mockComments: Comment[] = [
+  {
+    id: '1',
+    author: {
+      name: 'User',
+      avatar: '/user-icon.png',
+    },
+    content:
+      'I think this project has a lot of potential 🚀 The idea of bringing blockchain into healthcare for transparency is brilliant 💡',
+    timestamp: '2h',
+    likes: 5,
+    replies: [
+      {
+        id: '1-1',
+        author: {
+          name: 'User',
+          avatar: '/user-icon.png',
+        },
+        content:
+          'I think this project has a lot of potential 🚀 The idea of bringing blockchain into healthcare for transparency is brilliant 💡',
+        timestamp: '2h',
+        likes: 5,
+      },
+      {
+        id: '1-2',
+        author: {
+          name: 'User',
+          avatar: '/user-icon.png',
+        },
+        content:
+          'I think this project has a lot of potential 🚀 The idea of bringing blockchain into healthcare for transparency is brilliant 💡',
+        timestamp: '2h',
+        likes: 5,
+      },
+      {
+        id: '1-3',
+        author: {
+          name: 'User',
+          avatar: '/user-icon.png',
+        },
+        content:
+          'I think this project has a lot of potential 🚀 The idea of bringing blockchain into healthcare for transparency is brilliant 💡',
+        timestamp: '2h',
+        likes: 5,
+      },
+      {
+        id: '1-4',
+        author: {
+          name: 'User',
+          avatar: '/user-icon.png',
+        },
+        content:
+          'I think this project has a lot of potential 🚀 The idea of bringing blockchain into healthcare for transparency is brilliant 💡',
+        timestamp: '2h',
+        likes: 5,
+      },
+      {
+        id: '1-5',
+        author: {
+          name: 'User',
+          avatar: '/user-icon.png',
+        },
+        content:
+          'I think this project has a lot of potential 🚀 The idea of bringing blockchain into healthcare for transparency is brilliant 💡',
+        timestamp: '2h',
+        likes: 5,
+      },
+    ],
+  },
+  {
+    id: '2',
+    author: {
+      name: 'User',
+      avatar: '/user-icon.png',
+    },
+    content:
+      'I think this project has a lot of potential 🚀 The idea of bringing blockchain into healthcare for transparency is brilliant 💡',
+    timestamp: '2h',
+    likes: 5,
+  },
+  {
+    id: '3',
+    author: {
+      name: 'User',
+      avatar: '/user-icon.png',
+    },
+    content:
+      'I think this project has a lot of potential 🚀 The idea of bringing blockchain into healthcare for transparency is brilliant 💡',
+    timestamp: '2h',
+    likes: 5,
+  },
+];
diff --git a/public/Humanoid.png b/public/Humanoid.png
new file mode 100644
index 000000000..4782b5211
Binary files /dev/null and b/public/Humanoid.png differ
diff --git a/public/user-icon.png b/public/user-icon.png
new file mode 100644
index 000000000..5509a040c
Binary files /dev/null and b/public/user-icon.png differ