diff --git a/CLAUDE.md b/CLAUDE.md
index a2b07439..7dc6a047 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -71,4 +71,4 @@ To add or modify a lexicon:
 - **React contexts**: `DocumentProvider`, `LeafletContentProvider` for page-level data
 - **Inngest functions**: Async jobs in `app/api/inngest/functions/`
 - **Icons**: Icon components live in `components/Icons/`. Each icon is a named export in its own file (e.g. `RefreshSmall.tsx`), imports `Props` from `./Props`, spreads `{...props}` on the `<svg>` element, and uses `fill="currentColor"` instead of hardcoded colors like `fill="black"`.
-- **Popovers and menus**: Use the existing `Popover` (`components/Popover`), `Menu`, and `MenuItem` (`components/Menu`) components — do not create new popover/menu primitives
+- **Popovers and menus**: Use the existing `Popover` (`components/Popover`), `Menu`, and `MenuItem` (`components/Menu`) components — do not create new popover/menu primitives. Avoid using buttons inside Popover or Modal triggers unless using a specific button component. If button is being used as trigger, always add an "asChild" prop to the Menu or Popover
diff --git a/app/(home-pages)/home/Actions/Actions.tsx b/app/(home-pages)/home/Actions/Actions.tsx
index 6720edc0..743e6721 100644
--- a/app/(home-pages)/home/Actions/Actions.tsx
+++ b/app/(home-pages)/home/Actions/Actions.tsx
@@ -2,7 +2,7 @@
 import { ThemePopover } from "components/ThemeManager/ThemeSetter";
 import { CreateNewLeafletButton } from "./CreateNewButton";
 import { HelpButton } from "app/[leaflet_id]/actions/HelpButton";
-import { AccountSettings } from "./AccountSettings";
+import { HomeThemeSetter } from "./HomeThemeSetter";
 import { useIdentityData } from "components/IdentityProvider";
 import { useReplicache } from "src/replicache";
 
@@ -12,7 +12,7 @@ export const Actions = () => {
   return (
     <>
       <CreateNewLeafletButton />
-      {identity && <AccountSettings entityID={rootEntity} />}
+      {identity && <HomeThemeSetter entityID={rootEntity} />}
     </>
   );
 };
diff --git a/app/(home-pages)/home/Actions/CreateNewButton.tsx b/app/(home-pages)/home/Actions/CreateNewButton.tsx
index 454ae7ca..44acafc0 100644
--- a/app/(home-pages)/home/Actions/CreateNewButton.tsx
+++ b/app/(home-pages)/home/Actions/CreateNewButton.tsx
@@ -24,6 +24,7 @@ export const CreateNewLeafletButton = (props: {}) => {
       align={isMobile ? "center" : "start"}
       trigger={
         <ActionButton
+          labelOnMobile
           id="new-leaflet-button"
           primary
           icon=<AddTiny className="sm:m-1 shrink-0 sm:scale-100 scale-75" />
diff --git a/app/(home-pages)/home/Actions/HomeHelp.tsx b/app/(home-pages)/home/Actions/HomeHelp.tsx
deleted file mode 100644
index 83c5d3d5..00000000
--- a/app/(home-pages)/home/Actions/HomeHelp.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client";
-import { ActionButton } from "components/ActionBar/ActionButton";
-import { HelpSmall } from "components/Icons/HelpSmall";
-import { Popover } from "components/Popover";
-
-export const HomeHelp = () => {
-  return (
-    <Popover
-      className="max-w-sm"
-      trigger={<ActionButton icon={<HelpSmall />} label="Info" />}
-    >
-      <div className="flex flex-col gap-2">
-        <p>
-          Leaflets are saved to home <strong>per-device / browser</strong> using
-          cookies.
-        </p>
-        <p>
-          <strong>If you clear your cookies, they&apos;ll disappear.</strong>
-        </p>
-        <p>
-          Please <a href="mailto:contact@leaflet.pub">contact us</a> for help
-          recovering Leaflets!
-        </p>
-      </div>
-    </Popover>
-  );
-};
diff --git a/app/(home-pages)/home/Actions/AccountSettings.tsx b/app/(home-pages)/home/Actions/HomeThemeSetter.tsx
similarity index 89%
rename from app/(home-pages)/home/Actions/AccountSettings.tsx
rename to app/(home-pages)/home/Actions/HomeThemeSetter.tsx
index 6d065766..0053c2d3 100644
--- a/app/(home-pages)/home/Actions/AccountSettings.tsx
+++ b/app/(home-pages)/home/Actions/HomeThemeSetter.tsx
@@ -6,9 +6,9 @@ import { ThemeSetterContent } from "components/ThemeManager/ThemeSetter";
 import { useIsMobile } from "src/hooks/isMobile";
 import { PaintSmall } from "components/Icons/PaintSmall";
 
-export const AccountSettings = (props: { entityID: string }) => {
+export const HomeThemeSetter = (props: { entityID: string }) => {
   let isMobile = useIsMobile();
-
+  if (isMobile) return null;
   return (
     <Popover
       asChild
diff --git a/app/(home-pages)/home/HomeLayout.tsx b/app/(home-pages)/home/HomeLayout.tsx
index bfda6a4f..aa6e5d63 100644
--- a/app/(home-pages)/home/HomeLayout.tsx
+++ b/app/(home-pages)/home/HomeLayout.tsx
@@ -14,7 +14,7 @@ import type { Attribute } from "src/replicache/attributes";
 import { callRPC } from "app/api/rpc/client";
 import { StaticLeafletDataContext } from "components/PageSWRDataProvider";
 import {
-  HomeDashboardControls,
+  PageSearch,
   DashboardLayout,
   DashboardState,
   useDashboardState,
@@ -83,11 +83,11 @@ export const HomeLayout = (props: {
         home: {
           content: (
             <DashboardPageLayout
-              scrollKey="dashboard-home-home"
+              scrollKey="dashboard-home"
               pageTitle="Home"
               actions={<Actions />}
               controls={
-                <HomeDashboardControls
+                <PageSearch
                   defaultDisplay={"grid"}
                   searchValue={searchValue}
                   setSearchValueAction={setSearchValue}
diff --git a/app/(home-pages)/reader/layout.tsx b/app/(home-pages)/reader/layout.tsx
index 4a9f08eb..8ba66de9 100644
--- a/app/(home-pages)/reader/layout.tsx
+++ b/app/(home-pages)/reader/layout.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { usePathname, useRouter } from "next/navigation";
-import { Header } from "components/PageHeader";
+import { DesktopHeader } from "components/PageHeader";
 import { Footer } from "components/ActionBar/Footer";
 import { DesktopNavigation } from "components/ActionBar/DesktopNavigation";
 import { MobileNavigation } from "components/ActionBar/MobileNavigation";
@@ -50,7 +50,7 @@ export default function ReaderLayout({
           className="w-full h-full flex flex-col gap-2 relative overflow-y-scroll pt-3 pb-3 px-3 sm:pt-8 sm:pb-3 sm:pl-6 sm:pr-4"
           id="home-content"
         >
-          <Header>
+          <DesktopHeader>
             <div className="pubDashTabs flex flex-row gap-1">
               {tabs.map((tab) => (
                 <Tab
@@ -62,7 +62,7 @@ export default function ReaderLayout({
               ))}
             </div>
             <div className="sm:block grow" />
-          </Header>
+          </DesktopHeader>
           {children}
         </div>
         <Footer>
diff --git a/app/globals.css b/app/globals.css
index c3984c74..964ee432 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -492,6 +492,7 @@ pre.shiki {
   @apply border-border-light;
   @apply rounded-md;
 }
+
 .frosted-container {
   background: rgba(var(--bg-page), 0.75);
   @apply border;
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
index 385cc096..42d6a113 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
@@ -8,7 +8,7 @@ import { PublishedPostsList } from "./PublishedPostsLists";
 import { PublicationSubscribers } from "./PublicationSubscribers";
 import {
   DashboardLayout,
-  PublicationDashboardControls,
+  PageSearch,
 } from "components/PageLayouts/DashboardLayout";
 import { DashboardPageLayout } from "components/PageLayouts/DashboardPageLayout";
 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
@@ -55,7 +55,7 @@ export default function PublicationDashboard({
               pageTitle={record.name}
               actions={<Actions publication={pubUri} />}
               controls={
-                <PublicationDashboardControls
+                <PageSearch
                   defaultDisplay={"list"}
                   hasBackgroundImage={!!record?.theme?.backgroundImage}
                   searchValue={searchValue}
diff --git a/components/ActionBar/MobileNavigation.tsx b/components/ActionBar/MobileNavigation.tsx
index 806d51e2..40baab5d 100644
--- a/components/ActionBar/MobileNavigation.tsx
+++ b/components/ActionBar/MobileNavigation.tsx
@@ -67,20 +67,19 @@ export const MobileNavigation = (props: {
             />
           ))}
         </Popover>
-      ) : (
-        <div className="spacer flex-1" />
-      )}
+      ) : null}
+      <div className="spacer flex-1" />
 
       <div className="mobileNav flex grow gap-2 items-center justify-start ">
         <WriterButton />
-        {isWriterPage && (
-          <ReaderButton
-            subs={
-              identity?.publication_subscriptions?.length !== 0 &&
-              identity?.publication_subscriptions?.length !== undefined
-            }
-          />
-        )}
+
+        <ReaderButton
+          subs={
+            identity?.publication_subscriptions?.length !== 0 &&
+            identity?.publication_subscriptions?.length !== undefined
+          }
+        />
+
         {identity?.atp_did && (
           <NotificationButton current={props.currentPage === "notifications"} />
         )}
diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx
index 5e5b8e02..19b32faf 100644
--- a/components/PageHeader.tsx
+++ b/components/PageHeader.tsx
@@ -1,8 +1,9 @@
 "use client";
 import { useState, useEffect } from "react";
 import { useCardBorderHidden } from "./Pages/useCardBorderHidden";
+import { MediaContents } from "./Media";
 
-export const Header = (props: { children: React.ReactNode }) => {
+export const DesktopHeader = (props: { children: React.ReactNode }) => {
   let cardBorderHidden = useCardBorderHidden();
   let [scrollPos, setScrollPos] = useState(0);
 
@@ -24,7 +25,8 @@ export const Header = (props: { children: React.ReactNode }) => {
   let headerBGColor = cardBorderHidden ? "var(--bg-leaflet)" : "var(--bg-page)";
 
   return (
-    <div
+    <MediaContents
+      mobile={false}
       className={`
       headerWrapper
       sticky top-0 z-20
@@ -71,6 +73,25 @@ export const Header = (props: { children: React.ReactNode }) => {
           {props.children}
         </div>
       </div>
-    </div>
+    </MediaContents>
+  );
+};
+
+export const MobileHeader = (props: {
+  controls?: React.ReactNode;
+  actions: React.ReactNode;
+}) => {
+  return (
+    <MediaContents
+      mobile={true}
+      className="mobilePageHeader flex gap-4 justify-between items-center px-1 mt-1 -mb-1 w-full "
+    >
+      {props.controls ? (
+        <div className="grow">{props.controls}</div>
+      ) : (
+        <div className="spacer flex-1" />
+      )}
+      <div className="flex flex-row-reverse! gap-1">{props.actions}</div>
+    </MediaContents>
   );
 };
diff --git a/components/PageLayouts/DashboardLayout.tsx b/components/PageLayouts/DashboardLayout.tsx
index 9975be04..59e26789 100644
--- a/components/PageLayouts/DashboardLayout.tsx
+++ b/components/PageLayouts/DashboardLayout.tsx
@@ -10,11 +10,12 @@ import { Popover } from "components/Popover";
 import { Checkbox } from "components/Checkbox";
 import { Separator } from "components/Layout";
 import { CloseTiny } from "components/Icons/CloseTiny";
+import { MoreOptionsTiny } from "components/Icons/MoreOptionsTiny";
 import { Input } from "components/Input";
 import { SearchTiny } from "components/Icons/SearchTiny";
 import { InterfaceState, useIdentityData } from "components/IdentityProvider";
 import { updateIdentityInterfaceState } from "actions/updateIdentityInterfaceState";
-export { PageTitle } from "./DashboardPageLayout";
+export { MobileHeader } from "../PageHeader";
 
 export type DashboardState = {
   display?: "grid" | "list";
@@ -179,18 +180,17 @@ export function DashboardLayout<
   );
 }
 
-export const HomeDashboardControls = (props: {
+export const PageSearch = (props: {
   searchValue: string;
   setSearchValueAction: (searchValue: string) => void;
   hasBackgroundImage: boolean;
   defaultDisplay: Exclude<DashboardState["display"], undefined>;
-  hasPubs: boolean;
-  hasArchived: boolean;
+  hasPubs?: boolean;
+  hasArchived?: boolean;
 }) => {
   let { display, sort } = useDashboardState();
   display = display || props.defaultDisplay;
   let setState = useSetDashboardState();
-
   let { identity } = useIdentityData();
 
   return (
@@ -202,45 +202,28 @@ export const HomeDashboardControls = (props: {
           hasBackgroundImage={props.hasBackgroundImage}
         />
       )}
-      <div className="flex gap-2 w-max shrink-0 items-center text-sm text-tertiary">
+      <div className="hidden sm:flex gap-2 w-max shrink-0 items-center text-sm text-tertiary">
         <DisplayToggle setState={setState} display={display} />
         <Separator classname="h-4 min-h-4!" />
-
-        {props.hasPubs || props.hasArchived ? (
+        {(props.hasPubs || props.hasArchived) ? (
           <>
             <FilterOptions
-              hasPubs={props.hasPubs}
-              hasArchived={props.hasArchived}
+              hasPubs={props.hasPubs ?? false}
+              hasArchived={props.hasArchived ?? false}
             />
             <Separator classname="h-4 min-h-4!" />{" "}
           </>
         ) : null}
         <SortToggle setState={setState} sort={sort} />
       </div>
-    </div>
-  );
-};
-
-export const PublicationDashboardControls = (props: {
-  searchValue: string;
-  setSearchValueAction: (searchValue: string) => void;
-  hasBackgroundImage: boolean;
-  defaultDisplay: Exclude<DashboardState["display"], undefined>;
-}) => {
-  let { display, sort } = useDashboardState();
-  display = display || props.defaultDisplay;
-  let setState = useSetDashboardState();
-  return (
-    <div className="dashboardControls w-full flex gap-4">
-      <SearchInput
-        searchValue={props.searchValue}
-        setSearchValue={props.setSearchValueAction}
-        hasBackgroundImage={props.hasBackgroundImage}
-      />
-      <div className="flex gap-2 w-max shrink-0 items-center text-sm text-tertiary">
-        <DisplayToggle setState={setState} display={display} />
-        <Separator classname="h-4 min-h-4!" />
-        <SortToggle setState={setState} sort={sort} />
+      <div className="flex sm:hidden w-max shrink-0 items-center text-sm text-tertiary">
+        <MobileControlsPopover
+          display={display}
+          sort={sort}
+          setState={setState}
+          hasPubs={props.hasPubs}
+          hasArchived={props.hasArchived}
+        />
       </div>
     </div>
   );
@@ -361,6 +344,130 @@ const FilterOptions = (props: { hasPubs: boolean; hasArchived: boolean }) => {
   );
 };
 
+const MobileControlsPopover = (props: {
+  display: string;
+  sort: string | undefined;
+  setState: (partial: Partial<DashboardState>) => Promise<void>;
+  hasPubs?: boolean;
+  hasArchived?: boolean;
+}) => {
+  let { filter } = useDashboardState();
+  let filterCount = Object.values(filter).filter(Boolean).length;
+
+  return (
+    <Popover
+      align="end"
+      className="text-sm min-w-[140px]"
+      trigger={
+        <div className="relative flex items-center">
+          <MoreOptionsTiny />
+          {filterCount > 0 && (
+            <span className="absolute -top-1.5 -right-1.5 text-[10px] leading-none bg-accent text-accent-contrast rounded-full w-3.5 h-3.5 flex items-center justify-center">
+              {filterCount}
+            </span>
+          )}
+        </div>
+      }
+    >
+      <button
+        className="w-full text-left"
+        onClick={() =>
+          props.setState({
+            display: props.display === "list" ? "grid" : "list",
+          })
+        }
+      >
+        {props.display === "list" ? "List" : "Grid"}
+      </button>
+      <button
+        className="w-full text-left"
+        onClick={() =>
+          props.setState({
+            sort: props.sort === "created" ? "alphabetical" : "created",
+          })
+        }
+      >
+        Sort: {props.sort === "created" ? "Created On" : "A to Z"}
+      </button>
+      {(props.hasPubs || props.hasArchived) && (
+        <>
+          <hr className="border-border-light my-1" />
+          {props.hasPubs && (
+            <>
+              <Checkbox
+                small
+                checked={filter.drafts}
+                onChange={(e) =>
+                  props.setState({
+                    filter: { ...filter, drafts: !!e.target.checked },
+                  })
+                }
+              >
+                Drafts
+              </Checkbox>
+              <Checkbox
+                small
+                checked={filter.published}
+                onChange={(e) =>
+                  props.setState({
+                    filter: { ...filter, published: !!e.target.checked },
+                  })
+                }
+              >
+                Published
+              </Checkbox>
+            </>
+          )}
+          {props.hasArchived && (
+            <Checkbox
+              small
+              checked={filter.archived}
+              onChange={(e) =>
+                props.setState({
+                  filter: { ...filter, archived: !!e.target.checked },
+                })
+              }
+            >
+              Archived
+            </Checkbox>
+          )}
+          <Checkbox
+            small
+            checked={filter.docs}
+            onChange={(e) =>
+              props.setState({
+                filter: { ...filter, docs: !!e.target.checked },
+              })
+            }
+          >
+            Docs
+          </Checkbox>
+          {filterCount > 0 && (
+            <>
+              <hr className="border-border-light mt-1 mb-0.5" />
+              <button
+                className="flex gap-1 items-center -mx-[2px] text-tertiary"
+                onClick={() =>
+                  props.setState({
+                    filter: {
+                      docs: false,
+                      published: false,
+                      drafts: false,
+                      archived: false,
+                    },
+                  })
+                }
+              >
+                <CloseTiny className="scale-75" /> Clear
+              </button>
+            </>
+          )}
+        </>
+      )}
+    </Popover>
+  );
+};
+
 const SearchInput = (props: {
   searchValue: string;
   setSearchValue: (searchValue: string) => void;
diff --git a/components/PageLayouts/DashboardPageLayout.tsx b/components/PageLayouts/DashboardPageLayout.tsx
index 9c1ff8bb..395cc9fd 100644
--- a/components/PageLayouts/DashboardPageLayout.tsx
+++ b/components/PageLayouts/DashboardPageLayout.tsx
@@ -1,23 +1,7 @@
 "use client";
-import { Header } from "../PageHeader";
-import { MediaContents } from "components/Media";
+import { DesktopHeader, MobileHeader } from "../PageHeader";
 import { usePreserveScroll } from "src/hooks/usePreserveScroll";
 
-export const PageTitle = (props: {
-  pageTitle: string;
-  actions: React.ReactNode;
-}) => {
-  return (
-    <MediaContents
-      mobile={true}
-      className="flex justify-between items-center px-1 mt-1 -mb-1 w-full "
-    >
-      <h4 className="grow truncate">{props.pageTitle}</h4>
-      <div className="flex flex-row-reverse! gap-1">{props.actions}</div>
-    </MediaContents>
-  );
-};
-
 export function DashboardPageLayout(props: {
   scrollKey: string;
   pageTitle?: string;
@@ -35,15 +19,16 @@ export function DashboardPageLayout(props: {
       ref={ref}
       id="home-content"
     >
-      {props.pageTitle && (
-        <PageTitle pageTitle={props.pageTitle} actions={props.actions} />
-      )}
       {props.showHeader && (
-        <Header>
-          <div className={`sm:block ${props.publication && "hidden"} grow`}>
-            {props.controls}
-          </div>
-        </Header>
+        <>
+          <MobileHeader controls={props.controls} actions={props.actions} />
+
+          <DesktopHeader>
+            <div className={`sm:block ${props.publication && "hidden"} grow`}>
+              {props.controls}
+            </div>
+          </DesktopHeader>
+        </>
       )}
       {props.children}
     </div>