diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx
index 98b9e940..bffa821a 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx
@@ -43,6 +43,7 @@ export function CommentBox(props: {
   replyTo?: string;
   onSubmit?: () => void;
   autoFocus?: boolean;
+  className?: string;
 }) {
   let mountRef = useRef<HTMLPreElement | null>(null);
   let {
@@ -216,7 +217,7 @@ export function CommentBox(props: {
   }, []);
 
   return (
-    <div className=" flex flex-col">
+    <div className={`flex flex-col grow ${props.className}`}>
       {quote && (
         <div className="relative mt-2 mb-2">
           <QuoteContent position={quote} did="" index={-1} />
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
index ce5a589e..26f93164 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
@@ -162,6 +162,7 @@ const Replies = (props: {
 
   let [replyBoxOpen, setReplyBoxOpen] = useState(false);
   let [repliesOpen, setRepliesOpen] = useState(true);
+
   let replies = props.comments
     .filter(
       (comment) =>
@@ -176,6 +177,9 @@ const Replies = (props: {
         new Date(aRecord.createdAt).getTime()
       );
     });
+
+  let repliesOrReplyBoxOpen =
+    replyBoxOpen || (repliesOpen && replies.length > 0);
   return (
     <>
       <div className="flex gap-2 items-center">
@@ -203,49 +207,64 @@ const Replies = (props: {
           </>
         )}
       </div>
-      <div className="flex flex-col gap-2">
-        {replyBoxOpen && (
-          <CommentBox
-            pageId={props.pageId}
-            doc_uri={props.document}
-            replyTo={props.comment_uri}
-            autoFocus={true}
-            onSubmit={() => {
-              setReplyBoxOpen(false);
-            }}
-          />
-        )}
-        {repliesOpen && replies.length > 0 && (
-          <div className="repliesWrapper flex">
-            <button
-              className="repliesCollapse pr-[14px] ml-[7px] pt-0.5"
-              onClick={() => {
-                setReplyBoxOpen(false);
-                setRepliesOpen(false);
-              }}
-            >
-              <div className="bg-border-light w-[2px] h-full" />
-            </button>
-            <div className="repliesContent flex flex-col gap-3 pt-2 w-full">
-              {replies.map((reply) => {
-                return (
-                  <Comment
-                    pageId={props.pageId}
-                    document={props.document}
-                    key={reply.uri}
-                    comment={reply}
-                    profile={
-                      reply.bsky_profiles?.record as AppBskyActorProfile.Record
-                    }
-                    record={reply.record as PubLeafletComment.Record}
-                    comments={props.comments}
-                  />
-                );
-              })}
+      {repliesOrReplyBoxOpen && (
+        <div className="flex flex-col pt-1">
+          {replyBoxOpen && (
+            <div className="repliesWrapper flex w-full">
+              <button
+                className="repliesCollapse pr-[14px] ml-[7px]"
+                onClick={() => {
+                  setReplyBoxOpen(false);
+                  setRepliesOpen(false);
+                }}
+              >
+                <div className="bg-border-light w-[2px] h-full" />
+              </button>
+              <CommentBox
+                className="pt-3"
+                pageId={props.pageId}
+                doc_uri={props.document}
+                replyTo={props.comment_uri}
+                autoFocus={true}
+                onSubmit={() => {
+                  setReplyBoxOpen(false);
+                }}
+              />
             </div>
-          </div>
-        )}
-      </div>
+          )}
+          {repliesOpen && replies.length > 0 && (
+            <div className="repliesWrapper flex">
+              <button
+                className="repliesCollapse pr-[14px] ml-[7px]"
+                onClick={() => {
+                  setReplyBoxOpen(false);
+                  setRepliesOpen(false);
+                }}
+              >
+                <div className="bg-border-light w-[2px] h-full" />
+              </button>
+              <div className="repliesContent flex flex-col gap-3 pt-2 w-full">
+                {replies.map((reply) => {
+                  return (
+                    <Comment
+                      pageId={props.pageId}
+                      document={props.document}
+                      key={reply.uri}
+                      comment={reply}
+                      profile={
+                        reply.bsky_profiles
+                          ?.record as AppBskyActorProfile.Record
+                      }
+                      record={reply.record as PubLeafletComment.Record}
+                      comments={props.comments}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
     </>
   );
 };
@@ -263,7 +282,9 @@ const DatePopover = (props: { date: string }) => {
   return (
     <Popover
       trigger={
-        <div className="italic text-sm text-tertiary hover:underline">{timeAgoText}</div>
+        <div className="italic text-sm text-tertiary hover:underline">
+          {timeAgoText}
+        </div>
       }
     >
       <div className="text-sm text-secondary">{fullDate}</div>