diff --git a/app/lish/[did]/[publication]/UpgradeModal.tsx b/app/lish/[did]/[publication]/UpgradeModal.tsx
index ced03403..daa12094 100644
--- a/app/lish/[did]/[publication]/UpgradeModal.tsx
+++ b/app/lish/[did]/[publication]/UpgradeModal.tsx
@@ -86,21 +86,10 @@ export const UpgradeModal = (props: {
   );
 };
 
-export const InlineUpgrade = (props: { compact?: boolean }) => {
+export const InlineUpgradeToPro = (props: { compact?: boolean }) => {
   return (
     <div className="text-center  text-secondary">
-      <UpgradeModal
-        asChild
-        trigger={
-          <ButtonPrimary
-            compact={props.compact}
-            fullWidth
-            className={props.compact ? `text-sm` : "text-base"}
-          >
-            Upgrade to Leaflet Pro!
-          </ButtonPrimary>
-        }
-      />
+      <UpgradeToProButton fullWidth compact={props.compact} />
       <div
         className={`${props.compact ? `text-sm` : "text-base"} leading-snug text-tertiary pt-2`}
       >
@@ -109,3 +98,24 @@ export const InlineUpgrade = (props: { compact?: boolean }) => {
     </div>
   );
 };
+
+export const UpgradeToProButton = (props: {
+  fullWidth?: boolean;
+  compact?: boolean;
+}) => {
+  return (
+    <UpgradeModal
+      asChild
+      trigger={
+        <ButtonPrimary
+          type="button"
+          compact={props.compact}
+          fullWidth={props.fullWidth}
+          className={props.compact ? `text-sm` : "text-base"}
+        >
+          Upgrade to Leaflet Pro!
+        </ButtonPrimary>
+      }
+    />
+  );
+};
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
index a89f07ec..bda5e413 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
@@ -134,7 +134,9 @@ export const Interactions = (props: {
   const tagCount = tags?.length || 0;
 
   let interactionsAvailable =
-    props.showComments || props.showMentions || props.showRecommends;
+    props.showComments ||
+    (props.showMentions && props.quotesCount > 0) ||
+    props.showRecommends;
 
   return (
     <div
diff --git a/app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx b/app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx
index 80978d28..a8db0cc8 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx
@@ -7,7 +7,7 @@ import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 import { GoBackSmall } from "components/Icons/GoBackSmall";
 import { PRODUCT_DEFINITION } from "stripe/products";
 
-export const ManageProSubscription = (props: {}) => {
+export const ManageProSubscription = (props: { compact?: boolean }) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const { identity } = useIdentityData();
@@ -29,24 +29,49 @@ export const ManageProSubscription = (props: {}) => {
       setLoading(false);
     }
   }
+  if (props.compact) {
+    return (
+      <div className="text-secondary font-bold flex flex-col gap-1 justify-end">
+        <ButtonPrimary
+          className=""
+          compact
+          onClick={handleManageBilling}
+          disabled={loading}
+        >
+          {loading ? <DotLoader /> : "Manage Billing"}
+        </ButtonPrimary>
+        <div className="text-tertiary text-sm font-normal">
+          {subscription?.status === "canceled"
+            ? "Your subscription has ended"
+            : subscription?.status === "canceling"
+              ? `Access until ${renewalDate}`
+              : `Renews ${renewalDate}`}
+        </div>
 
+        {error && <div className="text-sm text-red-500 mt-2">{error}</div>}
+      </div>
+    );
+  }
   return (
     <div>
-      <div className="text-secondary text-center flex flex-col justify-center gap-2 py-2">
+      <div className="text-secondary text-center flex flex-col leading-snug justify-center gap-2 py-2">
         <div>
-          You have a <br />
-          {PRODUCT_DEFINITION.name} subscription
-          <div className="text-lg font-bold text-primary">
+          You are subscribed to
+          <br />
+          <div className="text-xl font-bold text-primary pb-1">
             {PRODUCT_DEFINITION.name}
           </div>
-          {subscription?.status === "canceled"
-            ? "Your subscription has ended"
-            : subscription?.status === "canceling"
-              ? `Access until ${renewalDate}`
-              : `Renews on ${renewalDate}`}
+          <div className="text-tertiary italic text-sm">
+            {subscription?.status === "canceled"
+              ? "Your subscription has ended"
+              : subscription?.status === "canceling"
+                ? `Access until ${renewalDate}`
+                : `Renews ${renewalDate}`}
+          </div>
         </div>
         <ButtonPrimary
           className="mx-auto"
+          type="button"
           compact
           onClick={handleManageBilling}
           disabled={loading}
diff --git a/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
index 8dd7cd09..360626e1 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
@@ -24,7 +24,7 @@ export function PostSettings(props: {
           onToggle={() => props.setShowInDiscover(!props.showInDiscover)}
         >
           <div className="flex flex-col justify-start">
-            <div className="font-bold">Make Public</div>
+            <div className="font-bold text-secondary">Make Public</div>
             <div className="text-tertiary text-sm leading-tight">
               Your posts will appear in{" "}
               <a href="/reader" target="_blank">
@@ -35,7 +35,7 @@ export function PostSettings(props: {
           </div>
         </Toggle>
       </DashboardContainer>
-      {cardBorderHidden && <hr className="border-border-light" />}
+      {cardBorderHidden && <hr className="border-border-light my-2" />}
 
       <DashboardContainer>
         <h3>Post Layout</h3>
@@ -43,10 +43,12 @@ export function PostSettings(props: {
           toggle={props.showPrevNext}
           onToggle={() => props.setShowPrevNext(!props.showPrevNext)}
         >
-          <div className="font-bold">Show Prev/Next Buttons on Post</div>
+          <div className="font-bold text-secondary">
+            Show Prev/Next Buttons on Post
+          </div>
         </Toggle>
       </DashboardContainer>
-      {cardBorderHidden && <hr className="border-border-light" />}
+      {cardBorderHidden && <hr className="border-border-light my-2" />}
       <DashboardContainer>
         <h3>Post Interactions</h3>
         <div className="flex flex-col gap-2">
@@ -54,7 +56,7 @@ export function PostSettings(props: {
             toggle={props.showComments}
             onToggle={() => props.setShowComments(!props.showComments)}
           >
-            <div className="font-bold">Show Comments</div>
+            <div className="font-bold text-secondary">Show Comments</div>
           </Toggle>
 
           <Toggle
@@ -62,7 +64,7 @@ export function PostSettings(props: {
             onToggle={() => props.setShowMentions(!props.showMentions)}
           >
             <div className="flex flex-col justify-start">
-              <div className="font-bold">Show Mentions</div>
+              <div className="font-bold text-secondary">Show Mentions</div>
               <div className="text-tertiary text-sm leading-tight">
                 Display a list of Bluesky mentions about your post
               </div>
@@ -74,7 +76,7 @@ export function PostSettings(props: {
             onToggle={() => props.setShowRecommends(!props.showRecommends)}
           >
             <div className="flex flex-col justify-start">
-              <div className="font-bold">Show Recommends</div>
+              <div className="font-bold text-secondary">Show Recommends</div>
               <div className="text-tertiary text-sm leading-tight">
                 Allow readers to recommend/like your post
               </div>
diff --git a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
index f6755931..caec3146 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
@@ -17,7 +17,7 @@ import { ThemeSettings } from "./ThemeSettings";
 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
 import { ManageProSubscription } from "./ManageProSubscription";
 import { useIsPro, useCanSeePro } from "src/hooks/useEntitlement";
-import { InlineUpgrade } from "../../UpgradeModal";
+import { InlineUpgradeToPro, UpgradeToProButton } from "../../UpgradeModal";
 
 type SettingsView = "all" | "theme";
 
@@ -114,7 +114,7 @@ export function SettingsContent(props: { showPageBackground: boolean }) {
           setIconFile={setIconFile}
         />
 
-        {cardBorderHidden && <hr className="border-border-light" />}
+        {cardBorderHidden && <hr className="border-border-light my-2" />}
 
         {/* ── Post Settings ── */}
         <PostSettings
@@ -130,20 +130,28 @@ export function SettingsContent(props: { showPageBackground: boolean }) {
           setShowInDiscover={setShowInDiscover}
         />
 
-        {cardBorderHidden && <hr className="border-border-light" />}
+        {cardBorderHidden && <hr className="border-border-light my-2" />}
 
         <DashboardContainer>
           <ThemeSettings />
         </DashboardContainer>
 
-        {cardBorderHidden && <hr className="border-border-light" />}
+        {cardBorderHidden && <hr className="border-border-light my-2" />}
 
         <DashboardContainer>
           <PubDomainSettings />
         </DashboardContainer>
+        {cardBorderHidden && <hr className="border-border-light my-2" />}
+
         <DashboardContainer className="bg-[rgb(var(--accent-light))]">
-          {canSeePro && !isPro ? <InlineUpgrade /> : <ManageProSubscription />}
+          <h3>Leaflet Pro</h3>
+          {canSeePro && !isPro ? (
+            <UpgradeToProButton />
+          ) : (
+            <ManageProSubscription compact />
+          )}
         </DashboardContainer>
+        {cardBorderHidden && <div className="spacer h-4" />}
 
         <SettingsFooter loading={loading} />
       </div>
diff --git a/components/ActionBar/ProfileButton.tsx b/components/ActionBar/ProfileButton.tsx
index c5adf2eb..dcab7356 100644
--- a/components/ActionBar/ProfileButton.tsx
+++ b/components/ActionBar/ProfileButton.tsx
@@ -9,7 +9,7 @@ import { mutate } from "swr";
 import { SpeedyLink } from "components/SpeedyLink";
 import { Popover } from "components/Popover";
 import { Modal } from "components/Modal";
-import { InlineUpgrade } from "app/lish/[did]/[publication]/UpgradeModal";
+import { InlineUpgradeToPro } from "app/lish/[did]/[publication]/UpgradeModal";
 import { ManageProSubscription } from "app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription";
 import { ManageDomains } from "components/Domains/ManageDomains";
 import { WebSmall } from "components/Icons/WebSmall";
@@ -99,7 +99,7 @@ export const ProfileButton = () => {
             <hr className="border-border-light border-dashed" />
             <div className="py-2">
               <div className="p-2 accent-container">
-                <InlineUpgrade compact />
+                <InlineUpgradeToPro compact />
               </div>
             </div>
           </>