diff --git a/app/(app)/lish/[did]/[publication]/[rkey]/Blocks/PublishBskyPostBlock.tsx b/app/(app)/lish/[did]/[publication]/[rkey]/Blocks/PublishBskyPostBlock.tsx
index 10b5d210..e6183b20 100644
--- a/app/(app)/lish/[did]/[publication]/[rkey]/Blocks/PublishBskyPostBlock.tsx
+++ b/app/(app)/lish/[did]/[publication]/[rkey]/Blocks/PublishBskyPostBlock.tsx
@@ -33,7 +33,7 @@ export const PubBlueskyPostBlock = (props: {
           avatarSize="large"
           quoteEnabled
           replyEnabled
-          className="text-sm text-secondary block-border sm:px-3 sm:py-2 px-2 py-1 bg-bg-page mb-2 hover:border-accent-contrast!"
+          className="publishedBskyPostBlock text-sm text-secondary block-border sm:px-3 sm:py-2 px-2 py-1 bg-bg-page mb-2 hover:border-accent-contrast!"
           clientHost={props.clientHost}
         />
       );
diff --git a/app/(app)/lish/[did]/[publication]/[rkey]/Blocks/PublishedPageBlock.tsx b/app/(app)/lish/[did]/[publication]/[rkey]/Blocks/PublishedPageBlock.tsx
index 1dcfdced..201541d2 100644
--- a/app/(app)/lish/[did]/[publication]/[rkey]/Blocks/PublishedPageBlock.tsx
+++ b/app/(app)/lish/[did]/[publication]/[rkey]/Blocks/PublishedPageBlock.tsx
@@ -24,7 +24,6 @@ import {
   useInteractionState,
 } from "../Interactions/Interactions";
 import { CommentTiny } from "components/Icons/CommentTiny";
-import { QuoteTiny } from "components/Icons/QuoteTiny";
 import { CanvasBackgroundPattern } from "components/Canvas";
 
 export function PublishedPageLinkBlock(props: {
@@ -213,33 +212,13 @@ const Interactions = (props: { pageId: string; parentPageId?: string }) => {
 
   let { drawerOpen, drawer, pageId } = useInteractionState(document_uri);
 
+  let defaultDrawer: "comments" | "quotes" = comments > 0 ? "comments" : "quotes";
+
   return (
     <div
       className={`flex gap-2 text-tertiary text-sm absolute bottom-2 bg-bg-page`}
     >
-      {quotes > 0 && (
-        <button
-          className={`flex gap-1 items-center`}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            openPage(
-              props.parentPageId
-                ? { type: "doc", id: props.parentPageId }
-                : undefined,
-              { type: "doc", id: props.pageId },
-              { scrollIntoView: false },
-            );
-            if (!drawerOpen || drawer !== "quotes")
-              openInteractionDrawer("quotes", document_uri, props.pageId);
-            else setInteractionState(document_uri, { drawerOpen: false });
-          }}
-        >
-          <span className="sr-only">Page quotes</span>
-          <QuoteTiny aria-hidden /> {quotes}{" "}
-        </button>
-      )}
-      {comments > 0 && (
+      {quotes + comments > 0 && (
         <button
           className={`flex gap-1 items-center`}
           onClick={(e) => {
@@ -252,13 +231,17 @@ const Interactions = (props: { pageId: string; parentPageId?: string }) => {
               { type: "doc", id: props.pageId },
               { scrollIntoView: false },
             );
-            if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId)
-              openInteractionDrawer("comments", document_uri, props.pageId);
+            if (
+              !drawerOpen ||
+              drawer !== defaultDrawer ||
+              pageId !== props.pageId
+            )
+              openInteractionDrawer(defaultDrawer, document_uri, props.pageId);
             else setInteractionState(document_uri, { drawerOpen: false });
           }}
         >
-          <span className="sr-only">Page comments</span>
-          <CommentTiny aria-hidden /> {comments}{" "}
+          <span className="sr-only">Page discussions</span>
+          <CommentTiny aria-hidden /> {comments + quotes}{" "}
         </button>
       )}
     </div>
diff --git a/app/(app)/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx b/app/(app)/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
index 41f2ff0a..baab0488 100644
--- a/app/(app)/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
+++ b/app/(app)/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
@@ -4,12 +4,11 @@ import { BlueskyEmbed } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed";
 import { BlueskyRichText } from "components/Blocks/BlueskyPostBlock/BlueskyRichText";
 import { BlueskyTiny } from "components/Icons/BlueskyTiny";
 import { CommentTiny } from "components/Icons/CommentTiny";
-import { QuoteTiny } from "components/Icons/QuoteTiny";
 import { Separator } from "components/Layout";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 import { useHasPageLoaded } from "components/InitialPageLoadProvider";
 import { OpenPage, openPage } from "./postPageState";
-import { ThreadLink, QuotesLink } from "./PostLinks";
+import { ThreadLink } from "./PostLinks";
 import { BlueskyLinkTiny } from "components/Icons/BlueskyLinkTiny";
 import { Avatar } from "components/Avatar";
 import { timeAgo } from "src/utils/timeAgo";
@@ -285,48 +284,29 @@ function PostCounts(props: {
   showBlueskyLink: boolean;
   url: string;
 }) {
-  const replyContent = props.post.replyCount != null &&
-    props.post.replyCount > 0 && (
-      <div className="postRepliesCount flex items-center gap-1 text-xs">
-        <CommentTiny />
-        {props.post.replyCount}
-      </div>
-    );
+  const total = (props.post.replyCount ?? 0) + (props.post.quoteCount ?? 0);
 
-  const quoteContent = props.post.quoteCount != null &&
-    props.post.quoteCount > 0 && (
-      <div className="postQuoteCount flex items-center gap-1  text-xs">
-        <QuoteTiny />
-        {props.post.quoteCount}
-      </div>
-    );
+  const countContent = total > 0 && (
+    <div className="postDiscussionsCount flex items-center gap-1 text-xs">
+      <CommentTiny />
+      {total}
+    </div>
+  );
 
   return (
     <div className="postCounts flex gap-2 items-center w-full text-tertiary mb-1">
-      {replyContent &&
-        (props.replyEnabled ? (
+      {countContent &&
+        (props.replyEnabled || props.quoteEnabled ? (
           <ThreadLink
             postUri={props.post.uri}
             parent={props.parent}
-            className="relative postRepliesLink hover:text-accent-contrast"
+            className="relative postDiscussionsLink hover:text-accent-contrast"
             onClick={props.replyOnClick}
           >
-            {replyContent}
+            {countContent}
           </ThreadLink>
         ) : (
-          replyContent
-        ))}
-      {quoteContent &&
-        (props.quoteEnabled ? (
-          <QuotesLink
-            postUri={props.post.uri}
-            parent={props.parent}
-            className="relative hover:text-accent-contrast"
-          >
-            {quoteContent}
-          </QuotesLink>
-        ) : (
-          quoteContent
+          countContent
         ))}
     </div>
   );
diff --git a/app/(app)/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx b/app/(app)/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
index 2ddc82af..e1249170 100644
--- a/app/(app)/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
+++ b/app/(app)/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
@@ -138,7 +138,7 @@ const Comment = (props: {
         size={"medium"}
       />
 
-      <div className="grow flex flex-col pt-1">
+      <div className="min-w-0 w-full grow flex flex-col pt-1">
         <PostInfo
           displayName={props.profile?.displayName}
           handle={props.profile?.handle || ""}
diff --git a/app/(app)/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx b/app/(app)/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx
index 928d070b..32852215 100644
--- a/app/(app)/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx
+++ b/app/(app)/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx
@@ -10,6 +10,7 @@ import { SandwichSpacer } from "components/LeafletLayout";
 import { decodeQuotePosition } from "../quotePosition";
 import { CloseTiny } from "components/Icons/CloseTiny";
 import { ToggleGroup } from "components/ToggleGroup";
+import { useDocument } from "contexts/DocumentContext";
 
 export const InteractionDrawer = (props: {
   showPageBackground: boolean | undefined;
@@ -20,6 +21,7 @@ export const InteractionDrawer = (props: {
   pageId?: string;
 }) => {
   let drawer = useDrawerOpen(props.document_uri);
+  let { commentsCount } = useDocument();
   if (!drawer) return null;
 
   const filteredQuotesAndMentions = props.quotesAndMentions.filter((q) => {
@@ -57,12 +59,29 @@ export const InteractionDrawer = (props: {
                 <ToggleGroup
                   fullWidth
                   value={activeTab}
-                  onChange={(value) =>
-                    setInteractionState(props.document_uri, { drawer: value })
-                  }
+                  onChange={(value, e) => {
+                    e?.preventDefault();
+                    setInteractionState(props.document_uri, { drawer: value });
+                  }}
                   options={[
-                    { value: "comments", label: "Comments" },
-                    { value: "quotes", label: "Bluesky Mentions" },
+                    {
+                      value: "comments",
+                      label:
+                        commentsCount > 0
+                          ? `Comments (${commentsCount})`
+                          : "Comments",
+                    },
+                    {
+                      value: "quotes",
+                      label: (
+                        <div>
+                          Bluesky{" "}
+                          <span className="hidden sm:inline">Mentions</span>{" "}
+                          {filteredQuotesAndMentions.length > 0 &&
+                            `(${filteredQuotesAndMentions.length})`}
+                        </div>
+                      ),
+                    },
                   ]}
                 />
               ) : (
diff --git a/app/(app)/lish/[did]/[publication]/[rkey]/ThreadPage.tsx b/app/(app)/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
index e8a46456..a8342968 100644
--- a/app/(app)/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
+++ b/app/(app)/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
@@ -223,7 +223,7 @@ function ThreadContent(props: { post: ThreadType; parentUri: string }) {
 
       {/* Replies */}
       {post.replies && post.replies.length > 0 && (
-        <div className="threadReplies flex flex-col mt-4 pt-4  border-t border-border-light w-full">
+        <div className="threadReplies flex flex-col mt-4 pt-2  border-t border-border-light w-full">
           <Replies
             replies={post.replies as any[]}
             pageUri={post.post.uri}
diff --git a/components/Canvas.tsx b/components/Canvas.tsx
index bfe955bc..29516771 100644
--- a/components/Canvas.tsx
+++ b/components/Canvas.tsx
@@ -18,7 +18,6 @@ import { InfoSmall } from "./Icons/InfoSmall";
 import { Popover } from "./Popover";
 import { Separator } from "./Layout";
 import { CommentTiny } from "./Icons/CommentTiny";
-import { QuoteTiny } from "./Icons/QuoteTiny";
 import { AddTags, PublicationMetadata } from "./Pages/PublicationMetadata";
 import { useLeafletPublicationData } from "./PageSWRDataProvider";
 import { useHandleCanvasDrop } from "./Blocks/useHandleCanvasDrop";
@@ -192,16 +191,11 @@ const CanvasMetadata = (props: { isSubpage: boolean | undefined }) => {
           <RecommendTinyEmpty className="text-border" /> —
         </div>
       )}
-      {showComments && (
+      {(showComments || showMentions) && (
         <div className="flex gap-1 text-tertiary items-center">
           <CommentTiny className="text-border" /> —
         </div>
       )}
-      {showMentions && (
-        <div className="flex gap-1 text-tertiary items-center">
-          <QuoteTiny className="text-border" /> —
-        </div>
-      )}
 
       {showMentions !== false ||
       showComments !== false ||
diff --git a/components/InteractionsPreview.tsx b/components/InteractionsPreview.tsx
index af5d1d92..e81a7ec6 100644
--- a/components/InteractionsPreview.tsx
+++ b/components/InteractionsPreview.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { Separator } from "./Layout";
 import { CommentTiny } from "./Icons/CommentTiny";
-import { QuoteTiny } from "./Icons/QuoteTiny";
 import { useSmoker } from "./Toast";
 import { Tag } from "./Tags";
 import { Popover } from "./Popover";
@@ -23,9 +22,14 @@ export const InteractionPreview = (props: {
   share?: boolean;
 }) => {
   let smoker = useSmoker();
+  let commentsAvailable = props.showComments !== false && props.commentsCount > 0;
+  let mentionsAvailable = props.showMentions && props.quotesCount > 0;
+  let discussionsAvailable = commentsAvailable || mentionsAvailable;
+  let defaultDrawer: "comments" | "quotes" = commentsAvailable
+    ? "comments"
+    : "quotes";
   let interactionsAvailable =
-    (props.quotesCount > 0 && props.showMentions) ||
-    (props.showComments !== false && props.commentsCount > 0) ||
+    discussionsAvailable ||
     (props.showRecommends !== false && props.recommendsCount > 0);
 
   const tagsCount = props.tags?.length || 0;
@@ -39,22 +43,13 @@ export const InteractionPreview = (props: {
         />
       )}
 
-      {!props.showMentions || props.quotesCount === 0 ? null : (
+      {!discussionsAvailable ? null : (
         <SpeedyLink
-          aria-label="Post quotes"
-          href={`${props.postUrl}?interactionDrawer=quotes`}
+          aria-label="Post discussions"
+          href={`${props.postUrl}?interactionDrawer=${defaultDrawer}`}
           className="relative flex flex-row gap-1 text-sm items-center hover:text-accent-contrast hover:no-underline! text-tertiary"
         >
-          <QuoteTiny /> {props.quotesCount}
-        </SpeedyLink>
-      )}
-      {!props.showComments || props.commentsCount === 0 ? null : (
-        <SpeedyLink
-          aria-label="Post comments"
-          href={`${props.postUrl}?interactionDrawer=comments`}
-          className="relative flex flex-row gap-1 text-sm items-center hover:text-accent-contrast hover:no-underline! text-tertiary"
-        >
-          <CommentTiny /> {props.commentsCount}
+          <CommentTiny /> {props.commentsCount + props.quotesCount}
         </SpeedyLink>
       )}
       {tagsCount === 0 ? null : (
diff --git a/components/Pages/PublicationMetadata.tsx b/components/Pages/PublicationMetadata.tsx
index 1a10e1ad..f095713c 100644
--- a/components/Pages/PublicationMetadata.tsx
+++ b/components/Pages/PublicationMetadata.tsx
@@ -13,7 +13,6 @@ import { useSubscribe } from "src/replicache/useSubscribe";
 import { useEntitySetContext } from "components/EntitySetProvider";
 import { timeAgo } from "src/utils/timeAgo";
 import { CommentTiny } from "components/Icons/CommentTiny";
-import { QuoteTiny } from "components/Icons/QuoteTiny";
 import { TagTiny } from "components/Icons/TagTiny";
 import { Popover } from "components/Popover";
 import { TagSelector } from "components/Tags";
@@ -139,12 +138,8 @@ export const PublicationMetadata = (props: { noInteractions?: boolean }) => {
                 </div>
               )}
 
-              {merged.showMentions !== false && (
-                <div className="flex gap-1 items-center">
-                  <QuoteTiny />—
-                </div>
-              )}
-              {merged.showComments !== false && (
+              {(merged.showComments !== false ||
+                merged.showMentions !== false) && (
                 <div className="flex gap-1 items-center">
                   <CommentTiny />—
                 </div>
diff --git a/components/PostListing.tsx b/components/PostListing.tsx
index 8091ff94..c56e7296 100644
--- a/components/PostListing.tsx
+++ b/components/PostListing.tsx
@@ -17,7 +17,6 @@ import { TagPopover } from "./InteractionsPreview";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 import { useSmoker } from "./Toast";
 import { CommentTiny } from "./Icons/CommentTiny";
-import { QuoteTiny } from "./Icons/QuoteTiny";
 import { ShareTiny } from "./Icons/ShareTiny";
 import { useSelectedPostListing } from "src/useSelectedPostState";
 import { mergePreferences } from "src/utils/mergePreferences";
@@ -249,6 +248,13 @@ const Interactions = (props: {
     });
   };
 
+  let commentsAvailable = props.showComments && props.commentsCount > 0;
+  let mentionsAvailable = props.showMentions && props.quotesCount > 0;
+  let discussionsAvailable = commentsAvailable || mentionsAvailable;
+  let defaultDrawer: "comments" | "quotes" = commentsAvailable
+    ? "comments"
+    : "quotes";
+
   return (
     <div
       className={`flex gap-2 text-tertiary text-sm  items-center justify-between px-1`}
@@ -258,22 +264,13 @@ const Interactions = (props: {
           documentUri={props.documentUri}
           recommendsCount={props.recommendsCount}
         />
-        {!props.showMentions || props.quotesCount === 0 ? null : (
-          <button
-            aria-label="Post quotes"
-            onClick={() => selectPostListing("quotes")}
-            className="relative flex flex-row gap-1 text-sm items-center hover:text-accent-contrast text-tertiary"
-          >
-            <QuoteTiny /> {props.quotesCount}
-          </button>
-        )}
-        {!props.showComments || props.commentsCount === 0 ? null : (
+        {!discussionsAvailable ? null : (
           <button
-            aria-label="Post comments"
-            onClick={() => selectPostListing("comments")}
+            aria-label="Post discussions"
+            onClick={() => selectPostListing(defaultDrawer)}
             className="relative flex flex-row gap-1 text-sm items-center hover:text-accent-contrast text-tertiary"
           >
-            <CommentTiny /> {props.commentsCount}
+            <CommentTiny /> {props.commentsCount + props.quotesCount}
           </button>
         )}
       </div>
diff --git a/components/ToggleGroup.tsx b/components/ToggleGroup.tsx
index b27f738d..f5cc901e 100644
--- a/components/ToggleGroup.tsx
+++ b/components/ToggleGroup.tsx
@@ -2,7 +2,7 @@ import { type ReactNode } from "react";
 
 export function ToggleGroup<T extends string>(props: {
   value: T;
-  onChange: (value: T) => void;
+  onChange: (value: T, e?: React.MouseEvent) => void;
   options: { value: T; label: ReactNode }[];
   className?: string;
   optionClassName?: string;