diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
index 54d68574..4b90df68 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
@@ -19,6 +19,8 @@ import { ManageSubscription, SubscribeWithBluesky } from "app/lish/Subscribe";
 import { EditTiny } from "components/Icons/EditTiny";
 import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
 import { RecommendButton } from "components/RecommendButton";
+import { ButtonSecondary } from "components/Buttons";
+import { Separator } from "components/Layout";
 
 export type InteractionState = {
   drawerOpen: undefined | boolean;
@@ -130,15 +132,28 @@ export const Interactions = (props: {
   const tags = normalizedDocument.tags;
   const tagCount = tags?.length || 0;
 
-  return (
-    <div className={`flex gap-2 text-tertiary text-sm ${props.className}`}>
-      {tagCount > 0 && <TagPopover tags={tags} tagCount={tagCount} />}
+  let interactionsAvailable = props.showComments || props.showMentions;
 
-      <RecommendButton
-        documentUri={document_uri}
-        recommendsCount={props.recommendsCount}
-      />
+  return (
+    <div
+      className={`flex gap-2 text-tertiary text-sm item-center ${props.className}`}
+    >
+      {/*COMMENT BUTTON*/}
+      {props.showComments === false ? null : (
+        <button
+          className="flex gap-2 items-center w-fit"
+          onClick={() => {
+            if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId)
+              openInteractionDrawer("comments", document_uri, props.pageId);
+            else setInteractionState(document_uri, { drawerOpen: false });
+          }}
+          aria-label="Post comments"
+        >
+          <CommentTiny aria-hidden /> {props.commentsCount}
+        </button>
+      )}
 
+      {/*MENTIONS BUTTON*/}
       {props.quotesCount === 0 || props.showMentions === false ? null : (
         <button
           className="flex w-fit gap-2 items-center"
@@ -154,19 +169,12 @@ export const Interactions = (props: {
           <QuoteTiny aria-hidden /> {props.quotesCount}
         </button>
       )}
-      {props.showComments === false ? null : (
-        <button
-          className="flex gap-2 items-center w-fit"
-          onClick={() => {
-            if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId)
-              openInteractionDrawer("comments", document_uri, props.pageId);
-            else setInteractionState(document_uri, { drawerOpen: false });
-          }}
-          aria-label="Post comments"
-        >
-          <CommentTiny aria-hidden /> {props.commentsCount}
-        </button>
-      )}
+      <RecommendButton
+        documentUri={document_uri}
+        recommendsCount={props.recommendsCount}
+      />
+      <Separator classname="h-4!" />
+      {tagCount > 0 && <TagPopover tags={tags} tagCount={tagCount} />}
     </div>
   );
 };
@@ -209,9 +217,6 @@ export const ExpandedInteractions = (props: {
       (s) => s.identity === identity.atp_did,
     );
 
-  let isAuthor =
-    identity && identity.atp_did === publication?.identity_did && leafletId;
-
   return (
     <div
       className={`text-tertiary px-3 sm:px-4 flex flex-col ${props.className}`}
@@ -231,14 +236,14 @@ export const ExpandedInteractions = (props: {
           <div />
         ) : (
           <>
-            <div className="flex gap-2">
+            <div className="flex gap-2 sm:flex-row flex-col">
               <RecommendButton
                 documentUri={document_uri}
                 recommendsCount={props.recommendsCount}
+                expanded
               />
               {props.quotesCount === 0 || !props.showMentions ? null : (
-                <button
-                  className="flex w-fit gap-2 items-center px-1 py-0.5 border border-border-light rounded-lg trasparent-outline selected-outline"
+                <ButtonSecondary
                   onClick={() => {
                     if (!drawerOpen || drawer !== "quotes")
                       openInteractionDrawer(
@@ -253,15 +258,21 @@ export const ExpandedInteractions = (props: {
                   onTouchStart={handleQuotePrefetch}
                   aria-label="Post quotes"
                 >
-                  <QuoteTiny aria-hidden /> {props.quotesCount}{" "}
+                  <QuoteTiny aria-hidden /> {props.quotesCount}
+                  {props.quotesCount > 0 && (
+                    <>
+                      {props.quotesCount}
+                      <Separator classname="h-4! text-accent-contrast!" />
+                    </>
+                  )}
+                  Mention
                   <span
                     aria-hidden
                   >{`Mention${props.quotesCount === 1 ? "" : "s"}`}</span>
-                </button>
+                </ButtonSecondary>
               )}
               {!props.showComments ? null : (
-                <button
-                  className="flex gap-2 items-center w-fit px-1 py-0.5 border border-border-light rounded-lg trasparent-outline selected-outline"
+                <ButtonSecondary
                   onClick={() => {
                     if (
                       !drawerOpen ||
@@ -279,14 +290,14 @@ export const ExpandedInteractions = (props: {
                   aria-label="Post comments"
                 >
                   <CommentTiny aria-hidden />{" "}
-                  {props.commentsCount > 0 ? (
-                    <span aria-hidden>
-                      {`${props.commentsCount} Comment${props.commentsCount === 1 ? "" : "s"}`}
-                    </span>
-                  ) : (
-                    "Comment"
+                  {props.commentsCount > 0 && (
+                    <>
+                      {props.commentsCount}
+                      <Separator classname="h-4! text-accent-contrast!" />
+                    </>
                   )}
-                </button>
+                  Comment
+                </ButtonSecondary>
               )}
             </div>
           </>
@@ -388,7 +399,7 @@ const EditButton = (props: {
     return (
       <a
         href={`https://leaflet.pub/${props.leafletId}`}
-        className="flex gap-2 items-center hover:!no-underline selected-outline px-2 py-0.5 bg-accent-1 text-accent-2 font-bold w-fit rounded-lg !border-accent-1 !outline-accent-1"
+        className="flex gap-2 items-center hover:!no-underline selected-outline px-2 py-0.5 bg-accent-1 text-accent-2 font-bold w-fit rounded-md !border-accent-1 !outline-accent-1 h-fit"
       >
         <EditTiny /> Edit Post
       </a>
diff --git a/app/lish/[did]/[publication]/page.tsx b/app/lish/[did]/[publication]/page.tsx
index 1f82469d..4a369f00 100644
--- a/app/lish/[did]/[publication]/page.tsx
+++ b/app/lish/[did]/[publication]/page.tsx
@@ -148,7 +148,7 @@ export default async function Publication(props: {
                           </p>
                         </SpeedyLink>
 
-                        <div className="text-sm text-tertiary flex gap-1 flex-wrap pt-2 items-center">
+                        <div className="justify-between w-full text-sm text-tertiary flex gap-1 flex-wrap pt-2 items-center">
                           <p className="text-sm text-tertiary ">
                             {doc_record.publishedAt && (
                               <LocalizedDate
@@ -161,11 +161,7 @@ export default async function Publication(props: {
                               />
                             )}{" "}
                           </p>
-                          {comments > 0 || quotes > 0 || tags.length > 0 ? (
-                            <Separator classname="h-4! mx-1" />
-                          ) : (
-                            ""
-                          )}
+
                           <InteractionPreview
                             quotesCount={quotes}
                             commentsCount={comments}
diff --git a/components/InteractionsPreview.tsx b/components/InteractionsPreview.tsx
index 67ebf1e1..46f91183 100644
--- a/components/InteractionsPreview.tsx
+++ b/components/InteractionsPreview.tsx
@@ -30,15 +30,6 @@ export const InteractionPreview = (props: {
 
   return (
     <div className={`flex gap-2 text-tertiary text-sm  items-center`}>
-      {tagsCount === 0 ? null : (
-        <>
-          <TagPopover tags={props.tags!} />
-          {interactionsAvailable || props.share ? (
-            <Separator classname="h-4!" />
-          ) : null}
-        </>
-      )}
-
       <RecommendButton
         documentUri={props.documentUri}
         recommendsCount={props.recommendsCount}
@@ -62,11 +53,16 @@ export const InteractionPreview = (props: {
           <CommentTiny /> {props.commentsCount}
         </SpeedyLink>
       )}
-      {interactionsAvailable && props.share ? (
-        <Separator classname="h-4! !min-h-0" />
-      ) : null}
+      {tagsCount === 0 ? null : (
+        <>
+          {interactionsAvailable ? <Separator classname="h-4!" /> : null}
+          <TagPopover tags={props.tags!} />
+        </>
+      )}
       {props.share && (
         <>
+          <Separator classname="h-4!" />
+
           <button
             id={`copy-post-link-${props.postUrl}`}
             className="flex gap-1 items-center hover:text-accent-contrast relative"
diff --git a/components/PostListing.tsx b/components/PostListing.tsx
index b66603b2..04aa2e8d 100644
--- a/components/PostListing.tsx
+++ b/components/PostListing.tsx
@@ -89,7 +89,9 @@ export const PostListing = (props: Post) => {
         >
           <h3 className="text-primary truncate">{postRecord.title}</h3>
 
-          <p className="text-secondary italic">{postRecord.description}</p>
+          <p className="text-secondary italic line-clamp-3">
+            {postRecord.description}
+          </p>
           <div className="flex flex-col-reverse md:flex-row md gap-2 text-sm text-tertiary items-center justify-start pt-1.5 md:pt-3 w-full">
             {props.publication && pubRecord && (
               <PubInfo
diff --git a/components/RecommendButton.tsx b/components/RecommendButton.tsx
index d2081cd9..f2f94bef 100644
--- a/components/RecommendButton.tsx
+++ b/components/RecommendButton.tsx
@@ -11,12 +11,16 @@ import {
 import { callRPC } from "app/api/rpc/client";
 import { useToaster } from "./Toast";
 import { OAuthErrorMessage, isOAuthSessionError } from "./OAuthError";
+import { ButtonSecondary } from "./Buttons";
+import { Separator } from "./Layout";
 
 // Create a batcher for recommendation checks
 // Batches requests made within 10ms window
 const recommendationBatcher = create({
   fetcher: async (documentUris: string[]) => {
-    const response = await callRPC("get_user_recommendations", { documentUris });
+    const response = await callRPC("get_user_recommendations", {
+      documentUris,
+    });
     return response.result;
   },
   resolver: (results, documentUri) => results[documentUri] ?? false,
@@ -52,9 +56,11 @@ export function RecommendButton(props: {
   documentUri: string;
   recommendsCount: number;
   className?: string;
-  showCount?: boolean;
+  expanded?: boolean;
 }) {
-  const { hasRecommended, isLoading } = useUserRecommendation(props.documentUri);
+  const { hasRecommended, isLoading } = useUserRecommendation(
+    props.documentUri,
+  );
   const [count, setCount] = useState(props.recommendsCount);
   const [isPending, setIsPending] = useState(false);
   const [optimisticRecommended, setOptimisticRecommended] = useState<
@@ -101,7 +107,35 @@ export function RecommendButton(props: {
     setIsPending(false);
   };
 
-  const showCount = props.showCount !== false;
+  if (props.expanded)
+    return (
+      <ButtonSecondary
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          handleClick();
+        }}
+      >
+        {displayRecommended ? (
+          <RecommendTinyFilled className="text-accent-contrast" />
+        ) : (
+          <RecommendTinyEmpty />
+        )}
+        <div className="flex gap-2 items-center">
+          {count > 0 && (
+            <>
+              <span
+                className={`${displayRecommended && "text-accent-contrast"}`}
+              >
+                {count}
+              </span>
+              <Separator classname="h-4! text-accent-contrast!" />
+            </>
+          )}
+          {displayRecommended ? "You recommend!" : "Recommend"}
+        </div>
+      </ButtonSecondary>
+    );
 
   return (
     <button
@@ -111,7 +145,7 @@ export function RecommendButton(props: {
         handleClick();
       }}
       disabled={isPending || isLoading}
-      className={`recommendButton flex gap-1  items-center hover:text-accent-contrast ${props.className || ""}`}
+      className={`recommendButton relative flex gap-1  items-center hover:text-accent-contrast ${props.className || ""}`}
       aria-label={displayRecommended ? "Remove recommend" : "Recommend"}
     >
       {displayRecommended ? (
@@ -119,7 +153,7 @@ export function RecommendButton(props: {
       ) : (
         <RecommendTinyEmpty />
       )}
-      {showCount && count > 0 && (
+      {count > 0 && (
         <span className={`${displayRecommended && "text-accent-contrast"}`}>
           {count}
         </span>