diff --git a/client/components/feed/CommentsModal.tsx b/client/components/feed/CommentsModal.tsx
new file mode 100644
index 00000000..4863029a
--- /dev/null
+++ b/client/components/feed/CommentsModal.tsx
@@ -0,0 +1,308 @@
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { aethexToast } from "@/lib/aethex-toast";
+import { MessageCircle, Send, Trash2, Loader2 } from "lucide-react";
+
+const API_BASE = import.meta.env.VITE_API_BASE || "";
+
+interface Comment {
+  id: string;
+  content: string;
+  created_at: string;
+  user_id: string;
+  user_profiles?: {
+    id: string;
+    username?: string;
+    full_name?: string;
+    avatar_url?: string;
+  };
+}
+
+interface CommentsModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  postId: string;
+  currentUserId?: string;
+  onCommentAdded?: () => void;
+}
+
+export default function CommentsModal({
+  open,
+  onOpenChange,
+  postId,
+  currentUserId,
+  onCommentAdded,
+}: CommentsModalProps) {
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [newComment, setNewComment] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Load comments when modal opens
+  useEffect(() => {
+    if (open) {
+      loadComments();
+    }
+  }, [open]);
+
+  const loadComments = async () => {
+    setIsLoading(true);
+    try {
+      const response = await fetch(
+        `${API_BASE}/api/community/post-comments?post_id=${postId}&limit=50`
+      );
+      if (response.ok) {
+        const data = await response.json();
+        setComments(data.comments || []);
+      } else {
+        aethexToast.error({
+          title: "Failed to load comments",
+          description: "Please try again",
+        });
+      }
+    } catch (error) {
+      console.error("Failed to load comments:", error);
+      aethexToast.error({
+        title: "Failed to load comments",
+        description: "An unexpected error occurred",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleAddComment = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!currentUserId) {
+      aethexToast.error({
+        title: "Not authenticated",
+        description: "Please log in to comment",
+      });
+      return;
+    }
+
+    if (newComment.trim().length === 0) {
+      aethexToast.error({
+        title: "Empty comment",
+        description: "Please write something",
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const response = await fetch(`${API_BASE}/api/community/post-comments`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          post_id: postId,
+          user_id: currentUserId,
+          content: newComment,
+        }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setComments((prev) => [data.comment, ...prev]);
+        setNewComment("");
+        aethexToast.success({
+          title: "Comment added",
+          description: "Your comment has been posted",
+        });
+        onCommentAdded?.();
+      } else {
+        const error = await response.json();
+        aethexToast.error({
+          title: "Failed to add comment",
+          description: error.error || "Please try again",
+        });
+      }
+    } catch (error) {
+      console.error("Failed to add comment:", error);
+      aethexToast.error({
+        title: "Failed to add comment",
+        description: "An unexpected error occurred",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDeleteComment = async (commentId: string) => {
+    setIsSubmitting(true);
+    try {
+      const response = await fetch(
+        `${API_BASE}/api/community/post-comments`,
+        {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            comment_id: commentId,
+            user_id: currentUserId,
+          }),
+        }
+      );
+
+      if (response.ok) {
+        setComments((prev) =>
+          prev.filter((comment) => comment.id !== commentId)
+        );
+        aethexToast.success({
+          title: "Comment deleted",
+          description: "Your comment has been removed",
+        });
+        onCommentAdded?.();
+      } else {
+        const error = await response.json();
+        aethexToast.error({
+          title: "Failed to delete comment",
+          description: error.error || "Please try again",
+        });
+      }
+    } catch (error) {
+      console.error("Failed to delete comment:", error);
+      aethexToast.error({
+        title: "Failed to delete comment",
+        description: "An unexpected error occurred",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffSecs = Math.floor(diffMs / 1000);
+    const diffMins = Math.floor(diffSecs / 60);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffSecs < 60) return "just now";
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px] flex flex-col h-[600px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <MessageCircle className="h-5 w-5" />
+            Comments ({comments.length})
+          </DialogTitle>
+        </DialogHeader>
+
+        <Separator />
+
+        <ScrollArea className="flex-1 pr-4">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-full">
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            </div>
+          ) : comments.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-center">
+              <MessageCircle className="h-8 w-8 text-muted-foreground mb-2" />
+              <p className="text-sm text-muted-foreground">
+                No comments yet. Be the first to comment!
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {comments.map((comment) => (
+                <div
+                  key={comment.id}
+                  className="p-3 rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors"
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex items-start gap-2 flex-1">
+                      {comment.user_profiles?.avatar_url && (
+                        <img
+                          src={comment.user_profiles.avatar_url}
+                          alt={comment.user_profiles.full_name || "User"}
+                          className="w-8 h-8 rounded-full object-cover ring-1 ring-border/40"
+                        />
+                      )}
+                      <div className="flex-1">
+                        <p className="text-sm font-semibold text-foreground">
+                          {comment.user_profiles?.full_name ||
+                            comment.user_profiles?.username ||
+                            "Anonymous"}
+                        </p>
+                        <p className="text-xs text-muted-foreground mb-2">
+                          {formatDate(comment.created_at)}
+                        </p>
+                        <p className="text-sm text-muted-foreground leading-relaxed">
+                          {comment.content}
+                        </p>
+                      </div>
+                    </div>
+                    {currentUserId === comment.user_id && (
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        className="h-8 w-8 p-0 hover:bg-destructive/20 hover:text-destructive"
+                        onClick={() => handleDeleteComment(comment.id)}
+                        disabled={isSubmitting}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+
+        <Separator />
+
+        <form onSubmit={handleAddComment} className="flex flex-col gap-2">
+          <Textarea
+            placeholder="Write a comment..."
+            value={newComment}
+            onChange={(e) => setNewComment(e.target.value)}
+            className="resize-none h-20 text-sm"
+            disabled={isSubmitting}
+          />
+          <Button
+            type="submit"
+            size="sm"
+            disabled={isSubmitting || !newComment.trim()}
+            className="flex items-center gap-2"
+          >
+            {isSubmitting ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Send className="h-4 w-4" />
+            )}
+            Comment
+          </Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}