diff --git a/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx b/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
index 12b30135..74e3763b 100644
--- a/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
@@ -238,6 +238,7 @@ const CanvasMetadata = (props: {
               data={props.data}
               profile={props.profile}
               preferences={props.preferences}
+              isCanvas
             />
           </Popover>
         </>
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
index f2645ef9..2c72bc0e 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
@@ -140,19 +140,11 @@ export const Interactions = (props: {
     <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>
+      {props.showRecommends === false ? null : (
+        <RecommendButton
+          documentUri={document_uri}
+          recommendsCount={props.recommendsCount}
+        />
       )}
 
       {/*MENTIONS BUTTON*/}
@@ -171,14 +163,27 @@ export const Interactions = (props: {
           <QuoteTiny aria-hidden /> {props.quotesCount}
         </button>
       )}
-      {props.showRecommends === false ? null : (
-        <RecommendButton
-          documentUri={document_uri}
-          recommendsCount={props.recommendsCount}
-        />
+      {/*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>
+      )}
+
+      {tagCount > 0 && (
+        <>
+          interactionsAvailable && <Separator classname="h-4!" />
+          <TagPopover tags={tags} tagCount={tagCount} />
+        </>
       )}
-      <Separator classname="h-4!" />
-      {tagCount > 0 && <TagPopover tags={tags} tagCount={tagCount} />}
     </div>
   );
 };
diff --git a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
index 7a0f8ab0..1159683a 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
@@ -23,6 +23,7 @@ export function PostHeader(props: {
     showMentions?: boolean;
     showRecommends?: boolean;
   };
+  isCanvas?: boolean;
 }) {
   let { identity } = useIdentityData();
   let document = props.data;
@@ -88,16 +89,20 @@ export function PostHeader(props: {
               </>
             ) : null}
           </div>
-          <Interactions
-            showComments={props.preferences.showComments !== false}
-            showMentions={props.preferences.showMentions !== false}
-            showRecommends={props.preferences.showRecommends !== false}
-            quotesCount={getQuoteCount(document?.quotesAndMentions || []) || 0}
-            commentsCount={
-              getCommentCount(document?.comments_on_documents || []) || 0
-            }
-            recommendsCount={document?.recommendsCount || 0}
-          />
+          {!props.isCanvas && (
+            <Interactions
+              showComments={props.preferences.showComments !== false}
+              showMentions={props.preferences.showMentions !== false}
+              showRecommends={props.preferences.showRecommends !== false}
+              quotesCount={
+                getQuoteCount(document?.quotesAndMentions || []) || 0
+              }
+              commentsCount={
+                getCommentCount(document?.comments_on_documents || []) || 0
+              }
+              recommendsCount={document?.recommendsCount || 0}
+            />
+          )}
         </>
       }
     />
diff --git a/components/Canvas.tsx b/components/Canvas.tsx
index 0faa3302..118c163e 100644
--- a/components/Canvas.tsx
+++ b/components/Canvas.tsx
@@ -19,10 +19,11 @@ import { Popover } from "./Popover";
 import { Separator } from "./Layout";
 import { CommentTiny } from "./Icons/CommentTiny";
 import { QuoteTiny } from "./Icons/QuoteTiny";
-import { PublicationMetadata } from "./Pages/PublicationMetadata";
+import { AddTags, PublicationMetadata } from "./Pages/PublicationMetadata";
 import { useLeafletPublicationData } from "./PageSWRDataProvider";
 import { useHandleCanvasDrop } from "./Blocks/useHandleCanvasDrop";
 import { useBlockMouseHandlers } from "./Blocks/useBlockMouseHandlers";
+import { RecommendTinyEmpty } from "./Icons/RecommendTiny";
 
 export function Canvas(props: {
   entityID: string;
@@ -168,20 +169,34 @@ const CanvasMetadata = (props: { isSubpage: boolean | undefined }) => {
   if (!normalizedPublication) return null;
   let showComments = normalizedPublication.preferences?.showComments !== false;
   let showMentions = normalizedPublication.preferences?.showMentions !== false;
+  let showRecommends =
+    normalizedPublication.preferences?.showRecommends !== false;
 
   return (
     <div className="flex flex-row gap-3 items-center absolute top-6 right-3 sm:top-4 sm:right-4 bg-bg-page border-border-light rounded-md px-2 py-1 h-fit z-20">
+      {showRecommends && (
+        <div className="flex gap-1 text-tertiary items-center">
+          <RecommendTinyEmpty className="text-border" /> —
+        </div>
+      )}
       {showComments && (
         <div className="flex gap-1 text-tertiary items-center">
           <CommentTiny className="text-border" /> —
         </div>
       )}
-      {showComments && (
+      {showMentions && (
         <div className="flex gap-1 text-tertiary items-center">
           <QuoteTiny className="text-border" /> —
         </div>
       )}
 
+      {showMentions !== false ||
+      showComments !== false ||
+      showRecommends === false ? (
+        <Separator classname="h-4!" />
+      ) : null}
+      <AddTags />
+
       {!props.isSubpage && (
         <>
           <Separator classname="h-5" />
@@ -191,7 +206,7 @@ const CanvasMetadata = (props: { isSubpage: boolean | undefined }) => {
             className="flex flex-col gap-2 p-0! max-w-sm w-[1000px]"
             trigger={<InfoSmall />}
           >
-            <PublicationMetadata />
+            <PublicationMetadata noInteractions />
           </Popover>
         </>
       )}
diff --git a/components/Pages/PublicationMetadata.tsx b/components/Pages/PublicationMetadata.tsx
index 3d2ef959..2caa7d15 100644
--- a/components/Pages/PublicationMetadata.tsx
+++ b/components/Pages/PublicationMetadata.tsx
@@ -20,10 +20,15 @@ import { TagSelector } from "components/Tags";
 import { useIdentityData } from "components/IdentityProvider";
 import { PostHeaderLayout } from "app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader";
 import { Backdater } from "./Backdater";
+import { RecommendTinyEmpty } from "components/Icons/RecommendTiny";
 
-export const PublicationMetadata = () => {
+export const PublicationMetadata = (props: { noInteractions?: boolean }) => {
   let { rep } = useReplicache();
-  let { data: pub, normalizedDocument, normalizedPublication } = useLeafletPublicationData();
+  let {
+    data: pub,
+    normalizedDocument,
+    normalizedPublication,
+  } = useLeafletPublicationData();
   let { identity } = useIdentityData();
   let title = useSubscribe(rep, (tx) => tx.get<string>("publication_title"));
   let description = useSubscribe(rep, (tx) =>
@@ -114,27 +119,37 @@ export const PublicationMetadata = () => {
           ) : (
             <p>Draft</p>
           )}
-          <div className="flex gap-2 text-border items-center">
-            {tags && (
-              <>
-                <AddTags />
-                {normalizedPublication?.preferences?.showMentions !== false ||
-                normalizedPublication?.preferences?.showComments !== false ? (
-                  <Separator classname="h-4!" />
-                ) : null}
-              </>
-            )}
-            {normalizedPublication?.preferences?.showMentions !== false && (
-              <div className="flex gap-1 items-center">
-                <QuoteTiny />—
-              </div>
-            )}
-            {normalizedPublication?.preferences?.showComments !== false && (
-              <div className="flex gap-1 items-center">
-                <CommentTiny />—
-              </div>
-            )}
-          </div>
+          {!props.noInteractions && (
+            <div className="flex gap-2 text-border items-center">
+              {normalizedPublication?.preferences?.showRecommends !== false && (
+                <div className="flex gap-1 items-center">
+                  <RecommendTinyEmpty />—
+                </div>
+              )}
+
+              {normalizedPublication?.preferences?.showMentions !== false && (
+                <div className="flex gap-1 items-center">
+                  <QuoteTiny />—
+                </div>
+              )}
+              {normalizedPublication?.preferences?.showComments !== false && (
+                <div className="flex gap-1 items-center">
+                  <CommentTiny />—
+                </div>
+              )}
+              {tags && (
+                <>
+                  {normalizedPublication?.preferences?.showRecommends !==
+                    false ||
+                  normalizedPublication?.preferences?.showMentions !== false ||
+                  normalizedPublication?.preferences?.showComments !== false ? (
+                    <Separator classname="h-4!" />
+                  ) : null}
+                  <AddTags />
+                </>
+              )}
+            </div>
+          )}
         </>
       }
     />
@@ -238,7 +253,7 @@ export const PublicationMetadataPreview = () => {
   );
 };
 
-const AddTags = () => {
+export const AddTags = () => {
   let { data: pub, normalizedDocument } = useLeafletPublicationData();
   let { rep } = useReplicache();
 
@@ -251,7 +266,10 @@ const AddTags = () => {
   let tags: string[] = [];
   if (Array.isArray(replicacheTags)) {
     tags = replicacheTags;
-  } else if (normalizedDocument?.tags && Array.isArray(normalizedDocument.tags)) {
+  } else if (
+    normalizedDocument?.tags &&
+    Array.isArray(normalizedDocument.tags)
+  ) {
     tags = normalizedDocument.tags as string[];
   }