diff --git a/app/(home-pages)/home/HomeLayout.tsx b/app/(home-pages)/home/HomeLayout.tsx
index aa6e5d63..4db862dc 100644
--- a/app/(home-pages)/home/HomeLayout.tsx
+++ b/app/(home-pages)/home/HomeLayout.tsx
@@ -14,12 +14,12 @@ import type { Attribute } from "src/replicache/attributes";
 import { callRPC } from "app/api/rpc/client";
 import { StaticLeafletDataContext } from "components/PageSWRDataProvider";
 import {
-  PageSearch,
   DashboardLayout,
   DashboardState,
   useDashboardState,
 } from "components/PageLayouts/DashboardLayout";
 import { DashboardPageLayout } from "components/PageLayouts/DashboardPageLayout";
+import { PageSearch } from "components/PageLayouts/PageSearch";
 import { Actions } from "./Actions/Actions";
 import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data";
 import { useState } from "react";
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
index 42d6a113..6c6fad74 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
@@ -6,11 +6,9 @@ import { Actions } from "./Actions";
 import React, { useState } from "react";
 import { PublishedPostsList } from "./PublishedPostsLists";
 import { PublicationSubscribers } from "./PublicationSubscribers";
-import {
-  DashboardLayout,
-  PageSearch,
-} from "components/PageLayouts/DashboardLayout";
+import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
 import { DashboardPageLayout } from "components/PageLayouts/DashboardPageLayout";
+import { PageSearch } from "components/PageLayouts/PageSearch";
 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
 import { type NormalizedPublication } from "src/utils/normalizeRecords";
 import { PublicationAnalytics } from "./PublicationAnalytics";
diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx
index 19b32faf..34bc78e3 100644
--- a/components/PageHeader.tsx
+++ b/components/PageHeader.tsx
@@ -2,6 +2,10 @@
 import { useState, useEffect } from "react";
 import { useCardBorderHidden } from "./Pages/useCardBorderHidden";
 import { MediaContents } from "./Media";
+import { SearchSmall } from "./Icons/SearchSmall";
+import { MenuSmall } from "./Icons/MenuSmall";
+import { Separator } from "./Layout";
+import { CloseTiny } from "./Icons/CloseTiny";
 
 export const DesktopHeader = (props: { children: React.ReactNode }) => {
   let cardBorderHidden = useCardBorderHidden();
@@ -81,17 +85,39 @@ export const MobileHeader = (props: {
   controls?: React.ReactNode;
   actions: React.ReactNode;
 }) => {
+  let [state, setState] = useState<"search" | "default">("default");
   return (
     <MediaContents
       mobile={true}
-      className="mobilePageHeader flex gap-4 justify-between items-center px-1 mt-1 -mb-1 w-full "
+      className="mobilePageHeader container flex gap-4 justify-between items-center p-1 mt-1 -mb-1 w-full "
     >
-      {props.controls ? (
-        <div className="grow">{props.controls}</div>
+      {props.controls && state === "search" ? (
+        <>
+          {props.controls}
+          <Separator classname="h-6" />
+          <button
+            onClick={() => {
+              setState("default");
+            }}
+          >
+            <CloseTiny />
+          </button>
+        </>
       ) : (
-        <div className="spacer flex-1" />
+        <>
+          <MenuSmall /> Home
+          <div className="flex-1" />
+          <button
+            onClick={() => {
+              console.log("click");
+              setState("search");
+            }}
+          >
+            <SearchSmall />
+          </button>
+          <div className="flex flex-row-reverse! gap-1">{props.actions}</div>
+        </>
       )}
-      <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 59e26789..8242583b 100644
--- a/components/PageLayouts/DashboardLayout.tsx
+++ b/components/PageLayouts/DashboardLayout.tsx
@@ -6,13 +6,6 @@ import { MobileNavigation } from "components/ActionBar/MobileNavigation";
 import { navPages } from "components/ActionBar/NavigationButtons";
 import { DesktopNavigation } from "components/ActionBar/DesktopNavigation";
 import { create } from "zustand";
-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 { MobileHeader } from "../PageHeader";
@@ -180,319 +173,3 @@ export function DashboardLayout<
   );
 }
 
-export const PageSearch = (props: {
-  searchValue: string;
-  setSearchValueAction: (searchValue: string) => void;
-  hasBackgroundImage: boolean;
-  defaultDisplay: Exclude<DashboardState["display"], undefined>;
-  hasPubs?: boolean;
-  hasArchived?: boolean;
-}) => {
-  let { display, sort } = useDashboardState();
-  display = display || props.defaultDisplay;
-  let setState = useSetDashboardState();
-  let { identity } = useIdentityData();
-
-  return (
-    <div className="dashboardControls w-full flex gap-4">
-      {identity && (
-        <SearchInput
-          searchValue={props.searchValue}
-          setSearchValue={props.setSearchValueAction}
-          hasBackgroundImage={props.hasBackgroundImage}
-        />
-      )}
-      <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) ? (
-          <>
-            <FilterOptions
-              hasPubs={props.hasPubs ?? false}
-              hasArchived={props.hasArchived ?? false}
-            />
-            <Separator classname="h-4 min-h-4!" />{" "}
-          </>
-        ) : null}
-        <SortToggle setState={setState} sort={sort} />
-      </div>
-      <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>
-  );
-};
-
-const SortToggle = (props: {
-  setState: (partial: Partial<DashboardState>) => Promise<void>;
-  sort: string | undefined;
-}) => {
-  return (
-    <button
-      onClick={() =>
-        props.setState({
-          sort: props.sort === "created" ? "alphabetical" : "created",
-        })
-      }
-    >
-      Sort: {props.sort === "created" ? "Created On" : "A to Z"}
-    </button>
-  );
-};
-
-const DisplayToggle = (props: {
-  setState: (partial: Partial<DashboardState>) => Promise<void>;
-  display: string | undefined;
-}) => {
-  return (
-    <button
-      onClick={() => {
-        props.setState({
-          display: props.display === "list" ? "grid" : "list",
-        });
-      }}
-    >
-      {props.display === "list" ? "List" : "Grid"}
-    </button>
-  );
-};
-
-const FilterOptions = (props: { hasPubs: boolean; hasArchived: boolean }) => {
-  let { filter } = useDashboardState();
-  let setState = useSetDashboardState();
-  let filterCount = Object.values(filter).filter(Boolean).length;
-
-  return (
-    <Popover
-      className="text-sm px-2! py-1!"
-      trigger={<div>Filter {filterCount > 0 && `(${filterCount})`}</div>}
-    >
-      {props.hasPubs && (
-        <>
-          <Checkbox
-            small
-            checked={filter.drafts}
-            onChange={(e) =>
-              setState({
-                filter: { ...filter, drafts: !!e.target.checked },
-              })
-            }
-          >
-            Drafts
-          </Checkbox>
-          <Checkbox
-            small
-            checked={filter.published}
-            onChange={(e) =>
-              setState({
-                filter: { ...filter, published: !!e.target.checked },
-              })
-            }
-          >
-            Published
-          </Checkbox>
-        </>
-      )}
-
-      {props.hasArchived && (
-        <Checkbox
-          small
-          checked={filter.archived}
-          onChange={(e) =>
-            setState({
-              filter: { ...filter, archived: !!e.target.checked },
-            })
-          }
-        >
-          Archived
-        </Checkbox>
-      )}
-      <Checkbox
-        small
-        checked={filter.docs}
-        onChange={(e) =>
-          setState({
-            filter: { ...filter, docs: !!e.target.checked },
-          })
-        }
-      >
-        Docs
-      </Checkbox>
-      <hr className="border-border-light mt-1 mb-0.5" />
-      <button
-        className="flex gap-1 items-center -mx-[2px] text-tertiary"
-        onClick={() => {
-          setState({
-            filter: {
-              docs: false,
-              published: false,
-              drafts: false,
-              archived: false,
-            },
-          });
-        }}
-      >
-        <CloseTiny className="scale-75" /> Clear
-      </button>
-    </Popover>
-  );
-};
-
-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;
-  hasBackgroundImage: boolean;
-}) => {
-  return (
-    <div className="relative grow shrink-0">
-      <Input
-        className={`dashboardSearchInput
-          appearance-none! outline-hidden!
-          w-full min-w-0 text-primary relative pl-7  pr-1 -my-px
-          border rounded-md border-border-light focus-within:border-border
-          bg-transparent ${props.hasBackgroundImage ? "focus-within:bg-bg-page" : "focus-within:bg-bg-leaflet"} `}
-        type="text"
-        id="pubName"
-        size={1}
-        placeholder="search..."
-        value={props.searchValue}
-        onChange={(e) => {
-          props.setSearchValue(e.currentTarget.value);
-        }}
-      />
-      <div className="absolute left-[6px] top-[4px] text-tertiary">
-        <SearchTiny />
-      </div>
-    </div>
-  );
-};
diff --git a/components/PageLayouts/PageSearch.tsx b/components/PageLayouts/PageSearch.tsx
new file mode 100644
index 00000000..22b474c4
--- /dev/null
+++ b/components/PageLayouts/PageSearch.tsx
@@ -0,0 +1,277 @@
+"use client";
+import { Popover } from "components/Popover";
+import { Checkbox } from "components/Checkbox";
+import { Separator } from "components/Layout";
+import { CloseTiny } from "components/Icons/CloseTiny";
+import { Input } from "components/Input";
+import { SearchTiny } from "components/Icons/SearchTiny";
+import { useIdentityData } from "components/IdentityProvider";
+import { SortSmall } from "components/Icons/SortSmall";
+import {
+  DashboardState,
+  useDashboardState,
+  useSetDashboardState,
+} from "./DashboardLayout";
+
+export const PageSearch = (props: {
+  searchValue: string;
+  setSearchValueAction: (searchValue: string) => void;
+  hasBackgroundImage: boolean;
+  defaultDisplay: Exclude<DashboardState["display"], undefined>;
+  hasPubs?: boolean;
+  hasArchived?: boolean;
+}) => {
+  let { display, sort } = useDashboardState();
+  display = display || props.defaultDisplay;
+  let setState = useSetDashboardState();
+  let { identity } = useIdentityData();
+
+  return (
+    <div className="dashboardControls w-full flex sm:gap-4 gap-2">
+      {identity && (
+        <SearchInput
+          searchValue={props.searchValue}
+          setSearchValue={props.setSearchValueAction}
+          hasBackgroundImage={props.hasBackgroundImage}
+        />
+      )}
+      <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 ? (
+          <>
+            <FilterOptions
+              hasPubs={props.hasPubs ?? false}
+              hasArchived={props.hasArchived ?? false}
+            />
+            <Separator classname="h-4 min-h-4!" />{" "}
+          </>
+        ) : null}
+        <SortToggle setState={setState} sort={sort} />
+      </div>
+      <div className="flex sm:hidden w-max shrink-0 items-center text-sm text-tertiary">
+        <MobileSearchControls
+          display={display}
+          sort={sort}
+          setState={setState}
+          hasPubs={props.hasPubs}
+          hasArchived={props.hasArchived}
+        />
+      </div>
+    </div>
+  );
+};
+
+const SortToggle = (props: {
+  setState: (partial: Partial<DashboardState>) => Promise<void>;
+  sort: string | undefined;
+}) => {
+  return (
+    <button
+      onClick={() =>
+        props.setState({
+          sort: props.sort === "created" ? "alphabetical" : "created",
+        })
+      }
+    >
+      Sort: {props.sort === "created" ? "Created On" : "A to Z"}
+    </button>
+  );
+};
+
+const DisplayToggle = (props: {
+  setState: (partial: Partial<DashboardState>) => Promise<void>;
+  display: string | undefined;
+}) => {
+  return (
+    <button
+      onClick={() => {
+        props.setState({
+          display: props.display === "list" ? "grid" : "list",
+        });
+      }}
+    >
+      {props.display === "list" ? "List" : "Grid"}
+    </button>
+  );
+};
+
+const FilterCheckboxes = (props: {
+  hasPubs: boolean;
+  hasArchived: boolean;
+}) => {
+  let { filter } = useDashboardState();
+  let setState = useSetDashboardState();
+  let filterCount = Object.values(filter).filter(Boolean).length;
+
+  return (
+    <>
+      {props.hasPubs && (
+        <>
+          <Checkbox
+            small
+            checked={filter.drafts}
+            onChange={(e) =>
+              setState({ filter: { ...filter, drafts: !!e.target.checked } })
+            }
+          >
+            Drafts
+          </Checkbox>
+          <Checkbox
+            small
+            checked={filter.published}
+            onChange={(e) =>
+              setState({
+                filter: { ...filter, published: !!e.target.checked },
+              })
+            }
+          >
+            Published
+          </Checkbox>
+        </>
+      )}
+      {props.hasArchived && (
+        <Checkbox
+          small
+          checked={filter.archived}
+          onChange={(e) =>
+            setState({ filter: { ...filter, archived: !!e.target.checked } })
+          }
+        >
+          Archived
+        </Checkbox>
+      )}
+      <Checkbox
+        small
+        checked={filter.docs}
+        onChange={(e) =>
+          setState({ filter: { ...filter, docs: !!e.target.checked } })
+        }
+      >
+        Docs
+      </Checkbox>
+
+      <hr className="border-border-light border-dashed mt-1 mb-0.5" />
+      <button
+        className="flex gap-1 items-center -mx-[2px] text-tertiary"
+        onClick={() =>
+          setState({
+            filter: {
+              docs: false,
+              published: false,
+              drafts: false,
+              archived: false,
+            },
+          })
+        }
+      >
+        <CloseTiny className="scale-75" /> Clear
+      </button>
+    </>
+  );
+};
+
+const FilterOptions = (props: { hasPubs: boolean; hasArchived: boolean }) => {
+  let { filter } = useDashboardState();
+  let filterCount = Object.values(filter).filter(Boolean).length;
+
+  return (
+    <Popover
+      className="text-sm px-2! py-1!"
+      trigger={<div>Filter {filterCount > 0 && `(${filterCount})`}</div>}
+    >
+      <FilterCheckboxes
+        hasPubs={props.hasPubs}
+        hasArchived={props.hasArchived}
+      />
+    </Popover>
+  );
+};
+
+const MobileSearchControls = (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 w-48"
+      trigger={
+        <SortSmall className={filterCount > 0 ? "text-accent-contrast" : ""} />
+      }
+    >
+      <button
+        className="w-full flex justify-between font-bold"
+        onClick={() =>
+          props.setState({
+            display: props.display === "list" ? "grid" : "list",
+          })
+        }
+      >
+        <div className="text-sm text-tertiary font-normal uppercase">
+          Display
+        </div>
+        {props.display === "list" ? "List" : "Grid"}
+      </button>
+      <hr className="border-border-light my-1" />
+      <button
+        className="w-full flex justify-between font-bold"
+        onClick={() =>
+          props.setState({
+            sort: props.sort === "created" ? "alphabetical" : "created",
+          })
+        }
+      >
+        <div className="text-sm text-tertiary font-normal uppercase">Sort</div>
+        {props.sort === "created" ? "Created On" : "A to Z"}
+      </button>
+      {(props.hasPubs || props.hasArchived) && (
+        <>
+          <hr className="border-border-light my-1" />
+          <div className="text-sm text-tertiary font-normal uppercase">
+            Filter
+          </div>
+          <FilterCheckboxes
+            hasPubs={props.hasPubs ?? false}
+            hasArchived={props.hasArchived ?? false}
+          />
+        </>
+      )}
+    </Popover>
+  );
+};
+
+const SearchInput = (props: {
+  searchValue: string;
+  setSearchValue: (searchValue: string) => void;
+  hasBackgroundImage: boolean;
+}) => {
+  return (
+    <div className="relative grow shrink-0">
+      <Input
+        className={`dashboardSearchInput
+          appearance-none! outline-hidden!
+          w-full min-w-0 text-primary relative pl-7 pr-1 -my-px
+          border rounded-md border-border-light focus-within:border-border
+          bg-transparent ${props.hasBackgroundImage ? "focus-within:bg-bg-page" : "focus-within:bg-bg-leaflet"} `}
+        type="text"
+        id="pubName"
+        size={1}
+        placeholder="search..."
+        value={props.searchValue}
+        onChange={(e) => {
+          props.setSearchValue(e.currentTarget.value);
+        }}
+      />
+      <div className="absolute left-[6px] top-[4px] text-tertiary">
+        <SearchTiny />
+      </div>
+    </div>
+  );
+};