diff --git a/client-solid/src/Components/Buttons/CommentsButton.tsx b/client-solid/src/Components/Buttons/CommentsButton.tsx
new file mode 100644
index 0000000..700c7b0
--- /dev/null
+++ b/client-solid/src/Components/Buttons/CommentsButton.tsx
@@ -0,0 +1,17 @@
+import { JSXElement } from "solid-js";
+
+import { CommentsIcon } from "../../Util/Icons";
+import { Post } from "../../Util/api";
+
+export default function CommentsBUtton({ post }: { post: Post }): JSXElement {
+  return (
+    <>
+      <div class="flex p-1">
+          <CommentsIcon />
+        <span class="text-1xl countdown text-center pt-1.5 px-1.5">
+          <p style={{ "--value": 11 }}>{post.comments}</p>
+        </span>
+      </div>
+    </>
+  );
+}
diff --git a/client-solid/src/Components/Buttons/Replies.tsx b/client-solid/src/Components/Buttons/Replies.tsx
deleted file mode 100644
index fe702e8..0000000
--- a/client-solid/src/Components/Buttons/Replies.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { JSXElement } from "solid-js";
-
-import { ReplyIcon } from "../../Util/Icons";
-import { Post } from "../../Util/api";
-
-export default function ReplyButton({ post }: { post: Post }): JSXElement {
-  return (
-    <>
-      <div class="flex p-1">
-        <button
-          class="btn btn-xs hover:border-primary rounded-base"
-          aria-label="Show sign of engagement"
-        >
-          <ReplyIcon />
-        </button>
-        <span class="text-1xl countdown text-center pt-1.5 px-1.5">
-          <p style={{ "--value": 11 }}>{post.comments}</p>
-        </span>
-      </div>
-    </>
-  );
-}
diff --git a/client-solid/src/Components/Buttons/Reply.tsx b/client-solid/src/Components/Buttons/Reply.tsx
new file mode 100644
index 0000000..ead9dd7
--- /dev/null
+++ b/client-solid/src/Components/Buttons/Reply.tsx
@@ -0,0 +1,20 @@
+import { JSXElement, Show, useContext } from "solid-js";
+
+import { LoginContext } from "../../Context/GlobalState";
+import { ReplyIcon, ReportIcon } from "../../Util/Icons";
+
+export default function ReplyButton(): JSXElement {
+  const login_ctx = useContext(LoginContext)!;
+  return (
+    <Show when={login_ctx.loggedIn()}>
+      <div class="flex p-1">
+        <button
+          class="rounded-base btn btn-xs hover:border-primary"
+          aria-label="Report post or comment"
+        >
+          <ReplyIcon />
+        </button>
+      </div>
+    </Show>
+  );
+}
diff --git a/client-solid/src/Components/Comment.tsx b/client-solid/src/Components/Comment.tsx
index bdc61c4..d986055 100644
--- a/client-solid/src/Components/Comment.tsx
+++ b/client-solid/src/Components/Comment.tsx
@@ -1,6 +1,7 @@
 import { JSXElement } from "solid-js";
 
 import { PublicComment } from "../Util/api";
+import ReplyButton from "./Buttons/Reply";
 
 interface CommentProps {
   comment: PublicComment;
@@ -15,14 +16,18 @@ interface CommentProps {
 export function Comment({ comment }: CommentProps): JSXElement {
   return (
     <>
-      <div class="chat chat-start">
+      <div class="chat chat-start py-5">
         <time class="text-xs opacity-50">{comment.created_at}</time>
       </div>
-      <div class="chat-bubble">{comment.content}</div>
+      <div class="chat-">{comment.content}</div>
+        <div class="divider"></div>
       <div class="chat chat-end">
-        <time class="text-xs opacity-50">Reply created_at</time>
-        <div class="chat-bubble">Replies to parent comment if any</div>
+        <div class="flex-col">
+        <time class="text-xs opacity-50 time-end">Reply created_at</time>
+        <div class="chat-end">Replies to parent comment if any</div>
+        </div>
       </div>
+        <div class="divider divider-end"><ReplyButton/></div>
     </>
   );
 }
diff --git a/client-solid/src/Components/LoginButton.tsx b/client-solid/src/Components/LoginButton.tsx
index 53dce5d..82fed43 100644
--- a/client-solid/src/Components/LoginButton.tsx
+++ b/client-solid/src/Components/LoginButton.tsx
@@ -35,7 +35,7 @@ export function LoginButton(): JSXElement {
       {showLogoutModal() && (
         <div
           role="alert"
-          class="absolute top-10 z-10 flex rounded-md bg-base-200 border-2 border-warning"
+          class="absolute top-10 z-10 flex rounded-md bg-base-200 border-2 border-info"
         >
           <div class="relative p-5">
             <p>Do you wish to logout?</p>
diff --git a/client-solid/src/Components/Menu.tsx b/client-solid/src/Components/Menu.tsx
index 36e4b67..841de3e 100644
--- a/client-solid/src/Components/Menu.tsx
+++ b/client-solid/src/Components/Menu.tsx
@@ -23,12 +23,8 @@ export function Menu(): JSXElement {
   const login_ctx = useContext(LoginContext)!;
   return (
     <Show when={login_ctx.loggedIn()}>
-      <ul class="menu space-y-2 rounded-box md:menu-horizontal md:space-x-2 md:space-y-0">
-        <MenuItem href="/">
-          <Home />
-        </MenuItem>
+      <ul class="menu menu-horizontal space-y-0 space-x-2 rounded-box md:space-x-5 md:space-y-0">
         <MenuItem href="/new">
-          {/*Filter component for popular */}
           <Plus />
         </MenuItem>
       </ul>
diff --git a/client-solid/src/Components/PostSegment.tsx b/client-solid/src/Components/PostSegment.tsx
index 94ae824..9aea9e4 100644
--- a/client-solid/src/Components/PostSegment.tsx
+++ b/client-solid/src/Components/PostSegment.tsx
@@ -2,7 +2,7 @@ import { JSXElement, Show } from "solid-js";
 
 import { Post } from "../Util/api";
 import EngagementButton from "./Buttons/Engegament";
-import ReplyButton from "./Buttons/Replies";
+import CommentsBUtton from "./Buttons/CommentsButton";
 import ReportButton from "./Buttons/Report";
 import ToPostButton from "./Buttons/ToPost";
 import RemovePostButton from "./Buttons/RemovePostButton";
@@ -42,7 +42,7 @@ export function PostSegment({ post }: { post: Post }): JSXElement {
         <div class="card-actions justify-between">
           <div class="flex">
             <EngagementButton post={post} />
-            <ReplyButton post={post} />
+            <CommentsBUtton post={post} />
           </div>
           <ToPostButton post={post} />
         </div>
diff --git a/client-solid/src/Containers/Navbar.tsx b/client-solid/src/Containers/Navbar.tsx
index b25f5b4..27c719b 100644
--- a/client-solid/src/Containers/Navbar.tsx
+++ b/client-solid/src/Containers/Navbar.tsx
@@ -9,7 +9,7 @@ export function Navbar(): JSXElement {
   return (
     <div class="max-w navbar max-w-3xl rounded-box text-neutral-content md:my-4">
       <div class="flex-1">
-        <A href={"/"} class="btn btn-ghost text-xl normal-case">
+        <A href={"/"} class="btn btn-ghost text-sm normal-case sm:text-xl">
           <Flake />
           <h1>FrostByte</h1>
         </A>
diff --git a/client-solid/src/Util/Icons.tsx b/client-solid/src/Util/Icons.tsx
index 68bf9ca..486e591 100644
--- a/client-solid/src/Util/Icons.tsx
+++ b/client-solid/src/Util/Icons.tsx
@@ -172,7 +172,7 @@ export function CheckMark(): JSXElement {
   );
 }
 
-export function ReplyIcon(): JSXElement {
+export function CommentsIcon(): JSXElement {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -252,3 +252,21 @@ export function RemovePostIcon(): JSXElement {
     </svg>
   );
 }
+export function ReplyIcon(): JSXElement {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width={1.5}
+      stroke="currentColor"
+      class="h-6 w-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z"
+      />
+    </svg>
+  );
+}