diff --git a/client-solid/src/Components/Comment.tsx b/client-solid/src/Components/Comment.tsx
index 802d2ef..f108b08 100644
--- a/client-solid/src/Components/Comment.tsx
+++ b/client-solid/src/Components/Comment.tsx
@@ -1,8 +1,12 @@
 import { JSXElement } from "solid-js";
 
-import { ReplyIcon } from "../Util/Icons";
 import { EngagementIcon } from "../Util/Icons";
 import { PublicComment } from "../Util/api";
+import { NewCommentInputArea } from "./NewComment";
+
+interface CommentProps {
+  comment: PublicComment;
+}
 
 /**
  * Comment is a component that displays a single comment.
@@ -10,9 +14,9 @@ import { PublicComment } from "../Util/api";
  * @param {string} props.postId The id of the post that the comment is a reply to.
  * @returns {JSXElement} A JSXElement of a comment
  */
-export function Comment({ comment }: { comment: PublicComment }): JSXElement {
+export function Comment({ comment }: CommentProps): JSXElement {
   return (
-    <div class="flex min-w-full flex-col rounded-lg border-b-secondary border-b-2 bg-base-300 px-5 py-3 text-base-content transition-all hover:bg-base-300 ">
+    <div class="flex min-w-full flex-col rounded-lg border-b-2 border-b-secondary bg-base-300 px-5 py-3 text-base-content transition-all hover:bg-base-300 ">
       <div class="flex flex-row">
         <div class="pb-2 text-xs text-gray-500">{comment.created_at}</div>
       </div>
@@ -23,10 +27,27 @@ export function Comment({ comment }: { comment: PublicComment }): JSXElement {
           {/* Placeholder icon, tbd */}
           <EngagementIcon />
         </div>
-        <div class="btn self-end">
-          <ReplyIcon />
-        </div>
+        <section>
+          <ul class="timeline timeline-vertical">
+            <li>
+              <div class="timeline-start">{comment.created_at}</div>
+              <div class="divider timeline-middle">:</div>
+              <div class="timeline-end timeline-box">{comment.content}</div>
+              <hr />
+            </li>
+            <li>
+              <div class="timeline-end">{comment.created_at}</div>
+              <div class="timeline-middle">:</div>
+              <div class="timeline-start timeline-box">{comment.content}</div>
+              <hr />
+            </li>
+          </ul>
+        </section>
       </div>
+      <NewCommentInputArea
+        parentCommentId={comment.parent_comment_id}
+        parentPostId={comment.parent_post_id}
+      />
     </div>
   );
 }
diff --git a/client-solid/src/Components/NewComment.tsx b/client-solid/src/Components/NewComment.tsx
index 774c4ee..61bc164 100644
--- a/client-solid/src/Components/NewComment.tsx
+++ b/client-solid/src/Components/NewComment.tsx
@@ -4,6 +4,11 @@ import { JSXElement, Show, createSignal, useContext } from "solid-js";
 import { LoginContext } from "../Context/GlobalState";
 import { NewComment, createComment } from "../Util/api";
 
+interface NewCommentInputAreaProps {
+  parentPostId: number;
+  parentCommentId: number | null;
+}
+
 /** NewCommentInputArea is a component that allows users to submit a comment on a **post or comment**.
  * @param {Object} props The properties for the NewCommentInputArea component.
  * @param {number} props.parentPostId The id of the post that the comment is a reply to.
@@ -11,9 +16,8 @@ import { NewComment, createComment } from "../Util/api";
  */
 export function NewCommentInputArea({
   parentPostId,
-}: {
-  parentPostId: number;
-}): JSXElement {
+  parentCommentId,
+}: NewCommentInputAreaProps): JSXElement {
   const [content, setContent] = createSignal("");
   const [waiting, setWaiting] = createSignal(false);
 
@@ -29,6 +33,7 @@ export function NewCommentInputArea({
       content: content(),
       user_token: login_ctx.token(),
       parent_post_id: parentPostId,
+      parent_comment_id: parentCommentId,
     } as NewComment);
 
     if (response) {