diff --git a/actions/getIdentityData.ts b/actions/getIdentityData.ts
index 97e0fc14..b2968f8a 100644
--- a/actions/getIdentityData.ts
+++ b/actions/getIdentityData.ts
@@ -25,7 +25,7 @@ export async function getIdentityData() {
                 id,
                 root_entity,
                 permission_token_rights(*),
-                leaflets_in_publications(*, publications(*))
+                leaflets_in_publications(*, publications(*), documents(*))
               )
             )
           )`,
diff --git a/actions/updateIdentityInterfaceState.ts b/actions/updateIdentityInterfaceState.ts
new file mode 100644
index 00000000..5ed8cbc7
--- /dev/null
+++ b/actions/updateIdentityInterfaceState.ts
@@ -0,0 +1,16 @@
+"use server";
+
+import { InterfaceState } from "components/IdentityProvider";
+import { getIdentityData } from "./getIdentityData";
+import { supabaseServerClient } from "supabase/serverClient";
+
+export async function updateIdentityInterfaceState(
+  interfaceState: InterfaceState,
+) {
+  let identity = await getIdentityData();
+  if (!identity) return;
+  await supabaseServerClient
+    .from("identities")
+    .update({ interface_state: interfaceState })
+    .eq("id", identity.id);
+}
diff --git a/app/[leaflet_id]/Actions.tsx b/app/[leaflet_id]/Actions.tsx
index 9d6d5df6..ebb6c89f 100644
--- a/app/[leaflet_id]/Actions.tsx
+++ b/app/[leaflet_id]/Actions.tsx
@@ -27,7 +27,7 @@ export const BackToPubButton = (props: {
   return (
     <SpeedyLink
       href={`${getBasePublicationURL(props.publication)}/dashboard`}
-      className="hover:!no-underline"
+      className="hover:no-underline!"
     >
       <ActionButton
         icon={<GoBackSmall className="shrink-0" />}
diff --git a/app/[leaflet_id]/page.tsx b/app/[leaflet_id]/page.tsx
index 4468340b..81376965 100644
--- a/app/[leaflet_id]/page.tsx
+++ b/app/[leaflet_id]/page.tsx
@@ -12,6 +12,7 @@ import { PageSWRDataProvider } from "components/PageSWRDataProvider";
 import { getPollData } from "actions/pollActions";
 import { supabaseServerClient } from "supabase/serverClient";
 import { get_leaflet_data } from "app/api/rpc/[command]/get_leaflet_data";
+import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
 
 export const preferredRegion = ["sfo1"];
 export const dynamic = "force-dynamic";
@@ -29,20 +30,13 @@ export default async function LeafletPage(props: Props) {
   let rootEntity = res.data?.root_entity;
   if (!rootEntity || !res.data || res.data.blocked_by_admin)
     return (
-      <div className="w-screen h-full flex place-items-center bg-bg-leaflet">
-        <div className="bg-bg-page mx-auto p-4 border border-border rounded-md flex flex-col text-center justify-center gap-1 w-fit">
-          <div className="font-bold">
-            Hmmm…we couldn&apos;t find that Leaflet.
-          </div>
-          <div>
-            You can{" "}
-            <a href="mailto:contact@leaflet.pub" target="blank">
-              email us
-            </a>{" "}
-            for help!
-          </div>
-        </div>
-      </div>
+      <NotFoundLayout>
+        <p className="font-bold">Sorry, we can't find this leaflet!</p>
+        <p>
+          This may be a glitch on our end. If the issue persists please{" "}
+          <a href="mailto:contact@leaflet.pub">send us a note</a>.
+        </p>
+      </NotFoundLayout>
     );
 
   let [{ data }, rsvp_data, poll_data] = await Promise.all([
diff --git a/app/[leaflet_id]/publish/PublishIllustration/PublishIllustration.tsx b/app/[leaflet_id]/publish/PublishIllustration/PublishIllustration.tsx
index ee414535..df421612 100644
--- a/app/[leaflet_id]/publish/PublishIllustration/PublishIllustration.tsx
+++ b/app/[leaflet_id]/publish/PublishIllustration/PublishIllustration.tsx
@@ -78,8 +78,6 @@ export const PublishIllustration = (props: { posts_in_pub: number }) => {
           Math.pow((isPlanet ? y + 14 : y) - (moonPosY + 41), 2),
       );
       if (moonDistance < 60) {
-        console.log("moon collision!");
-
         return true;
       }
 
@@ -90,8 +88,6 @@ export const PublishIllustration = (props: { posts_in_pub: number }) => {
             Math.pow(y - (isPlanet ? star.y + 14 : star.y), 2),
         );
         if (starDistance < 40) {
-          console.log("star collision!");
-
           return true;
         }
       }
@@ -147,7 +143,6 @@ export const PublishIllustration = (props: { posts_in_pub: number }) => {
           y: y,
           rot: Math.random() * 360,
         });
-        console.log("planet : " + type);
       }
       // the first, fouth, and seventh stars are large stars
       else if (
@@ -156,7 +151,6 @@ export const PublishIllustration = (props: { posts_in_pub: number }) => {
         i === numberOfPlanets + 6
       ) {
         let type = Math.floor(Math.random() * 4);
-        console.log("big star : " + type);
         stars.push({
           type:
             type === 0
@@ -172,7 +166,6 @@ export const PublishIllustration = (props: { posts_in_pub: number }) => {
         });
       } else {
         let type = Math.floor(Math.random() * 3);
-        console.log("small star : " + type);
 
         stars.push({
           type: type === 0 ? "S1" : type === 1 ? "S2" : "S3",
@@ -181,7 +174,6 @@ export const PublishIllustration = (props: { posts_in_pub: number }) => {
           rot: Math.random() * 360,
         });
       }
-      console.log("planetcount : " + JSON.stringify(planetCounter));
     }
   }
   // animate the last child
diff --git a/app/[leaflet_id]/publish/PublishPost.tsx b/app/[leaflet_id]/publish/PublishPost.tsx
index d1aad4f3..10bd8499 100644
--- a/app/[leaflet_id]/publish/PublishPost.tsx
+++ b/app/[leaflet_id]/publish/PublishPost.tsx
@@ -133,7 +133,7 @@ const PublishPostForm = (
           <div
             className={`w-full pl-5 pb-4 ${shareOption !== "bluesky" ? "opacity-50" : ""}`}
           >
-            <div className="opaque-container p-3  !rounded-lg">
+            <div className="opaque-container p-3  rounded-lg!">
               <div className="flex gap-2">
                 <img
                   className="bg-test rounded-full w-[42px] h-[42px] shrink-0"
@@ -173,7 +173,7 @@ const PublishPostForm = (
           </div>
           <div className="flex justify-between">
             <Link
-              className="hover:!no-underline font-bold"
+              className="hover:no-underline! font-bold"
               href={`/${params.leaflet_id}`}
             >
               Back
@@ -200,7 +200,7 @@ const PublishPostSuccess = (props: {
       <PublishIllustration posts_in_pub={props.posts_in_pub} />
       <h2 className="pt-2">Published!</h2>
       <Link
-        className="hover:!no-underline font-bold place-self-center pt-2"
+        className="hover:no-underline! font-bold place-self-center pt-2"
         href={`/lish/${uri.host}/${encodeURIComponent(props.record?.name || "")}/dashboard`}
       >
         <ButtonPrimary>Back to Dashboard</ButtonPrimary>
diff --git a/app/[leaflet_id]/publish/page.tsx b/app/[leaflet_id]/publish/page.tsx
index fd09533d..578afb69 100644
--- a/app/[leaflet_id]/publish/page.tsx
+++ b/app/[leaflet_id]/publish/page.tsx
@@ -1,5 +1,4 @@
 import { supabaseServerClient } from "supabase/serverClient";
-import { get_leaflet_data } from "app/api/rpc/[command]/get_leaflet_data";
 import { PublishPost } from "./PublishPost";
 import { PubLeafletPublication } from "lexicons/api";
 import { getIdentityData } from "actions/getIdentityData";
@@ -15,36 +14,42 @@ type Props = {
   // this is now a token id not leaflet! Should probs rename
   params: Promise<{ leaflet_id: string }>;
 };
-export default async function LeafletPage(props: Props) {
+export default async function PublishLeafletPage(props: Props) {
   let leaflet_id = (await props.params).leaflet_id;
-  let { result: res } = await get_leaflet_data.handler(
-    { token_id: leaflet_id },
-    { supabase: supabaseServerClient },
-  );
-  let rootEntity = res.data?.root_entity;
-  if (
-    !rootEntity ||
-    !res.data ||
-    res.data.blocked_by_admin ||
-    !res.data.leaflets_in_publications[0]
-  )
+  let { data } = await supabaseServerClient
+    .from("permission_tokens")
+    .select(
+      `*,
+      permission_token_rights(*),
+       leaflets_in_publications(
+         *,
+         publications(
+           *,
+           documents_in_publications(count)
+         ),
+       documents(*))`,
+    )
+    .eq("id", leaflet_id)
+    .single();
+  let rootEntity = data?.root_entity;
+  if (!data || !rootEntity || !data.leaflets_in_publications[0])
     return (
       <div>
         missin something
-        <pre>{JSON.stringify(res.data, undefined, 2)}</pre>
+        <pre>{JSON.stringify(data, undefined, 2)}</pre>
       </div>
     );
 
   let identity = await getIdentityData();
   if (!identity || !identity.atp_did) return null;
-  let pub = res.data.leaflets_in_publications[0];
+  let pub = data.leaflets_in_publications[0];
   let agent = new AtpAgent({ service: "https://public.api.bsky.app" });
 
   let profile = await agent.getProfile({ actor: identity.atp_did });
   return (
     <ReplicacheProvider
       rootEntity={rootEntity}
-      token={res.data}
+      token={data}
       name={rootEntity}
       initialFacts={[]}
     >
diff --git a/app/api/rpc/[command]/getFactsFromHomeLeaflets.ts b/app/api/rpc/[command]/getFactsFromHomeLeaflets.ts
index f4baacd8..cfb49308 100644
--- a/app/api/rpc/[command]/getFactsFromHomeLeaflets.ts
+++ b/app/api/rpc/[command]/getFactsFromHomeLeaflets.ts
@@ -3,6 +3,11 @@ import type { Fact } from "src/replicache";
 import type { Attribute } from "src/replicache/attributes";
 import { makeRoute } from "../lib";
 import type { Env } from "./route";
+import { scanIndexLocal } from "src/replicache/utils";
+import { getBlocksWithTypeLocal } from "src/hooks/queries/useBlocks";
+import * as base64 from "base64-js";
+import { YJSFragmentToString } from "components/Blocks/TextBlock/RenderYJSFragment";
+import { applyUpdate, Doc } from "yjs";
 
 export const getFactsFromHomeLeaflets = makeRoute({
   route: "getFactsFromHomeLeaflets",
@@ -16,15 +21,39 @@ export const getFactsFromHomeLeaflets = makeRoute({
     });
 
     if (all_facts.data) {
+      let titles = {} as { [key: string]: string };
+
+      let facts = all_facts.data.reduce(
+        (acc, fact) => {
+          if (!acc[fact.root_id]) acc[fact.root_id] = [];
+          acc[fact.root_id].push(fact as unknown as Fact<Attribute>);
+          return acc;
+        },
+        {} as { [key: string]: Fact<Attribute>[] },
+      );
+      for (let token of tokens) {
+        let scan = scanIndexLocal(facts[token]);
+        let [root] = scan.eav(token, "root/page");
+        let rootEntity = root?.data.value || token;
+        let [title] = getBlocksWithTypeLocal(facts[token], rootEntity).filter(
+          (b) => b.type === "text" || b.type === "heading",
+        );
+        if (!title) titles[token] = "Untitled";
+        else {
+          let [content] = scan.eav(title.value, "block/text");
+          if (!content) titles[token] = "Untitled";
+          else {
+            let doc = new Doc();
+            const update = base64.toByteArray(content.data.value);
+            applyUpdate(doc, update);
+            let nodes = doc.getXmlElement("prosemirror").toArray();
+            let stringValue = YJSFragmentToString(nodes[0]);
+            titles[token] = stringValue;
+          }
+        }
+      }
       return {
-        result: all_facts.data.reduce(
-          (acc, fact) => {
-            if (!acc[fact.root_id]) acc[fact.root_id] = [];
-            acc[fact.root_id].push(fact as unknown as Fact<Attribute>);
-            return acc;
-          },
-          {} as { [key: string]: Fact<Attribute>[] },
-        ),
+        result: { facts, titles },
       };
     }
 
diff --git a/app/api/rpc/[command]/get_leaflet_data.ts b/app/api/rpc/[command]/get_leaflet_data.ts
index 874018f5..e8390b9e 100644
--- a/app/api/rpc/[command]/get_leaflet_data.ts
+++ b/app/api/rpc/[command]/get_leaflet_data.ts
@@ -6,7 +6,7 @@ export type GetLeafletDataReturnType = Awaited<
   ReturnType<(typeof get_leaflet_data)["handler"]>
 >;
 
-const leaflets_in_publications_query = `leaflets_in_publications(*, publications(*, documents_in_publications(count)), documents(*))`;
+const leaflets_in_publications_query = `leaflets_in_publications(*, publications(*), documents(*))`;
 export const get_leaflet_data = makeRoute({
   route: "get_leaflet_data",
   input: z.object({
diff --git a/app/api/rpc/[command]/get_publication_data.ts b/app/api/rpc/[command]/get_publication_data.ts
index baa775c4..8af7dc5b 100644
--- a/app/api/rpc/[command]/get_publication_data.ts
+++ b/app/api/rpc/[command]/get_publication_data.ts
@@ -2,6 +2,7 @@ import { z } from "zod";
 import { makeRoute } from "../lib";
 import type { Env } from "./route";
 import { AtUri } from "@atproto/syntax";
+import { getFactsFromHomeLeaflets } from "./getFactsFromHomeLeaflets";
 
 export type GetPublicationDataReturnType = Awaited<
   ReturnType<(typeof get_publication_data)["handler"]>
@@ -36,6 +37,7 @@ export const get_publication_data = makeRoute({
         publication_subscriptions(*, identities(bsky_profiles(*))),
         publication_domains(*),
         leaflets_in_publications(*,
+          documents(*),
           permission_tokens(*,
             permission_token_rights(*),
             custom_domain_routes!custom_domain_routes_edit_permission_token_fkey(*)
@@ -46,6 +48,16 @@ export const get_publication_data = makeRoute({
       .eq("identity_did", did)
       .single();
 
-    return { result: publication };
+    let leaflet_data = await getFactsFromHomeLeaflets.handler(
+      {
+        tokens:
+          publication?.leaflets_in_publications.map(
+            (l) => l.permission_tokens?.root_entity!,
+          ) || [],
+      },
+      { supabase },
+    );
+
+    return { result: { publication, leaflet_data: leaflet_data.result } };
   },
 });
diff --git a/app/discover/PubListing.tsx b/app/discover/PubListing.tsx
index 16132adf..c8c9d741 100644
--- a/app/discover/PubListing.tsx
+++ b/app/discover/PubListing.tsx
@@ -4,6 +4,7 @@ import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
 import { BaseThemeProvider } from "components/ThemeManager/ThemeProvider";
 import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api";
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
+import { timeAgo } from "src/utils/timeAgo";
 import { Json } from "supabase/database.types";
 
 export const PubListing = (props: {
@@ -35,7 +36,7 @@ export const PubListing = (props: {
           backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
           backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`,
         }}
-        className={`!no-underline flex flex-row gap-2
+        className={`no-underline! flex flex-row gap-2
           bg-bg-leaflet
           border border-border-light rounded-lg
           px-3 py-3 selected-outline
@@ -69,26 +70,3 @@ export const PubListing = (props: {
     </BaseThemeProvider>
   );
 };
-
-export function timeAgo(timestamp: string): string {
-  const now = new Date();
-  const date = new Date(timestamp);
-  const diffMs = now.getTime() - date.getTime();
-  const diffSeconds = Math.floor(diffMs / 1000);
-  const diffMinutes = Math.floor(diffSeconds / 60);
-  const diffHours = Math.floor(diffMinutes / 60);
-  const diffDays = Math.floor(diffHours / 24);
-  const diffYears = Math.floor(diffDays / 365);
-
-  if (diffYears > 0) {
-    return `${diffYears} year${diffYears === 1 ? "" : "s"} ago`;
-  } else if (diffDays > 0) {
-    return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
-  } else if (diffHours > 0) {
-    return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
-  } else if (diffMinutes > 0) {
-    return `${diffMinutes} minute${diffMinutes === 1 ? "" : "s"} ago`;
-  } else {
-    return "just now";
-  }
-}
diff --git a/app/discover/SortedPublicationList.tsx b/app/discover/SortedPublicationList.tsx
index 438dcf01..d2c4ce74 100644
--- a/app/discover/SortedPublicationList.tsx
+++ b/app/discover/SortedPublicationList.tsx
@@ -26,7 +26,6 @@ export function SortedPublicationList(props: {
           ?.filter((pub) => pub.documents_in_publications.length > 0)
           ?.sort((a, b) => {
             if (order === "popular") {
-              console.log("sorting by popularity");
               return (
                 b.publication_subscriptions[0].count -
                 a.publication_subscriptions[0].count
diff --git a/app/discover/page.tsx b/app/discover/page.tsx
index 1b17da40..7ae75c98 100644
--- a/app/discover/page.tsx
+++ b/app/discover/page.tsx
@@ -2,6 +2,7 @@ import { supabaseServerClient } from "supabase/serverClient";
 import Link from "next/link";
 import { SortedPublicationList } from "./SortedPublicationList";
 import { Metadata } from "next";
+import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
 
 export const dynamic = "force-static";
 export const revalidate = 60;
@@ -36,17 +37,37 @@ export default async function Discover(props: {
   let publications = await getPublications();
 
   return (
-    <div className="bg-[#FDFCFA] w-full h-full overflow-scroll">
-      <div className="max-w-prose mx-auto sm:py-6 py-4 px-4">
-        <div className="discoverHeader flex flex-col items-center px-4">
-          <h1>Discover</h1>
-          <p className="text-lg text-secondary italic mb-2">
-            Explore publications on Leaflet ✨ Or{" "}
-            <Link href="/lish/createPub">make your own</Link>!
-          </p>
-        </div>
-        <SortedPublicationList publications={publications} order={order} />
-      </div>
+    <div className="w-full h-full mx-auto bg-[#FDFCFA]">
+      <DashboardLayout
+        id="discover"
+        hasBackgroundImage={false}
+        currentPage="discover"
+        defaultTab="default"
+        actions={null}
+        tabs={{
+          default: {
+            controls: null,
+            content: <DiscoverContent order={order} />,
+          },
+        }}
+      />
     </div>
   );
 }
+
+const DiscoverContent = async (props: { order: string }) => {
+  let publications = await getPublications();
+
+  return (
+    <div className="max-w-prose mx-auto">
+      <div className="discoverHeader flex flex-col items-center text-center pt-2 px-4">
+        <h1>Discover</h1>
+        <p className="text-lg text-secondary italic mb-2">
+          Explore publications on Leaflet ✨ Or{" "}
+          <Link href="/lish/createPub">make your own</Link>!
+        </p>
+      </div>
+      <SortedPublicationList publications={publications} order={props.order} />
+    </div>
+  );
+};
diff --git a/app/globals.css b/app/globals.css
index 264fae81..e617633c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,6 +1,88 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme inline {
+  --breakpoint-*: initial;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 960px;
+  --breakpoint-lg: 1280px;
+
+  --radius-*: initial;
+  --radius-none: 0;
+  --radius-md: 0.25rem;
+  --radius-lg: 0.5rem;
+  --radius-full: 9999px;
+
+  --color-*: initial;
+  --color-inherit: inherit;
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-primary: rgb(var(--primary));
+  --color-secondary: color-mix(
+    in oklab,
+    rgb(var(--primary)),
+    rgb(var(--bg-page)) 25%
+  );
+  --color-tertiary: color-mix(
+    in oklab,
+    rgb(var(--primary)),
+    rgb(var(--bg-page)) 55%
+  );
+  --color-border: color-mix(
+    in oklab,
+    rgb(var(--primary)),
+    rgb(var(--bg-page)) 75%
+  );
+  --color-border-light: color-mix(
+    in oklab,
+    rgb(var(--primary)),
+    rgb(var(--bg-page)) 85%
+  );
+  --color-white: #ffffff;
+  --color-accent-1: rgb(var(--accent-1));
+  --color-accent-2: rgb(var(--accent-2));
+  --color-accent-contrast: rgb(var(--accent-contrast));
+  --color-bg-leaflet: rgb(var(--bg-leaflet));
+  --color-bg-page: rgb(var(--bg-page));
+  --color-highlight-1: var(--highlight-1);
+  --color-highlight-2: rgb(var(--highlight-2));
+  --color-highlight-3: rgb(var(--highlight-3));
+  --color-test: #e18181;
+  --color-test-blue: #48d1ef;
+
+  --text-*: initial;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.625rem;
+  --text-2xl: 2rem;
+
+  --shadow-sm: 0.9px 1.5px 1.7px -1.8px rgba(var(--primary), 0.2),
+    4.2px 6.9px 7.8px -3.5px rgba(var(--primary), 0.15);
+  --shadow-md: 1.2px 2.5px 2.7px -1.8px rgba(var(--primary), 0.1),
+    5.6px 11.6px 12.5px -3.5px rgba(var(--primary), 0.15);
+
+  --font-sans: var(--font-quattro);
+  --font-serif: Garamond;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 @layer base {
   :root {
@@ -103,10 +185,7 @@
     @apply text-accent-contrast;
     @apply hover:cursor-pointer;
     @apply no-underline;
-  }
-
-  a:hover {
-    @apply underline;
+    @apply hover:underline;
   }
 
   pre {
@@ -127,6 +206,9 @@
 
   /* END GLOBAL STYLING */
 }
+button:hover {
+  cursor: pointer;
+}
 
 blockquote {
   margin: 0;
@@ -165,10 +247,10 @@ input[type="number"] {
   font-size: 1em;
   @apply bg-border-light;
   @apply font-mono;
-  @apply px-[1px];
-  @apply py-[1px];
-  @apply -mx-[1px];
-  @apply -my-[1px];
+  @apply px-px;
+  @apply py-px;
+  @apply -mx-px;
+  @apply -my-px;
   @apply rounded-[4px];
   @apply box-decoration-clone;
 }
@@ -191,10 +273,10 @@ pre.shiki {
 }
 
 .highlight {
-  @apply px-[1px];
-  @apply py-[1px];
-  @apply -mx-[1px];
-  @apply -my-[1px];
+  @apply px-px;
+  @apply py-px;
+  @apply -mx-px;
+  @apply -my-px;
   @apply rounded-[4px];
   @apply box-decoration-clone;
 }
@@ -213,19 +295,19 @@ pre.shiki {
 }
 
 .transparent-outline {
-  @apply outline;
+  @apply outline-solid;
   @apply outline-transparent;
 }
 
 .selected-outline {
   @apply border;
-  @apply focus:outline;
+  @apply focus:outline-solid;
   @apply focus:outline-2;
   @apply focus:outline-offset-1;
-  @apply focus-within:outline;
+  @apply focus-within:outline-solid;
   @apply focus-within:outline-2;
   @apply focus-within:outline-offset-1;
-  @apply hover:outline;
+  @apply hover:outline-solid;
   @apply hover:outline-2;
   @apply hover:outline-offset-1;
 }
@@ -240,13 +322,13 @@ pre.shiki {
   @apply hover:border-tertiary;
 
   @apply focus:border-tertiary;
-  @apply focus:outline;
+  @apply focus:outline-solid;
   @apply focus:outline-tertiary;
   @apply focus:outline-2;
   @apply focus:outline-offset-1;
 
   @apply focus-within:border-tertiary;
-  @apply focus-within:outline;
+  @apply focus-within:outline-solid;
   @apply focus-within:outline-tertiary;
   @apply focus-within:outline-2;
   @apply focus-within:outline-offset-1;
@@ -260,7 +342,7 @@ pre.shiki {
   @apply border;
   @apply border-border-light;
   @apply rounded-lg;
-  @apply outline;
+  @apply outline-solid;
   @apply outline-offset-1;
   @apply outline-2;
   @apply outline-transparent;
@@ -271,7 +353,7 @@ pre.shiki {
   @apply border;
   @apply border-border;
   @apply rounded-lg;
-  @apply outline;
+  @apply outline-solid;
   @apply outline-offset-1;
   @apply outline-2;
   @apply outline-border;
diff --git a/app/home/AccountSettings.tsx b/app/home/Actions/AccountSettings.tsx
similarity index 100%
rename from app/home/AccountSettings.tsx
rename to app/home/Actions/AccountSettings.tsx
diff --git a/app/home/HomeSidebar.tsx b/app/home/Actions/Actions.tsx
similarity index 68%
rename from app/home/HomeSidebar.tsx
rename to app/home/Actions/Actions.tsx
index 1f909819..8e09c1db 100644
--- a/app/home/HomeSidebar.tsx
+++ b/app/home/Actions/Actions.tsx
@@ -3,24 +3,19 @@ import { ThemePopover } from "components/ThemeManager/ThemeSetter";
 import { CreateNewLeafletButton } from "./CreateNewButton";
 import { HelpPopover } from "components/HelpPopover";
 import { AccountSettings } from "./AccountSettings";
-import { Sidebar } from "components/ActionBar/Sidebar";
 import { useIdentityData } from "components/IdentityProvider";
 import { useReplicache } from "src/replicache";
 import { LoginActionButton } from "components/LoginButton";
-import { MyPublicationList } from "./Publications";
 
-export const HomeSidebar = () => {
+export const Actions = () => {
   let { identity } = useIdentityData();
   let { rootEntity } = useReplicache();
-
   return (
-    <Sidebar alwaysOpen className="my-6">
+    <>
       <CreateNewLeafletButton />
       {identity ? <AccountSettings /> : <LoginActionButton />}
-      <HelpPopover noShortcuts />
+      {/*<HelpPopover noShortcuts />*/}
       <ThemePopover entityID={rootEntity} home />
-      <hr className="border-bg-page" />
-      <MyPublicationList />
-    </Sidebar>
+    </>
   );
 };
diff --git a/app/home/CreateNewButton.tsx b/app/home/Actions/CreateNewButton.tsx
similarity index 99%
rename from app/home/CreateNewButton.tsx
rename to app/home/Actions/CreateNewButton.tsx
index 58605c0e..be84e719 100644
--- a/app/home/CreateNewButton.tsx
+++ b/app/home/Actions/CreateNewButton.tsx
@@ -56,7 +56,7 @@ export const CreateNewLeafletButton = (props: {}) => {
           id="new-leaflet-button"
           primary
           icon=<AddTiny className="m-1 shrink-0" />
-          label="New Doc"
+          label="New"
         />
       }
     >
diff --git a/app/home/HomeHelp.tsx b/app/home/Actions/HomeHelp.tsx
similarity index 100%
rename from app/home/HomeHelp.tsx
rename to app/home/Actions/HomeHelp.tsx
diff --git a/app/home/HomeEmpty/DiscoverIllo.tsx b/app/home/HomeEmpty/DiscoverIllo.tsx
new file mode 100644
index 00000000..edb6f40c
--- /dev/null
+++ b/app/home/HomeEmpty/DiscoverIllo.tsx
@@ -0,0 +1,26 @@
+import { theme } from "tailwind.config";
+export const DiscoverIllo = () => {
+  return (
+    <svg
+      className="mx-auto"
+      width="40"
+      height="48"
+      viewBox="0 0 40 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M27.995 7.21895C28.3796 6.88667 30.0087 5.46507 30.4 2.87748C30.7913 0.289891 32.8883 0.607118 32.497 3.19459C32.1056 5.78206 32.9051 7.53471 33.1993 8.00597C33.4935 8.47722 33.9112 9.87785 36.1378 10.2148C38.3645 10.5518 38.0167 12.8516 35.79 12.5149C33.5633 12.1782 33.0608 13.1244 32.3297 13.7561C31.5986 14.3878 30.6667 15.3456 30.2851 17.8686C29.9036 20.3915 27.7969 20.1388 28.1882 17.5515C28.5795 14.9641 27.5024 13.2044 27.3795 13.0075C27.2565 12.8106 25.9473 11.0264 24.2028 10.7626C22.4582 10.4988 22.8231 8.2013 24.5506 8.46255C26.2782 8.72381 27.6104 7.55122 27.995 7.21895Z"
+        fill={theme.colors["accent-2"]}
+      />
+      <path
+        d="M14.0436 10.775C14.8742 10.425 15.789 10.2979 16.6757 10.4806C21.184 11.9238 25.7155 13.2951 30.2265 14.7299C33.7072 15.8375 35.1769 19.9862 33.9774 23.7289C32.7772 27.472 29.1634 30.0064 25.682 28.8996C25.0272 28.6913 24.4433 28.376 23.9352 27.9753C24.0578 29.8258 23.5966 31.7973 22.5415 33.5507C20.1175 37.5776 15.2021 39.3975 11.4706 37.17C10.3639 36.5092 9.64595 35.5804 8.92715 34.5472L2.07416 24.6709C1.57874 23.7422 1.40352 22.6478 1.46822 21.605C0.876338 21.6639 0.331032 21.2463 0.234179 20.6453C0.0915272 19.7582 0.253475 18.7713 0.683459 17.8694C1.10716 16.981 1.75459 16.2504 2.51161 15.8132C3.26248 15.3796 4.24046 15.1818 5.15852 15.6351C5.4442 15.7762 5.64396 16.0231 5.73785 16.3048C6.85704 16.0396 7.98533 16.1226 8.87394 16.3813L9.25524 16.5079L9.2715 16.5153L9.8597 16.7611C10.0213 16.6144 10.2168 16.4391 10.4346 16.2548C10.6319 16.0878 10.8582 15.906 11.0967 15.7234C10.6482 15.6994 10.2675 15.3614 10.21 14.9021C10.0757 13.8176 10.3941 12.7515 10.9253 11.951C11.4368 11.1802 12.2818 10.4694 13.3165 10.4497C13.6068 10.4444 13.8663 10.5731 14.0436 10.775ZM19.2798 23.5847C16.693 22.2682 13.0521 23.4364 11.0819 26.7095C9.04105 30.1008 9.84611 34.0029 12.4431 35.5539C15.0407 37.1046 18.8789 35.9739 20.9203 32.5822C22.8879 29.3123 22.2072 25.5671 19.8281 23.9129L19.2798 23.5847ZM12.5066 27.9296C13.8894 25.2252 16.6958 23.8876 18.7744 24.9417C20.8524 25.9961 21.1485 29.4309 20.0335 31.7462C18.9185 34.0614 15.8458 35.7888 13.7672 34.7356C11.6887 33.6815 11.1239 30.6341 12.5066 27.9296ZM18.863 29.3824C18.4624 29.2737 18.0443 29.5112 17.9305 29.9137C17.5451 31.2786 16.6274 32.2476 15.4816 32.5145C15.0747 32.6093 14.8171 33.0162 14.9067 33.4227C14.9968 33.8287 15.4001 34.0811 15.8067 33.9864C17.6111 33.5659 18.8818 32.0851 19.3832 30.3097C19.4968 29.907 19.2635 29.4916 18.863 29.3824ZM8.3153 18.1814C6.98035 17.7934 5.02731 18.0142 3.96143 19.774C3.02036 21.3284 3.35247 23.0216 3.70427 23.7054L8.0744 30.005C8.19007 28.557 8.65007 27.0839 9.45919 25.7395C10.78 23.5456 12.8405 22.0084 15.0456 21.4225L13.8072 20.8264L13.7998 20.8234L12.0263 19.9506C11.9598 19.9179 11.9009 19.8749 11.846 19.8299L9.65871 18.7201L8.57393 18.2668L8.3153 18.1814ZM19.0995 26.5799C18.8494 26.2497 18.3773 26.1876 18.0443 26.4416C17.7113 26.6963 17.6434 27.1707 17.8935 27.5013C17.9343 27.5552 17.977 27.6287 18.0132 27.7089C18.0501 27.7907 18.07 27.8577 18.0768 27.8914C18.1585 28.2993 18.5552 28.5591 18.9635 28.4728C19.3719 28.3861 19.6373 27.986 19.5562 27.5779C19.4936 27.265 19.3269 26.8805 19.0995 26.5799ZM29.6516 16.5241C27.4753 15.8319 24.7243 17.3802 23.7327 20.4717C22.7415 23.5634 24.082 26.4132 26.2584 27.1054C28.4347 27.7968 31.1846 26.2478 32.1759 23.1564C33.1666 20.0654 31.8272 17.217 29.6516 16.5241ZM25.0864 20.9088C25.8644 18.6948 27.8745 17.3801 29.5763 17.9724C31.2782 18.5655 31.8625 21.1674 31.2492 23.0563C30.6358 24.9452 28.4614 26.5857 26.7594 25.9927C25.0576 25.3994 24.3085 23.1233 25.0864 20.9088ZM30.1039 21.3842C29.7952 21.3437 29.5093 21.5623 29.4654 21.8729C29.3114 22.9627 28.7055 23.8052 27.8486 24.1307C27.5561 24.2419 27.4059 24.5693 27.5131 24.8623C27.6207 25.1552 27.9446 25.3027 28.2373 25.192C29.5689 24.6865 30.387 23.4274 30.5857 22.0201C30.6291 21.7096 30.4126 21.4251 30.1039 21.3842ZM16.2087 12.3087C15.6227 12.192 14.6928 12.3931 13.9963 12.9887C13.5732 13.3506 13.2385 13.8583 13.1584 14.5459C13.1767 14.5393 13.1948 14.5317 13.213 14.5253C13.7448 14.3389 14.2572 14.2221 14.6318 14.1515C14.8204 14.1159 14.9777 14.0907 15.09 14.0749C15.3279 14.0415 15.553 14.0285 15.7831 14.1367L20.1739 16.2018C20.4022 16.3094 20.5779 16.5046 20.6616 16.7419C20.7451 16.9794 20.7295 17.2415 20.6188 17.4676C20.0298 18.6703 19.6797 19.9843 19.6168 21.5873L20.1887 21.9303C20.3029 21.99 20.4164 22.0532 20.5286 22.1202C20.8892 22.3354 21.2207 22.5792 21.5247 22.8458C21.4865 21.8762 21.6184 20.8729 21.9311 19.8976C22.5837 17.8636 23.9491 16.1876 25.6185 15.2583L16.2087 12.3087ZM29.9842 19.2073C29.7647 18.9869 29.4064 18.9891 29.1846 19.2117C28.9637 19.4344 28.9614 19.7935 29.1802 20.0139C29.2181 20.052 29.2604 20.1041 29.2969 20.1626C29.334 20.222 29.3556 20.2728 29.3649 20.2995C29.4667 20.5942 29.7886 20.7483 30.0832 20.6439C30.378 20.5386 30.5364 20.2134 30.4349 19.9182C30.3553 19.6875 30.1879 19.4123 29.9842 19.2073ZM18.1891 18.5259C17.7543 18.6688 17.3359 18.813 17.0378 18.938C16.7617 19.0538 16.3329 19.3654 15.8895 19.7357L17.7842 20.6483C17.8606 19.8991 17.9962 19.1952 18.1891 18.5259ZM14.9836 16.0031C14.6688 16.0624 14.2552 16.1582 13.8411 16.3033C13.6711 16.3629 13.5046 16.4296 13.3475 16.5035C12.8795 16.7239 12.263 17.1843 11.71 17.6486L14.054 18.8379C14.1789 18.7233 14.3197 18.5926 14.4737 18.4596C14.9623 18.0377 15.6797 17.4632 16.3048 17.2012C16.554 17.0967 16.8576 16.9855 17.1753 16.8759L15.2333 15.9604C15.1623 15.9716 15.0778 15.9853 14.9836 16.0031Z"
+        fill={theme.colors["accent-1"]}
+      />
+      <path
+        d="M10.8586 38.4374C11.0345 38.0999 11.7756 36.6608 11.3198 34.7706C10.8641 32.8804 12.4238 32.5044 12.8795 34.3945C13.3352 36.2847 14.3902 37.2634 14.7294 37.5041C15.0687 37.7448 15.7567 38.5896 17.4129 38.1905C19.0691 37.7913 19.4742 39.4713 17.818 39.8706C16.1619 40.27 16.0766 41.063 15.7422 41.7045C15.4079 42.346 15.0247 43.2688 15.4691 45.1118C15.9135 46.9548 14.3652 47.3779 13.9094 45.4878C13.4537 43.5978 12.2021 42.6929 12.0603 42.5923C11.9186 42.4917 10.4973 41.6358 9.19972 41.9486C7.90219 42.2615 7.50971 40.5782 8.79465 40.2684C10.0796 39.9586 10.6827 38.7749 10.8586 38.4374Z"
+        fill={theme.colors["accent-2"]}
+      />
+    </svg>
+  );
+};
diff --git a/app/home/HomeEmpty/HomeEmpty.tsx b/app/home/HomeEmpty/HomeEmpty.tsx
new file mode 100644
index 00000000..1dcab01d
--- /dev/null
+++ b/app/home/HomeEmpty/HomeEmpty.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { PubListEmptyIllo } from "components/ActionBar/Publications";
+import { ButtonPrimary } from "components/Buttons";
+import { AddSmall } from "components/Icons/AddSmall";
+import { Link } from "react-aria-components";
+import { DiscoverIllo } from "./DiscoverIllo";
+import { WelcomeToLeafletIllo } from "./WelcomeToLeafletIllo";
+import { DiscoverSmall } from "components/Icons/DiscoverSmall";
+import { PublishSmall } from "components/Icons/PublishSmall";
+import { createNewLeaflet } from "actions/createNewLeaflet";
+import { useIsMobile } from "src/hooks/isMobile";
+
+export function HomeEmptyState() {
+  let isMobile = useIsMobile();
+  return (
+    <div className="flex flex-col gap-4 font-bold">
+      <div className="container p-2 flex gap-4">
+        <div className="w-[72px]">
+          <WelcomeToLeafletIllo />
+        </div>
+        <div className="flex flex-col grow">
+          <h3 className="text-xl font-semibold pt-2">Leaflet</h3>
+          {/*<h3>A platform for social publishing.</h3>*/}
+          <div className="font-normal text-tertiary italic">
+            Write and share delightful documents!
+          </div>
+          <ButtonPrimary
+            className="!text-lg my-3"
+            onClick={async () => {
+              let openNewLeaflet = (id: string) => {
+                if (isMobile) {
+                  window.location.href = `/${id}?focusFirstBlock`;
+                } else {
+                  window.open(`/${id}?focusFirstBlock`, "_blank");
+                }
+              };
+
+              let id = await createNewLeaflet({
+                pageType: "doc",
+                redirectUser: false,
+              });
+              openNewLeaflet(id);
+            }}
+          >
+            <AddSmall /> Write a Doc!
+          </ButtonPrimary>
+        </div>
+      </div>
+      <div className="flex gap-2 w-full items-center text-tertiary font-normal italic">
+        <hr className="border-border w-full" />
+        <div>or</div>
+        <hr className="border-border w-full" />
+      </div>
+
+      <PublicationBanner />
+      <DiscoverBanner />
+      <div className="text-tertiary italic text-sm font-normal -mt-2">
+        Note: Right now docs and publications are separate. Soon you'll be able
+        to send docs to pubs!
+      </div>
+    </div>
+  );
+}
+
+export const PublicationBanner = (props: { small?: boolean }) => {
+  return (
+    <div
+      className={`accent-container flex sm:py-2 gap-4 items-center ${props.small ? "items-start p-2 text-sm font-normal" : "items-center p-4"}`}
+    >
+      {props.small ? (
+        <PublishSmall className="shrink-0" />
+      ) : (
+        <div className="w-[64px] mx-auto">
+          <PubListEmptyIllo />
+        </div>
+      )}
+      <div className="grow">
+        <Link href={"/lish/createPub"} className="font-bold">
+          Start a Publication
+        </Link>{" "}
+        and blog on the Atmosphere
+      </div>
+    </div>
+  );
+};
+
+export const DiscoverBanner = (props: { small?: boolean }) => {
+  return (
+    <div
+      className={`accent-container flex sm:py-2 gap-4 items-center ${props.small ? "items-start p-2 text-sm font-normal" : "items-center p-4"}`}
+    >
+      {props.small ? (
+        <DiscoverSmall className="shrink-0" />
+      ) : (
+        <div className="w-[64px] mx-auto">
+          <DiscoverIllo />
+        </div>
+      )}
+      <div className="grow">
+        <Link href={"/discover"} className="font-bold">
+          Explore Publications
+        </Link>{" "}
+        already on the network
+      </div>
+    </div>
+  );
+};
diff --git a/app/home/HomeEmpty/WelcomeToLeafletIllo.tsx b/app/home/HomeEmpty/WelcomeToLeafletIllo.tsx
new file mode 100644
index 00000000..fc08f443
--- /dev/null
+++ b/app/home/HomeEmpty/WelcomeToLeafletIllo.tsx
@@ -0,0 +1,24 @@
+import { theme } from "tailwind.config";
+
+export const WelcomeToLeafletIllo = () => {
+  return (
+    <svg
+      width="73"
+      height="68"
+      viewBox="0 0 73 68"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.7639 12.9818C39.5065 8.22165 72.8274 1.9906 72.8274 11.684C72.8274 13.2356 72.5131 14.6375 71.9885 15.9193C71.422 15.1994 70.6084 14.987 69.927 14.6595C69.0312 14.3006 68.1186 14.0196 67.219 13.7347C65.9446 13.3234 64.6378 12.9769 63.4944 12.3705C63.0971 12.1482 62.6977 11.8678 62.5598 11.4935C62.4128 11.1213 62.6531 10.6704 62.9592 10.3334C63.598 9.64116 64.4397 9.13591 65.3 8.65466C64.4055 9.0767 63.5312 9.49833 62.7922 10.1713C62.4481 10.4956 62.061 11.0041 62.219 11.5961C62.3834 12.1584 62.8383 12.4935 63.2483 12.7738C64.436 13.5238 65.7311 13.9496 66.9934 14.4086C67.8817 14.7243 68.7738 15.0378 69.6096 15.4095C70.4149 15.7681 71.3704 16.291 71.4895 16.8314C71.4933 16.884 71.4915 16.9 71.3928 17.0043C71.2883 17.1047 71.1421 17.196 70.9524 17.2894C70.6123 17.455 70.1758 17.5978 69.7727 17.7084C68.9351 17.937 68.049 18.1027 67.1721 18.2513C65.4162 18.5448 63.6217 18.7708 61.8323 19.0199C60.0416 19.2716 58.2462 19.5223 56.429 19.933C55.5221 20.1485 54.6197 20.3715 53.6711 20.8383C53.2374 21.0796 52.6446 21.3532 52.2737 22.1595C52.0934 22.554 52.1241 23.1248 52.2629 23.4594C52.4237 23.8666 52.582 24.0666 52.8069 24.3275C55.2093 26.8202 58.4399 26.9744 61.1399 27.4711C61.3262 27.5015 61.5132 27.5331 61.6995 27.5638C60.4533 29.2073 60.129 30.8258 61.717 32.7035C53.3556 36.0694 40.5573 34.9986 30.1731 37.5492C27.0455 38.2875 23.9357 39.315 21.0657 41.3636C19.6745 42.3955 18.2597 43.7123 17.4534 45.7152C16.5587 47.6874 17.1166 50.6073 18.6731 52.1156C19.6636 53.1771 20.8229 53.8313 21.9641 54.3002C22.9895 54.7165 24.0905 54.774 25.1536 54.5228C25.4784 54.4319 25.7983 54.2981 26.054 54.0844C26.3095 53.8704 26.4797 53.5942 26.5325 53.2894C26.5851 52.9847 26.5177 52.6675 26.3489 52.3802C26.1797 52.0928 25.9225 51.8583 25.6467 51.6635C24.8912 51.0971 24.2127 50.692 23.5432 50.4203C22.7927 50.117 22.1473 49.7103 21.7405 49.2709C21.1437 48.5942 21.0342 48.064 21.3293 47.2084C21.6382 46.365 22.4832 45.4184 23.5022 44.6605C25.5969 43.1038 28.3033 42.084 31.094 41.3705C37.0436 39.9193 43.4459 39.2868 49.7786 38.347C52.9572 37.8792 56.1424 37.383 59.342 36.6058C60.9443 36.2072 62.5256 35.7578 64.136 35.0453C64.1883 35.0196 64.2409 34.9932 64.2942 34.9672C72.897 41.9183 73.7798 46.9821 71.0959 52.3617C68.9368 56.6893 57.6782 70.1038 45.5647 66.642C17.1652 58.5254 -0.313688 61.8818 0.983643 36.35C1.62827 23.6653 13.1137 15.3026 21.7639 12.9818ZM47.5911 44.0482C47.6939 42.4007 46.335 42.3157 46.2317 43.9633C46.1286 45.6104 45.1675 46.5931 44.9397 46.8236C44.7125 47.0535 43.9263 47.8634 42.8059 47.7933C41.6859 47.7235 41.5833 49.1871 42.7141 49.2582C43.8449 49.329 44.7847 50.3786 44.8752 50.4965C44.9656 50.6142 45.7535 51.6618 45.6506 53.309C45.5476 54.9569 46.9105 55.0009 47.011 53.3939C47.1116 51.7875 47.6534 51.1346 48.0852 50.6976C48.5171 50.2607 48.7857 49.6386 50.2297 49.7289C51.6728 49.8185 51.7638 48.3548 50.3206 48.264C48.8768 48.1734 48.5288 47.3157 48.3137 47.0355C48.0986 46.7552 47.488 45.6961 47.5911 44.0482ZM18.887 18.7377C18.8903 16.7042 17.2118 16.7019 17.2083 18.7357C17.2044 20.7693 16.0954 22.0494 15.8333 22.349C15.5704 22.6494 14.6652 23.703 13.2834 23.7006C11.901 23.6983 11.8845 25.5056 13.2805 25.5082C14.675 25.5108 15.9068 26.7289 16.0286 26.8685C16.1478 27.0058 17.1971 28.2352 17.1936 30.2689C17.1902 32.3024 18.8677 32.2546 18.8713 30.2719C18.8748 28.2891 19.4922 27.4449 19.9905 26.8754C20.4888 26.3059 20.7721 25.5208 22.554 25.5238C24.336 25.5269 24.3396 23.7198 22.5579 23.7162C20.7757 23.7129 20.2846 22.6833 19.9993 22.3549C19.7136 22.0258 18.8835 20.7706 18.887 18.7377ZM70.5559 18.5209C68.5834 21.3602 65.7167 23.5582 63.5715 25.5668C62.8433 25.4447 62.1381 25.3759 61.4397 25.2875C58.698 24.9636 55.7947 24.7314 54.1506 23.0892C53.1448 22.9109 55.2165 21.8481 56.8167 21.475C58.5129 21.0124 60.2807 20.6842 62.0471 20.3597C63.8164 20.0365 65.6066 19.7363 67.384 19.3646C68.2733 19.1761 69.1747 18.9708 70.0657 18.6898C70.2249 18.6387 70.3894 18.5819 70.5559 18.5209Z"
+        fill="color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 85%)"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M33.1936 19.9644C33.8224 20.2936 34.5595 20.6793 35.7586 19.9049C36.5426 19.3985 37.1772 17.1878 37.8852 14.7211C38.9202 11.1155 40.1122 6.96302 42.1573 6.78723C44.6243 6.57519 44.7981 7.92712 44.9319 8.96695C45.0257 9.69631 45.0997 10.2721 45.9315 10.047C46.7788 9.8176 47.3647 8.61374 48.0447 7.2167C48.984 5.28694 50.1027 2.98859 52.3373 2.38086C53.9128 1.95238 54.054 2.64187 54.1973 3.34108C54.2888 3.788 54.3812 4.2389 54.8494 4.40436C55.3107 4.56736 56.2896 4.23303 57.4149 3.84869C59.219 3.23253 61.3994 2.48783 62.4269 3.45769C63.3302 4.31032 62.738 5.52027 62.1704 6.67999C61.6896 7.66228 61.2264 8.60853 61.7046 9.27112C62.0948 9.81171 62.6783 10.0278 63.2502 10.2396C64.1857 10.5861 65.0904 10.9211 65.0681 12.6458C65.0445 14.4695 62.5034 15.5801 60.1214 16.6211C58.126 17.4931 56.2423 18.3164 56.0441 19.4692C55.9197 20.1921 56.464 20.3823 57.0738 20.5954C57.8026 20.85 58.6249 21.1373 58.5116 22.4058C58.2468 25.3711 55.1373 26.1276 52.219 26.8377C49.7141 27.4471 47.3501 28.0223 47.0466 29.9306C46.8714 31.0323 47.5477 31.0548 48.2898 31.0794C49.1981 31.1095 50.205 31.1429 49.869 33.1634C49.2261 37.03 43.6557 38.4183 38.5564 39.6893C36.6866 40.1553 34.8802 40.6056 33.4032 41.1564C33.2347 41.2193 33.1049 41.3564 33.0503 41.5278C32.2094 44.1647 31.8313 46.932 31.428 49.8838C31.3394 50.5323 31.2496 51.1896 31.1534 51.8565C31.0262 52.738 29.2486 55.1385 28.3628 55.2311C27.9656 55.2726 27.8339 52.2775 27.9611 51.3959C28.4347 48.1126 29.1515 45.0249 30.0528 42.1314C31.418 36.9751 34.9339 30.201 39.0683 24.7487C42.7265 19.8134 46.4117 15.8889 50.9826 12.4792C51.5547 12.0524 51.1837 11.3521 50.5642 11.7068C46.3602 14.1137 42.9934 17.6783 39.4855 21.2985C35.6701 25.2361 32.8282 29.9969 31.1838 33.3557C30.8939 33.9479 29.8993 33.7609 29.8756 33.102C29.6905 27.9469 29.636 23.1879 30.7621 21.1685C31.8313 19.2514 32.4334 19.5665 33.1936 19.9644Z"
+        fill={theme.colors["accent-1"]}
+      />
+    </svg>
+  );
+};
diff --git a/app/home/HomeFooter.tsx b/app/home/HomeFooter.tsx
deleted file mode 100644
index 381e295c..00000000
--- a/app/home/HomeFooter.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-import { Footer } from "components/ActionBar/Footer";
-import { Media } from "components/Media";
-import { ThemePopover } from "components/ThemeManager/ThemeSetter";
-import { CreateNewLeafletButton } from "./CreateNewButton";
-import { HelpPopover } from "components/HelpPopover";
-import { AccountSettings } from "./AccountSettings";
-import { useIdentityData } from "components/IdentityProvider";
-import { useReplicache } from "src/replicache";
-import { LoginActionButton } from "components/LoginButton";
-
-export const HomeFooter = () => {
-  let { identity } = useIdentityData();
-  let { rootEntity } = useReplicache();
-  return (
-    <Media mobile>
-      <Footer>
-        <CreateNewLeafletButton />
-        {identity ? <AccountSettings /> : <LoginActionButton />}
-        <HelpPopover noShortcuts />
-        <ThemePopover entityID={rootEntity} home />
-      </Footer>
-    </Media>
-  );
-};
diff --git a/app/home/HomeLayout.tsx b/app/home/HomeLayout.tsx
new file mode 100644
index 00000000..47d34a81
--- /dev/null
+++ b/app/home/HomeLayout.tsx
@@ -0,0 +1,334 @@
+"use client";
+
+import { getHomeDocs, HomeDoc } from "./storage";
+import useSWR from "swr";
+import {
+  Fact,
+  PermissionToken,
+  ReplicacheProvider,
+  useEntity,
+} from "src/replicache";
+import { LeafletListItem } from "./LeafletList/LeafletListItem";
+import { useIdentityData } from "components/IdentityProvider";
+import type { Attribute } from "src/replicache/attributes";
+import { callRPC } from "app/api/rpc/client";
+import { StaticLeafletDataContext } from "components/PageSWRDataProvider";
+import { HomeSmall } from "components/Icons/HomeSmall";
+import {
+  HomeDashboardControls,
+  DashboardLayout,
+  DashboardState,
+  useDashboardState,
+} from "components/PageLayouts/DashboardLayout";
+import { Actions } from "./Actions/Actions";
+import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
+import { Json } from "supabase/database.types";
+import { useTemplateState } from "./Actions/CreateNewButton";
+import { CreateNewLeafletButton } from "./Actions/CreateNewButton";
+import { ActionButton } from "components/ActionBar/ActionButton";
+import { AddTiny } from "components/Icons/AddTiny";
+import {
+  get_leaflet_data,
+  GetLeafletDataReturnType,
+} from "app/api/rpc/[command]/get_leaflet_data";
+import { useEffect, useRef, useState } from "react";
+import { Input } from "components/Input";
+import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
+import {
+  ButtonPrimary,
+  ButtonSecondary,
+  ButtonTertiary,
+} from "components/Buttons";
+import { AddSmall } from "components/Icons/AddSmall";
+import { PublishIllustration } from "app/[leaflet_id]/publish/PublishIllustration/PublishIllustration";
+import { PubListEmptyIllo } from "components/ActionBar/Publications";
+import { theme } from "tailwind.config";
+import Link from "next/link";
+import { DiscoverIllo } from "./HomeEmpty/DiscoverIllo";
+import { WelcomeToLeafletIllo } from "./HomeEmpty/WelcomeToLeafletIllo";
+import {
+  DiscoverBanner,
+  HomeEmptyState,
+  PublicationBanner,
+} from "./HomeEmpty/HomeEmpty";
+
+type Leaflet = {
+  added_at: string;
+  token: PermissionToken & {
+    leaflets_in_publications?: Exclude<
+      GetLeafletDataReturnType["result"]["data"],
+      null
+    >["leaflets_in_publications"];
+  };
+};
+
+export const HomeLayout = (props: {
+  entityID: string;
+  titles: { [root_entity: string]: string };
+  initialFacts: {
+    [root_entity: string]: Fact<Attribute>[];
+  };
+}) => {
+  let hasBackgroundImage = !!useEntity(
+    props.entityID,
+    "theme/background-image",
+  );
+  let cardBorderHidden = !!useCardBorderHidden(props.entityID);
+
+  let [searchValue, setSearchValue] = useState("");
+  let [debouncedSearchValue, setDebouncedSearchValue] = useState("");
+
+  useDebouncedEffect(
+    () => {
+      setDebouncedSearchValue(searchValue);
+    },
+    200,
+    [searchValue],
+  );
+
+  let { identity } = useIdentityData();
+
+  let hasPubs = !identity || identity.publications.length === 0 ? false : true;
+  let hasTemplates =
+    useTemplateState((s) => s.templates).length === 0 ? false : true;
+
+  return (
+    <DashboardLayout
+      id="home"
+      hasBackgroundImage={hasBackgroundImage}
+      currentPage="home"
+      defaultTab="home"
+      actions={<Actions />}
+      tabs={{
+        home: {
+          controls: (
+            <HomeDashboardControls
+              defaultDisplay={"grid"}
+              searchValue={searchValue}
+              setSearchValueAction={setSearchValue}
+              hasBackgroundImage={hasBackgroundImage}
+              hasPubs={hasPubs}
+              hasTemplates={hasTemplates}
+            />
+          ),
+          content: (
+            <HomeLeafletList
+              titles={props.titles}
+              initialFacts={props.initialFacts}
+              cardBorderHidden={cardBorderHidden}
+              searchValue={debouncedSearchValue}
+            />
+          ),
+        },
+      }}
+    />
+  );
+};
+
+export function HomeLeafletList(props: {
+  titles: { [root_entity: string]: string };
+  initialFacts: {
+    [root_entity: string]: Fact<Attribute>[];
+  };
+  searchValue: string;
+  cardBorderHidden: boolean;
+}) {
+  let { identity } = useIdentityData();
+  let { data: initialFacts } = useSWR(
+    "home-leaflet-data",
+    async () => {
+      if (identity) {
+        let { result } = await callRPC("getFactsFromHomeLeaflets", {
+          tokens: identity.permission_token_on_homepage.map(
+            (ptrh) => ptrh.permission_tokens.root_entity,
+          ),
+        });
+        let titles = {
+          ...result.titles,
+          ...identity.permission_token_on_homepage.reduce(
+            (acc, tok) => {
+              let title =
+                tok.permission_tokens.leaflets_in_publications[0]?.title;
+              if (title) acc[tok.permission_tokens.root_entity] = title;
+              return acc;
+            },
+            {} as { [k: string]: string },
+          ),
+        };
+        return { ...result, titles };
+      }
+    },
+    { fallbackData: { facts: props.initialFacts, titles: props.titles } },
+  );
+
+  let { data: localLeaflets } = useSWR("leaflets", () => getHomeDocs(), {
+    fallbackData: [],
+  });
+  let leaflets: Leaflet[] = identity
+    ? identity.permission_token_on_homepage.map((ptoh) => ({
+        added_at: ptoh.created_at,
+        token: ptoh.permission_tokens as PermissionToken,
+      }))
+    : localLeaflets
+        .sort((a, b) => (a.added_at > b.added_at ? -1 : 1))
+        .filter((d) => !d.hidden)
+        .map((ll) => ll);
+
+  return leaflets.length === 0 ? (
+    <HomeEmptyState />
+  ) : (
+    <>
+      <LeafletList
+        defaultDisplay="grid"
+        searchValue={props.searchValue}
+        leaflets={leaflets}
+        titles={initialFacts?.titles || {}}
+        cardBorderHidden={props.cardBorderHidden}
+        initialFacts={initialFacts?.facts || {}}
+        showPreview
+      />
+      <div className="spacer h-4 w-full bg-transparent shrink-0 " />
+
+      {leaflets.filter((l) => !!l.token.leaflets_in_publications).length ===
+        0 && <PublicationBanner small />}
+      <DiscoverBanner small />
+      <div className="spacer h-8 w-full bg-transparent shrink-0 " />
+    </>
+  );
+}
+
+export function LeafletList(props: {
+  leaflets: Leaflet[];
+  titles: { [root_entity: string]: string };
+  defaultDisplay: Exclude<DashboardState["display"], undefined>;
+  initialFacts: {
+    [root_entity: string]: Fact<Attribute>[];
+  };
+  searchValue: string;
+  cardBorderHidden: boolean;
+  showPreview?: boolean;
+}) {
+  let { identity } = useIdentityData();
+  let { display } = useDashboardState();
+
+  display = display || props.defaultDisplay;
+
+  let searchedLeaflets = useSearchedLeaflets(
+    props.leaflets,
+    props.titles,
+    props.searchValue,
+  );
+
+  return (
+    <div
+      className={`
+        leafletList
+        w-full
+        ${display === "grid" ? "grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-4 gap-x-4 sm:gap-x-6 sm:gap-y-5 grow" : "flex flex-col gap-2 pt-2"} `}
+    >
+      {props.leaflets.map(({ token: leaflet, added_at }, index) => (
+        <ReplicacheProvider
+          disablePull
+          initialFactsOnly={!!identity}
+          key={leaflet.id}
+          rootEntity={leaflet.root_entity}
+          token={leaflet}
+          name={leaflet.root_entity}
+          initialFacts={props.initialFacts?.[leaflet.root_entity] || []}
+        >
+          <StaticLeafletDataContext
+            value={{
+              ...leaflet,
+              leaflets_in_publications: leaflet.leaflets_in_publications || [],
+              blocked_by_admin: null,
+              custom_domain_routes: [],
+            }}
+          >
+            <LeafletListItem
+              title={props?.titles?.[leaflet.root_entity] || "Untitled"}
+              token={leaflet}
+              draft={!!leaflet.leaflets_in_publications?.length}
+              published={!!leaflet.leaflets_in_publications?.find((l) => l.doc)}
+              publishedAt={
+                leaflet.leaflets_in_publications?.find((l) => l.doc)?.documents
+                  ?.indexed_at
+              }
+              leaflet_id={leaflet.root_entity}
+              loggedIn={!!identity}
+              display={display}
+              added_at={added_at}
+              cardBorderHidden={props.cardBorderHidden}
+              index={index}
+              showPreview={props.showPreview}
+              isHidden={
+                !searchedLeaflets.some(
+                  (sl) => sl.token.root_entity === leaflet.root_entity,
+                )
+              }
+            />
+          </StaticLeafletDataContext>
+        </ReplicacheProvider>
+      ))}
+    </div>
+  );
+}
+
+function useSearchedLeaflets(
+  leaflets: Leaflet[],
+  titles: { [root_entity: string]: string },
+  searchValue: string,
+) {
+  let { sort, filter } = useDashboardState();
+
+  let sortedLeaflets = leaflets.sort((a, b) => {
+    if (sort === "alphabetical") {
+      if (titles[a.token.root_entity] === titles[b.token.root_entity]) {
+        return a.added_at > b.added_at ? -1 : 1;
+      } else {
+        return titles[a.token.root_entity].toLocaleLowerCase() >
+          titles[b.token.root_entity].toLocaleLowerCase()
+          ? 1
+          : -1;
+      }
+    } else {
+      return a.added_at === b.added_at
+        ? a.token.root_entity > b.token.root_entity
+          ? -1
+          : 1
+        : a.added_at > b.added_at
+          ? -1
+          : 1;
+    }
+  });
+
+  let allTemplates = useTemplateState((s) => s.templates);
+  let filteredLeaflets = sortedLeaflets.filter(({ token: leaflet }) => {
+    let published = !!leaflet.leaflets_in_publications?.find((l) => l.doc);
+    let drafts = !!leaflet.leaflets_in_publications?.length && !published;
+    let docs = !leaflet.leaflets_in_publications?.length;
+    let templates = !!allTemplates.find((t) => t.id === leaflet.id);
+    // If no filters are active, show all
+    if (
+      !filter.drafts &&
+      !filter.published &&
+      !filter.docs &&
+      !filter.templates
+    )
+      return true;
+
+    return (
+      (filter.drafts && drafts) ||
+      (filter.published && published) ||
+      (filter.docs && docs) ||
+      (filter.templates && templates)
+    );
+  });
+  if (searchValue === "") return filteredLeaflets;
+  let searchedLeaflets = filteredLeaflets.filter(({ token: leaflet }) => {
+    return titles[leaflet.root_entity]
+      ?.toLowerCase()
+      .includes(searchValue.toLowerCase());
+  });
+
+  return searchedLeaflets;
+}
diff --git a/app/home/LeafletList.tsx b/app/home/LeafletList.tsx
deleted file mode 100644
index 597eb11f..00000000
--- a/app/home/LeafletList.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { getHomeDocs, HomeDoc } from "./storage";
-import useSWR from "swr";
-import { Fact, PermissionToken, ReplicacheProvider } from "src/replicache";
-import { LeafletPreview } from "./LeafletPreview";
-import { useIdentityData } from "components/IdentityProvider";
-import type { Attribute } from "src/replicache/attributes";
-import { callRPC } from "app/api/rpc/client";
-import { StaticLeafletDataContext } from "components/PageSWRDataProvider";
-
-export function LeafletList(props: {
-  initialFacts: {
-    [root_entity: string]: Fact<Attribute>[];
-  };
-}) {
-  let { data: localLeaflets } = useSWR("leaflets", () => getHomeDocs(), {
-    fallbackData: [],
-  });
-  let { identity } = useIdentityData();
-  let { data: initialFacts } = useSWR(
-    "home-leaflet-data",
-    async () => {
-      if (identity) {
-        let { result } = await callRPC("getFactsFromHomeLeaflets", {
-          tokens: identity.permission_token_on_homepage.map(
-            (ptrh) => ptrh.permission_tokens.root_entity,
-          ),
-        });
-        return result;
-      }
-    },
-    { fallbackData: props.initialFacts },
-  );
-  let leaflets: Array<
-    PermissionToken & {
-      leaflets_in_publications?: Array<{
-        doc: string;
-        description: string;
-        publication: string;
-        leaflet: string;
-        title: string;
-        publications: null;
-        documents: null;
-      }>;
-    }
-  > = identity
-    ? identity.permission_token_on_homepage
-        .sort((a, b) =>
-          a.created_at === b.created_at
-            ? a.permission_tokens.root_entity > b.permission_tokens.root_entity
-              ? -1
-              : 1
-            : a.created_at > b.created_at
-              ? -1
-              : 1,
-        )
-        .map((ptoh) => ptoh.permission_tokens)
-    : localLeaflets
-        .sort((a, b) => (a.added_at > b.added_at ? -1 : 1))
-        .filter((d) => !d.hidden)
-        .map((ll) => ll.token);
-
-  return (
-    <div className="homeLeafletGrid grow w-full h-full">
-      <div className="grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-8 gap-x-4 sm:gap-x-6 sm:gap-y-8 grow pt-3 pb-28 px-2 sm:pt-6 sm:pb-12 sm:pl-6 sm:pr-1">
-        {leaflets.map((leaflet, index) => (
-          <ReplicacheProvider
-            disablePull
-            initialFactsOnly={!!identity}
-            key={leaflet.id}
-            rootEntity={leaflet.root_entity}
-            token={leaflet}
-            name={leaflet.root_entity}
-            initialFacts={initialFacts?.[leaflet.root_entity] || []}
-          >
-            <StaticLeafletDataContext
-              value={{
-                ...leaflet,
-                leaflets_in_publications:
-                  leaflet.leaflets_in_publications || [],
-                blocked_by_admin: null,
-                custom_domain_routes: [],
-              }}
-            >
-              <LeafletPreview
-                index={index}
-                token={leaflet}
-                draft={!!leaflet.leaflets_in_publications?.length}
-                published={
-                  !!leaflet.leaflets_in_publications?.find((l) => l.doc)
-                }
-                leaflet_id={leaflet.root_entity}
-                loggedIn={!!identity}
-              />
-            </StaticLeafletDataContext>
-          </ReplicacheProvider>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/app/home/LeafletList/LeafletContent.tsx b/app/home/LeafletList/LeafletContent.tsx
new file mode 100644
index 00000000..e722f3b9
--- /dev/null
+++ b/app/home/LeafletList/LeafletContent.tsx
@@ -0,0 +1,68 @@
+"use client";
+import { BlockPreview } from "components/Blocks/PageLinkBlock";
+import { useEffect, useRef, useState } from "react";
+import { useBlocks } from "src/hooks/queries/useBlocks";
+import { useEntity } from "src/replicache";
+import { CanvasContent } from "components/Canvas";
+import styles from "./LeafletPreview.module.css";
+import { PublicationMetadataPreview } from "components/Pages/PublicationMetadata";
+
+export const LeafletContent = (props: {
+  entityID: string;
+  isOnScreen: boolean;
+}) => {
+  let type = useEntity(props.entityID, "page/type")?.data.value || "doc";
+  let blocks = useBlocks(props.entityID);
+  let previewRef = useRef<HTMLDivElement | null>(null);
+
+  if (type === "canvas")
+    return (
+      <div
+        className={`pageLinkBlockPreview shrink-0 h-full overflow-clip relative bg-bg-page shadow-sm  rounded-md`}
+      >
+        <div
+          className={`absolute top-0 left-0 origin-top-left pointer-events-none ${styles.scaleLeafletCanvasPreview}`}
+          style={{
+            width: `1272px`,
+            height: "calc(1272px * 2)",
+          }}
+        >
+          {props.isOnScreen && (
+            <CanvasContent entityID={props.entityID} preview />
+          )}
+        </div>
+      </div>
+    );
+
+  return (
+    <div
+      ref={previewRef}
+      className={`pageLinkBlockPreview h-full overflow-clip flex flex-col gap-0.5 no-underline relative`}
+    >
+      <div
+        className={`absolute top-0 left-0 w-full h-full origin-top-left pointer-events-none ${styles.scaleLeafletDocPreview}`}
+        style={{
+          width: `var(--page-width-units)`,
+        }}
+      >
+        <PublicationMetadataPreview />
+
+        {props.isOnScreen &&
+          blocks.slice(0, 10).map((b, index, arr) => {
+            return (
+              <BlockPreview
+                pageType="doc"
+                entityID={b.value}
+                previousBlock={arr[index - 1] || null}
+                nextBlock={arr[index + 1] || null}
+                nextPosition={""}
+                previewRef={previewRef}
+                {...b}
+                key={b.factID}
+              />
+            );
+          })}
+      </div>
+    </div>
+  );
+};
diff --git a/app/home/LeafletList/LeafletInfo.tsx b/app/home/LeafletList/LeafletInfo.tsx
new file mode 100644
index 00000000..eceb24da
--- /dev/null
+++ b/app/home/LeafletList/LeafletInfo.tsx
@@ -0,0 +1,88 @@
+"use client";
+import { PermissionToken } from "src/replicache";
+import { LeafletOptions } from "./LeafletOptions";
+import Link from "next/link";
+import { useState } from "react";
+import { theme } from "tailwind.config";
+import { TemplateSmall } from "components/Icons/TemplateSmall";
+import { timeAgo } from "src/utils/timeAgo";
+
+export const LeafletInfo = (props: {
+  title?: string;
+  draft?: boolean;
+  published?: boolean;
+  token: PermissionToken;
+  leaflet_id: string;
+  loggedIn: boolean;
+  isTemplate: boolean;
+  className?: string;
+  display: "grid" | "list";
+  added_at: string;
+  publishedAt?: string;
+}) => {
+  let [prefetch, setPrefetch] = useState(false);
+  let prettyCreatedAt = props.added_at ? timeAgo(props.added_at) : "";
+
+  let prettyPublishedAt = props.publishedAt ? timeAgo(props.publishedAt) : "";
+
+  return (
+    <div
+      className={`leafletInfo w-full min-w-0 flex flex-col ${props.className}`}
+    >
+      <div className="flex justify-between items-center shrink-0 max-w-full gap-2 leading-tight overflow-hidden">
+        <Link
+          onMouseEnter={() => setPrefetch(true)}
+          onPointerDown={() => setPrefetch(true)}
+          prefetch={prefetch}
+          href={`/${props.token.id}`}
+          className="no-underline sm:hover:no-underline text-primary grow min-w-0"
+        >
+          <h3 className="sm:text-lg text-base truncate w-full min-w-0">
+            {props.title}
+          </h3>
+        </Link>
+        <div className="flex gap-1 shrink-0">
+          {props.isTemplate && props.display === "list" ? (
+            <TemplateSmall
+              fill={theme.colors["bg-page"]}
+              className="text-tertiary"
+            />
+          ) : null}
+          <LeafletOptions
+            leaflet={props.token}
+            isTemplate={props.isTemplate}
+            loggedIn={props.loggedIn}
+            added_at={props.added_at}
+          />
+        </div>
+      </div>
+      <Link
+        onMouseEnter={() => setPrefetch(true)}
+        onPointerDown={() => setPrefetch(true)}
+        prefetch={prefetch}
+        href={`/${props.token.id}`}
+        className="no-underline sm:hover:no-underline text-primary w-full"
+      >
+        {props.draft || props.published ? (
+          <div
+            className={`text-xs ${props.published ? "font-bold text-tertiary" : "text-tertiary"}`}
+          >
+            {props.published
+              ? `Published ${prettyPublishedAt}`
+              : `Draft ${prettyCreatedAt}`}
+          </div>
+        ) : (
+          <div className="text-xs text-tertiary">{prettyCreatedAt}</div>
+        )}
+      </Link>
+      {props.isTemplate && props.display === "grid" ? (
+        <div className="absolute -top-2 right-1">
+          <TemplateSmall
+            className="text-tertiary"
+            fill={theme.colors["bg-page"]}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+};
diff --git a/app/home/LeafletList/LeafletListItem.tsx b/app/home/LeafletList/LeafletListItem.tsx
new file mode 100644
index 00000000..b4b10cd3
--- /dev/null
+++ b/app/home/LeafletList/LeafletListItem.tsx
@@ -0,0 +1,102 @@
+"use client";
+import { PermissionToken } from "src/replicache";
+import { useTemplateState } from "../Actions/CreateNewButton";
+import { LeafletListPreview, LeafletGridPreview } from "./LeafletPreview";
+import { LeafletInfo } from "./LeafletInfo";
+import { useState, useRef, useEffect } from "react";
+
+export const LeafletListItem = (props: {
+  token: PermissionToken;
+  leaflet_id: string;
+  loggedIn: boolean;
+  display: "list" | "grid";
+  cardBorderHidden: boolean;
+  added_at: string;
+  title: string;
+  draft?: boolean;
+  published?: boolean;
+  publishedAt?: string;
+  index: number;
+  isHidden: boolean;
+  showPreview?: boolean;
+}) => {
+  let isTemplate = useTemplateState(
+    (s) => !!s.templates.find((t) => t.id === props.token.id),
+  );
+
+  let [isOnScreen, setIsOnScreen] = useState(props.index < 16 ? true : false);
+  let previewRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!previewRef.current) return;
+    let observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsOnScreen(true);
+          } else {
+            setIsOnScreen(false);
+          }
+        });
+      },
+      { threshold: 0.1, root: null },
+    );
+    observer.observe(previewRef.current);
+    return () => observer.disconnect();
+  }, [previewRef]);
+
+  if (props.display === "list")
+    return (
+      <>
+        <div
+          ref={previewRef}
+          className={`gap-3 w-full ${props.cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border"}`}
+          style={{
+            backgroundColor: props.cardBorderHidden
+              ? "transparent"
+              : "rgba(var(--bg-page), var(--bg-page-alpha))",
+
+            display: props.isHidden ? "none" : "flex",
+          }}
+        >
+          {props.showPreview && (
+            <LeafletListPreview isVisible={isOnScreen} {...props} />
+          )}
+          <LeafletInfo isTemplate={isTemplate} {...props} />
+        </div>
+        {props.cardBorderHidden && (
+          <hr
+            className="last:hidden border-border-light"
+            style={{
+              display: props.isHidden ? "none" : "block",
+            }}
+          />
+        )}
+      </>
+    );
+  return (
+    <div
+      ref={previewRef}
+      className={`leafletGridListItem relative
+        flex flex-col gap-1 p-1 h-52
+       block-border border-border! hover:outline-border
+        `}
+      style={{
+        backgroundColor: props.cardBorderHidden
+          ? "transparent"
+          : "rgba(var(--bg-page), var(--bg-page-alpha))",
+
+        display: props.isHidden ? "none" : "flex",
+      }}
+    >
+      <div className="grow">
+        <LeafletGridPreview {...props} isVisible={isOnScreen} />
+      </div>
+      <LeafletInfo
+        isTemplate={isTemplate}
+        className="px-1 pb-0.5 shrink-0"
+        {...props}
+      />
+    </div>
+  );
+};
diff --git a/app/home/LeafletOptions.tsx b/app/home/LeafletList/LeafletOptions.tsx
similarity index 67%
rename from app/home/LeafletOptions.tsx
rename to app/home/LeafletList/LeafletOptions.tsx
index b73fc72f..e61920d3 100644
--- a/app/home/LeafletOptions.tsx
+++ b/app/home/LeafletList/LeafletOptions.tsx
@@ -1,29 +1,32 @@
 "use client";
 
 import { Menu, MenuItem } from "components/Layout";
-import type { PermissionToken } from "src/replicache";
-import { hideDoc } from "./storage";
+import { useReplicache, type PermissionToken } from "src/replicache";
+import { hideDoc } from "../storage";
 import { useState } from "react";
 import { ButtonPrimary } from "components/Buttons";
-import { useTemplateState } from "./CreateNewButton";
-import { Item } from "@radix-ui/react-dropdown-menu";
-import { useSmoker } from "components/Toast";
+import { useTemplateState } from "../Actions/CreateNewButton";
+import { useSmoker, useToaster } from "components/Toast";
 import { removeLeafletFromHome } from "actions/removeLeafletFromHome";
 import { useIdentityData } from "components/IdentityProvider";
 import { HideSmall } from "components/Icons/HideSmall";
 import { MoreOptionsTiny } from "components/Icons/MoreOptionsTiny";
 import { TemplateRemoveSmall } from "components/Icons/TemplateRemoveSmall";
 import { TemplateSmall } from "components/Icons/TemplateSmall";
+import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny";
+import { addLeafletToHome } from "actions/addLeafletToHome";
 
 export const LeafletOptions = (props: {
   leaflet: PermissionToken;
   isTemplate: boolean;
   loggedIn: boolean;
+  added_at: string;
 }) => {
   let { mutate: mutateIdentity } = useIdentityData();
   let [state, setState] = useState<"normal" | "template">("normal");
   let [open, setOpen] = useState(false);
   let smoker = useSmoker();
+  let toaster = useToaster();
   return (
     <>
       <Menu
@@ -34,8 +37,14 @@ export const LeafletOptions = (props: {
           setState("normal");
         }}
         trigger={
-          <div className="bg-accent-1 text-accent-2 px-2 py-1 border border-accent-2 rounded-md">
-            <MoreOptionsTiny />
+          <div
+            className="text-secondary shrink-0"
+            onClick={(e) => {
+              e.preventDefault;
+              e.stopPropagation;
+            }}
+          >
+            <MoreOptionsVerticalTiny />
           </div>
         }
       >
@@ -93,6 +102,18 @@ export const LeafletOptions = (props: {
                 } else {
                   hideDoc(props.leaflet);
                 }
+                toaster({
+                  content: (
+                    <div className="font-bold">
+                      Doc removed!{" "}
+                      <UndoRemoveFromHomeButton
+                        leaflet={props.leaflet}
+                        added_at={props.added_at}
+                      />
+                    </div>
+                  ),
+                  type: "success",
+                });
               }}
             >
               <HideSmall />
@@ -110,6 +131,49 @@ export const LeafletOptions = (props: {
   );
 };
 
+const UndoRemoveFromHomeButton = (props: {
+  leaflet: PermissionToken;
+  added_at: string | undefined;
+}) => {
+  let toaster = useToaster();
+  let { mutate } = useIdentityData();
+  return (
+    <button
+      onClick={async (e) => {
+        await mutate(
+          (identity) => {
+            if (!identity) return;
+            return {
+              ...identity,
+              permission_token_on_homepage: [
+                ...identity.permission_token_on_homepage,
+                {
+                  created_at: props.added_at || new Date().toISOString(),
+                  permission_tokens: {
+                    ...props.leaflet,
+                    leaflets_in_publications: [],
+                  },
+                },
+              ],
+            };
+          },
+          { revalidate: false },
+        );
+        await addLeafletToHome(props.leaflet.id);
+        await mutate();
+
+        toaster({
+          content: <div className="font-bold">Recovered Doc!</div>,
+          type: "success",
+        });
+      }}
+      className="underline"
+    >
+      Undo?
+    </button>
+  );
+};
+
 const AddTemplateForm = (props: {
   leaflet: PermissionToken;
   close: () => void;
@@ -124,7 +188,7 @@ const AddTemplateForm = (props: {
           value={name}
           onChange={(e) => setName(e.target.value)}
           type="text"
-          className=" text-primary font-normal border border-border rounded-md outline-none px-2 py-1 w-64"
+          className=" text-primary font-normal border border-border rounded-md outline-hidden px-2 py-1 w-64"
         />
       </label>
 
diff --git a/app/home/LeafletPreview.module.css b/app/home/LeafletList/LeafletPreview.module.css
similarity index 100%
rename from app/home/LeafletPreview.module.css
rename to app/home/LeafletList/LeafletPreview.module.css
diff --git a/app/home/LeafletList/LeafletPreview.tsx b/app/home/LeafletList/LeafletPreview.tsx
new file mode 100644
index 00000000..e6ff22c3
--- /dev/null
+++ b/app/home/LeafletList/LeafletPreview.tsx
@@ -0,0 +1,187 @@
+"use client";
+import {
+  ThemeBackgroundProvider,
+  ThemeProvider,
+} from "components/ThemeManager/ThemeProvider";
+import {
+  PermissionToken,
+  useEntity,
+  useReferenceToEntity,
+} from "src/replicache";
+import { useTemplateState } from "../Actions/CreateNewButton";
+import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
+import { LeafletContent } from "./LeafletContent";
+import { Tooltip } from "components/Tooltip";
+import { useState } from "react";
+import Link from "next/link";
+import { SpeedyLink } from "components/SpeedyLink";
+
+export const LeafletListPreview = (props: {
+  draft?: boolean;
+  published?: boolean;
+  isVisible: boolean;
+  token: PermissionToken;
+  leaflet_id: string;
+  loggedIn: boolean;
+}) => {
+  let root =
+    useReferenceToEntity("root/page", props.leaflet_id)[0]?.entity ||
+    props.leaflet_id;
+  let firstPage = useEntity(root, "root/page")[0];
+  let page = firstPage?.data.value || root;
+
+  let cardBorderHidden = useCardBorderHidden(root);
+  let rootBackgroundImage = useEntity(root, "theme/card-background-image");
+  let rootBackgroundRepeat = useEntity(
+    root,
+    "theme/card-background-image-repeat",
+  );
+  let rootBackgroundOpacity = useEntity(
+    root,
+    "theme/card-background-image-opacity",
+  );
+
+  return (
+    <Tooltip
+      open={true}
+      delayDuration={0}
+      side="right"
+      trigger={
+        <div className="w-12 h-full py-1">
+          <div className="rounded-md h-full overflow-hidden">
+            <ThemeProvider local entityID={root} className="">
+              <ThemeBackgroundProvider entityID={root}>
+                <div className="w-full h-full rounded-md p-1 border border-border">
+                  <div
+                    className={`w-full h-full  rounded-[2px]`}
+                    style={
+                      cardBorderHidden
+                        ? {
+                            borderWidth: "2px",
+                            borderColor: "rgb(var(--primary))",
+                          }
+                        : {
+                            backgroundColor:
+                              "rgba(var(--bg-page), var(--bg-page-alpha))",
+                          }
+                    }
+                  />
+                </div>
+              </ThemeBackgroundProvider>
+            </ThemeProvider>
+          </div>
+        </div>
+      }
+      className="p-1!"
+    >
+      <ThemeProvider local entityID={root} className="rounded-sm">
+        <ThemeBackgroundProvider entityID={root}>
+          <div className="leafletPreview grow shrink-0 h-44 w-64 px-2 pt-2 sm:px-3 sm:pt-3 flex items-end pointer-events-none rounded-[2px] ">
+            <div
+              className={`leafletContentWrapper h-full sm:w-48 w-40 mx-auto overflow-clip ${!cardBorderHidden && "border border-border-light border-b-0 rounded-t-md"}`}
+              style={
+                cardBorderHidden
+                  ? {}
+                  : {
+                      backgroundImage: rootBackgroundImage
+                        ? `url(${rootBackgroundImage.data.src}), url(${rootBackgroundImage.data.fallback})`
+                        : undefined,
+                      backgroundRepeat: rootBackgroundRepeat
+                        ? "repeat"
+                        : "no-repeat",
+                      backgroundPosition: "center",
+                      backgroundSize: !rootBackgroundRepeat
+                        ? "cover"
+                        : rootBackgroundRepeat?.data.value / 3,
+                      opacity:
+                        rootBackgroundImage?.data.src && rootBackgroundOpacity
+                          ? rootBackgroundOpacity.data.value
+                          : 1,
+                      backgroundColor:
+                        "rgba(var(--bg-page), var(--bg-page-alpha))",
+                    }
+              }
+            >
+              <LeafletContent entityID={page} isOnScreen={props.isVisible} />
+            </div>
+          </div>
+        </ThemeBackgroundProvider>
+      </ThemeProvider>
+    </Tooltip>
+  );
+};
+
+export const LeafletGridPreview = (props: {
+  draft?: boolean;
+  published?: boolean;
+  token: PermissionToken;
+  leaflet_id: string;
+  loggedIn: boolean;
+  isVisible: boolean;
+}) => {
+  let root =
+    useReferenceToEntity("root/page", props.leaflet_id)[0]?.entity ||
+    props.leaflet_id;
+  let firstPage = useEntity(root, "root/page")[0];
+  let page = firstPage?.data.value || root;
+
+  let cardBorderHidden = useCardBorderHidden(root);
+  let rootBackgroundImage = useEntity(root, "theme/card-background-image");
+  let rootBackgroundRepeat = useEntity(
+    root,
+    "theme/card-background-image-repeat",
+  );
+  let rootBackgroundOpacity = useEntity(
+    root,
+    "theme/card-background-image-opacity",
+  );
+  return (
+    <ThemeProvider local entityID={root} className="w-full!">
+      <div className="border border-border-light rounded-md w-full h-full overflow-hidden relative">
+        <div className="relative w-full h-full">
+          <ThemeBackgroundProvider entityID={root}>
+            <div className="leafletPreview relative grow shrink-0 h-full w-full px-2 pt-2 sm:px-3 sm:pt-3 flex items-end pointer-events-none">
+              <div
+                className={`leafletContentWrapper h-full sm:w-48 w-40 mx-auto overflow-clip ${!cardBorderHidden && "border border-border-light border-b-0 rounded-t-md"}`}
+                style={
+                  cardBorderHidden
+                    ? {}
+                    : {
+                        backgroundImage: rootBackgroundImage
+                          ? `url(${rootBackgroundImage.data.src}), url(${rootBackgroundImage.data.fallback})`
+                          : undefined,
+                        backgroundRepeat: rootBackgroundRepeat
+                          ? "repeat"
+                          : "no-repeat",
+                        backgroundPosition: "center",
+                        backgroundSize: !rootBackgroundRepeat
+                          ? "cover"
+                          : rootBackgroundRepeat?.data.value / 3,
+                        opacity:
+                          rootBackgroundImage?.data.src && rootBackgroundOpacity
+                            ? rootBackgroundOpacity.data.value
+                            : 1,
+                        backgroundColor:
+                          "rgba(var(--bg-page), var(--bg-page-alpha))",
+                      }
+                }
+              >
+                <LeafletContent entityID={page} isOnScreen={props.isVisible} />
+              </div>
+            </div>
+          </ThemeBackgroundProvider>
+        </div>
+        <LeafletPreviewLink id={props.token.id} />
+      </div>
+    </ThemeProvider>
+  );
+};
+
+const LeafletPreviewLink = (props: { id: string }) => {
+  return (
+    <SpeedyLink
+      href={`/${props.id}`}
+      className={`hello no-underline sm:hover:no-underline text-primary absolute inset-0 w-full h-full bg-bg-test`}
+    />
+  );
+};
diff --git a/app/home/LeafletPreview.tsx b/app/home/LeafletPreview.tsx
deleted file mode 100644
index f1eba178..00000000
--- a/app/home/LeafletPreview.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-"use client";
-import { BlockPreview, PagePreview } from "components/Blocks/PageLinkBlock";
-import {
-  ThemeBackgroundProvider,
-  ThemeProvider,
-} from "components/ThemeManager/ThemeProvider";
-import { useEffect, useRef, useState } from "react";
-import { useBlocks } from "src/hooks/queries/useBlocks";
-import {
-  PermissionToken,
-  useEntity,
-  useReferenceToEntity,
-  useReplicache,
-} from "src/replicache";
-import { deleteLeaflet } from "actions/deleteLeaflet";
-import { removeDocFromHome } from "./storage";
-import { mutate } from "swr";
-import { ButtonPrimary } from "components/Buttons";
-import { LeafletOptions } from "./LeafletOptions";
-import { CanvasContent } from "components/Canvas";
-import { theme } from "tailwind.config";
-import { useTemplateState } from "./CreateNewButton";
-import styles from "./LeafletPreview.module.css";
-import { useRouter } from "next/navigation";
-import Link from "next/link";
-import { TemplateSmall } from "components/Icons/TemplateSmall";
-import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
-import {
-  PublicationMetadata,
-  PublicationMetadataPreview,
-} from "components/Pages/PublicationMetadata";
-import { SpeedyLink } from "components/SpeedyLink";
-
-export const LeafletPreview = (props: {
-  draft?: boolean;
-  published?: boolean;
-  index: number;
-  token: PermissionToken;
-  leaflet_id: string;
-  loggedIn: boolean;
-}) => {
-  let [state, setState] = useState<"normal" | "deleting">("normal");
-  let isTemplate = useTemplateState(
-    (s) => !!s.templates.find((t) => t.id === props.token.id),
-  );
-  let root =
-    useReferenceToEntity("root/page", props.leaflet_id)[0]?.entity ||
-    props.leaflet_id;
-  let firstPage = useEntity(root, "root/page")[0];
-  let page = firstPage?.data.value || root;
-
-  let cardBorderHidden = useCardBorderHidden(root);
-  let rootBackgroundImage = useEntity(root, "theme/card-background-image");
-  let rootBackgroundRepeat = useEntity(
-    root,
-    "theme/card-background-image-repeat",
-  );
-  let rootBackgroundOpacity = useEntity(
-    root,
-    "theme/card-background-image-opacity",
-  );
-
-  return (
-    <div className="relative max-h-40 h-40">
-      <ThemeProvider local entityID={root} className="!w-full">
-        <div className="rounded-lg sm:hover:shadow-sm overflow-clip border border-border outline outline-2 outline-transparent outline-offset-1 sm:hover:outline-border bg-bg-leaflet grow w-full h-full">
-          {state === "normal" ? (
-            <div className="relative w-full h-full">
-              <ThemeBackgroundProvider entityID={root}>
-                <div className="leafletPreview grow shrink-0 h-full w-full px-2 pt-2 sm:px-3 sm:pt-3 flex items-end pointer-events-none">
-                  <div
-                    className={`leafletContentWrapper h-full sm:w-48 w-40 mx-auto overflow-clip ${!cardBorderHidden && "border border-border-light border-b-0 rounded-t-md"}`}
-                    style={
-                      cardBorderHidden
-                        ? {}
-                        : {
-                            backgroundImage: rootBackgroundImage
-                              ? `url(${rootBackgroundImage.data.src}), url(${rootBackgroundImage.data.fallback})`
-                              : undefined,
-                            backgroundRepeat: rootBackgroundRepeat
-                              ? "repeat"
-                              : "no-repeat",
-                            backgroundPosition: "center",
-                            backgroundSize: !rootBackgroundRepeat
-                              ? "cover"
-                              : rootBackgroundRepeat?.data.value / 3,
-                            opacity:
-                              rootBackgroundImage?.data.src &&
-                              rootBackgroundOpacity
-                                ? rootBackgroundOpacity.data.value
-                                : 1,
-                            backgroundColor:
-                              "rgba(var(--bg-page), var(--bg-page-alpha))",
-                          }
-                    }
-                  >
-                    <LeafletContent entityID={page} index={props.index} />
-                  </div>
-                </div>
-              </ThemeBackgroundProvider>
-              <SpeedyLink
-                href={`/${props.token.id}`}
-                className={`no-underline sm:hover:no-underline text-primary absolute inset-0 w-full h-full`}
-              />
-            </div>
-          ) : (
-            <LeafletAreYouSure token={props.token} setState={setState} />
-          )}
-        </div>
-        <div className="flex justify-between pt-1 shrink-0 w-full gap-2">
-          {props.draft || props.published ? (
-            <div
-              className={`text-xs  container !border-none !w-fit px-0.5  italic ${props.published ? "font-bold text-tertiary" : "text-tertiary"}`}
-            >
-              {props.published ? "Published!" : "Draft"}
-            </div>
-          ) : (
-            <div />
-          )}
-          <LeafletOptions
-            leaflet={props.token}
-            isTemplate={isTemplate}
-            loggedIn={props.loggedIn}
-          />
-        </div>
-        <LeafletTemplateIndicator isTemplate={isTemplate} />
-      </ThemeProvider>
-    </div>
-  );
-};
-
-const LeafletContent = (props: { entityID: string; index: number }) => {
-  let type = useEntity(props.entityID, "page/type")?.data.value || "doc";
-  let blocks = useBlocks(props.entityID);
-  let previewRef = useRef<HTMLDivElement | null>(null);
-  let [isVisible, setIsVisible] = useState(props.index > 16 ? false : true);
-  useEffect(() => {
-    if (!previewRef.current) return;
-    let observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            setIsVisible(true);
-          } else {
-            setIsVisible(false);
-          }
-        });
-      },
-      { threshold: 0.1, root: null },
-    );
-    observer.observe(previewRef.current);
-    return () => observer.disconnect();
-  }, [previewRef]);
-
-  if (type === "canvas")
-    return (
-      <div
-        className={`pageLinkBlockPreview shrink-0 h-full overflow-clip relative bg-bg-page shadow-sm  rounded-md`}
-      >
-        <div
-          className={`absolute top-0 left-0 origin-top-left pointer-events-none ${styles.scaleLeafletCanvasPreview}`}
-          style={{
-            width: `1272px`,
-            height: "calc(1272px * 2)",
-          }}
-        >
-          {isVisible && <CanvasContent entityID={props.entityID} preview />}
-        </div>
-      </div>
-    );
-
-  return (
-    <div
-      ref={previewRef}
-      className={`pageLinkBlockPreview h-full overflow-clip flex flex-col gap-0.5 no-underline relative`}
-    >
-      <div
-        className={`absolute top-0 left-0 w-full h-full origin-top-left pointer-events-none ${styles.scaleLeafletDocPreview}`}
-        style={{
-          width: `var(--page-width-units)`,
-        }}
-      >
-        <PublicationMetadataPreview />
-
-        {isVisible &&
-          blocks.slice(0, 10).map((b, index, arr) => {
-            return (
-              <BlockPreview
-                pageType="doc"
-                entityID={b.value}
-                previousBlock={arr[index - 1] || null}
-                nextBlock={arr[index + 1] || null}
-                nextPosition={""}
-                previewRef={previewRef}
-                {...b}
-                key={b.factID}
-              />
-            );
-          })}
-      </div>
-    </div>
-  );
-};
-
-const LeafletAreYouSure = (props: {
-  token: PermissionToken;
-  setState: (s: "normal" | "deleting") => void;
-}) => {
-  return (
-    <div
-      className="leafletContentWrapper w-full h-full px-1 pt-1 sm:px-[6px] sm:pt-2 flex flex-col gap-2 justify-center items-center "
-      style={{
-        backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha))",
-      }}
-    >
-      <div className="font-bold text-center">
-        Permanently delete this Leaflet?
-      </div>
-      <div className="flex gap-2 font-bold ">
-        <ButtonPrimary
-          compact
-          onMouseDown={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            deleteLeaflet(props.token);
-            removeDocFromHome(props.token);
-            mutate("leaflets");
-          }}
-        >
-          Delete
-        </ButtonPrimary>
-        <button
-          className="text-accent-1"
-          onMouseDown={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            props.setState("normal");
-          }}
-        >
-          Nevermind
-        </button>
-      </div>
-    </div>
-  );
-};
-
-const LeafletTemplateIndicator = (props: { isTemplate: boolean }) => {
-  if (!props.isTemplate) return;
-
-  return (
-    <div className="absolute -top-3 right-1">
-      <TemplateSmall fill={theme.colors["bg-page"]} />
-    </div>
-  );
-};
diff --git a/app/home/page.tsx b/app/home/page.tsx
index 45ffd500..bcf27599 100644
--- a/app/home/page.tsx
+++ b/app/home/page.tsx
@@ -1,5 +1,5 @@
 import { cookies } from "next/headers";
-import { Fact, ReplicacheProvider } from "src/replicache";
+import { Fact, ReplicacheProvider, useEntity } from "src/replicache";
 import type { Attribute } from "src/replicache/attributes";
 import {
   ThemeBackgroundProvider,
@@ -9,16 +9,15 @@ import { EntitySetProvider } from "components/EntitySetProvider";
 import { createIdentity } from "actions/createIdentity";
 import { drizzle } from "drizzle-orm/node-postgres";
 import { IdentitySetter } from "./IdentitySetter";
-import { LeafletList } from "./LeafletList";
+
 import { getIdentityData } from "actions/getIdentityData";
 import { getFactsFromHomeLeaflets } from "app/api/rpc/[command]/getFactsFromHomeLeaflets";
-import { HomeSidebar } from "./HomeSidebar";
-import { HomeFooter } from "./HomeFooter";
-import { Media } from "components/Media";
-import { MyPublicationList } from "./Publications";
 import { supabaseServerClient } from "supabase/serverClient";
 import { pool } from "supabase/pool";
 
+import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
+import { HomeLayout } from "./HomeLayout";
+
 export default async function Home() {
   let cookieStore = await cookies();
   let auth_res = await getIdentityData();
@@ -59,13 +58,13 @@ export default async function Home() {
 
   if (!permission_token)
     return (
-      <div className="p-4 text-lg text-center flex flex-col gap-4">
-        <p>Sorry, home page not found!</p>
+      <NotFoundLayout>
+        <p className="font-bold">Sorry, we can't find this home!</p>
         <p>
           This may be a glitch on our end. If the issue persists please{" "}
           <a href="mailto:contact@leaflet.pub">send us a note</a>.
         </p>
-      </div>
+      </NotFoundLayout>
     );
   let [homeLeafletFacts, allLeafletFacts] = await Promise.all([
     supabaseServerClient.rpc("get_facts", {
@@ -87,6 +86,7 @@ export default async function Home() {
 
   let root_entity = permission_token.root_entity;
   let home_docs_initialFacts = allLeafletFacts?.result || {};
+
   return (
     <ReplicacheProvider
       rootEntity={root_entity}
@@ -99,22 +99,24 @@ export default async function Home() {
         set={permission_token.permission_token_rights[0].entity_set}
       >
         <ThemeProvider entityID={root_entity}>
-          <div className="homeWrapper flex h-full bg-bg-leaflet pwa-padding">
-            <ThemeBackgroundProvider entityID={root_entity}>
-              <div className="home relative max-w-screen-lg w-full h-full mx-auto flex sm:flex-row flex-col sm:items-stretch sm:px-6 ">
-                <HomeSidebar />
-                <div className={`h-full overflow-y-scroll`}>
-                  <Media mobile>
-                    <div className="pubListWrapper p-2 ">
-                      <MyPublicationList />
-                    </div>
-                  </Media>
-                  <LeafletList initialFacts={home_docs_initialFacts} />
-                </div>
-                <HomeFooter />
-              </div>
-            </ThemeBackgroundProvider>
-          </div>
+          <ThemeBackgroundProvider entityID={root_entity}>
+            <HomeLayout
+              titles={{
+                ...home_docs_initialFacts.titles,
+                ...auth_res?.permission_token_on_homepage.reduce(
+                  (acc, tok) => {
+                    let title =
+                      tok.permission_tokens.leaflets_in_publications[0]?.title;
+                    if (title) acc[tok.permission_tokens.root_entity] = title;
+                    return acc;
+                  },
+                  {} as { [k: string]: string },
+                ),
+              }}
+              entityID={root_entity}
+              initialFacts={home_docs_initialFacts.facts || {}}
+            />
+          </ThemeBackgroundProvider>
         </ThemeProvider>
       </EntitySetProvider>
     </ReplicacheProvider>
diff --git a/app/legal/content.tsx b/app/legal/content.tsx
index 580062a6..58b7c5d7 100644
--- a/app/legal/content.tsx
+++ b/app/legal/content.tsx
@@ -36,7 +36,7 @@ export const LegalContent = () => {
         </button>
       </div>
       <div
-        className={`no-scrollbar border border-border rounded-md bg-bg-page sm:px-4 px-3 pt-2 pb-6  -mt-[1px] h-full overflow-y-scroll rounded-tl-none `}
+        className={`no-scrollbar border border-border rounded-md bg-bg-page sm:px-4 px-3 pt-2 pb-6  -mt-px h-full overflow-y-scroll rounded-tl-none `}
       >
         {state === "terms" ? <Terms /> : <Privacy />}
       </div>
diff --git a/app/lish/Subscribe.tsx b/app/lish/Subscribe.tsx
index 718d9815..68f62409 100644
--- a/app/lish/Subscribe.tsx
+++ b/app/lish/Subscribe.tsx
@@ -43,7 +43,7 @@ export const SubscribeButton = (props: {
         <div className="flex relative w-full max-w-sm">
           <Input
             type="email"
-            className="input-with-border !pr-[104px] !py-1 grow w-full"
+            className="input-with-border pr-[104px]! py-1! grow w-full"
             placeholder={
               props.compact ? "subscribe with email..." : "email here..."
             }
@@ -55,7 +55,7 @@ export const SubscribeButton = (props: {
           />
           <ButtonPrimary
             compact
-            className="absolute right-1 top-1 !outline-0"
+            className="absolute right-1 top-1 outline-0!"
             onClick={async () => {
               if (identity?.email) {
                 await subscribeToPublicationWithEmail(props.publication);
@@ -151,7 +151,7 @@ const ConfirmCodeInput = (props: {
       <Input
         type="text"
         pattern="[0-9]"
-        className="input-with-border !pr-[88px] !py-1 max-w-[156px]"
+        className="input-with-border pr-[88px]! py-1! max-w-[156px]"
         placeholder="000000"
         value={props.codeInputValue}
         onChange={(e) => {
@@ -160,7 +160,7 @@ const ConfirmCodeInput = (props: {
       />
       <ButtonPrimary
         compact
-        className="absolute right-1 top-1 !outline-0"
+        className="absolute right-1 top-1 outline-0!"
         onClick={async () => {
           console.log(
             await confirmEmailAuthToken(props.token, props.codeInputValue),
@@ -356,14 +356,14 @@ const SubscribeSuccessModal = ({
     <Dialog.Root open={open} onOpenChange={setOpen}>
       <Dialog.Trigger asChild></Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-primary data-[state=open]:animate-overlayShow opacity-10 blur-sm" />
+        <Dialog.Overlay className="fixed inset-0 bg-primary data-[state=open]:animate-overlayShow opacity-10 blur-xs" />
         <Dialog.Content
           className={`
       z-20 opaque-container
       fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
       w-96 px-3 py-4
-      max-w-[var(--radix-popover-content-available-width)]
-      max-h-[var(--radix-popover-content-available-height)]
+      max-w-(--radix-popover-content-available-width)
+      max-h-(--radix-popover-content-available-height)
       overflow-y-scroll no-scrollbar
       flex flex-col gap-1 text-center justify-center
       `}
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx
index 902a988e..4684976b 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx
@@ -226,7 +226,7 @@ export function CommentBox(props: {
       <div className="w-full relative group">
         <pre
           ref={mountRef}
-          className={`border whitespace-pre-wrap input-with-border min-h-32 h-fit !px-2 !py-[6px]`}
+          className={`border whitespace-pre-wrap input-with-border min-h-32 h-fit px-2! py-[6px]!`}
         />
         <IOSBS view={view} />
       </div>
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
index 4e28e2a8..89208240 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
@@ -13,10 +13,10 @@ import { ButtonPrimary } from "components/Buttons";
 import { BlueskyTiny } from "components/Icons/BlueskyTiny";
 import { Popover } from "components/Popover";
 import { AppBskyActorProfile, AtUri } from "@atproto/api";
-import { timeAgo } from "app/discover/PubListing";
 import { BlueskyLogin } from "app/login/LoginForm";
 import { usePathname } from "next/navigation";
 import { QuoteContent } from "../Quotes";
+import { timeAgo } from "src/utils/timeAgo";
 
 export type Comment = {
   record: Json;
@@ -44,7 +44,9 @@ export function Comments(props: { document_uri: string; comments: Comment[] }) {
         Comments
         <button
           className="text-tertiary"
-          onClick={() => setInteractionState(props.document_uri, { drawerOpen: false })}
+          onClick={() =>
+            setInteractionState(props.document_uri, { drawerOpen: false })
+          }
         >
           <CloseTiny />
         </button>
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx
index 94198309..f45627f5 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx
@@ -21,10 +21,10 @@ export const InteractionDrawer = (props: {
   return (
     <>
       <div className="sm:pr-4 pr-[6px] snap-center">
-        <div className="shrink-0  w-[calc(var(--page-width-units)-12px)] sm:w-[var(--page-width-units)] h-full  flex z-10">
+        <div className="shrink-0  w-[calc(var(--page-width-units)-12px)] sm:w-(--page-width-units) h-full  flex z-10">
           <div
             id="interaction-drawer"
-            className="opaque-container !rounded-lg h-full w-full px-3 sm:px-4 pt-2 sm:pt-3 pb-6 overflow-scroll "
+            className="opaque-container rounded-lg! h-full w-full px-3 sm:px-4 pt-2 sm:pt-3 pb-6 overflow-scroll "
           >
             {currentDrawer === "quotes" ? (
               <Quotes {...props} />
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
index 802ec3a3..8b3ae0ba 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
@@ -129,7 +129,7 @@ export const QuoteContent = (props: {
             blocks={content}
             did={props.did}
             preview
-            className="!py-0"
+            className="py-0!"
           />
         </div>
       </div>
diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
index 51da42a0..a9cd3fd4 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -109,7 +109,7 @@ let Block = ({
     postBlockWrapper
     min-h-7
     pt-1 pb-2
-    ${isList && "isListItem !pb-0 "}
+    ${isList && "isListItem pb-0! "}
     ${alignment}
     `;
 
@@ -137,7 +137,7 @@ let Block = ({
     }
     case PubLeafletBlocksUnorderedList.isMain(b.block): {
       return (
-        <ul className="-ml-[1px] sm:ml-[9px] pb-2">
+        <ul className="-ml-px sm:ml-[9px] pb-2">
           {b.block.children.map((child, i) => (
             <ListItem
               bskyPostData={bskyPostData}
@@ -175,7 +175,7 @@ let Block = ({
           <div className="pt-2 pb-2 px-3 grow min-w-0">
             <div className="flex flex-col w-full min-w-0 h-full grow ">
               <div
-                className={`linkBlockTitle bg-transparent -mb-0.5  border-none text-base font-bold outline-none resize-none align-top border h-[24px] line-clamp-1`}
+                className={`linkBlockTitle bg-transparent -mb-0.5  border-none text-base font-bold outline-hidden resize-none align-top border h-[24px] line-clamp-1`}
                 style={{
                   overflow: "hidden",
                   textOverflow: "ellipsis",
@@ -186,7 +186,7 @@ let Block = ({
               </div>
 
               <div
-                className={`linkBlockDescription text-sm bg-transparent border-none outline-none resize-none align-top  grow line-clamp-2`}
+                className={`linkBlockDescription text-sm bg-transparent border-none outline-hidden resize-none align-top  grow line-clamp-2`}
               >
                 {b.block.description}
               </div>
@@ -217,7 +217,7 @@ let Block = ({
             alt={b.block.alt}
             height={b.block.aspectRatio?.height}
             width={b.block.aspectRatio?.width}
-            className={`!pt-3 sm:!pt-4 rounded-md ${className}`}
+            className={`pt-3! sm:pt-4! rounded-md ${className}`}
             src={blobRefToSrc(b.block.image.ref, did)}
           />
           {b.block.alt && (
@@ -240,7 +240,7 @@ let Block = ({
       return (
         // highly unfortunate hack so that the border-l on blockquote is the height of just the text rather than the height of the block, which includes padding.
         <blockquote
-          className={` blockquote !py-0 !mb-2 last:!mb-3 last:sm:!mb-4 first:!mt-2 sm:first:pt-3 ${className} ${PubLeafletBlocksBlockquote.isMain(previousBlock?.block) ? "!-mt-2" : "!mt-1"}`}
+          className={` blockquote py-0! mb-2! last:mb-3! sm:last:mb-4! first:mt-2! sm:first:pt-3 ${className} ${PubLeafletBlocksBlockquote.isMain(previousBlock?.block) ? "-mt-2!" : "mt-1!"}`}
           {...blockProps}
         >
           <TextBlock
@@ -318,9 +318,9 @@ function ListItem(props: {
   ) : null;
 
   return (
-    <li className={`!pb-0 flex flex-row gap-2`}>
+    <li className={`pb-0! flex flex-row gap-2`}>
       <div
-        className={`listMarker shrink-0 mx-2 z-[1] mt-[14px] h-[5px] w-[5px] ${props.item.content?.$type !== "null" ? "rounded-full bg-secondary" : ""}`}
+        className={`listMarker shrink-0 mx-2 z-1 mt-[14px] h-[5px] w-[5px] ${props.item.content?.$type !== "null" ? "rounded-full bg-secondary" : ""}`}
       />
       <div className="flex flex-col w-full">
         <Block
diff --git a/app/lish/[did]/[publication]/[rkey]/PostPage.tsx b/app/lish/[did]/[publication]/[rkey]/PostPage.tsx
index 47ac390e..6ebfe65e 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostPage.tsx
@@ -55,7 +55,7 @@ export function PostPage({
       <div
         id="post-page"
         className={`postPageWrapper relative overflow-y-auto sm:mx-0 mx-[6px] w-full
-          ${drawerOpen || hasPageBackground ? "max-w-[var(--page-width-units)] shrink-0 snap-center " : "w-full"}
+          ${drawerOpen || hasPageBackground ? "max-w-(--page-width-units) shrink-0 snap-center " : "w-full"}
           ${
             hasPageBackground
               ? "h-full bg-[rgba(var(--bg-page),var(--bg-page-alpha))] rounded-lg border border-border "
@@ -89,7 +89,7 @@ export function PostPage({
               ?.identity_did ? (
             <a
               href={`https://leaflet.pub/${document.leaflets_in_publications[0].leaflet}`}
-              className="flex gap-2 items-center hover:!no-underline selected-outline px-2 py-0.5 bg-accent-1 text-accent-2 font-bold w-fit rounded-lg !border-accent-1 !outline-accent-1 mx-auto"
+              className="flex gap-2 items-center hover:no-underline! selected-outline px-2 py-0.5 bg-accent-1 text-accent-2 font-bold w-fit rounded-lg border-accent-1! outline-accent-1! mx-auto"
             >
               <EditTiny /> Edit Post
             </a>
diff --git a/app/lish/[did]/[publication]/[rkey]/QuoteHandler.tsx b/app/lish/[did]/[publication]/[rkey]/QuoteHandler.tsx
index 7b78aa2a..d923ae67 100644
--- a/app/lish/[did]/[publication]/[rkey]/QuoteHandler.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/QuoteHandler.tsx
@@ -152,7 +152,7 @@ export const QuoteOptionButtons = (props: { position: string }) => {
       <div className="">Share via</div>
 
       <a
-        className="flex gap-1 items-center hover:font-bold px-1 hover:!no-underline"
+        className="flex gap-1 items-center hover:font-bold px-1 hover:no-underline!"
         role="link"
         href={`https://bsky.app/intent/compose?text=${encodeURIComponent(url)}`}
         target="_blank"
diff --git a/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx b/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
index fcb7edac..49afb00c 100644
--- a/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
@@ -157,9 +157,9 @@ function ListItem(props: {
   className?: string;
 }) {
   return (
-    <li className={`!pb-0 flex flex-row gap-2`}>
+    <li className={`pb-0! flex flex-row gap-2`}>
       <div
-        className={`listMarker shrink-0 mx-2 z-[1] mt-[14px] h-[5px] w-[5px] rounded-full bg-secondary`}
+        className={`listMarker shrink-0 mx-2 z-1 mt-[14px] h-[5px] w-[5px] rounded-full bg-secondary`}
       />
       <div className="flex flex-col">
         <Block block={{ block: props.item.content }} did={props.did} isList />
diff --git a/app/lish/[did]/[publication]/[rkey]/page.tsx b/app/lish/[did]/[publication]/[rkey]/page.tsx
index 377b97a2..7162364b 100644
--- a/app/lish/[did]/[publication]/[rkey]/page.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/page.tsx
@@ -20,6 +20,7 @@ import { PostPageContextProvider } from "./PostPageContext";
 import { PostPage } from "./PostPage";
 import { PageLayout } from "./PageLayout";
 import { extractCodeBlocks } from "./extractCodeBlocks";
+import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
 
 export async function generateMetadata(props: {
   params: Promise<{ publication: string; did: string; rkey: string }>;
@@ -51,13 +52,13 @@ export default async function Post(props: {
   let did = decodeURIComponent((await props.params).did);
   if (!did)
     return (
-      <div className="p-4 text-lg text-center flex flex-col gap-4">
-        <p>Sorry, can&apos;t resolve handle.</p>
+      <NotFoundLayout>
+        <p className="font-bold">Sorry, can&apos;t resolve handle.</p>
         <p>
           This may be a glitch on our end. If the issue persists please{" "}
           <a href="mailto:contact@leaflet.pub">send us a note</a>.
         </p>
-      </div>
+      </NotFoundLayout>
     );
   let agent = new AtpAgent({
     service: "https://public.api.bsky.app",
@@ -80,17 +81,13 @@ export default async function Post(props: {
   ]);
   if (!document?.data || !document.documents_in_publications[0].publications)
     return (
-      <div className="bg-bg-leaflet h-full p-3 text-center relative">
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-md w-full">
-          <div className=" px-3 py-4 opaque-container  flex flex-col gap-1 mx-2 ">
-            <h3>Sorry, post not found!</h3>
-            <p>
-              This may be a glitch on our end. If the issue persists please{" "}
-              <a href="mailto:contact@leaflet.pub">send us a note</a>.
-            </p>
-          </div>
-        </div>
-      </div>
+      <NotFoundLayout>
+        <p className="font-bold">Sorry, we can't find this post!</p>
+        <p>
+          This may be a glitch on our end. If the issue persists please{" "}
+          <a href="mailto:contact@leaflet.pub">send us a note</a>.
+        </p>
+      </NotFoundLayout>
     );
   let record = document.data as PubLeafletDocument.Record;
   let bskyPosts = record.pages.flatMap((p) => {
diff --git a/app/lish/[did]/[publication]/dashboard/Actions.tsx b/app/lish/[did]/[publication]/dashboard/Actions.tsx
index 61f3f856..96e4452c 100644
--- a/app/lish/[did]/[publication]/dashboard/Actions.tsx
+++ b/app/lish/[did]/[publication]/dashboard/Actions.tsx
@@ -22,29 +22,10 @@ import { SpeedyLink } from "components/SpeedyLink";
 export const Actions = (props: { publication: string }) => {
   return (
     <>
-      <Media mobile>
-        <SpeedyLink
-          href="/home"
-          className="hover:no-underline"
-          style={{ textDecorationLine: "none !important" }}
-        >
-          <ActionButton icon={<HomeSmall />} label="Go Home" />
-        </SpeedyLink>
-      </Media>
       <NewDraftActionButton publication={props.publication} />
       <PublicationShareButton />
       <PublicationThemeButton />
       <PublicationSettingsButton publication={props.publication} />
-      <hr className="border-border-light" />
-      <Media mobile={false}>
-        <SpeedyLink
-          href="/home"
-          className="hover:no-underline"
-          style={{ textDecorationLine: "none !important" }}
-        >
-          <ActionButton icon={<HomeSmall />} label="Go Home" />
-        </SpeedyLink>
-      </Media>
     </>
   );
 };
@@ -64,7 +45,6 @@ function PublicationShareButton() {
         <ActionButton
           id="pub-share-button"
           icon=<ShareSmall />
-          secondary
           label="Share"
           onClick={() => {}}
         />
@@ -72,7 +52,7 @@ function PublicationShareButton() {
     >
       <MenuItem onSelect={() => {}}>
         <SpeedyLink
-          href={getPublicationURL(pub!)}
+          href={getPublicationURL(pub?.publication!)}
           className="text-secondary hover:no-underline"
         >
           <div>Viewer Mode</div>
@@ -85,7 +65,7 @@ function PublicationShareButton() {
         onSelect={(e) => {
           e.preventDefault();
           let rect = (e.currentTarget as Element)?.getBoundingClientRect();
-          navigator.clipboard.writeText(getPublicationURL(pub!));
+          navigator.clipboard.writeText(getPublicationURL(pub?.publication!));
           smoker({
             position: {
               x: rect ? rect.left + (rect.right - rect.left) / 2 : 0,
@@ -133,7 +113,7 @@ function PublicationThemeButton() {
   return (
     <Popover
       asChild
-      className="max-w-xs pb-0 !bg-white"
+      className="max-w-xs pb-0 bg-white!"
       side={isMobile ? "top" : "right"}
       align={isMobile ? "center" : "start"}
       trigger={
diff --git a/app/lish/[did]/[publication]/dashboard/DraftList.tsx b/app/lish/[did]/[publication]/dashboard/DraftList.tsx
index 1682b75a..d7cd048b 100644
--- a/app/lish/[did]/[publication]/dashboard/DraftList.tsx
+++ b/app/lish/[did]/[publication]/dashboard/DraftList.tsx
@@ -1,115 +1,60 @@
 "use client";
 
 import { NewDraftSecondaryButton } from "./NewDraftButton";
-import React, { useState } from "react";
+import React from "react";
 import { usePublicationData } from "./PublicationSWRProvider";
-import { Menu, MenuItem } from "components/Layout";
-import { deleteDraft } from "./deleteDraft";
-import { DeleteSmall } from "components/Icons/DeleteSmall";
-import { ButtonPrimary } from "components/Buttons";
-import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny";
-import { SpeedyLink } from "components/SpeedyLink";
+import { LeafletList } from "app/home/HomeLayout";
 
-export function DraftList() {
+export function DraftList(props: {
+  searchValue: string;
+  showPageBackground: boolean;
+}) {
   let { data: pub_data } = usePublicationData();
-  if (!pub_data) return null;
+  if (!pub_data?.publication) return null;
+  let { leaflets_in_publications, ...publication } = pub_data.publication;
   return (
-    <div className="flex flex-col gap-4 pb-4">
-      <NewDraftSecondaryButton fullWidth publication={pub_data?.uri} />
-      {pub_data.leaflets_in_publications
-        .filter((d) => !d.doc)
-        .map((d) => {
-          return (
-            <React.Fragment key={d.leaflet}>
-              <Draft id={d.leaflet} {...d} />
-              <hr className="last:hidden border-border-light" />
-            </React.Fragment>
-          );
-        })}
-    </div>
-  );
-}
+    <div className="flex flex-col gap-4">
+      <NewDraftSecondaryButton
+        fullWidth
+        publication={pub_data?.publication?.uri}
+      />
 
-function Draft(props: { id: string; title: string; description: string }) {
-  let [open, setOpen] = useState(false);
-  return (
-    <div className="flex flex-row gap-2 items-start">
-      <SpeedyLink
-        key={props.id}
-        href={`/${props.id}`}
-        className="flex flex-col gap-0 hover:!no-underline grow"
-      >
-        {props.title ? (
-          <h3 className="text-primary">{props.title}</h3>
-        ) : (
-          <h3 className="text-tertiary italic">Untitled</h3>
-        )}
-        <div className="text-secondary italic">{props.description}</div>
-      </SpeedyLink>
-      <Menu
-        open={open}
-        onOpenChange={(o) => setOpen(o)}
-        align="end"
-        asChild
-        trigger={
-          <button className="text-secondary rounded-md selected-outline !border-transparent hover:!border-border ">
-            <MoreOptionsVerticalTiny />
-          </button>
-        }
-      >
-        <>
-          <DeleteDraft id={props.id} />
-        </>
-      </Menu>
+      <LeafletList
+        searchValue={props.searchValue}
+        showPreview={false}
+        defaultDisplay="list"
+        cardBorderHidden={!props.showPageBackground}
+        leaflets={leaflets_in_publications
+          .filter((l) => !l.documents)
+          .map((l) => {
+            return {
+              token: {
+                ...l.permission_tokens!,
+                leaflets_in_publications: [
+                  {
+                    ...l,
+                    publications: {
+                      ...publication,
+                    },
+                  },
+                ],
+              },
+              added_at: "",
+            };
+          })}
+        initialFacts={pub_data.leaflet_data.facts || {}}
+        titles={{
+          ...leaflets_in_publications.reduce(
+            (acc, leaflet) => {
+              if (leaflet.title && leaflet.permission_tokens)
+                acc[leaflet.permission_tokens.root_entity] = leaflet.title;
+              return acc;
+            },
+            {} as { [l: string]: string },
+          ),
+        }}
+      />
+      <div className="spacer h-12 w-full bg-transparent shrink-0 " />
     </div>
   );
 }
-
-export function DeleteDraft(props: { id: string }) {
-  let { mutate } = usePublicationData();
-  let [state, setState] = useState<"normal" | "confirm">("normal");
-
-  if (state === "normal") {
-    return (
-      <MenuItem
-        className="justify-end"
-        onSelect={(e) => {
-          if (state === "normal") {
-            e.preventDefault();
-            return setState("confirm");
-          }
-        }}
-      >
-        Delete Draft
-        <DeleteSmall />
-      </MenuItem>
-    );
-  }
-  if (state === "confirm") {
-    return (
-      <div className="flex flex-col items-center font-bold text-secondary px-2 py-1">
-        Are you sure?
-        <div className="text-sm text-tertiary font-normal">
-          This action cannot be undone!
-        </div>
-        <ButtonPrimary
-          className="mt-2"
-          onClick={async () => {
-            await mutate((data) => {
-              if (!data) return data;
-              return {
-                ...data,
-                leaflets_in_publications: data.leaflets_in_publications.filter(
-                  (d) => d.leaflet !== props.id,
-                ),
-              };
-            }, false);
-            await deleteDraft(props.id);
-          }}
-        >
-          Delete
-        </ButtonPrimary>
-      </div>
-    );
-  }
-}
diff --git a/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx b/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx
index 30421a87..aedf8c79 100644
--- a/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx
+++ b/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx
@@ -17,7 +17,7 @@ export function NewDraftActionButton(props: { publication: string }) {
         router.push(`/${newLeaflet}`);
       }}
       icon=<AddTiny className="m-1 shrink-0" />
-      label="New Draft"
+      label="New"
     />
   );
 }
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
index c820c89c..4a8c3bf1 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
@@ -1,81 +1,84 @@
 "use client";
-import { BlobRef } from "@atproto/lexicon";
-import { useState } from "react";
-import { useIsMobile } from "src/hooks/isMobile";
-import { theme } from "tailwind.config";
-import { usePublicationData } from "./PublicationSWRProvider";
+
+import { DraftList } from "./DraftList";
+import { GetPublicationDataReturnType } from "app/api/rpc/[command]/get_publication_data";
+import { Actions } from "./Actions";
+import React, { useState } from "react";
+import { PublishedPostsList } from "./PublishedPostsLists";
 import { PubLeafletPublication } from "lexicons/api";
+import { PublicationSubscribers } from "./PublicationSubscribers";
+import { AtUri } from "@atproto/syntax";
+import {
+  HomeDashboardControls,
+  DashboardLayout,
+  PublicationDashboardControls,
+} from "components/PageLayouts/DashboardLayout";
+import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
 
-type Tabs = { [tabName: string]: React.ReactNode };
-export function PublicationDashboard<T extends Tabs>(props: {
-  name: string;
-  tabs: T;
-  defaultTab: keyof T;
-  icon: BlobRef | null;
-  did: string;
+export default function PublicationDashboard({
+  publication,
+  record,
+}: {
+  record: PubLeafletPublication.Record;
+  publication: Exclude<
+    GetPublicationDataReturnType["result"]["publication"],
+    null
+  >;
 }) {
-  let { data: pub } = usePublicationData();
-  let showPageBackground = !!(pub?.record as PubLeafletPublication.Record)
-    ?.theme?.showPageBackground;
-  let [tab, setTab] = useState(props.defaultTab);
-  let content = props.tabs[tab];
+  let [searchValue, setSearchValue] = useState("");
+  let [debouncedSearchValue, setDebouncedSearchValue] = useState("");
 
-  return (
-    <>
-      <div className="pubDashHeader flex flex-row gap-2 w-full justify-between border-b border-border text-secondary items-center ">
-        <div className="max-w-full w-[1000px] h-full ">
-          <div
-            className={`flex gap-2 h-fit py-0.5 pl-1 pr-2 w-fit rounded-md ${showPageBackground ? "bg-none sm:bg-[rgba(var(--bg-page),0.8)]" : ""}`}
-          >
-            {props.icon && (
-              <div
-                className="pubDashLogo shrink-0 w-6 h-6 rounded-full  border-2 border-bg-page "
-                style={{
-                  backgroundImage: `url(/api/atproto_images?did=${props.did}&cid=${(props.icon.ref as unknown as { $link: string })["$link"]})`,
-                  backgroundRepeat: "no-repeat",
-                  backgroundPosition: "center",
-                  backgroundSize: "cover",
-                }}
-              />
-            )}
-            <div className="pubDashName font-bold grow text-tertiary max-w-full truncate  sm:block hidden">
-              {props.name}
-            </div>
-          </div>
-        </div>
-        <div className="pubDashTabs flex flex-row gap-1">
-          {Object.keys(props.tabs).map((t) => (
-            <Tab
-              key={t}
-              name={t}
-              selected={t === tab}
-              onSelect={() => setTab(t)}
-              showPageBackground={showPageBackground}
-            />
-          ))}
-        </div>
-      </div>
-      <div
-        className={`pubDashContent py-4 px-3 sm:px-4 h-full overflow-auto ${showPageBackground ? "rounded-b-md border border-border border-t-0 bg-[rgba(var(--bg-page),var(--bg-page-alpha))]" : ""}`}
-      >
-        {content}
-      </div>
-    </>
+  useDebouncedEffect(
+    () => {
+      setDebouncedSearchValue(searchValue);
+    },
+    200,
+    [searchValue],
   );
-}
 
-function Tab(props: {
-  name: string;
-  selected: boolean;
-  showPageBackground: boolean;
-  onSelect: () => void;
-}) {
   return (
-    <div
-      className={`pubTabs border  border-b-0 px-2 pt-1 pb-0.5 rounded-t-md border-border hover:cursor-pointer ${props.selected ? "text-accent-contrast font-bold -mb-[1px]" : ""} ${props.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))]" : ""}`}
-      onClick={() => props.onSelect()}
-    >
-      {props.name}
-    </div>
+    <DashboardLayout
+      id={publication.uri}
+      hasBackgroundImage={!!record?.theme?.backgroundImage}
+      defaultTab="Drafts"
+      tabs={{
+        Drafts: {
+          content: (
+            <DraftList
+              searchValue={debouncedSearchValue}
+              showPageBackground={!!record.theme?.showPageBackground}
+            />
+          ),
+          controls: (
+            <PublicationDashboardControls
+              defaultDisplay={"list"}
+              hasBackgroundImage={!!record?.theme?.backgroundImage}
+              searchValue={searchValue}
+              setSearchValueAction={setSearchValue}
+            />
+          ),
+        },
+        Published: {
+          content: (
+            <PublishedPostsList
+              searchValue={debouncedSearchValue}
+              showPageBackground={!!record.theme?.showPageBackground}
+            />
+          ),
+          controls: null,
+        },
+        Subscribers: {
+          content: (
+            <PublicationSubscribers
+              showPageBackground={!!record.theme?.showPageBackground}
+            />
+          ),
+          controls: null,
+        },
+      }}
+      actions={<Actions publication={publication.uri} />}
+      currentPage="pub"
+      publication={publication.uri}
+    />
   );
 }
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationSWRProvider.tsx b/app/lish/[did]/[publication]/dashboard/PublicationSWRProvider.tsx
index af25aa78..17a0b1f0 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationSWRProvider.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationSWRProvider.tsx
@@ -12,7 +12,7 @@ export function PublicationSWRDataProvider(props: {
   publication_data: GetPublicationDataReturnType["result"];
   children: React.ReactNode;
 }) {
-  let key = `publication-data-${props.publication_did}`;
+  let key = `publication-data-${props.publication_did}-${props.publication_rkey}`;
   return (
     <PublicationContext
       value={{ name: props.publication_rkey, did: props.publication_did }}
@@ -32,7 +32,7 @@ export function PublicationSWRDataProvider(props: {
 
 export function usePublicationData() {
   let { name, did } = useContext(PublicationContext);
-  let key = `publication-data-${did}`;
+  let key = `publication-data-${did}-${name}`;
   let { data, mutate } = useSWR(
     key,
     async () =>
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx b/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx
index 6c239856..024e67e1 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx
@@ -1,19 +1,60 @@
 "use client";
 import { AppBskyActorProfile } from "lexicons/api";
 import { usePublicationData } from "./PublicationSWRProvider";
-import { blobRefToSrc } from "src/utils/blobRefToSrc";
 import { ButtonPrimary } from "components/Buttons";
 import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
 import { useSmoker } from "components/Toast";
+import { Menu, MenuItem, Separator } from "components/Layout";
+import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny";
+import { Checkbox } from "components/Checkbox";
+import { useEffect, useState } from "react";
 
-export function PublicationSubscribers() {
-  let { data: publication } = usePublicationData();
+type subscriber = { email: string | undefined; did: string | undefined };
+
+// HELLO! THIS FILE HAS CHECKBOXES AND A HEADER COMMENTED OUT
+// the checkboxes would let you select users and and the eader provided a count and let you select all and do actions
+// I also removed some props from SubscriberListItem around emails since we dont have them yet.
+// WHen we get emails in, we can uncomment some of this stuff
+
+export function PublicationSubscribers(props: {
+  showPageBackground?: boolean;
+}) {
   let smoker = useSmoker();
+  let { data: publication } = usePublicationData();
+  // let [checkedSubscribers, setCheckedSubscribers] = useState<subscriber[]>([]);
+  // let [checkAll, setCheckAll] = useState(false);
 
   if (!publication) return <div>null</div>;
-  if (publication.publication_subscriptions.length === 0)
+  let subscribers = publication.publication?.publication_subscriptions || [];
+
+  // useEffect(() => {
+  //   const allSubscribersSelected = subscribers.every((subscriber) =>
+  //     checkedSubscribers.some(
+  //       (checked) =>
+  //         checked.email === "dummyemail@email.com" &&
+  //         checked.did === subscriber.identities?.bsky_profiles?.did,
+  //     ),
+  //   );
+
+  //   if (allSubscribersSelected && subscribers.length > 0) {
+  //     setCheckAll(true);
+  //   } else {
+  //     setCheckAll(false);
+  //   }
+  // }, [checkedSubscribers]);
+
+  if (subscribers.length === 0)
     return (
-      <div className="italic text-tertiary  flex flex-col gap-0 text-center justify-center pt-4">
+      <div
+        className={`italic text-tertiary  flex flex-col gap-0 text-center justify-center mt-4 border rounded-md ${props.showPageBackground ? "border-border-light p-2" : "border-transparent"}`}
+        style={
+          props.showPageBackground
+            ? {
+                backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha)) ",
+              }
+            : { backgroundColor: "transparent" }
+        }
+      >
         <p className="font-bold"> No subscribers yet </p>
         <p>Start sharing your publication!</p>
         <ButtonPrimary
@@ -21,7 +62,9 @@ export function PublicationSubscribers() {
           onClick={(e) => {
             e.preventDefault();
             let rect = (e.currentTarget as Element)?.getBoundingClientRect();
-            navigator.clipboard.writeText(getPublicationURL(publication!));
+            navigator.clipboard.writeText(
+              getPublicationURL(publication.publication!),
+            );
             smoker({
               position: {
                 x: rect ? rect.left + (rect.right - rect.left) / 2 : 0,
@@ -37,53 +80,158 @@ export function PublicationSubscribers() {
     );
 
   return (
-    <div>
-      <h2>{publication.publication_subscriptions.length} Subscribers </h2>
-      <div className="flex gap-2 flex-col">
-        {publication.publication_subscriptions
+    <div
+      className={`rounded-md ${props.showPageBackground ? "border-border-light p-2" : "border-transparent"}`}
+      style={
+        props.showPageBackground
+          ? {
+              backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha)) ",
+            }
+          : { backgroundColor: "transparent" }
+      }
+    >
+      {/*<div className="subscriberListHeader flex gap-2 ">
+        <Checkbox
+          checked={checkAll}
+          onChange={() => {
+            if (checkAll === false) {
+              const allSubscribers = subscribers.map((subscriber) => ({
+                email: "dummyemail@email.com",
+                did: subscriber.identities?.bsky_profiles?.did,
+              }));
+              setCheckedSubscribers(allSubscribers);
+            } else {
+              setCheckedSubscribers([]);
+            }
+          }}
+          className="!font-bold text-secondary mb-1"
+        >
+          {subscribers.length} Subscriber{subscribers.length !== 1 && "s"}
+        </Checkbox>
+        {checkedSubscribers.length !== 0 && (
+          <SubscriberOptions
+            checkedSubscribers={checkedSubscribers}
+            allSelected={checkedSubscribers.length === subscribers.length}
+          />
+        )}
+      </div>*/}
+      <div className="!font-bold text-secondary mb-1">
+        {subscribers.length} Subscriber{subscribers.length !== 1 && "s"}
+      </div>
+      <hr className="mb-2 border-border " />
+      <div className="subscriberListContent flex gap-3 flex-col ">
+        {subscribers
           .sort((a, b) => {
             return b.created_at.localeCompare(a.created_at);
           })
           .map((subscriber, index) => {
             if (!subscriber.identities?.bsky_profiles) return null;
             let handle = subscriber.identities?.bsky_profiles.handle;
+            let did = subscriber.identities?.bsky_profiles.did;
             let profile = subscriber.identities?.bsky_profiles
               ?.record as AppBskyActorProfile.Record | null;
             if (!profile) return null;
             return (
-              <div key={subscriber.identities.bsky_profiles?.did}>
-                <a
-                  target="_blank"
-                  href={`https://bsky.app/profile/${subscriber.identities.bsky_profiles?.did}`}
-                  className="flex text-primary p-2 gap-1"
-                >
-                  <div className="flex flex-row gap-2">
-                    {profile.avatar && (
-                      <img
-                        className="rounded-full w-8 h-8"
-                        src={
-                          profile?.avatar &&
-                          blobRefToSrc(
-                            profile.avatar.ref,
-                            subscriber.identities.bsky_profiles?.did,
-                          )
-                        }
-                        alt={profile.displayName}
-                      />
-                    )}
-                    <div className="flex flex-col gap-1">
-                      <h3>{profile.displayName}</h3>
-                      <p>@{handle}</p>
-                    </div>
-                  </div>
-                </a>
-                {index !== publication.publication_subscriptions.length - 1 && (
-                  <hr className="border-border" />
-                )}
-              </div>
+              <SubscriberListItem
+                key={`${subscriber.identities.bsky_profiles?.did}`}
+                handle={handle ? handle : undefined}
+                did={`${subscriber.identities.bsky_profiles?.did}`}
+                createdAt={subscriber.created_at}
+              />
             );
           })}
       </div>
     </div>
   );
 }
+
+const SubscriberListItem = (props: {
+  handle: string | undefined;
+  did: string | undefined;
+  createdAt: string;
+}) => {
+  return (
+    // <Checkbox
+    //   className="!font-normal"
+    //   checked={props.checked}
+    //   onChange={() => {
+    //     if (props.checked === false) {
+    //       const newCheckedSubscribers = [
+    //         ...props.checkedSubscribers,
+    //         {
+    //           email: props.email,
+    //           did: props.did,
+    //         },
+    //       ];
+    //       props.setCheckedSubscribers(newCheckedSubscribers);
+    //     } else {
+    //       const newCheckedSubscribers = props.checkedSubscribers.filter(
+    //         (subscriber) =>
+    //           !(
+    //             subscriber.email === props.email && subscriber.did === props.did
+    //           ),
+    //       );
+    //       props.setCheckedSubscribers(newCheckedSubscribers);
+    //     }
+    //     console.log(props.checkedSubscribers);
+    //   }}
+    // >
+    <>
+      <div className="flex items-end flex-row gap-2 w-full">
+        {/*<a
+            target="_blank"
+            href={`mailto:${props.email}`}
+            className="font-bold  text-primary"
+          >
+            {props.email}
+          </a>
+
+          {props.handle && props.email && (
+            <Separator classname="sm:block hidden" />
+          )}*/}
+        {props.handle && (
+          <a
+            target="_blank"
+            href={`https://bsky.app/profile/${props.did}`}
+            className={"font-bold"}
+          >
+            @{props.handle}
+          </a>
+        )}
+        <div className="px-1 py-0 h-max rounded-md text-sm italic text-tertiary">
+          {new Date(props.createdAt).toLocaleString(undefined, {
+            year: "2-digit",
+            month: "2-digit",
+            day: "2-digit",
+          })}
+        </div>
+      </div>
+    </>
+    // </Checkbox>
+  );
+};
+
+const SubscriberOptions = (props: {
+  checkedSubscribers: subscriber[];
+  allSelected: boolean;
+}) => {
+  return (
+    <Menu
+      asChild
+      className=""
+      trigger={
+        <ButtonPrimary compact className="-mt-[1px]">
+          {props.allSelected ? "All" : props.checkedSubscribers.length} Selected{" "}
+          <MoreOptionsVerticalTiny />
+        </ButtonPrimary>
+      }
+    >
+      <MenuItem className="justify-center" onSelect={() => {}}>
+        Export {props.allSelected ? "All" : "Selected"}
+      </MenuItem>
+      <MenuItem className="justify-center" onSelect={() => {}}>
+        Remove {props.allSelected ? "All" : "Selected"}
+      </MenuItem>
+    </Menu>
+  );
+};
diff --git a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
index 581c8f11..f7ea5be0 100644
--- a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
@@ -18,9 +18,13 @@ import { SpeedyLink } from "components/SpeedyLink";
 import { QuoteTiny } from "components/Icons/QuoteTiny";
 import { CommentTiny } from "components/Icons/CommentTiny";
 
-export function PublishedPostsList() {
-  let { data: publication } = usePublicationData();
+export function PublishedPostsList(props: {
+  searchValue: string;
+  showPageBackground: boolean;
+}) {
+  let { data } = usePublicationData();
   let params = useParams();
+  let { publication } = data!;
   if (!publication) return null;
   if (publication.documents_in_publications.length === 0)
     return (
@@ -29,7 +33,7 @@ export function PublishedPostsList() {
       </div>
     );
   return (
-    <div className="publishedList w-full flex flex-col gap-4 pb-4">
+    <div className="publishedList w-full flex flex-col gap-2 pb-4">
       {publication.documents_in_publications
         .sort((a, b) => {
           let aRecord = a.documents?.data! as PubLeafletDocument.Record;
@@ -49,18 +53,23 @@ export function PublishedPostsList() {
           );
           let uri = new AtUri(doc.documents.uri);
           let record = doc.documents.data as PubLeafletDocument.Record;
-          let quotes =
-            doc.documents.document_mentions_in_bsky[0]?.count || 0;
-          let comments =
-            doc.documents.comments_on_documents[0]?.count || 0;
+          let quotes = doc.documents.document_mentions_in_bsky[0]?.count || 0;
+          let comments = doc.documents.comments_on_documents[0]?.count || 0;
 
           return (
             <Fragment key={doc.documents?.uri}>
               <div className="flex gap-2 w-full ">
-                <div className="publishedPost grow flex flex-col hover:!no-underline">
+                <div
+                  className={`publishedPost grow flex flex-col  hover:no-underline! rounded-lg border ${props.showPageBackground ? "border-border-light py-1 px-2" : "border-transparent px-1"}`}
+                  style={{
+                    backgroundColor: props.showPageBackground
+                      ? "rgba(var(--bg-page), var(--bg-page-alpha))"
+                      : "transparent",
+                  }}
+                >
                   <div className="flex justify-between gap-2">
                     <a
-                      className="hover:!no-underline"
+                      className="hover:no-underline!"
                       target="_blank"
                       href={`${getPublicationURL(publication)}/${uri.rkey}`}
                     >
@@ -100,7 +109,9 @@ export function PublishedPostsList() {
                         )}
                       </p>
                     ) : null}
-                    {(comments > 0 || quotes > 0) && record.publishedAt ? " | " : ""}
+                    {(comments > 0 || quotes > 0) && record.publishedAt
+                      ? " | "
+                      : ""}
                     {quotes > 0 && (
                       <SpeedyLink
                         href={`${getPublicationURL(publication)}/${uri.rkey}?interactionDrawer=quotes`}
@@ -121,7 +132,9 @@ export function PublishedPostsList() {
                   </div>
                 </div>
               </div>
-              <hr className="last:hidden border-border-light" />
+              {!props.showPageBackground && (
+                <hr className="last:hidden border-border-light" />
+              )}
             </Fragment>
           );
         })}
@@ -136,7 +149,7 @@ let Options = (props: { document_uri: string }) => {
       alignOffset={20}
       asChild
       trigger={
-        <button className="text-secondary rounded-md selected-outline !border-transparent hover:!border-border h-min">
+        <button className="text-secondary rounded-md selected-outline border-transparent! hover:border-border! h-min">
           <MoreOptionsVerticalTiny />
         </button>
       }
@@ -149,11 +162,11 @@ let Options = (props: { document_uri: string }) => {
 };
 
 function OptionsMenu(props: { document_uri: string }) {
-  let { mutate, data: publication } = usePublicationData();
+  let { mutate, data } = usePublicationData();
   let [state, setState] = useState<"normal" | "confirm">("normal");
 
-  let postLink = publication
-    ? `${getPublicationURL(publication)}/${new AtUri(props.document_uri).rkey}`
+  let postLink = data?.publication
+    ? `${getPublicationURL(data?.publication)}/${new AtUri(props.document_uri).rkey}`
     : null;
 
   if (state === "normal") {
@@ -203,13 +216,17 @@ function OptionsMenu(props: { document_uri: string }) {
               if (!data) return data;
               return {
                 ...data,
-                leaflets_in_publications: data.leaflets_in_publications.filter(
-                  (l) => l.doc !== props.document_uri,
-                ),
-                documents_in_publications:
-                  data.documents_in_publications.filter(
-                    (d) => d.documents?.uri !== props.document_uri,
-                  ),
+                publication: {
+                  ...data.publication!,
+                  leaflets_in_publications:
+                    data.publication?.leaflets_in_publications.filter(
+                      (l) => l.doc !== props.document_uri,
+                    ) || [],
+                  documents_in_publications:
+                    data.publication?.documents_in_publications.filter(
+                      (d) => d.documents?.uri !== props.document_uri,
+                    ) || [],
+                },
               };
             }, false);
             await deletePost(props.document_uri);
diff --git a/app/lish/[did]/[publication]/dashboard/page.tsx b/app/lish/[did]/[publication]/dashboard/page.tsx
index 95f46896..c35bede4 100644
--- a/app/lish/[did]/[publication]/dashboard/page.tsx
+++ b/app/lish/[did]/[publication]/dashboard/page.tsx
@@ -1,26 +1,14 @@
 import { supabaseServerClient } from "supabase/serverClient";
 import { Metadata } from "next";
-
-import { Sidebar } from "components/ActionBar/Sidebar";
-
-import { Media } from "components/Media";
-import { Footer } from "components/ActionBar/Footer";
-import { PublicationDashboard } from "./PublicationDashboard";
-import { DraftList } from "./DraftList";
 import { getIdentityData } from "actions/getIdentityData";
-import { Actions } from "./Actions";
-import React from "react";
 import { get_publication_data } from "app/api/rpc/[command]/get_publication_data";
 import { PublicationSWRDataProvider } from "./PublicationSWRProvider";
-import { PublishedPostsList } from "./PublishedPostsLists";
-import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api";
-import { PublicationSubscribers } from "./PublicationSubscribers";
-import {
-  PublicationThemeProvider,
-  PublicationThemeProviderDashboard,
-} from "components/ThemeManager/PublicationThemeProvider";
-import { blobRefToSrc } from "src/utils/blobRefToSrc";
+import { PubLeafletPublication } from "lexicons/api";
+import { PublicationThemeProviderDashboard } from "components/ThemeManager/PublicationThemeProvider";
 import { AtUri } from "@atproto/syntax";
+import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
+import PublicationDashboard from "./PublicationDashboard";
+import Link from "next/link";
 
 export async function generateMetadata(props: {
   params: Promise<{ publication: string; did: string }>;
@@ -28,13 +16,14 @@ export async function generateMetadata(props: {
   let did = decodeURIComponent((await props.params).did);
   if (!did) return { title: "Publication 404" };
 
-  let { result: publication } = await get_publication_data.handler(
+  let { result: publication_data } = await get_publication_data.handler(
     {
       did,
       publication_name: decodeURIComponent((await props.params).publication),
     },
     { supabase: supabaseServerClient },
   );
+  let { publication } = publication_data;
   let record =
     (publication?.record as PubLeafletPublication.Record) || undefined;
   if (!publication) return { title: "404 Publication" };
@@ -49,71 +38,39 @@ export default async function Publication(props: {
   let identity = await getIdentityData();
   if (!identity || !identity.atp_did)
     return (
-      <div className="p-4 text-lg text-center flex flex-col gap-4">
-        <p>Sorry, looks like you&apos;re not logged in.</p>
+      <NotFoundLayout>
+        <p>Looks like you&apos;re not logged in.</p>
         <p>
-          This may be a glitch on our end. If the issue persists please{" "}
+          If the issue persists please{" "}
           <a href="mailto:contact@leaflet.pub">send us a note</a>.
         </p>
-      </div>
+      </NotFoundLayout>
     );
   let did = decodeURIComponent(params.did);
   if (!did) return <PubNotFound />;
-  let { result: publication } = await get_publication_data.handler(
+  let { result: publication_data } = await get_publication_data.handler(
     {
       did,
       publication_name: decodeURIComponent((await props.params).publication),
     },
     { supabase: supabaseServerClient },
   );
+  let { publication, leaflet_data } = publication_data;
+  let record = publication?.record as PubLeafletPublication.Record | null;
 
-  if (!publication || identity.atp_did !== publication.identity_did)
+  if (!publication || identity.atp_did !== publication.identity_did || !record)
     return <PubNotFound />;
-  let record = publication?.record as PubLeafletPublication.Record | null;
   let uri = new AtUri(publication.uri);
 
-  let showPageBackground = !!record?.theme?.showPageBackground;
-
   try {
     return (
       <PublicationSWRDataProvider
         publication_did={did}
         publication_rkey={uri.rkey}
-        publication_data={publication}
+        publication_data={publication_data}
       >
         <PublicationThemeProviderDashboard record={record}>
-          <div className="pubDashWrapper relative w-max h-full flex items-stretch pwa-padding">
-            <div className="flex sm:flex-row flex-col max-h-full h-full">
-              <div
-                className="pubDashSidebarWrapper flex justify-end items-start "
-                style={{ width: `calc(50vw - ((var(--page-width-units)/2))` }}
-              >
-                <div className="pubDashSidebar relative w-16 justify-items-end">
-                  <Sidebar className="mt-6 p-2 ">
-                    <Actions publication={publication.uri} />
-                  </Sidebar>
-                </div>
-              </div>
-              <div
-                className={`pubDash grow sm:h-full h-32 w-full flex flex-col items-stretch pt-2 sm:pt-6   ml-[6px] sm:ml-0 max-w-[var(--page-width-units)] ${showPageBackground ? "sm:pb-8 pb-1" : "pb-0"}`}
-              >
-                <PublicationDashboard
-                  did={did}
-                  icon={record?.icon ? record.icon : null}
-                  name={publication.name}
-                  tabs={{
-                    Drafts: <DraftList />,
-                    Published: <PublishedPostsList />,
-                    Subscribers: <PublicationSubscribers />,
-                  }}
-                  defaultTab={"Drafts"}
-                />
-              </div>
-              <Footer>
-                <Actions publication={publication.uri} />
-              </Footer>
-            </div>
-          </div>
+          <PublicationDashboard publication={publication} record={record} />
         </PublicationThemeProviderDashboard>
       </PublicationSWRDataProvider>
     );
@@ -125,12 +82,12 @@ export default async function Publication(props: {
 
 const PubNotFound = () => {
   return (
-    <div className="p-4 text-lg text-center flex flex-col gap-4">
-      <p>Sorry, publication not found!</p>
+    <NotFoundLayout>
+      <p className="font-bold">Sorry, we can't find this publication!</p>
       <p>
         This may be a glitch on our end. If the issue persists please{" "}
         <a href="mailto:contact@leaflet.pub">send us a note</a>.
       </p>
-    </div>
+    </NotFoundLayout>
   );
 };
diff --git a/app/lish/[did]/[publication]/generateFeed.ts b/app/lish/[did]/[publication]/generateFeed.ts
index e9a27ae5..42096c05 100644
--- a/app/lish/[did]/[publication]/generateFeed.ts
+++ b/app/lish/[did]/[publication]/generateFeed.ts
@@ -7,7 +7,6 @@ import {
 } from "lexicons/api";
 import { createElement } from "react";
 import { StaticPostContent } from "./[rkey]/StaticPostContent";
-import { get_publication_data } from "app/api/rpc/[command]/get_publication_data";
 import { supabaseServerClient } from "supabase/serverClient";
 import { NextResponse } from "next/server";
 
@@ -18,13 +17,25 @@ export async function generateFeed(
   let renderToReadableStream = await import("react-dom/server").then(
     (module) => module.renderToReadableStream,
   );
-  let { result: publication } = await get_publication_data.handler(
-    {
-      did: did,
-      publication_name: publication_name,
-    },
-    { supabase: supabaseServerClient },
-  );
+  let uri;
+  if (/^(?!\.$|\.\.S)[A-Za-z0-9._:~-]{1,512}$/.test(publication_name)) {
+    uri = AtUri.make(
+      did,
+      "pub.leaflet.publication",
+      publication_name,
+    ).toString();
+  }
+  let { data: publication } = await supabaseServerClient
+    .from("publications")
+    .select(
+      `*,
+        publication_subscriptions(*),
+      documents_in_publications(documents(*))
+      `,
+    )
+    .eq("identity_did", did)
+    .or(`name.eq."${publication_name}", uri.eq."${uri}"`)
+    .single();
 
   let pubRecord = publication?.record as PubLeafletPublication.Record;
   if (!publication || !pubRecord)
diff --git a/app/lish/[did]/[publication]/layout.tsx b/app/lish/[did]/[publication]/layout.tsx
index faefd07c..3720b79f 100644
--- a/app/lish/[did]/[publication]/layout.tsx
+++ b/app/lish/[did]/[publication]/layout.tsx
@@ -1,7 +1,7 @@
 import { PubLeafletPublication } from "lexicons/api";
-import { get_publication_data } from "app/api/rpc/[command]/get_publication_data";
 import { supabaseServerClient } from "supabase/serverClient";
 import { Metadata } from "next";
+import { AtUri } from "@atproto/syntax";
 
 export default async function PublicationLayout(props: {
   children: React.ReactNode;
@@ -16,14 +16,29 @@ export async function generateMetadata(props: {
   }>;
 }): Promise<Metadata> {
   let params = await props.params;
+  let did = decodeURIComponent(params.did);
   if (!params.did || !params.publication) return { title: "Publication 404" };
-  let { result: publication } = await get_publication_data.handler(
-    {
-      did: decodeURIComponent(params.did),
-      publication_name: decodeURIComponent(params.publication),
-    },
-    { supabase: supabaseServerClient },
-  );
+
+  let uri;
+  let publication_name = decodeURIComponent(params.publication);
+  if (/^(?!\.$|\.\.S)[A-Za-z0-9._:~-]{1,512}$/.test(publication_name)) {
+    uri = AtUri.make(
+      did,
+      "pub.leaflet.publication",
+      publication_name,
+    ).toString();
+  }
+  let { data: publication } = await supabaseServerClient
+    .from("publications")
+    .select(
+      `*,
+        publication_subscriptions(*),
+      documents_in_publications(documents(*))
+      `,
+    )
+    .eq("identity_did", did)
+    .or(`name.eq."${publication_name}", uri.eq."${uri}"`)
+    .single();
   if (!publication) return { title: "Publication 404" };
 
   let pubRecord = publication?.record as PubLeafletPublication.Record;
diff --git a/app/lish/[did]/[publication]/page.tsx b/app/lish/[did]/[publication]/page.tsx
index 20a37ba8..f1a34c74 100644
--- a/app/lish/[did]/[publication]/page.tsx
+++ b/app/lish/[did]/[publication]/page.tsx
@@ -10,6 +10,7 @@ import {
   PublicationBackgroundProvider,
   PublicationThemeProvider,
 } from "components/ThemeManager/PublicationThemeProvider";
+import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
 import { SpeedyLink } from "components/SpeedyLink";
 import { QuoteTiny } from "components/Icons/QuoteTiny";
 import { CommentTiny } from "components/Icons/CommentTiny";
@@ -68,7 +69,7 @@ export default async function Publication(props: {
             className={`pubWrapper flex flex-col sm:py-6 h-full   ${showPageBackground ? "max-w-prose mx-auto sm:px-0 px-[6px] py-2" : "w-full overflow-y-scroll"}`}
           >
             <div
-              className={`pub sm:max-w-prose max-w-[var(--page-width-units)] w-[1000px] mx-auto px-3 sm:px-4 py-5  ${showPageBackground ? "overflow-auto h-full bg-[rgba(var(--bg-page),var(--bg-page-alpha))] border border-border rounded-lg" : "h-fit"}`}
+              className={`pub sm:max-w-prose max-w-(--page-width-units) w-[1000px] mx-auto px-3 sm:px-4 py-5  ${showPageBackground ? "overflow-auto h-full bg-[rgba(var(--bg-page),var(--bg-page-alpha))] border border-border rounded-lg" : "h-fit"}`}
             >
               <div className="pubHeader flex flex-col pb-8 w-full text-center justify-center ">
                 {record?.icon && (
@@ -141,7 +142,7 @@ export default async function Publication(props: {
                         <div className="flex w-full grow flex-col ">
                           <SpeedyLink
                             href={`${getPublicationURL(publication)}/${uri.rkey}`}
-                            className="publishedPost hover:!no-underline flex flex-col"
+                            className="publishedPost hover:no-underline! flex flex-col"
                           >
                             <h3 className="text-primary">{doc_record.title}</h3>
                             <p className="italic text-secondary">
@@ -198,12 +199,12 @@ export default async function Publication(props: {
 
 const PubNotFound = () => {
   return (
-    <div className="p-4 text-lg text-center flex flex-col gap-4">
-      <p>Sorry, publication not found!</p>
+    <NotFoundLayout>
+      <p className="font-bold">Sorry, we can't find this publication!</p>
       <p>
         This may be a glitch on our end. If the issue persists please{" "}
         <a href="mailto:contact@leaflet.pub">send us a note</a>.
       </p>
-    </div>
+    </NotFoundLayout>
   );
 };
diff --git a/app/lish/createPub/CreatePubForm.tsx b/app/lish/createPub/CreatePubForm.tsx
index f69c8d8b..cf39401f 100644
--- a/app/lish/createPub/CreatePubForm.tsx
+++ b/app/lish/createPub/CreatePubForm.tsx
@@ -207,14 +207,14 @@ function DomainInput(props: {
 
   return (
     <div className="flex flex-col gap-1">
-      <label className=" input-with-border flex flex-col text-sm text-tertiary font-bold italic leading-tight !py-1 !px-[6px]">
+      <label className=" input-with-border flex flex-col text-sm text-tertiary font-bold italic leading-tight py-1! px-[6px]!">
         <div>Choose your domain</div>
         <div className="flex flex-row  items-center">
           <Input
             minLength={3}
             maxLength={63}
             placeholder="domain"
-            className="appearance-none w-full font-normal bg-transparent text-base text-primary focus:outline-0 outline-none"
+            className="appearance-none w-full font-normal bg-transparent text-base text-primary focus:outline-0 outline-hidden"
             value={props.domain}
             onChange={(e) => props.setDomain(e.currentTarget.value)}
           />
diff --git a/app/lish/createPub/UpdatePubForm.tsx b/app/lish/createPub/UpdatePubForm.tsx
index 34935810..9d5be628 100644
--- a/app/lish/createPub/UpdatePubForm.tsx
+++ b/app/lish/createPub/UpdatePubForm.tsx
@@ -21,7 +21,8 @@ import Link from "next/link";
 import { Checkbox } from "components/Checkbox";
 
 export const EditPubForm = () => {
-  let { data: pubData } = usePublicationData();
+  let { data } = usePublicationData();
+  let { publication: pubData } = data || {};
   let record = pubData?.record as PubLeafletPublication.Record;
   let [formState, setFormState] = useState<"normal" | "loading">("normal");
 
@@ -180,7 +181,8 @@ export const EditPubForm = () => {
 };
 
 export function CustomDomainForm() {
-  let { data: pubData } = usePublicationData();
+  let { data } = usePublicationData();
+  let { publication: pubData } = data || {};
   if (!pubData) return null;
   let record = pubData?.record as PubLeafletPublication.Record;
   let [state, setState] = useState<
@@ -325,7 +327,7 @@ function Domain(props: {
       <div className="absolute right-0 top-0 bottom-0 flex justify-end items-center w-4 ">
         {pending ? (
           <button
-            className="group/pending px-1 py-0.5 flex gap-1 items-center rounded-full  hover:bg-accent-1  hover:text-accent-2 hover:outline-accent-1 border-transparent outline outline-transparent selected-outline"
+            className="group/pending px-1 py-0.5 flex gap-1 items-center rounded-full  hover:bg-accent-1  hover:text-accent-2 hover:outline-accent-1 border-transparent outline-solid outline-transparent selected-outline"
             onClick={() => {
               if (data?.error === "Verification_needed") {
                 props.setDomain(data.verification);
@@ -356,7 +358,7 @@ function Domain(props: {
               });
               mutate("publication-data");
             }}
-            className="group/domain flex gap-1 items-center rounded-full bg-none w-max font-bold px-1 py-0.5 hover:bg-accent-1 hover:text-accent-2 border-transparent outline outline-transparent hover:outline-accent-1  selected-outline"
+            className="group/domain flex gap-1 items-center rounded-full bg-none w-max font-bold px-1 py-0.5 hover:bg-accent-1 hover:text-accent-2 border-transparent outline-solid outline-transparent hover:outline-accent-1  selected-outline"
           >
             <p className="group-hover/domain:block hidden w-max pl-1">
               set as default
diff --git a/app/login/LoginForm.tsx b/app/login/LoginForm.tsx
index 4e035e41..fdaad325 100644
--- a/app/login/LoginForm.tsx
+++ b/app/login/LoginForm.tsx
@@ -153,7 +153,7 @@ export default function LoginForm(props: {
 
             <ButtonPrimary
               type="submit"
-              className="place-self-end !px-[2px] absolute right-1 bottom-1"
+              className="place-self-end px-[2px]! absolute right-1 bottom-1"
             >
               <ArrowRightTiny />{" "}
             </ButtonPrimary>
diff --git a/app/templates/TemplateList.tsx b/app/templates/TemplateList.tsx
index 908fa738..a6eadd41 100644
--- a/app/templates/TemplateList.tsx
+++ b/app/templates/TemplateList.tsx
@@ -43,12 +43,12 @@ export function LeafletTemplate(props: {
             target="_blank"
             className="no-underline hover:no-underline"
           >
-            <ButtonPrimary className="bg-primary hover:!outline-none hover:scale-105 hover:rotate-3 transition-all">
+            <ButtonPrimary className="bg-primary hover:outline-hidden! hover:scale-105 hover:rotate-3 transition-all">
               Preview
             </ButtonPrimary>
           </Link>
           <ButtonPrimary
-            className=" hover:!outline-none hover:scale-105 hover:-rotate-2 transition-all"
+            className=" hover:outline-hidden! hover:scale-105 hover:-rotate-2 transition-all"
             onClick={async () => {
               let id = await createNewLeafletFromTemplate(
                 props.templateID,
diff --git a/app/templates/page.tsx b/app/templates/page.tsx
index 12603528..ea8f6de4 100644
--- a/app/templates/page.tsx
+++ b/app/templates/page.tsx
@@ -11,7 +11,7 @@ export const metadata = {
 export default function Templates() {
   return (
     <div className="flex h-full bg-bg-leaflet">
-      <div className="home relative max-w-screen-lg w-full h-full mx-auto flex sm:flex-row flex-col-reverse px-4 sm:px-6 ">
+      <div className="home relative max-w-(--breakpoint-lg) w-full h-full mx-auto flex sm:flex-row flex-col-reverse px-4 sm:px-6 ">
         <div className="homeOptions z-10 shrink-0 sm:static absolute bottom-0  place-self-end sm:place-self-start flex sm:flex-col flex-row-reverse gap-2 sm:w-fit w-full items-center pb-2 pt-1 sm:pt-7">
           {/* NOT using <HomeButton /> b/c it does a permission check we don't need */}
           <Link href="/home">
diff --git a/components/ActionBar/ActionButton.tsx b/components/ActionBar/ActionButton.tsx
index 2a50bac2..20be8f51 100644
--- a/components/ActionBar/ActionButton.tsx
+++ b/components/ActionBar/ActionButton.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import { useContext, useEffect } from "react";
 import { SidebarContext } from "./Sidebar";
 import React, { forwardRef, type JSX } from "react";
@@ -6,17 +7,19 @@ import { PopoverOpenContext } from "components/Popover";
 
 type ButtonProps = Omit<JSX.IntrinsicElements["button"], "content">;
 
-export const ActionButton = forwardRef<
-  HTMLButtonElement,
-  ButtonProps & {
+export const ActionButton = (
+  props: ButtonProps & {
     id?: string;
     icon: React.ReactNode;
     label: React.ReactNode;
     primary?: boolean;
     secondary?: boolean;
-  }
->((props, ref) => {
-  let { id, icon, label, primary, secondary, ...buttonProps } = props;
+    nav?: boolean;
+    className?: string;
+    subtext?: string;
+  },
+) => {
+  let { id, icon, label, primary, secondary, nav, ...buttonProps } = props;
   let sidebar = useContext(SidebarContext);
   let inOpenPopover = useContext(PopoverOpenContext);
   useEffect(() => {
@@ -30,30 +33,34 @@ export const ActionButton = forwardRef<
   return (
     <button
       {...buttonProps}
-      ref={ref}
-      id={props.id}
       className={`
       actionButton relative font-bold
       rounded-md border
-      flex gap-2 items-center sm:justify-start justify-center
+      flex gap-2 items-start sm:justify-start justify-center
       p-1 sm:mx-0
       ${
-        props.primary
+        primary
           ? "w-full bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 mx-1 first:ml-0"
-          : props.secondary
+          : secondary
             ? "sm:w-full w-max bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1 mx-1 first:ml-0"
-            : "sm:w-full w-max border-transparent text-accent-contrast sm:hover:border-accent-contrast"
+            : nav
+              ? "w-full border-transparent text-secondary sm:hover:border-border justify-start!"
+              : "sm:w-full border-transparent text-accent-contrast sm:hover:border-accent-contrast"
       }
+      ${props.className}
       `}
     >
-      <div className="shrink-0">{props.icon}</div>
+      <div className="shrink-0">{icon}</div>
       <div
-        className={`pr-1 w-max ${sidebar.open ? "block" : props.primary || props.secondary ? "sm:hidden block" : "hidden"}`}
+        className={`flex flex-col pr-1 leading-snug max-w-full min-w-0  ${sidebar.open ? "block" : primary || secondary || nav ? "sm:hidden block" : "hidden"}`}
       >
-        {props.label}
+        <div className="truncate text-left pt-[1px]">{label}</div>
+        {props.subtext && (
+          <div className="text-xs text-tertiary font-normal text-left">
+            {props.subtext}
+          </div>
+        )}
       </div>
     </button>
   );
-});
-
-ActionButton.displayName = "ActionButton";
+};
diff --git a/components/ActionBar/Navigation.tsx b/components/ActionBar/Navigation.tsx
new file mode 100644
index 00000000..9df024fb
--- /dev/null
+++ b/components/ActionBar/Navigation.tsx
@@ -0,0 +1,140 @@
+import { HomeSmall } from "components/Icons/HomeSmall";
+import { ActionButton } from "./ActionButton";
+import { Sidebar } from "./Sidebar";
+import { useIdentityData } from "components/IdentityProvider";
+import Link from "next/link";
+import { DiscoverSmall } from "components/Icons/DiscoverSmall";
+import { PublicationButtons } from "./Publications";
+import { Popover } from "components/Popover";
+import { MenuSmall } from "components/Icons/MenuSmall";
+
+export type navPages = "home" | "reader" | "pub" | "discover";
+
+export const DesktopNavigation = (props: {
+  currentPage: navPages;
+  publication?: string;
+}) => {
+  let unreadNotifications = true;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Sidebar alwaysOpen>
+        <NavigationOptions
+          currentPage={props.currentPage}
+          publication={props.publication}
+        />
+      </Sidebar>
+      {/*<Sidebar alwaysOpen>
+        <ActionButton
+          icon={
+            unreadNotifications ? (
+              <NotificationsUnreadSmall />
+            ) : (
+              <NotificationsReadSmall />
+            )
+          }
+          label="Notifications"
+        />
+      </Sidebar>*/}
+    </div>
+  );
+};
+
+export const MobileNavigation = (props: {
+  currentPage: navPages;
+  publication?: string;
+}) => {
+  let { identity } = useIdentityData();
+  let thisPublication = identity?.publications?.find(
+    (pub) => pub.uri === props.publication,
+  );
+  return (
+    <Popover
+      onOpenAutoFocus={(e) => e.preventDefault()}
+      asChild
+      className="px-2! !max-w-[256px]"
+      trigger={
+        <div className="shrink-0 p-1 pr-2 text-accent-contrast h-full flex gap-2 font-bold items-center">
+          <MenuSmall />
+          <div className="truncate max-w-[72px]">
+            {props.currentPage === "home" ? (
+              <>Home</>
+            ) : props.currentPage === "reader" ? (
+              <>Reader</>
+            ) : props.currentPage === "discover" ? (
+              <>Discover</>
+            ) : props.currentPage === "pub" ? (
+              thisPublication && <>{thisPublication.name}</>
+            ) : null}
+          </div>
+        </div>
+      }
+    >
+      <NavigationOptions
+        currentPage={props.currentPage}
+        publication={props.publication}
+      />
+    </Popover>
+  );
+};
+
+const NavigationOptions = (props: {
+  currentPage: navPages;
+  publication?: string;
+}) => {
+  let { identity } = useIdentityData();
+  let thisPublication = identity?.publications?.find(
+    (pub) => pub.uri === props.publication,
+  );
+  return (
+    <>
+      <HomeButton current={props.currentPage === "home"} />
+      <ReaderButton current={props.currentPage === "reader"} />
+      <hr className="border-border-light my-1" />
+      <PublicationButtons currentPubUri={thisPublication?.uri} />
+    </>
+  );
+};
+
+const HomeButton = (props: { current?: boolean }) => {
+  return (
+    <Link href={"/home"} className="hover:!no-underline">
+      <ActionButton
+        nav
+        icon={<HomeSmall />}
+        label="Home"
+        className={props.current ? "bg-bg-page! border-border-light!" : ""}
+      />
+    </Link>
+  );
+};
+
+const ReaderButton = (props: { current?: boolean }) => {
+  // let readerUnreads = true;
+  // let subs = false;
+
+  // if (subs)
+  //   return (
+  //     <ActionButton
+  //       nav
+  //       icon={readerUnreads ? <ReaderUnreadSmall /> : <ReaderReadSmall />}
+  //       label="Reader"
+  //       className={`
+  //         ${readerUnreads ? "text-accent-contrast! border-accent-contrast" : props.current ? "bg-border-light! border-border" : ""}
+  //       `}
+  //     />
+  //   );
+  return (
+    <Link href={"/discover"} className="hover:no-underline!">
+      <ActionButton
+        nav
+        icon={<DiscoverSmall />}
+        label="Discover"
+        subtext={
+          !props.current ? "Check out what others are writing!" : undefined
+        }
+        className={props.current ? "bg-border-light! border-border" : ""}
+      />
+    </Link>
+  );
+};
diff --git a/app/home/Publications.tsx b/components/ActionBar/Publications.tsx
similarity index 60%
rename from app/home/Publications.tsx
rename to components/ActionBar/Publications.tsx
index b3001eab..57295271 100644
--- a/app/home/Publications.tsx
+++ b/components/ActionBar/Publications.tsx
@@ -1,142 +1,122 @@
 "use client";
-import { ButtonSecondary } from "components/Buttons";
 import Link from "next/link";
 
 import { useIdentityData } from "components/IdentityProvider";
 import { theme } from "tailwind.config";
-import { BlueskyTiny } from "components/Icons/BlueskyTiny";
-import { AddTiny } from "components/Icons/AddTiny";
-import {
-  getBasePublicationURL,
-  getPublicationURL,
-} from "app/lish/createPub/getPublicationURL";
+import { getBasePublicationURL } from "app/lish/createPub/getPublicationURL";
 import { Json } from "supabase/database.types";
 import { PubLeafletPublication } from "lexicons/api";
 import { AtUri } from "@atproto/syntax";
-import { blobRefToSrc } from "src/utils/blobRefToSrc";
-import { PublicationThemeProvider } from "components/ThemeManager/PublicationThemeProvider";
+import { ActionButton } from "./ActionButton";
 import { SpeedyLink } from "components/SpeedyLink";
+import { PublishSmall } from "components/Icons/PublishSmall";
 
-export const MyPublicationList = () => {
+export const PublicationButtons = (props: {
+  currentPubUri: string | undefined;
+}) => {
   let { identity } = useIdentityData();
+
+  // don't show pub list button if not logged in or no pub list
+  // we show a "start a pub" banner instead
   if (!identity || !identity.atp_did) return <PubListEmpty />;
   return (
-    <div className="pubListWrapper w-full sm:w-[200px] flex flex-col sm:gap-1  container py-2 sm:p-0 sm:bg-transparent sm:border-0">
-      <div className="flex justify-between items-center font-bold text-tertiary text-sm px-2 ">
-        Publications
-        <SpeedyLink
-          href={"/lish/createPub"}
-          className="pubListCreateNew  text-accent-contrast font-bold hover:text-accent-contrast"
-        >
-          <span className="sr-only">Create new publication</span>
-          <AddTiny aria-hidden />
-        </SpeedyLink>
-      </div>
-      <PublicationList publications={identity.publications} />
-    </div>
-  );
-};
+    <div className="pubListWrapper w-full  flex flex-col gap-1 sm:bg-transparent sm:border-0">
+      {identity.publications?.map((d) => {
+        // console.log("thisURI : " + d.uri);
+        // console.log("currentURI : " + props.currentPubUri);
+        console.log(d.uri === props.currentPubUri);
 
-const PublicationList = (props: {
-  publications: {
-    identity_did: string;
-    indexed_at: string;
-    name: string;
-    record: Json;
-    uri: string;
-  }[];
-}) => {
-  return (
-    <div className="pubList w-full flex flex-row sm:flex-col gap-0 overflow-auto items-stretch">
-      {props.publications?.map((d) => (
-        <Publication {...d} key={d.uri} record={d.record} />
-      ))}
+        return (
+          <PublicationOption
+            {...d}
+            key={d.uri}
+            record={d.record}
+            asActionButton
+            current={d.uri === props.currentPubUri}
+          />
+        );
+      })}
+      <Link
+        href={"./lish/createPub"}
+        className="pubListCreateNew  text-accent-contrast text-sm place-self-end hover:text-accent-contrast"
+      >
+        New
+      </Link>
     </div>
   );
 };
 
-function Publication(props: { uri: string; name: string; record: Json }) {
+export const PublicationOption = (props: {
+  uri: string;
+  name: string;
+  record: Json;
+  asActionButton?: boolean;
+  current?: boolean;
+}) => {
   let record = props.record as PubLeafletPublication.Record | null;
-  let pub_creator = new AtUri(props.uri).host;
-  let backgroundImage = record?.theme?.backgroundImage?.image?.ref
-    ? blobRefToSrc(record?.theme?.backgroundImage?.image?.ref, pub_creator)
-    : null;
+  if (!record) return;
 
-  let backgroundImageRepeat = record?.theme?.backgroundImage?.repeat;
-  let backgroundImageSize = record?.theme?.backgroundImage?.width || 500;
-  let showPageBackground = !!record?.theme?.showPageBackground;
   return (
-    <PublicationThemeProvider record={record} local pub_creator={pub_creator}>
-      <SpeedyLink
-        className="pubListItem sm:w-full sm:min-w-0 min-w-40 w-36  px-1 sm:px-2 py-1 sm:h-max  hover:no-underline "
-        href={`${getBasePublicationURL(props)}/dashboard`}
-      >
-        <div
-          style={{
-            backgroundImage: `url(${backgroundImage})`,
-            backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
-            backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`,
-          }}
-          className="py-3 px-2 h-full w-full flex flex-col gap-1 place-items-center bg-bg-leaflet border border-border-light rounded-lg text-secondary text-center  transparent-outline outline-2 outline-offset-1 hover:outline-border  grow "
-        >
-          {record?.icon && (
-            <div
-              style={{
-                backgroundRepeat: "no-repeat",
-                backgroundPosition: "center",
-                backgroundSize: "cover",
-                backgroundImage: `url(/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(record.icon?.ref as unknown as { $link: string })["$link"]})`,
-              }}
-              className="w-6 h-6 rounded-full"
-            />
-          )}
-          <h4
-            className={`font-bold w-full px-1 rounded-md truncate my-auto ${showPageBackground ? "bg-[rgba(var(--bg-page),0.8)]" : ""}`}
-          >
-            {props.name}
-          </h4>
-        </div>
-      </SpeedyLink>
-    </PublicationThemeProvider>
+    <SpeedyLink
+      href={`${getBasePublicationURL(props)}/dashboard`}
+      className="flex gap-2 items-start text-secondary font-bold hover:no-underline! hover:text-accent-contrast w-full"
+    >
+      {props.asActionButton ? (
+        <ActionButton
+          label={record.name}
+          icon={<PubIcon record={record} uri={props.uri} />}
+          nav
+          className={props.current ? "bg-bg-page! border-border!" : ""}
+        />
+      ) : (
+        <>
+          <PubIcon record={record} uri={props.uri} />
+          <div className="truncate">{record.name}</div>
+        </>
+      )}
+    </SpeedyLink>
   );
-}
+};
 
 const PubListEmpty = () => {
-  let { identity } = useIdentityData();
   return (
-    <div className="pubListEmpty accent-container text-sm sm:text-center py-4 px-3 w-full sm:max-w-[200px] flex flex-row sm:flex-col items-start sm:place-items-center justify-center gap-3 sm:gap-1">
-      <div className="shrink-0">
-        <PubListEmptyIllo />
-      </div>
-      <div className="flex flex-col sm:place-items-center">
-        <strong>Publish with Leaflet!</strong>
-        <div className="text-tertiary">
-          {!identity
-            ? "Link a Bluesky account to publish your writing to a blog or newletter"
-            : identity && !!identity.atp_did
-              ? "Publish your writing to a blog or newletter on the ATmosphere"
-              : ""}
-        </div>
+    <SpeedyLink href={`lish/createPub`} className=" hover:no-underline!">
+      <ActionButton
+        label="Publish on ATP"
+        icon={<PublishSmall />}
+        nav
+        subtext="Start a blog or newletter on the Atmosphere"
+      />
+    </SpeedyLink>
+  );
+};
+
+export const PubIcon = (props: {
+  record: PubLeafletPublication.Record;
+  uri: string;
+}) => {
+  if (!props.record) return;
 
-        {identity && !!identity.atp_did ? (
-          <Link href="/lish/createPub">
-            <ButtonSecondary compact className="text-sm mt-3">
-              Start a Publication!
-            </ButtonSecondary>
-          </Link>
-        ) : (
-          <form action="/api/oauth/login?redirect_url=/" method="GET">
-            <ButtonSecondary compact className="text-sm mt-3">
-              <BlueskyTiny /> Link Bluesky
-            </ButtonSecondary>
-          </form>
-        )}
+  return props.record.icon ? (
+    <div
+      style={{
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        backgroundImage: `url(/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]})`,
+      }}
+      className="w-6 h-6 rounded-full"
+    />
+  ) : (
+    <div className="w-6 h-6 rounded-full bg-accent-1 relative">
+      <div className="font-bold text-sm absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-accent-2">
+        {props.record?.name.slice(0, 1)}
       </div>
     </div>
   );
 };
 
-const PubListEmptyIllo = () => {
+export const PubListEmptyIllo = () => {
   return (
     <svg
       width="59"
@@ -152,7 +132,7 @@ const PubListEmptyIllo = () => {
         />
         <path
           d="M44.0793 31.0064C44.7178 30.7014 45.4832 30.9723 45.7882 31.6108L48.1886 36.6362C48.4936 37.2747 48.2236 38.0402 47.5851 38.3452C46.9466 38.6502 46.1811 38.3792 45.8761 37.7407L43.4757 32.7153C43.1708 32.0769 43.4409 31.3114 44.0793 31.0064ZM47.6769 29.396C48.1531 28.8729 48.9632 28.8351 49.4865 29.311L56.049 35.2827C56.5724 35.7589 56.6111 36.5689 56.1349 37.0923C55.6587 37.6156 54.8487 37.6534 54.3254 37.1772L47.7629 31.2065C47.2395 30.7303 47.2007 29.9194 47.6769 29.396ZM39.717 5.68116C42.0981 4.90017 44.5808 4.94473 46.7375 6.12647C49.3605 7.5638 50.8245 10.3133 51.1896 13.4243C51.5549 16.538 50.8421 20.109 49.0216 23.4312C47.2012 26.7534 44.5751 29.2764 41.7541 30.644C38.9355 32.0105 35.8302 32.2552 33.2072 30.8179C30.9031 29.5552 29.4864 27.1999 28.9464 24.6831C28.8301 24.2474 28.6926 23.8222 28.5343 23.3853C27.9734 24.0541 27.3971 24.5221 26.7863 24.7798C25.6169 25.2729 24.5945 24.8983 23.8361 24.3579C22.7923 23.614 21.7765 22.8095 20.9679 21.9312C20.1616 21.0553 19.5008 20.0411 19.2707 18.8745L19.2629 18.8345C19.1678 18.3542 19.054 17.7817 19.2599 16.8921C19.4384 16.1213 19.8478 15.1379 20.6183 13.6987C19.832 13.0689 19.5569 12.0994 19.592 11.1099C19.6232 10.2278 19.8849 9.24332 20.3722 8.35401C20.8366 7.50662 21.4472 6.74544 22.1593 6.22315C22.8689 5.70275 23.7789 5.35579 24.7511 5.57959C25.3946 5.72772 26.0287 5.9727 26.6593 6.16846C27.3433 5.97648 28.0776 5.95162 28.8185 6.16455C29.2306 6.28299 29.6269 6.46238 30.0373 6.58936C30.7081 6.79695 31.4724 6.98507 32.0539 7.01319C35.195 7.16504 36.6776 6.71358 39.6769 5.69385C39.6901 5.68936 39.7037 5.6851 39.717 5.68116ZM45.7111 7.99951C43.9938 7.05853 41.9923 7.16313 40.1877 7.77588C39.8344 7.90062 39.4783 8.04953 39.1222 8.22217C36.7445 9.37492 34.4283 11.5618 32.7961 14.5405C31.1639 17.5192 30.5672 20.6477 30.8752 23.272C30.9368 23.7972 31.0577 24.2812 31.1691 24.7886C31.6931 26.6779 32.7517 28.1338 34.2336 28.9458C36.091 29.9635 38.4422 29.877 40.8224 28.7231C43.2002 27.5704 45.5163 25.3836 47.1486 22.4048C48.7809 19.4259 49.3775 16.2968 49.0695 13.6724C48.7611 11.0452 47.5685 9.0173 45.7111 7.99951ZM49.9005 26.5269C50.1565 25.8672 50.8991 25.5395 51.5587 25.7954L54.547 26.9556C55.2066 27.2116 55.5333 27.9532 55.2775 28.6128C55.0216 29.2724 54.2799 29.6 53.6203 29.3442L50.632 28.1851C49.9724 27.9291 49.6448 27.1865 49.9005 26.5269ZM39.1652 9.26807C41.2542 8.13629 43.5696 7.82566 45.505 8.88623C47.0749 9.74653 48.0237 11.3117 48.4123 13.1314C48.5106 13.5926 48.2163 14.0465 47.755 14.145C47.2939 14.2433 46.8399 13.949 46.7414 13.4878C46.4268 12.0152 45.7071 10.9451 44.6837 10.3843C43.4283 9.69643 41.7566 9.8068 39.9787 10.77C39.5506 11.0019 39.123 11.2806 38.7023 11.603C40.0255 12.7843 41.0004 14.0292 41.5402 15.2642C42.1439 16.6456 42.2208 18.0723 41.5373 19.3198C40.8549 20.5651 39.5891 21.2565 38.1007 21.4917C36.7655 21.7027 35.1903 21.5621 33.4992 21.1011C33.4542 21.6278 33.4497 22.1372 33.4845 22.6216C33.6295 24.6386 34.4361 26.1074 35.6916 26.7954C36.9471 27.4832 38.6187 27.3719 40.3966 26.4087C42.1654 25.4504 43.9291 23.6955 45.217 21.3452C45.7016 20.4607 46.0801 19.562 46.3556 18.6772C46.496 18.227 46.9746 17.9755 47.425 18.1157C47.8752 18.256 48.1266 18.7347 47.9865 19.1851C47.6767 20.1801 47.2535 21.1839 46.715 22.1665C45.2929 24.7616 43.3083 26.7749 41.2101 27.9116C39.1212 29.0432 36.8056 29.354 34.8703 28.2935C32.9348 27.2329 31.9507 25.1135 31.7804 22.7437C31.6095 20.3635 32.2393 17.6083 33.6613 15.0132C35.0834 12.418 37.067 10.4048 39.1652 9.26807ZM22.297 15.0933C21.7014 16.2428 21.4438 16.9252 21.34 17.3735C21.2375 17.8161 21.2789 18.0251 21.3586 18.4282L21.3654 18.4614C21.4906 19.0963 21.8766 19.7651 22.5392 20.4849C23.1994 21.202 24.0755 21.9061 25.0754 22.6187C25.4732 22.9022 25.706 22.918 25.9572 22.812C26.2951 22.6693 26.8456 22.2264 27.5851 21.0552C27.0094 19.7746 26.4315 18.8074 26.0109 18.3853C25.5581 17.9307 24.9198 17.457 24.3625 17.0815C24.0174 16.8492 23.6334 16.6577 23.3009 16.4087C22.8302 16.056 22.5072 15.5915 22.297 15.0933ZM37.4191 12.7485C36.5848 13.607 35.8111 14.6442 35.1593 15.8335C34.5066 17.0247 34.0481 18.237 33.7736 19.4038C35.3748 19.8612 36.7608 19.9738 37.8341 19.8042C38.9745 19.624 39.6854 19.1451 40.0392 18.4995C40.4026 17.8364 40.4284 16.9858 39.9748 15.9478C39.5441 14.9626 38.6986 13.8621 37.4191 12.7485ZM34.2082 9.14893C33.8924 9.16621 33.5635 9.17537 33.2189 9.17627C33.1388 9.23151 33.0511 9.29794 32.9562 9.37647C32.6169 9.65722 32.2522 10.0395 31.8879 10.479C31.1588 11.3585 30.4955 12.3901 30.1144 13.0855C29.6886 13.8625 29.21 14.8403 28.8732 15.8257C28.5838 16.6724 28.4237 17.4545 28.4445 18.0923C28.6141 18.3652 28.7815 18.6595 28.9445 18.9683C29.2882 17.1514 29.9462 15.2969 30.923 13.5142C31.8396 11.8415 32.9612 10.371 34.2082 9.14893ZM28.2306 8.22315C27.9953 8.13158 27.6238 8.07071 27.3918 8.1919C26.8031 8.49937 25.6057 9.41 25.0587 10.4204C24.7889 10.919 24.5664 11.6366 24.3986 12.355C24.273 12.8924 24.0375 13.5361 24.1984 14.0757C24.2869 14.3723 24.4121 14.5578 24.5441 14.6704C24.8879 14.8728 25.225 15.0872 25.5558 15.3101C25.9699 15.589 26.4729 15.9497 26.9435 16.3472C27.0299 15.9811 27.1376 15.6205 27.256 15.2739C27.6363 14.1611 28.164 13.0878 28.6154 12.2642C29.0414 11.4867 29.7649 10.3634 30.5724 9.38916C30.6783 9.26141 30.7871 9.1351 30.8976 9.01123C30.3592 8.90738 29.8338 8.76163 29.4064 8.6294C28.8588 8.45993 28.422 8.2968 28.2306 8.22315ZM24.2443 7.65479C24.0745 7.62582 23.8022 7.66603 23.422 7.94483C23.0226 8.23774 22.6009 8.7314 22.2453 9.38037C21.9128 9.98712 21.7449 10.6469 21.7257 11.1851C21.7078 11.6907 21.8192 11.8972 21.842 11.939C21.8441 11.9429 21.8456 11.9461 21.8459 11.9468L22.6076 12.5562C22.6451 12.3681 22.687 12.1695 22.7345 11.9663C22.9122 11.206 23.1764 10.3097 23.5568 9.60694C23.909 8.95632 24.4229 8.35989 24.9357 7.86866L24.2443 7.65479Z"
-          fill={theme.colors["accent-contrast"]}
+          fill={theme.colors["accent-1"]}
         />
       </g>
       <defs>
diff --git a/components/ActionBar/Sidebar.tsx b/components/ActionBar/Sidebar.tsx
index c4106255..e429a856 100644
--- a/components/ActionBar/Sidebar.tsx
+++ b/components/ActionBar/Sidebar.tsx
@@ -27,9 +27,9 @@ export function Sidebar(props: {
         <div
           className={`
           actionSidebar
-          ${!props.alwaysOpen && "absolute top-0 left-0 z-10"}
-          h-fit w-max p-[6px]
-          flex flex-col gap-2 justify-start border
+          ${!props.alwaysOpen ? "absolute top-0 left-0 z-10 w-max" : "w-[192px] max-w-[192px]"}
+          h-fit p-[6px]
+          flex flex-col gap-1 justify-start border
           rounded-md  bg-bg-page ${open && !props.alwaysOpen ? "border-border-light" : "container"}
           ${props.className}
           `}
diff --git a/components/Blocks/Block.tsx b/components/Blocks/Block.tsx
index 72cc1b11..78c91cd4 100644
--- a/components/Blocks/Block.tsx
+++ b/components/Blocks/Block.tsx
@@ -253,7 +253,7 @@ export const BaseBlock = (
   if (!BlockTypeComponent) return <div>unknown block</div>;
   return (
     <div
-      className={`blockContentWrapper w-full grow flex gap-2 z-[1] ${alignmentStyle}`}
+      className={`blockContentWrapper w-full grow flex gap-2 z-1 ${alignmentStyle}`}
     >
       {props.listData && <ListMarker {...props} />}
       {props.areYouSure ? (
@@ -385,7 +385,7 @@ export const ListMarker = (
   let { rep } = useReplicache();
   return (
     <div
-      className={`shrink-0  flex justify-end items-center h-3 z-[1]
+      className={`shrink-0  flex justify-end items-center h-3 z-1
                   ${props.className}
                   ${
                     props.type === "heading"
diff --git a/components/Blocks/BlockCommandBar.tsx b/components/Blocks/BlockCommandBar.tsx
index 61d26978..61087046 100644
--- a/components/Blocks/BlockCommandBar.tsx
+++ b/components/Blocks/BlockCommandBar.tsx
@@ -124,7 +124,7 @@ export const BlockCommandBar = ({
             `}
         >
           <NestedCardThemeProvider>
-            <div className="commandMenuResults w-full max-h-[var(--radix-popover-content-available-height)] overflow-auto flex flex-col group-data-[side=top]/cmd-menu:flex-col-reverse bg-bg-page py-1 gap-0.5 border border-border rounded-md shadow-md">
+            <div className="commandMenuResults w-full max-h-(--radix-popover-content-available-height) overflow-auto flex flex-col group-data-[side=top]/cmd-menu:flex-col-reverse bg-bg-page py-1 gap-0.5 border border-border rounded-md shadow-md">
               {commandResults.length === 0 ? (
                 <div className="w-full text-tertiary text-center italic py-2 px-2 ">
                   No blocks found
diff --git a/components/Blocks/BlueskyPostBlock/BlueskyEmbed.tsx b/components/Blocks/BlueskyPostBlock/BlueskyEmbed.tsx
index 4d460819..214575bc 100644
--- a/components/Blocks/BlueskyPostBlock/BlueskyEmbed.tsx
+++ b/components/Blocks/BlueskyPostBlock/BlueskyEmbed.tsx
@@ -31,11 +31,11 @@ export const BlueskyEmbed = (props: {
                 className={`
                   overflow-hidden w-full object-cover
                   ${imageEmbed.images.length === 1 && "h-auto max-h-[800px]"}
-                  ${imageEmbed.images.length === 2 && "basis-1/2 aspect-1/1"}
+                  ${imageEmbed.images.length === 2 && "basis-1/2 aspect-square"}
                   ${imageEmbed.images.length === 3 && "basis-1/3 aspect-2/3"}
                     ${
                       imageEmbed.images.length === 4
-                        ? "basis-1/2 aspect-[3/2]"
+                        ? "basis-1/2 aspect-3/2"
                         : `basis-1/${imageEmbed.images.length} `
                     }
                 `}
@@ -198,7 +198,7 @@ const SeePostOnBluesky = (props: { postUrl: string | undefined }) => {
     <a
       href={props.postUrl}
       target="_blank"
-      className={`block-border flex flex-col p-3 font-normal !rounded-md  border text-tertiary italic text-center hover:no-underline hover:border-accent-contrast ${props.postUrl === undefined && "pointer-events-none"} `}
+      className={`block-border flex flex-col p-3 font-normal rounded-md!  border text-tertiary italic text-center hover:no-underline hover:border-accent-contrast ${props.postUrl === undefined && "pointer-events-none"} `}
     >
       <div> This media is not supported... </div>{" "}
       {props.postUrl === undefined ? null : (
diff --git a/components/Blocks/BlueskyPostBlock/BlueskyEmpty.tsx b/components/Blocks/BlueskyPostBlock/BlueskyEmpty.tsx
index 7b2c37e7..33a427ac 100644
--- a/components/Blocks/BlueskyPostBlock/BlueskyEmpty.tsx
+++ b/components/Blocks/BlueskyPostBlock/BlueskyEmpty.tsx
@@ -88,7 +88,7 @@ export const BlueskyPostEmpty = (props: BlockProps) => {
         <Separator />
         <Input
           type="text"
-          className="w-full grow border-none outline-none bg-transparent "
+          className="w-full grow border-none outline-hidden bg-transparent "
           placeholder="bsky.app/post-url"
           value={urlValue}
           disabled={isLocked}
diff --git a/components/Blocks/ButtonBlock.tsx b/components/Blocks/ButtonBlock.tsx
index 02f25f80..1dacde90 100644
--- a/components/Blocks/ButtonBlock.tsx
+++ b/components/Blocks/ButtonBlock.tsx
@@ -34,7 +34,7 @@ export const ButtonBlock = (props: BlockProps & { preview?: boolean }) => {
     <a
       href={url?.data.value}
       target="_blank"
-      className={`hover:outline-accent-contrast !rounded-md  ${isSelected ? "block-border-selected !border-0" : "block-border !border-transparent !border-0"}`}
+      className={`hover:outline-accent-contrast rounded-md!  ${isSelected ? "block-border-selected border-0!" : "block-border border-transparent! border-0!"}`}
     >
       <ButtonPrimary role="link" type="submit">
         {text?.data.value}
@@ -117,7 +117,7 @@ const ButtonBlockSettings = (props: BlockProps) => {
         w-full bg-bg-page
     		text-tertiary hover:text-accent-contrast hover:cursor-pointer hover:p-0
     		flex flex-col gap-2 items-center justify-center hover:border-2 border-dashed rounded-lg
-  		  ${isSelected ? "border-2 border-tertiary p-0" : "border border-border p-[1px]"}
+  		  ${isSelected ? "border-2 border-tertiary p-0" : "border border-border p-px"}
   		  `}
         onSubmit={(e) => {
           e.preventDefault();
@@ -169,7 +169,7 @@ const ButtonBlockSettings = (props: BlockProps) => {
             <Input
               type="text"
               autoFocus
-              className="w-full grow border-none outline-none bg-transparent"
+              className="w-full grow border-none outline-hidden bg-transparent"
               placeholder="button text"
               value={textValue}
               disabled={isLocked}
@@ -192,7 +192,7 @@ const ButtonBlockSettings = (props: BlockProps) => {
             <Input
               type="text"
               id="button-block-url-input"
-              className="w-full grow border-none outline-none bg-transparent"
+              className="w-full grow border-none outline-hidden bg-transparent"
               placeholder="www.example.com"
               value={urlValue}
               disabled={isLocked}
diff --git a/components/Blocks/CodeBlock.tsx b/components/Blocks/CodeBlock.tsx
index bca40d88..0488d4f3 100644
--- a/components/Blocks/CodeBlock.tsx
+++ b/components/Blocks/CodeBlock.tsx
@@ -123,7 +123,7 @@ export function CodeBlock(props: BlockProps) {
             data-entityid={props.entityID}
             id={elementId.block(props.entityID).input}
             block={props}
-            className="codeBlockEditor !whitespace-nowrap !overflow-auto font-mono p-2"
+            className="codeBlockEditor whitespace-nowrap! overflow-auto! font-mono p-2"
             value={content?.data.value}
             onChange={async (e) => {
               // Update the entity with the new value
@@ -138,7 +138,7 @@ export function CodeBlock(props: BlockProps) {
           <pre
             onClick={onClick}
             onMouseDown={(e) => e.stopPropagation()}
-            className="codeBlockRendered !overflow-auto font-mono p-2 w-full h-full"
+            className="codeBlockRendered overflow-auto! font-mono p-2 w-full h-full"
           >
             {content?.data.value}
           </pre>
diff --git a/components/Blocks/DateTimeBlock.tsx b/components/Blocks/DateTimeBlock.tsx
index ead49e52..6e202355 100644
--- a/components/Blocks/DateTimeBlock.tsx
+++ b/components/Blocks/DateTimeBlock.tsx
@@ -24,7 +24,7 @@ export function DateTimeBlock(props: BlockProps) {
   if (!isClient && !initialPageLoad)
     return (
       <div
-        className={`flex flex-row gap-2 group/date w-64 z-[1] border border-transparent`}
+        className={`flex flex-row gap-2 group/date w-64 z-1 border border-transparent`}
       >
         <BlockCalendarSmall className="text-tertiary" />
       </div>
@@ -119,11 +119,11 @@ export function BaseDateTimeBlock(
   return (
     <Popover
       disabled={isLocked || !permissions.write}
-      className="w-64 z-10 !px-2"
+      className="w-64 z-10 px-2!"
       trigger={
         <div
-          className={`flex flex-row gap-2 group/date w-64 z-[1]
-      ${isSelected ? "block-border-selected !border-transparent" : "border border-transparent"}
+          className={`flex flex-row gap-2 group/date w-64 z-1
+      ${isSelected ? "block-border-selected border-transparent!" : "border border-transparent"}
       ${alignment === "center" ? "justify-center" : alignment === "right" ? "justify-end" : "justify-start"}
       `}
         >
@@ -182,7 +182,7 @@ export function BaseDateTimeBlock(
             chevron: "text-inherit",
             month_grid: "w-full table-fixed",
             weekdays: "text-secondary text-sm",
-            selected: "!bg-accent-1 text-accent-2 rounded-md font-bold",
+            selected: "bg-accent-1! text-accent-2 rounded-md font-bold",
 
             day: "h-[34px]  text-center rounded-md sm:hover:bg-border-light",
             outside: "text-border",
diff --git a/components/Blocks/EmbedBlock.tsx b/components/Blocks/EmbedBlock.tsx
index 9a27f042..3c0eaef9 100644
--- a/components/Blocks/EmbedBlock.tsx
+++ b/components/Blocks/EmbedBlock.tsx
@@ -74,6 +74,7 @@ export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
       </label>
     );
   }
+  if (props.preview) return null;
 
   return (
     <div
@@ -111,7 +112,7 @@ export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
             className={`resizeHandle
           cursor-ns-resize shrink-0 z-10 w-6 h-[5px]
           absolute bottom-2 right-1/2 translate-x-1/2 translate-y-[2px]
-          rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,_inset_0_0_0_1px_white]
+          rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]
           ${isCanvasBlock ? "hidden group-hover/canvas-block:block" : ""}`}
             {...heightHandle.handlers}
           />
@@ -202,7 +203,7 @@ const BlockLinkInput = (props: BlockProps) => {
         <Separator />
         <Input
           type="text"
-          className="w-full grow border-none outline-none bg-transparent "
+          className="w-full grow border-none outline-hidden bg-transparent "
           placeholder="www.example.com"
           value={linkValue}
           disabled={isLocked}
diff --git a/components/Blocks/ExternalLinkBlock.tsx b/components/Blocks/ExternalLinkBlock.tsx
index 396ed6ca..e1a2140b 100644
--- a/components/Blocks/ExternalLinkBlock.tsx
+++ b/components/Blocks/ExternalLinkBlock.tsx
@@ -70,14 +70,14 @@ export const ExternalLinkBlock = (
         externalLinkBlock flex relative group/linkBlock
         h-[104px] w-full bg-bg-page overflow-hidden text-primary hover:no-underline no-underline
         hover:border-accent-contrast  shadow-sm
-        ${isSelected ? "block-border-selected !outline-accent-contrast !border-accent-contrast" : "block-border"}
+        ${isSelected ? "block-border-selected outline-accent-contrast! border-accent-contrast!" : "block-border"}
 
         `}
     >
       <div className="pt-2 pb-2 px-3 grow min-w-0">
         <div className="flex flex-col w-full min-w-0 h-full grow ">
           <div
-            className={`linkBlockTitle bg-transparent -mb-0.5  border-none text-base font-bold outline-none resize-none align-top border h-[24px] line-clamp-1`}
+            className={`linkBlockTitle bg-transparent -mb-0.5  border-none text-base font-bold outline-hidden resize-none align-top border h-[24px] line-clamp-1`}
             style={{
               overflow: "hidden",
               textOverflow: "ellipsis",
@@ -88,7 +88,7 @@ export const ExternalLinkBlock = (
           </div>
 
           <div
-            className={`linkBlockDescription text-sm bg-transparent border-none outline-none resize-none align-top  grow line-clamp-2`}
+            className={`linkBlockDescription text-sm bg-transparent border-none outline-hidden resize-none align-top  grow line-clamp-2`}
           >
             {description?.data.value}
           </div>
@@ -172,7 +172,7 @@ const BlockLinkInput = (props: BlockProps & { preview?: boolean }) => {
           }
           type="url"
           disabled={isLocked}
-          className="w-full grow border-none outline-none bg-transparent "
+          className="w-full grow border-none outline-hidden bg-transparent "
           placeholder="www.example.com"
           value={linkValue}
           onChange={(e) => setLinkValue(e.target.value)}
diff --git a/components/Blocks/HorizontalRule.tsx b/components/Blocks/HorizontalRule.tsx
index 25bc8bc4..17cfc562 100644
--- a/components/Blocks/HorizontalRule.tsx
+++ b/components/Blocks/HorizontalRule.tsx
@@ -8,7 +8,7 @@ export const HorizontalRule = (props: BlockProps) => {
   return (
     <hr
       className={`my-2 w-full border-border-light
-    ${isSelected ? "block-border-selected !outline-offset-[3px]" : ""}
+    ${isSelected ? "block-border-selected outline-offset-[3px]!" : ""}
   `}
     />
   );
diff --git a/components/Blocks/ImageBlock.tsx b/components/Blocks/ImageBlock.tsx
index da206d6a..5a12ee03 100644
--- a/components/Blocks/ImageBlock.tsx
+++ b/components/Blocks/ImageBlock.tsx
@@ -114,8 +114,8 @@ export function ImageBlock(props: BlockProps & { preview?: boolean }) {
   let className = isFullBleed
     ? ""
     : isSelected
-      ? "block-border-selected !border-transparent "
-      : "block-border !border-transparent";
+      ? "block-border-selected border-transparent! "
+      : "block-border border-transparent!";
 
   let isLocalUpload = localImages.get(image.data.src);
 
@@ -156,7 +156,7 @@ export function ImageBlock(props: BlockProps & { preview?: boolean }) {
 export const FullBleedSelectionIndicator = () => {
   return (
     <div
-      className={`absolute top-3 sm:top-4 bottom-3 sm:bottom-4 left-3 sm:left-4 right-3 sm:right-4 border-2 border-bg-page rounded-lg outline-offset-1 outline outline-2 outline-tertiary`}
+      className={`absolute top-3 sm:top-4 bottom-3 sm:bottom-4 left-3 sm:left-4 right-3 sm:right-4 border-2 border-bg-page rounded-lg outline-offset-1 outline-solid outline-2 outline-tertiary`}
     />
   );
 };
@@ -194,7 +194,7 @@ const ImageAlt = (props: { entityID: string }) => {
       >
         {entity_set.permissions.write ? (
           <AsyncValueAutosizeTextarea
-            className="text-sm text-secondary outline-none bg-transparent min-w-0"
+            className="text-sm text-secondary outline-hidden bg-transparent min-w-0"
             value={altText}
             onFocus={(e) => {
               e.currentTarget.setSelectionRange(
diff --git a/components/Blocks/MailboxBlock.tsx b/components/Blocks/MailboxBlock.tsx
index 0ca4b9b7..c806d2d3 100644
--- a/components/Blocks/MailboxBlock.tsx
+++ b/components/Blocks/MailboxBlock.tsx
@@ -316,7 +316,7 @@ const SubscribeForm = (props: {
             <input
               type="number"
               value={code}
-              className="appearance-none focus:outline-none focus:border-border w-20 border border-border-light bg-bg-page rounded-md p-1"
+              className="appearance-none focus:outline-hidden focus:border-border w-20 border border-border-light bg-bg-page rounded-md p-1"
               onChange={(e) => setCode(e.currentTarget.value)}
             />
 
@@ -358,7 +358,7 @@ const SubscribeForm = (props: {
               value={email}
               type="email"
               onChange={(e) => setEmail(e.target.value)}
-              className="w-full appearance-none focus:outline-none bg-transparent"
+              className="w-full appearance-none focus:outline-hidden bg-transparent"
               placeholder="youremail@email.com"
             />
           </div>
diff --git a/components/Blocks/MathBlock.tsx b/components/Blocks/MathBlock.tsx
index f25879ca..fbe58de8 100644
--- a/components/Blocks/MathBlock.tsx
+++ b/components/Blocks/MathBlock.tsx
@@ -35,7 +35,7 @@ export function MathBlock(props: BlockProps) {
     <BaseTextareaBlock
       id={elementId.block(props.entityID).input}
       block={props}
-      className="bg-border-light rounded-md p-2 w-full min-h-[48px] whitespace-nowrap !overflow-auto border-border-light outline-border-light selected-outline"
+      className="bg-border-light rounded-md p-2 w-full min-h-[48px] whitespace-nowrap overflow-auto! border-border-light outline-border-light selected-outline"
       placeholder="write some Tex here..."
       value={content?.data.value}
       onChange={async (e) => {
diff --git a/components/Blocks/PageLinkBlock.tsx b/components/Blocks/PageLinkBlock.tsx
index 5d314902..4207388f 100644
--- a/components/Blocks/PageLinkBlock.tsx
+++ b/components/Blocks/PageLinkBlock.tsx
@@ -35,7 +35,7 @@ export function PageLinkBlock(props: BlockProps & { preview?: boolean }) {
         bg-bg-page shadow-sm
         flex overflow-clip
         ${isSelected ? "block-border-selected " : "block-border"}
-        ${isOpen && "!border-tertiary"}
+        ${isOpen && "border-tertiary!"}
         `}
         onClick={(e) => {
           if (!page) return;
@@ -84,15 +84,15 @@ export function DocLinkBlock(props: BlockProps & { preview?: boolean }) {
           <div className="my-2 ml-3 grow min-w-0 text-sm bg-transparent overflow-clip ">
             {leafletMetadata[0] && (
               <div
-                className={`pageBlockOne outline-none resize-none align-top flex gap-2 ${leafletMetadata[0].type === "heading" ? "font-bold text-base" : ""}`}
+                className={`pageBlockOne outline-hidden resize-none align-top flex gap-2 ${leafletMetadata[0].type === "heading" ? "font-bold text-base" : ""}`}
               >
                 {leafletMetadata[0].listData && (
                   <ListMarker
                     {...leafletMetadata[0]}
                     className={
                       leafletMetadata[0].type === "heading"
-                        ? "!pt-[12px]"
-                        : "!pt-[8px]"
+                        ? "pt-[12px]!"
+                        : "pt-[8px]!"
                     }
                   />
                 )}
@@ -104,10 +104,10 @@ export function DocLinkBlock(props: BlockProps & { preview?: boolean }) {
             )}
             {leafletMetadata[1] && (
               <div
-                className={`pageBlockLineTwo outline-none resize-none align-top flex  gap-2 ${leafletMetadata[1].type === "heading" ? "font-bold" : ""}`}
+                className={`pageBlockLineTwo outline-hidden resize-none align-top flex  gap-2 ${leafletMetadata[1].type === "heading" ? "font-bold" : ""}`}
               >
                 {leafletMetadata[1].listData && (
-                  <ListMarker {...leafletMetadata[1]} className="!pt-[8px]" />
+                  <ListMarker {...leafletMetadata[1]} className="pt-[8px]!" />
                 )}
                 <RenderedTextBlock
                   entityID={leafletMetadata[1].value}
@@ -117,10 +117,10 @@ export function DocLinkBlock(props: BlockProps & { preview?: boolean }) {
             )}
             {leafletMetadata[2] && (
               <div
-                className={`pageBlockLineThree outline-none resize-none align-top flex  gap-2 ${leafletMetadata[2].type === "heading" ? "font-bold" : ""}`}
+                className={`pageBlockLineThree outline-hidden resize-none align-top flex  gap-2 ${leafletMetadata[2].type === "heading" ? "font-bold" : ""}`}
               >
                 {leafletMetadata[2].listData && (
-                  <ListMarker {...leafletMetadata[2]} className="!pt-[8px]" />
+                  <ListMarker {...leafletMetadata[2]} className="pt-[8px]!" />
                 )}
                 <RenderedTextBlock
                   entityID={leafletMetadata[2].value}
diff --git a/components/Blocks/QuoteEmbedBlock.tsx b/components/Blocks/QuoteEmbedBlock.tsx
index 2e2329dc..1fd9237a 100644
--- a/components/Blocks/QuoteEmbedBlock.tsx
+++ b/components/Blocks/QuoteEmbedBlock.tsx
@@ -39,7 +39,7 @@ export const QuoteEmbedBlock = () => {
       </div>
       <hr className="border-border-light" />
       <a
-        className="quoteEmbedFooter flex max-w-full gap-2 px-3 py-2  hover:!no-underline text-secondary"
+        className="quoteEmbedFooter flex max-w-full gap-2 px-3 py-2  hover:no-underline! text-secondary"
         href="#"
       >
         <div className="flex flex-col w-[calc(100%-28px)] grow">
@@ -52,7 +52,7 @@ export const QuoteEmbedBlock = () => {
             <div>celine</div>
           </div>
         </div>
-        <div className=" shrink-0 pt-[1px] bg-test w-5 h-5 rounded-full"></div>
+        <div className=" shrink-0 pt-px bg-test w-5 h-5 rounded-full"></div>
       </a>
     </div>
   );
diff --git a/components/Blocks/RSVPBlock/ContactDetailsForm.tsx b/components/Blocks/RSVPBlock/ContactDetailsForm.tsx
index d66e91c6..cd63720f 100644
--- a/components/Blocks/RSVPBlock/ContactDetailsForm.tsx
+++ b/components/Blocks/RSVPBlock/ContactDetailsForm.tsx
@@ -25,7 +25,7 @@ export function ContactDetailsForm(props: {
 }) {
   let { status, entityID, setState, setStatus } = props;
   let focusWithinStyles =
-    "focus-within:border-tertiary focus-within:outline focus-within:outline-2 focus-within:outline-tertiary focus-within:outline-offset-1";
+    "focus-within:border-tertiary focus-within:outline-solid focus-within:outline-2 focus-within:outline-tertiary focus-within:outline-offset-1";
   let toaster = useToaster();
   let { data, mutate } = useRSVPData();
   let [contactFormState, setContactFormState] = useState<
@@ -212,7 +212,7 @@ export function ContactDetailsForm(props: {
           </div>
           <div className="flex flex-row gap-2 w-full sm:w-32 h-fit">
             <InputWithLabel
-              className="!appearance-none"
+              className="appearance-none!"
               placeholder="0"
               label="Plus ones?"
               type="number"
@@ -330,7 +330,7 @@ const ConfirmationForm = (props: {
         <Input
           autoFocus
           placeholder="000000"
-          className="input-with-border !pt-5 w-full "
+          className="input-with-border pt-5! w-full "
           value={props.value}
           autoComplete="one-time-code"
           onChange={(e) => props.onChange(e.target.value)}
diff --git a/components/Blocks/RSVPBlock/SendUpdate.tsx b/components/Blocks/RSVPBlock/SendUpdate.tsx
index 2818f391..fa9817af 100644
--- a/components/Blocks/RSVPBlock/SendUpdate.tsx
+++ b/components/Blocks/RSVPBlock/SendUpdate.tsx
@@ -134,7 +134,7 @@ const RecipientPicker = (props: {
       </small> */}
       <div className="flex gap-4 text-secondary">
         <Checkbox
-          className="!w-fit"
+          className="w-fit!"
           checked={props.checked.GOING}
           onChange={() => {
             props.setChecked({
@@ -146,7 +146,7 @@ const RecipientPicker = (props: {
           Going
         </Checkbox>
         <Checkbox
-          className="!w-fit"
+          className="w-fit!"
           checked={props.checked.MAYBE}
           onChange={() => {
             props.setChecked({
@@ -158,7 +158,7 @@ const RecipientPicker = (props: {
           Maybe
         </Checkbox>
         <Checkbox
-          className="!w-fit"
+          className="w-fit!"
           checked={props.checked.NOT_GOING}
           onChange={() => {
             props.setChecked({
diff --git a/components/Blocks/RSVPBlock/index.tsx b/components/Blocks/RSVPBlock/index.tsx
index c17212fb..44ad0453 100644
--- a/components/Blocks/RSVPBlock/index.tsx
+++ b/components/Blocks/RSVPBlock/index.tsx
@@ -119,12 +119,12 @@ export const RSVPButtons = (props: {
   return (
     <div className="relative w-full sm:p-6  py-4 px-3 rounded-md border-[1.5px] border-accent-1">
       <RSVPBackground />
-      <div className="relative flex flex-row gap-2 items-center mx-auto z-[1] w-fit">
+      <div className="relative flex flex-row gap-2 items-center mx-auto z-1 w-fit">
         <ButtonSecondary
           type="button"
           className={
             props.status === "MAYBE"
-              ? "!text-accent-2 !bg-accent-1 text-lg"
+              ? "text-accent-2! bg-accent-1! text-lg"
               : ""
           }
           onClick={() => props.setStatus("MAYBE")}
@@ -135,7 +135,7 @@ export const RSVPButtons = (props: {
           type="button"
           className={
             props.status === "GOING"
-              ? "!text-accent-2 !bg-accent-1 text-lg"
+              ? "text-accent-2! bg-accent-1! text-lg"
               : props.status === undefined
                 ? "text-lg"
                 : ""
@@ -149,7 +149,7 @@ export const RSVPButtons = (props: {
           type="button"
           className={
             props.status === "NOT_GOING"
-              ? "!text-accent-2 !bg-accent-1 text-lg"
+              ? "text-accent-2! bg-accent-1! text-lg"
               : ""
           }
           onClick={() => props.setStatus("NOT_GOING")}
@@ -207,7 +207,7 @@ function YourRSVPStatus(props: {
       className={`relative w-full p-4 pb-5 rounded-md border-[1.5px] border-accent-1 font-bold items-center`}
     >
       <RSVPBackground />
-      <div className=" relative flex flex-col gap-1 sm:gap-2 z-[1] justify-center w-fit mx-auto">
+      <div className=" relative flex flex-col gap-1 sm:gap-2 z-1 justify-center w-fit mx-auto">
         <div
           className=" w-fit text-xl text-center text-accent-2"
           style={{
@@ -225,7 +225,7 @@ function YourRSVPStatus(props: {
         </div>
         {existingRSVP?.plus_ones && existingRSVP?.plus_ones > 0 ? (
           <div className="absolute -top-2 -right-6 rotate-12 h-fit w-10 bg-accent-1 font-bold text-accent-2 rounded-full -z-10">
-            <div className="w-full text-center pr-[4px] pb-[1px]">
+            <div className="w-full text-center pr-[4px] pb-px">
               +{existingRSVP?.plus_ones}
             </div>
           </div>
diff --git a/components/Blocks/TextBlock/index.tsx b/components/Blocks/TextBlock/index.tsx
index aab71a3f..ec101144 100644
--- a/components/Blocks/TextBlock/index.tsx
+++ b/components/Blocks/TextBlock/index.tsx
@@ -167,7 +167,7 @@ export function RenderedTextBlock(props: {
         ${alignmentClass}
         ${props.type === "blockquote" ? " blockquote " : ""}
         ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : ""}
-      w-full whitespace-pre-wrap outline-none ${props.className} `}
+      w-full whitespace-pre-wrap outline-hidden ${props.className} `}
     >
       {content}
     </div>
@@ -379,7 +379,7 @@ export function BaseTextBlock(props: BlockProps & { className?: string }) {
           className={`
             ${alignmentClass}
           grow resize-none align-top whitespace-pre-wrap bg-transparent
-          outline-none
+          outline-hidden
 
           ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : ""}
           ${props.className}`}
diff --git a/components/Blocks/index.tsx b/components/Blocks/index.tsx
index 130e8eac..8773948e 100644
--- a/components/Blocks/index.tsx
+++ b/components/Blocks/index.tsx
@@ -95,7 +95,7 @@ export function Blocks(props: { entityID: string }) {
 
   return (
     <div
-      className={`blocks w-full flex flex-col outline-none h-fit min-h-full`}
+      className={`blocks w-full flex flex-col outline-hidden h-fit min-h-full`}
       onClick={async (e) => {
         if (!permissions.write) return;
         if (useUIState.getState().selectedBlocks.length > 1) return;
diff --git a/components/Canvas.tsx b/components/Canvas.tsx
index 010488e2..f4eb90aa 100644
--- a/components/Canvas.tsx
+++ b/components/Canvas.tsx
@@ -55,7 +55,7 @@ export function Canvas(props: { entityID: string; preview?: boolean }) {
         canvasWrapper
         h-full w-fit mx-auto
         max-w-[calc(100vw-12px)]
-        ${!narrowWidth ? "sm:max-w-[calc(100vw-128px)] lg:max-w-[calc(var(--page-width-units)*2 + 24px))]" : " sm:max-w-[var(--page-width-units)]"}
+        ${!narrowWidth ? "sm:max-w-[calc(100vw-128px)] lg:max-w-[calc(var(--page-width-units)*2 + 24px))]" : " sm:max-w-(--page-width-units)"}
         rounded-lg
         overflow-y-scroll
       `}
@@ -161,7 +161,7 @@ function CanvasWidthHandle(props: { entityID: string }) {
          ${canvasFocused ? "sm:block hidden" : "hidden"}
         w-[8px] h-12
         absolute top-1/2 right-0 -translate-y-1/2 translate-x-[3px]
-        rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,_inset_0_0_0_1px_white]`}
+        rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]`}
     />
   );
 }
@@ -186,7 +186,7 @@ const AddCanvasBlockButton = (props: {
             <div className="font-normal">or double click anywhere</div>
           </div>
         }
-        className="w-fit p-2 rounded-full bg-accent-1 border-2 outline outline-transparent hover:outline-1 hover:outline-accent-1 border-accent-1 text-accent-2"
+        className="w-fit p-2 rounded-full bg-accent-1 border-2 outline-solid outline-transparent hover:outline-1 hover:outline-accent-1 border-accent-1 text-accent-2"
         onMouseDown={() => {
           let page = document.getElementById(
             elementId.page(props.entityID).canvasScrollArea,
@@ -395,7 +395,7 @@ function CanvasBlock(props: {
           hidden group-hover/canvas-block:block
           w-[5px] h-6 -ml-[3px]
           absolute top-1/2 right-3 -translate-y-1/2 translate-x-[2px]
-          rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,_inset_0_0_0_1px_white]`}
+          rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]`}
           {...widthHandle.handlers}
         />
       )}
@@ -408,7 +408,7 @@ function CanvasBlock(props: {
             w-[8px] h-[8px]
             absolute bottom-0 -right-0
             -translate-y-1/2 -translate-x-1/2
-            rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,_inset_0_0_0_1px_white]`}
+            rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]`}
           {...rotateHandle.handlers}
         />
       )}
diff --git a/components/Icons/DiscoverSmall.tsx b/components/Icons/DiscoverSmall.tsx
new file mode 100644
index 00000000..eb8aaf17
--- /dev/null
+++ b/components/Icons/DiscoverSmall.tsx
@@ -0,0 +1,19 @@
+import { Props } from "./Props";
+
+export const DiscoverSmall = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M9.64065 3.31253C10.1895 3.0803 10.794 2.99599 11.3799 3.11722C14.3589 4.07474 17.3532 4.98462 20.3341 5.93656C22.634 6.67144 23.6052 9.42405 22.8126 11.9073C22.0195 14.3908 19.6316 16.0723 17.3311 15.3379C16.8984 15.1997 16.5126 14.9905 16.1768 14.7247C16.2579 15.9524 15.9531 17.2605 15.2559 18.4239C13.6542 21.0957 10.4061 22.3031 7.94044 20.8253C7.20913 20.3868 6.73474 19.7706 6.25977 19.085L1.73143 12.5323C1.40407 11.9161 1.28828 11.19 1.33104 10.4981C0.939931 10.5372 0.579602 10.2601 0.515604 9.86137C0.421342 9.27278 0.528354 8.61795 0.81248 8.01957C1.09245 7.43014 1.52027 6.94541 2.02049 6.65531C2.51666 6.36761 3.16289 6.23639 3.76953 6.53715C3.9583 6.63077 4.0903 6.79455 4.15234 6.98148C4.89188 6.80551 5.63743 6.86056 6.22462 7.03226L6.47657 7.11625L6.48731 7.12113L6.87599 7.28422C6.98277 7.18686 7.11194 7.07056 7.25587 6.94828C7.38624 6.83753 7.53576 6.71687 7.69337 6.59574C7.39699 6.57978 7.14544 6.35553 7.10743 6.05082C7.01872 5.33128 7.22912 4.62394 7.58009 4.0928C7.91814 3.58141 8.47646 3.10981 9.16018 3.09671C9.352 3.09317 9.5235 3.17857 9.64065 3.31253ZM13.1006 11.8116C11.3913 10.9381 8.98548 11.7132 7.68361 13.8848C6.33504 16.135 6.867 18.7239 8.58302 19.753C10.2995 20.7818 12.8357 20.0316 14.1846 17.7813C15.4848 15.6117 15.035 13.1269 13.4629 12.0293L13.1006 11.8116ZM8.62502 14.6944C9.53877 12.9 11.3932 12.0126 12.7666 12.712C14.1398 13.4115 14.3354 15.6904 13.5987 17.2266C12.8619 18.7627 10.8315 19.9088 9.45803 19.21C8.08459 18.5107 7.71138 16.4887 8.62502 14.6944ZM12.8252 15.6583C12.5605 15.5862 12.2843 15.7437 12.209 16.0108C11.9544 16.9164 11.348 17.5593 10.5908 17.7364C10.322 17.7993 10.1517 18.0692 10.211 18.3389C10.2705 18.6083 10.537 18.7758 10.8057 18.7129C11.998 18.434 12.8376 17.4515 13.169 16.2735C13.244 16.0063 13.0899 15.7308 12.8252 15.6583ZM5.85547 8.2266C4.97336 7.96914 3.68282 8.11567 2.97851 9.28324C2.35667 10.3146 2.57612 11.438 2.80858 11.8916L5.69629 16.0713C5.77272 15.1107 6.07668 14.1333 6.61134 13.2413C7.48409 11.7856 8.84564 10.7657 10.3028 10.377L9.4844 9.98149L9.47951 9.97954L8.30763 9.40043C8.2637 9.3787 8.22477 9.35022 8.18849 9.32035L6.74317 8.58402L6.02637 8.28324L5.85547 8.2266ZM12.9815 13.7989C12.8162 13.5797 12.5043 13.5386 12.2842 13.7071C12.0642 13.8761 12.0193 14.1909 12.1846 14.4102C12.2116 14.446 12.2398 14.4947 12.2637 14.5479C12.2881 14.6022 12.3012 14.6467 12.3057 14.669C12.3597 14.9397 12.6218 15.112 12.8916 15.0547C13.1615 14.9973 13.3369 14.7318 13.2832 14.461C13.2419 14.2534 13.1318 13.9983 12.9815 13.7989ZM19.9542 7.12699C18.5161 6.66773 16.6983 7.69499 16.043 9.74614C15.388 11.7975 16.2739 13.6882 17.712 14.1475C19.1501 14.6063 20.9671 13.5785 21.6222 11.5274C22.2768 9.47656 21.3918 7.58669 19.9542 7.12699ZM16.9376 10.0362C17.4516 8.5672 18.7799 7.69494 19.9044 8.08793C21.029 8.48141 21.4151 10.2077 21.0098 11.461C20.6045 12.7142 19.1677 13.8027 18.043 13.4092C16.9185 13.0156 16.4235 11.5054 16.9376 10.0362ZM20.253 10.3516C20.0491 10.3247 19.8601 10.4698 19.8311 10.6758C19.7294 11.3989 19.329 11.9579 18.7628 12.1739C18.5695 12.2476 18.4703 12.4649 18.5411 12.6592C18.6122 12.8536 18.8262 12.9515 19.0196 12.878C19.8995 12.5426 20.4401 11.7072 20.5714 10.7735C20.6 10.5675 20.457 10.3787 20.253 10.3516ZM11.0713 4.33011C10.6841 4.25272 10.0696 4.38611 9.6094 4.78128C9.32981 5.02143 9.10865 5.35827 9.05568 5.81449C9.06779 5.81012 9.07976 5.80506 9.09182 5.80082C9.4432 5.67716 9.78179 5.59962 10.0293 5.55277C10.1539 5.52919 10.2579 5.51245 10.3321 5.50199C10.4893 5.47983 10.638 5.47119 10.7901 5.543L13.6914 6.91312C13.8423 6.98455 13.9584 7.11404 14.0137 7.27152C14.0689 7.42905 14.0586 7.60294 13.9854 7.75297C13.5962 8.55099 13.3649 9.42277 13.3233 10.4864L13.7012 10.7139C13.7767 10.7535 13.8517 10.7955 13.9258 10.8399C14.1641 10.9827 14.3832 11.1444 14.584 11.3213C14.5588 10.678 14.6459 10.0123 14.8526 9.36528C15.2838 8.01572 16.186 6.9037 17.2891 6.28714L11.0713 4.33011ZM20.1739 8.90727C20.0289 8.76099 19.7921 8.76247 19.6456 8.9102C19.4996 9.05792 19.4981 9.29617 19.6426 9.44242C19.6677 9.46772 19.6956 9.50228 19.7198 9.54106C19.7443 9.58047 19.7586 9.61417 19.7647 9.63188C19.832 9.82743 20.0447 9.9297 20.2393 9.86039C20.4341 9.79056 20.5388 9.5748 20.4718 9.37895C20.4192 9.22583 20.3085 9.04328 20.1739 8.90727ZM12.3799 8.45512C12.0926 8.54994 11.8161 8.64566 11.6192 8.72856C11.4367 8.80543 11.1533 9.01215 10.8604 9.25785L12.1123 9.86332C12.1628 9.36625 12.2524 8.8992 12.3799 8.45512ZM10.2617 6.78129C10.0537 6.82066 9.78049 6.8842 9.50686 6.98051C9.39451 7.02005 9.28445 7.06426 9.18068 7.11332C8.87141 7.25956 8.46403 7.565 8.09865 7.87309L9.64748 8.66215C9.73004 8.58613 9.82307 8.4994 9.92483 8.41117C10.2477 8.13123 10.7217 7.75005 11.1348 7.57621C11.2995 7.50692 11.5001 7.43309 11.71 7.36039L10.4268 6.75297C10.3799 6.7604 10.324 6.7695 10.2617 6.78129Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/Icons/MenuSmall.tsx b/components/Icons/MenuSmall.tsx
new file mode 100644
index 00000000..9127a33b
--- /dev/null
+++ b/components/Icons/MenuSmall.tsx
@@ -0,0 +1,18 @@
+import { Props } from "./Props";
+
+export const MenuSmall = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.9541 16.6455C20.6444 16.6455 21.2039 17.2053 21.2041 17.8955C21.2041 18.5859 20.6445 19.1455 19.9541 19.1455H4.04492C3.35476 19.1453 2.79492 18.5857 2.79492 17.8955C2.79509 17.2054 3.35486 16.6457 4.04492 16.6455H19.9541ZM19.9541 10.75C20.6444 10.75 21.2041 11.3097 21.2041 12C21.2041 12.6904 20.6445 13.25 19.9541 13.25H4.04492C3.35476 13.2498 2.79492 12.6902 2.79492 12C2.79495 11.3098 3.35478 10.7502 4.04492 10.75H19.9541ZM19.9541 4.85449C20.6445 4.85449 21.2041 5.41414 21.2041 6.10449C21.2039 6.79471 20.6444 7.35449 19.9541 7.35449H4.04492C3.35486 7.35426 2.79509 6.79457 2.79492 6.10449C2.79492 5.41428 3.35476 4.85472 4.04492 4.85449H19.9541Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/Icons/NotificationSmall.tsx b/components/Icons/NotificationSmall.tsx
new file mode 100644
index 00000000..2e5ee65a
--- /dev/null
+++ b/components/Icons/NotificationSmall.tsx
@@ -0,0 +1,55 @@
+import { Props } from "./Props";
+
+export const NotificationsUnreadSmall = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M14.3024 1.43058C14.4867 1.24672 15.1979 0.543997 16.3942 0.836833C17.357 1.07263 17.7754 1.74014 17.9362 2.2255C18.1981 3.01633 18.0108 3.8152 17.82 4.33975C17.7969 4.40332 17.7727 4.46469 17.7487 4.52334C18.9071 5.32788 19.6985 6.48773 20.1706 7.88075C20.8486 9.8818 20.8697 12.3569 20.4616 14.9862C20.6157 15.1662 20.7567 15.3499 20.8825 15.537C21.5041 16.4613 21.7973 17.5195 21.4958 18.5887C21.0327 20.23 19.3745 21.253 17.4616 21.7391C17.2568 21.7911 17.0461 21.8384 16.8307 21.8797C16.1912 22.7044 15.1828 23.234 14.0554 23.2342C12.9086 23.2342 11.8844 22.6865 11.2468 21.8377C11.011 21.7957 10.774 21.7481 10.5368 21.6961C8.02478 21.1453 5.85985 20.1213 4.3962 18.8748C2.96429 17.6553 2.04288 16.066 2.50558 14.4247C2.89584 13.0411 4.13541 12.0966 5.66085 11.5428C6.53657 8.84034 7.70841 6.59211 9.27803 5.12978C10.4535 4.03476 11.8336 3.39971 13.4079 3.32608C13.4153 3.27496 13.4236 3.22252 13.4333 3.16983C13.5309 2.64013 13.7678 1.96392 14.3024 1.43058ZM13.3718 16.1415C13.1138 16.038 12.8422 16.1672 12.7653 16.4305C12.65 16.8259 12.6911 17.3483 12.8786 17.9227C12.4745 18.1673 12.1568 18.5345 11.9772 18.9686C11.872 19.2231 11.8142 19.501 11.8142 19.7909C11.8142 20.0147 11.8486 20.2312 11.9128 20.4354C12.1933 21.3271 13.0404 21.9842 14.0554 21.9842C15.0444 21.984 15.8734 21.3599 16.1745 20.5028C16.2531 20.279 16.2965 20.0395 16.2966 19.7909C16.2966 19.55 16.2562 19.3172 16.1823 19.0995C15.8876 18.2313 15.0526 17.5968 14.0554 17.5965C13.9626 17.5965 13.8706 17.6025 13.7809 17.6131C13.6611 17.222 13.6602 16.9421 13.6999 16.8055C13.7767 16.5423 13.6295 16.245 13.3718 16.1415ZM15.1657 5.00186C13.1827 4.51697 11.6095 5.00028 10.3005 6.21962C9.15557 7.28623 8.18904 8.94185 7.40108 11.0917C9.19338 10.785 11.3088 10.8436 13.4645 11.3163C13.869 11.4051 14.1062 11.8005 13.9938 12.1991C13.8813 12.5975 13.4617 12.8482 13.0573 12.7596C10.7306 12.2495 8.52421 12.2783 6.85225 12.703C5.13792 13.1386 4.20347 13.9198 3.97042 14.746C3.73772 15.5721 4.14841 16.6474 5.43136 17.7401C6.61793 18.7506 8.41814 19.6448 10.5847 20.1698C10.5709 20.0454 10.5642 19.919 10.5642 19.7909C10.5642 19.4052 10.6278 19.0346 10.7458 18.6893C7.80726 17.9008 5.76926 16.4462 6.09347 15.2967C6.44449 14.0544 9.42306 13.6382 12.7468 14.3671C16.0704 15.0959 18.4806 16.6938 18.1305 17.9364C18.0403 18.2562 17.7761 18.5215 17.3766 18.7264C17.4866 19.061 17.5466 19.4191 17.5466 19.7909C17.5465 19.9314 17.5377 20.0699 17.5212 20.2059C18.9994 19.7567 19.8152 19.0317 20.0309 18.2674C20.1833 17.727 20.0672 17.0908 19.5964 16.3905C19.1243 15.6887 18.3265 14.976 17.2477 14.3446C16.8964 14.139 16.798 13.6857 17.028 13.3329C17.2581 12.9804 17.7296 12.8608 18.0807 13.0663C18.4468 13.2805 18.7922 13.5085 19.113 13.7469C19.3429 11.6614 19.239 9.82077 18.7467 8.36805C18.1614 6.64093 17.0317 5.45828 15.1657 5.00186ZM16.6081 10.7997C16.8481 10.4428 17.332 10.348 17.6891 10.5878C18.0462 10.8277 18.1416 11.3116 17.902 11.6688C17.662 12.0261 17.1773 12.1217 16.82 11.8817C16.4628 11.6417 16.3681 11.1569 16.6081 10.7997ZM15.3757 6.62001C15.6081 6.27939 16.0775 6.19011 16.4235 6.42079C17.4996 7.13865 17.8434 8.29284 17.9235 9.08582C17.9646 9.4953 17.6614 9.85914 17.2468 9.89832C16.8322 9.93727 16.4621 9.6368 16.4206 9.22742C16.3626 8.65359 16.1303 8.01964 15.5827 7.65419C15.2369 7.42351 15.1438 6.96063 15.3757 6.62001ZM6.36202 2.73819C6.67743 2.46989 7.15121 2.50785 7.41963 2.82315C7.68787 3.13856 7.64995 3.61236 7.33467 3.88077C6.43652 4.64508 5.56938 5.65156 4.96652 7.31435C4.82536 7.70365 4.39491 7.90455 4.00558 7.76356C3.61644 7.62248 3.41476 7.19281 3.55539 6.80361C4.26248 4.85333 5.30341 3.6391 6.36202 2.73819ZM4.32003 1.66593C4.64351 1.40808 5.11532 1.46006 5.37374 1.78312C5.6321 2.1067 5.57904 2.58027 5.25558 2.83878C4.77905 3.21946 4.42558 3.58659 4.0466 4.23819C3.83836 4.59583 3.37909 4.71745 3.02121 4.50967C2.6633 4.30142 2.54164 3.8413 2.74972 3.48331C3.23405 2.65069 3.7184 2.14651 4.32003 1.66593ZM16.0261 2.29093C15.808 2.23756 15.6732 2.27495 15.5895 2.31339C15.491 2.35871 15.4235 2.42393 15.362 2.48526C15.1228 2.72383 14.9801 3.06822 14.9138 3.41983C15.1176 3.45367 15.3245 3.49655 15.5339 3.54776C15.8419 3.62311 16.1355 3.71434 16.4137 3.8212C16.5569 3.42086 16.6124 3.01823 16.5085 2.70401C16.4821 2.62444 16.44 2.54283 16.3747 2.47452C16.3146 2.4117 16.2132 2.33677 16.0261 2.29093Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const NotificationsReadSmall = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M2.40963 18.0472C2.40983 17.3641 2.99636 17.3642 2.99655 18.0472C2.99654 18.7307 3.28805 19.1528 3.38815 19.263C3.48823 19.3732 3.66105 19.7179 4.28463 19.7181C4.90847 19.7182 4.90847 20.3255 4.28463 20.3255C3.66107 20.3256 3.56221 20.5899 3.38815 20.7816C3.21412 20.9732 2.99855 21.2572 2.9985 21.9232C2.9985 22.5896 2.41159 22.6066 2.41159 21.9232C2.41151 21.2398 2.04325 20.8276 2.00143 20.7816C1.959 20.735 1.52689 20.3255 1.03854 20.3255C0.549966 20.3254 0.554718 19.7182 1.03854 19.7181C1.52186 19.7181 1.83806 19.3644 1.93014 19.263C2.02172 19.1622 2.40963 18.7307 2.40963 18.0472ZM18.3989 13.7962C18.3991 13.1543 18.8958 13.1543 18.896 13.7962C18.896 14.4386 19.1424 14.8352 19.227 14.9388C19.3117 15.0425 19.4577 15.3663 19.9848 15.3665C20.5125 15.3666 20.5125 15.9378 19.9848 15.9378C19.4575 15.9379 19.3742 16.1864 19.227 16.3665C19.0798 16.5466 18.897 16.8131 18.8969 17.4388C18.8969 18.0651 18.4008 18.0811 18.4008 17.4388C18.4007 16.7986 18.0911 16.4117 18.0542 16.3665C18.0188 16.3233 17.653 15.9381 17.2397 15.9378C16.8263 15.9378 16.8303 15.3665 17.2397 15.3665C17.6486 15.3663 17.916 15.0338 17.9936 14.9388C18.0711 14.844 18.3989 14.4386 18.3989 13.7962ZM5.68893 1.79134C6.32061 1.54967 6.8992 1.76772 7.31002 2.04427C7.71467 2.31686 8.06882 2.71494 8.35299 3.07649C8.63964 3.44125 8.90666 3.83827 9.10299 4.11653C9.3417 4.45493 9.26161 4.92361 8.9233 5.16243C8.58506 5.40111 8.1173 5.31974 7.87838 4.98177C7.65546 4.66583 7.42734 4.32673 7.17233 4.00227C6.91507 3.67506 6.67898 3.42822 6.47311 3.28938C6.3745 3.22296 6.30685 3.19837 6.27096 3.19075C6.24474 3.18528 6.23525 3.18881 6.22506 3.1927C6.18423 3.20859 5.9833 3.32114 5.7192 3.88899C5.59862 4.14843 5.29699 5.01402 4.93209 6.10677C4.85847 6.12987 4.80511 6.14661 4.79831 6.15462C4.79485 6.15884 4.79121 6.16214 4.78854 6.16536C4.4966 6.19308 4.21288 6.31734 3.99459 6.54427C3.75682 6.79162 3.64898 7.10768 3.64791 7.40462C3.64696 7.70171 3.75272 8.02065 3.99264 8.27083C4.04882 8.32937 4.1096 8.38044 4.1733 8.42513C3.95587 9.09776 3.75091 9.74532 3.5776 10.2884C3.85066 10.3144 4.12174 10.3779 4.38034 10.4691C5.16136 10.7446 5.92693 11.3005 6.54928 12.0501C6.71967 11.9646 6.90306 11.9158 7.08932 11.8929C7.52605 11.8392 7.97349 11.9251 8.39889 12.1146C8.52073 11.5922 8.77238 11.1032 9.17428 10.6868C10.661 9.14683 13.2111 9.62241 14.8227 11.1781C14.9553 11.306 15.0799 11.4413 15.1977 11.5814C15.3522 11.0931 15.5412 10.4983 15.7387 9.87044C16.2338 8.29641 16.7876 6.52428 17.0298 5.71028C17.333 4.69126 17.7647 3.91964 18.3823 3.49056C19.0569 3.02218 19.7993 3.06179 20.4389 3.34017C21.047 3.60494 21.6053 4.09649 22.0825 4.63802C22.5684 5.18942 23.0142 5.84393 23.3862 6.50032C23.59 6.86052 23.4639 7.31757 23.104 7.52181C22.7438 7.72592 22.2859 7.59954 22.0815 7.23958C21.7486 6.6521 21.3605 6.08653 20.9575 5.62923C20.546 5.16239 20.1597 4.85528 19.8403 4.71614C19.5524 4.5908 19.3833 4.62119 19.2368 4.72298C19.0332 4.86476 18.7324 5.24367 18.4663 6.13802C18.2201 6.9656 17.6633 8.74963 17.1694 10.3197C16.922 11.1061 16.6893 11.8418 16.519 12.3802C16.4339 12.6494 16.3652 12.87 16.3169 13.0228C16.2928 13.0988 16.274 13.1581 16.2612 13.1986C16.2548 13.2188 16.2489 13.235 16.2456 13.2454C16.2441 13.2501 16.2425 13.2536 16.2417 13.2562V13.2591L16.2407 13.2601C16.2268 13.3038 16.2077 13.3449 16.187 13.3841C16.5566 14.5982 16.4051 15.8801 15.5122 16.805C14.0254 18.345 11.4753 17.8696 9.86373 16.3138C9.18414 15.6576 8.69133 14.8276 8.45944 13.972C8.05454 13.5525 7.64913 13.397 7.38424 13.3831C7.59712 13.8598 7.7328 14.345 7.7778 14.8138C7.86052 15.6775 7.64387 16.5969 6.91061 17.1702C6.17739 17.7433 5.23363 17.7322 4.41549 17.4437C3.58744 17.1515 2.77404 16.5464 2.13327 15.7269C1.49254 14.9074 1.10184 13.972 1.01803 13.098C0.936885 12.25 1.1447 11.3498 1.84616 10.7747C2.09807 9.97534 2.5868 8.4405 3.06979 6.96224C3.59658 5.34994 4.14583 3.71844 4.3608 3.25618C4.68344 2.56265 5.10288 2.01575 5.68893 1.79134ZM13.7807 12.2572C12.4881 11.0094 10.9295 11.0284 10.2534 11.7288C9.57757 12.4294 9.61347 13.987 10.9057 15.2347C12.1981 16.4823 13.7567 16.464 14.4331 15.764C15.1092 15.0636 15.0731 13.505 13.7807 12.2572ZM3.88229 11.8841C3.3528 11.6973 2.99993 11.7759 2.80905 11.9251C2.61843 12.0746 2.45867 12.3971 2.51217 12.9554C2.5648 13.5041 2.82326 14.1742 3.31491 14.8031C3.8066 15.4319 4.39472 15.8452 4.91452 16.0286C5.44348 16.2152 5.79586 16.1376 5.98678 15.9886C6.17756 15.8394 6.33808 15.5159 6.28463 14.9574C6.23201 14.4087 5.97256 13.7385 5.48092 13.1097C4.98934 12.481 4.40201 12.0676 3.88229 11.8841ZM11.9194 14.7786C12.0925 14.5637 12.4074 14.5295 12.6225 14.7025C12.661 14.7334 12.7453 14.7848 12.8491 14.8284C12.8979 14.849 12.9439 14.8642 12.9819 14.8743C13.0173 14.8837 13.0359 14.8858 13.0395 14.8861C13.3156 14.8914 13.5361 15.1197 13.5307 15.3958C13.5253 15.6718 13.2969 15.8912 13.021 15.8861C12.823 15.8822 12.6163 15.8145 12.4614 15.7493C12.2997 15.6813 12.1271 15.5876 11.9956 15.4818C11.7806 15.3087 11.7465 14.9937 11.9194 14.7786ZM3.50924 12.1361L3.57955 12.1497L3.6733 12.1878C3.88055 12.2932 3.99317 12.533 3.92916 12.7659C3.90752 12.8445 3.8653 12.9118 3.81393 12.9681C3.81694 12.9884 3.81922 13.0124 3.82467 13.0384C3.87694 13.2878 4.02405 13.6447 4.28561 13.9671C4.45941 14.1814 4.42741 14.4972 4.21334 14.6712C3.99906 14.8451 3.68332 14.812 3.50924 14.598C3.14412 14.1481 2.92999 13.6431 2.84616 13.2425C2.80618 13.0513 2.78536 12.8362 2.82565 12.6468C2.84499 12.5561 2.89269 12.4054 3.02291 12.2845C3.16403 12.1538 3.34353 12.1108 3.50924 12.1361ZM11.0669 11.7454C11.2971 11.7138 11.5265 11.8478 11.6069 12.0755C11.6924 12.3193 11.576 12.5828 11.3471 12.6908C11.3428 12.696 11.3346 12.705 11.3256 12.721C11.2978 12.7706 11.2672 12.8577 11.2592 12.9779C11.244 13.2098 11.3168 13.5618 11.6518 13.9544C11.831 14.1644 11.806 14.4802 11.5962 14.6595C11.3862 14.8387 11.0704 14.8145 10.8911 14.6048C10.4014 14.0312 10.2273 13.4258 10.2612 12.9115C10.2779 12.6589 10.3462 12.4249 10.4546 12.2318C10.5444 12.0719 10.6842 11.9039 10.8803 11.807L10.9672 11.7699L11.0669 11.7454ZM5.92428 5.79427C5.92428 5.2357 6.35593 5.23572 6.35592 5.79427C6.35593 6.35264 6.57034 6.69727 6.64401 6.78743C6.71763 6.87749 6.84534 7.15945 7.30416 7.1595C7.76238 7.15988 7.76238 7.65527 7.30416 7.65559C6.84534 7.65559 6.77205 7.872 6.64401 8.02864C6.51604 8.18525 6.35794 8.41728 6.35788 8.96126C6.35788 9.50588 5.92623 9.51978 5.92623 8.96126C5.92613 8.40366 5.65582 8.067 5.62448 8.02864C5.59372 7.99102 5.27579 7.65582 4.91647 7.65559C4.557 7.65559 4.56049 7.1595 4.91647 7.1595C5.27178 7.15932 5.50406 6.87024 5.57174 6.78743C5.63909 6.70504 5.92426 6.3528 5.92428 5.79427Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const ReaderRead = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M5.3939 5.10098C6.94949 3.45228 9.5127 3.07248 11.1166 4.58535C11.8822 5.30769 12.2281 6.27357 12.2132 7.26504C12.4456 7.20657 12.6982 7.16362 12.9515 7.15469C13.2516 7.14413 13.6091 7.17916 13.9379 7.34707C14.6404 7.7064 15.0081 8.33088 15.142 8.9418C16.5998 8.30589 18.3571 8.43563 19.7631 9.42032C21.8907 10.9106 22.4521 13.8268 20.9711 15.9418C20.5099 16.6002 19.9071 17.0981 19.2328 17.4281C19.2725 17.8704 19.3144 18.3372 19.389 18.8285C19.4945 19.5226 19.6505 20.0808 19.8754 20.4223C20.103 20.7681 20.0071 21.2335 19.6615 21.4613C19.3156 21.6891 18.8503 21.5932 18.6224 21.2475C18.2076 20.6174 18.0171 19.7803 17.9066 19.0531C17.8466 18.658 17.8029 18.2404 17.7679 17.8647C16.6347 18.0087 15.441 17.7451 14.4291 17.0365C12.3744 15.5975 11.7805 12.8288 13.0756 10.7358L11.4466 9.68106C11.2965 9.90817 11.1261 10.1258 10.9349 10.3285C9.3795 11.9772 6.81619 12.3575 5.21226 10.8451C4.85829 10.5112 4.59328 10.1249 4.41246 9.70841C4.12505 9.84619 3.7775 10.0195 3.40464 10.2016C3.08808 10.3561 2.76192 10.5118 2.47203 10.6361C2.20246 10.7518 1.89418 10.872 1.63999 10.9145C1.23165 10.9825 0.845053 10.7066 0.776711 10.2982C0.7085 9.88981 0.984507 9.50334 1.39292 9.43497C1.44871 9.42563 1.60626 9.37614 1.8812 9.25821C2.1356 9.14908 2.43339 9.00579 2.74644 8.85294C3.20082 8.63107 3.71706 8.37021 4.11265 8.19278C4.12147 7.09833 4.57394 5.97021 5.3939 5.10098ZM18.9027 10.6488C17.7826 9.86431 16.3636 9.87558 15.3129 10.5473C16.188 11.0878 17.0483 11.6416 17.7211 12.0824C18.1169 12.3418 18.449 12.5624 18.682 12.7182C18.7984 12.796 18.8907 12.8585 18.9535 12.9008C18.9844 12.9216 19.0085 12.9377 19.0248 12.9486C19.0328 12.9541 19.0392 12.9585 19.0433 12.9613C19.0454 12.9627 19.0471 12.9645 19.0482 12.9652H19.0492V12.9662C19.2776 13.1212 19.3377 13.4321 19.183 13.6606C19.0279 13.8888 18.7161 13.9473 18.4877 13.7924L18.4867 13.7934C18.4857 13.7927 18.4847 13.7908 18.4828 13.7895C18.4789 13.7868 18.4729 13.7829 18.4652 13.7777C18.4493 13.767 18.4248 13.7507 18.3939 13.7299C18.3771 13.7186 18.3582 13.7059 18.3373 13.6918C18.3409 13.7007 18.3455 13.7094 18.349 13.7182C18.4391 13.9478 18.4846 14.151 18.514 14.3129C18.5488 14.5038 18.5528 14.5587 18.5697 14.6166C18.6475 14.8814 18.4955 15.1597 18.2308 15.2377C17.9663 15.3152 17.6888 15.1642 17.6107 14.8998C17.5741 14.7753 17.5483 14.5898 17.5306 14.4926C17.5076 14.366 17.4762 14.2309 17.4183 14.0834C17.3064 13.7986 17.0738 13.4138 16.516 12.9633L14.3353 11.5512C13.4914 12.949 13.8764 14.8184 15.2894 15.808C16.7626 16.8395 18.752 16.4941 19.7416 15.0815C20.731 13.6686 20.3757 11.6807 18.9027 10.6488ZM10.0873 5.67715C9.23327 4.87156 7.62151 4.92548 6.48472 6.13028C5.34805 7.33535 5.38756 8.94767 6.24156 9.75333C7.09567 10.5587 8.70742 10.5041 9.8441 9.29923C9.97166 9.16397 10.0826 9.02211 10.181 8.87833C8.43436 8.11224 8.03413 8.1053 7.73863 8.15372C7.49417 8.19384 7.43342 8.19931 7.34215 8.21719C7.27583 8.2302 7.20421 8.24884 7.00426 8.31387C6.74185 8.39904 6.45989 8.25486 6.37437 7.99258C6.28923 7.73019 6.43242 7.44723 6.69469 7.36172C6.90022 7.29488 7.02051 7.26011 7.14976 7.23477C7.25177 7.2148 7.38857 7.1961 7.5648 7.16739L7.50523 7.1293C7.27353 6.9792 7.20675 6.66966 7.3568 6.43789C7.50691 6.20642 7.81653 6.14058 8.0482 6.29043L10.6127 7.95059C10.8517 7.07384 10.6453 6.20394 10.0873 5.67715ZM13.0043 8.65372C12.9388 8.65604 12.868 8.66411 12.7933 8.67618L13.6478 9.14883C13.5794 8.94601 13.4513 8.7833 13.2552 8.68301C13.2369 8.67373 13.1626 8.64818 13.0043 8.65372Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/Icons/PopoverArrow.tsx b/components/Icons/PopoverArrow.tsx
index 06d0a8eb..25b77aca 100644
--- a/components/Icons/PopoverArrow.tsx
+++ b/components/Icons/PopoverArrow.tsx
@@ -11,7 +11,7 @@ export const PopoverArrow = (
       height="8"
       viewBox="0 0 16 8"
       fill="none"
-      className="-mt-[1px]"
+      className="-mt-px"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
diff --git a/components/Icons/PublishSmall.tsx b/components/Icons/PublishSmall.tsx
index 5065d61a..994d475c 100644
--- a/components/Icons/PublishSmall.tsx
+++ b/components/Icons/PublishSmall.tsx
@@ -8,6 +8,7 @@ export const PublishSmall = (props: Props) => {
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <path
         fillRule="evenodd"
diff --git a/components/Icons/ReaderSmall.tsx b/components/Icons/ReaderSmall.tsx
new file mode 100644
index 00000000..1be96367
--- /dev/null
+++ b/components/Icons/ReaderSmall.tsx
@@ -0,0 +1,36 @@
+import { Props } from "./Props";
+
+export const ReaderUnreadSmall = (props: Props) => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.82968 18.0472C2.82987 17.3641 3.41641 17.3642 3.41659 18.0472C3.41658 18.7307 3.7081 19.1528 3.80819 19.263C3.90827 19.3732 4.08109 19.7179 4.70468 19.7181C5.32851 19.7182 5.32851 20.3255 4.70468 20.3255C4.08111 20.3256 3.98225 20.5899 3.80819 20.7816C3.63417 20.9732 3.41859 21.2572 3.41854 21.9232C3.41854 22.5896 2.83163 22.6066 2.83163 21.9232C2.83155 21.2398 2.4633 20.8276 2.42147 20.7816C2.37905 20.735 1.94693 20.3255 1.45858 20.3255C0.97001 20.3254 0.974762 19.7182 1.45858 19.7181C1.9419 19.7181 2.25811 19.3644 2.35018 19.263C2.44176 19.1622 2.82968 18.7307 2.82968 18.0472ZM18.8189 13.7962C18.8191 13.1543 19.3158 13.1543 19.316 13.7962C19.316 14.4386 19.5624 14.8352 19.6471 14.9388C19.7317 15.0425 19.8778 15.3663 20.4049 15.3665C20.9325 15.3666 20.9325 15.9378 20.4049 15.9378C19.8775 15.9379 19.7943 16.1864 19.6471 16.3665C19.4999 16.5466 19.3171 16.8131 19.317 17.4388C19.317 18.0651 18.8209 18.0811 18.8209 17.4388C18.8207 16.7986 18.5111 16.4117 18.4742 16.3665C18.4388 16.3233 18.073 15.9381 17.6598 15.9378C17.2464 15.9378 17.2504 15.3665 17.6598 15.3665C18.0686 15.3663 18.336 15.0338 18.4137 14.9388C18.4911 14.844 18.8189 14.4386 18.8189 13.7962ZM6.10897 1.79134C6.74065 1.54967 7.31924 1.76772 7.73007 2.04427C8.13472 2.31686 8.48886 2.71494 8.77304 3.07649C9.05968 3.44125 9.32671 3.83827 9.52304 4.11653C9.76174 4.45493 9.68165 4.92361 9.34335 5.16243C9.0051 5.40111 8.53735 5.31974 8.29843 4.98177C8.07551 4.66583 7.84739 4.32673 7.59237 4.00227C7.33511 3.67506 7.09903 3.42822 6.89315 3.28938C6.79455 3.22296 6.72689 3.19837 6.69101 3.19075C6.66479 3.18528 6.65529 3.18881 6.64511 3.1927C6.60428 3.20859 6.40334 3.32114 6.13925 3.88899C6.01867 4.14843 5.71704 5.01402 5.35214 6.10677C5.27851 6.12987 5.22515 6.14661 5.21835 6.15462C5.21489 6.15884 5.21125 6.16214 5.20858 6.16536C4.91664 6.19308 4.63293 6.31734 4.41464 6.54427C4.17686 6.79162 4.06902 7.10768 4.06796 7.40462C4.067 7.70171 4.17276 8.02065 4.41268 8.27083C4.46886 8.32937 4.52964 8.38044 4.59335 8.42513C4.37591 9.09776 4.17095 9.74532 3.99765 10.2884C4.2707 10.3144 4.54179 10.3779 4.80038 10.4691C5.5814 10.7446 6.34697 11.3005 6.96933 12.0501C7.13971 11.9646 7.3231 11.9158 7.50936 11.8929C7.9461 11.8392 8.39353 11.9251 8.81893 12.1146C8.94078 11.5922 9.19242 11.1032 9.59433 10.6868C11.081 9.14683 13.6312 9.62241 15.2428 11.1781C15.3753 11.306 15.4999 11.4413 15.6178 11.5814C15.7723 11.0931 15.9613 10.4983 16.1588 9.87044C16.6539 8.29641 17.2076 6.52428 17.4498 5.71028C17.7531 4.69126 18.1848 3.91964 18.8023 3.49056C19.4769 3.02218 20.2194 3.06179 20.859 3.34017C21.4671 3.60494 22.0253 4.09649 22.5025 4.63802C22.9884 5.18942 23.4343 5.84393 23.8062 6.50032C24.0101 6.86052 23.884 7.31757 23.524 7.52181C23.1638 7.72592 22.7059 7.59954 22.5016 7.23958C22.1686 6.6521 21.7805 6.08653 21.3775 5.62923C20.9661 5.16239 20.5798 4.85528 20.2603 4.71614C19.9724 4.5908 19.8033 4.62119 19.6568 4.72298C19.4532 4.86476 19.1524 5.24367 18.8863 6.13802C18.6401 6.9656 18.0833 8.74963 17.5894 10.3197C17.3421 11.1061 17.1093 11.8418 16.9391 12.3802C16.854 12.6494 16.7853 12.87 16.7369 13.0228C16.7128 13.0988 16.6941 13.1581 16.6812 13.1986C16.6748 13.2188 16.6689 13.235 16.6656 13.2454C16.6641 13.2501 16.6625 13.2536 16.6617 13.2562V13.2591L16.6607 13.2601C16.6469 13.3038 16.6277 13.3449 16.607 13.3841C16.9766 14.5982 16.8251 15.8801 15.9322 16.805C14.4454 18.345 11.8953 17.8696 10.2838 16.3138C9.60418 15.6576 9.11137 14.8276 8.87948 13.972C8.47459 13.5525 8.06917 13.397 7.80429 13.3831C8.01717 13.8598 8.15284 14.345 8.19784 14.8138C8.28056 15.6775 8.06391 16.5969 7.33065 17.1702C6.59744 17.7433 5.65367 17.7322 4.83554 17.4437C4.00748 17.1515 3.19408 16.5464 2.55331 15.7269C1.91258 14.9074 1.52188 13.972 1.43808 13.098C1.35693 12.25 1.56474 11.3498 2.2662 10.7747C2.51811 9.97534 3.00684 8.4405 3.48983 6.96224C4.01662 5.34994 4.56587 3.71844 4.78085 3.25618C5.10348 2.56265 5.52293 2.01575 6.10897 1.79134ZM14.2008 12.2572C12.9082 11.0094 11.3496 11.0284 10.6734 11.7288C9.99762 12.4294 10.0335 13.987 11.3258 15.2347C12.6181 16.4823 14.1767 16.464 14.8531 15.764C15.5292 15.0636 15.4931 13.505 14.2008 12.2572ZM4.30233 11.8841C3.77284 11.6973 3.41998 11.7759 3.22909 11.9251C3.03847 12.0746 2.87871 12.3971 2.93222 12.9554C2.98485 13.5041 3.24331 14.1742 3.73495 14.8031C4.22664 15.4319 4.81476 15.8452 5.33456 16.0286C5.86353 16.2152 6.2159 16.1376 6.40683 15.9886C6.59761 15.8394 6.75812 15.5159 6.70468 14.9574C6.65205 14.4087 6.3926 13.7385 5.90097 13.1097C5.40938 12.481 4.82205 12.0676 4.30233 11.8841ZM12.3394 14.7786C12.5125 14.5637 12.8275 14.5295 13.0426 14.7025C13.081 14.7334 13.1653 14.7848 13.2691 14.8284C13.318 14.849 13.3639 14.8642 13.4019 14.8743C13.4373 14.8837 13.456 14.8858 13.4596 14.8861C13.7357 14.8914 13.9561 15.1197 13.9508 15.3958C13.9454 15.6718 13.7169 15.8912 13.441 15.8861C13.243 15.8822 13.0364 15.8145 12.8814 15.7493C12.7197 15.6813 12.5471 15.5876 12.4156 15.4818C12.2007 15.3087 12.1665 14.9937 12.3394 14.7786ZM3.92929 12.1361L3.9996 12.1497L4.09335 12.1878C4.3006 12.2932 4.41321 12.533 4.34921 12.7659C4.32756 12.8445 4.28534 12.9118 4.23397 12.9681C4.23698 12.9884 4.23927 13.0124 4.24472 13.0384C4.29698 13.2878 4.4441 13.6447 4.70565 13.9671C4.87945 14.1814 4.84746 14.4972 4.63339 14.6712C4.41911 14.8451 4.10336 14.812 3.92929 14.598C3.56417 14.1481 3.35003 13.6431 3.2662 13.2425C3.22622 13.0513 3.2054 12.8362 3.24569 12.6468C3.26503 12.5561 3.31274 12.4054 3.44296 12.2845C3.58407 12.1538 3.76357 12.1108 3.92929 12.1361ZM11.4869 11.7454C11.7171 11.7138 11.9466 11.8478 12.0269 12.0755C12.1125 12.3193 11.996 12.5828 11.7672 12.6908C11.7629 12.696 11.7547 12.705 11.7457 12.721C11.7178 12.7706 11.6872 12.8577 11.6793 12.9779C11.6641 13.2098 11.7368 13.5618 12.0719 13.9544C12.2511 14.1644 12.226 14.4802 12.0162 14.6595C11.8063 14.8387 11.4905 14.8145 11.3111 14.6048C10.8215 14.0312 10.6473 13.4258 10.6812 12.9115C10.698 12.6589 10.7662 12.4249 10.8746 12.2318C10.9645 12.0719 11.1042 11.9039 11.3004 11.807L11.3873 11.7699L11.4869 11.7454ZM6.34433 5.79427C6.34433 5.2357 6.77597 5.23572 6.77597 5.79427C6.77598 6.35264 6.99039 6.69727 7.06405 6.78743C7.13767 6.87749 7.26539 7.15945 7.72421 7.1595C8.18243 7.15988 8.18243 7.65527 7.72421 7.65559C7.26539 7.65559 7.19209 7.872 7.06405 8.02864C6.93609 8.18525 6.77798 8.41728 6.77792 8.96126C6.77792 9.50588 6.34628 9.51978 6.34628 8.96126C6.34618 8.40366 6.07586 8.067 6.04452 8.02864C6.01377 7.99102 5.69583 7.65582 5.33651 7.65559C4.97705 7.65559 4.98054 7.1595 5.33651 7.1595C5.69183 7.15932 5.92411 6.87024 5.99179 6.78743C6.05914 6.70504 6.3443 6.3528 6.34433 5.79427Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const ReaderReadSmall = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M5.3939 5.10098C6.94949 3.45228 9.5127 3.07248 11.1166 4.58535C11.8822 5.30769 12.2281 6.27357 12.2132 7.26504C12.4456 7.20657 12.6982 7.16362 12.9515 7.15469C13.2516 7.14413 13.6091 7.17916 13.9379 7.34707C14.6404 7.7064 15.0081 8.33088 15.142 8.9418C16.5998 8.30589 18.3571 8.43563 19.7631 9.42032C21.8907 10.9106 22.4521 13.8268 20.9711 15.9418C20.5099 16.6002 19.9071 17.0981 19.2328 17.4281C19.2725 17.8704 19.3144 18.3372 19.389 18.8285C19.4945 19.5226 19.6505 20.0808 19.8754 20.4223C20.103 20.7681 20.0071 21.2335 19.6615 21.4613C19.3156 21.6891 18.8503 21.5932 18.6224 21.2475C18.2076 20.6174 18.0171 19.7803 17.9066 19.0531C17.8466 18.658 17.8029 18.2404 17.7679 17.8647C16.6347 18.0087 15.441 17.7451 14.4291 17.0365C12.3744 15.5975 11.7805 12.8288 13.0756 10.7358L11.4466 9.68106C11.2965 9.90817 11.1261 10.1258 10.9349 10.3285C9.3795 11.9772 6.81619 12.3575 5.21226 10.8451C4.85829 10.5112 4.59328 10.1249 4.41246 9.70841C4.12505 9.84619 3.7775 10.0195 3.40464 10.2016C3.08808 10.3561 2.76192 10.5118 2.47203 10.6361C2.20246 10.7518 1.89418 10.872 1.63999 10.9145C1.23165 10.9825 0.845053 10.7066 0.776711 10.2982C0.7085 9.88981 0.984507 9.50334 1.39292 9.43497C1.44871 9.42563 1.60626 9.37614 1.8812 9.25821C2.1356 9.14908 2.43339 9.00579 2.74644 8.85294C3.20082 8.63107 3.71706 8.37021 4.11265 8.19278C4.12147 7.09833 4.57394 5.97021 5.3939 5.10098ZM18.9027 10.6488C17.7826 9.86431 16.3636 9.87558 15.3129 10.5473C16.188 11.0878 17.0483 11.6416 17.7211 12.0824C18.1169 12.3418 18.449 12.5624 18.682 12.7182C18.7984 12.796 18.8907 12.8585 18.9535 12.9008C18.9844 12.9216 19.0085 12.9377 19.0248 12.9486C19.0328 12.9541 19.0392 12.9585 19.0433 12.9613C19.0454 12.9627 19.0471 12.9645 19.0482 12.9652H19.0492V12.9662C19.2776 13.1212 19.3377 13.4321 19.183 13.6606C19.0279 13.8888 18.7161 13.9473 18.4877 13.7924L18.4867 13.7934C18.4857 13.7927 18.4847 13.7908 18.4828 13.7895C18.4789 13.7868 18.4729 13.7829 18.4652 13.7777C18.4493 13.767 18.4248 13.7507 18.3939 13.7299C18.3771 13.7186 18.3582 13.7059 18.3373 13.6918C18.3409 13.7007 18.3455 13.7094 18.349 13.7182C18.4391 13.9478 18.4846 14.151 18.514 14.3129C18.5488 14.5038 18.5528 14.5587 18.5697 14.6166C18.6475 14.8814 18.4955 15.1597 18.2308 15.2377C17.9663 15.3152 17.6888 15.1642 17.6107 14.8998C17.5741 14.7753 17.5483 14.5898 17.5306 14.4926C17.5076 14.366 17.4762 14.2309 17.4183 14.0834C17.3064 13.7986 17.0738 13.4138 16.516 12.9633L14.3353 11.5512C13.4914 12.949 13.8764 14.8184 15.2894 15.808C16.7626 16.8395 18.752 16.4941 19.7416 15.0815C20.731 13.6686 20.3757 11.6807 18.9027 10.6488ZM10.0873 5.67715C9.23327 4.87156 7.62151 4.92548 6.48472 6.13028C5.34805 7.33535 5.38756 8.94767 6.24156 9.75333C7.09567 10.5587 8.70742 10.5041 9.8441 9.29923C9.97166 9.16397 10.0826 9.02211 10.181 8.87833C8.43436 8.11224 8.03413 8.1053 7.73863 8.15372C7.49417 8.19384 7.43342 8.19931 7.34215 8.21719C7.27583 8.2302 7.20421 8.24884 7.00426 8.31387C6.74185 8.39904 6.45989 8.25487 6.37437 7.99258C6.28923 7.73019 6.43242 7.44723 6.69469 7.36172C6.90022 7.29488 7.02051 7.26011 7.14976 7.23477C7.25177 7.2148 7.38857 7.1961 7.5648 7.16739L7.50523 7.1293C7.27353 6.9792 7.20675 6.66966 7.3568 6.43789C7.50691 6.20642 7.81653 6.14058 8.0482 6.29043L10.6127 7.95059C10.8517 7.07384 10.6453 6.20394 10.0873 5.67715ZM13.0043 8.65372C12.9388 8.65604 12.868 8.66411 12.7933 8.67618L13.6478 9.14883C13.5794 8.94601 13.4513 8.7833 13.2552 8.68301C13.2369 8.67373 13.1626 8.64818 13.0043 8.65372Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/Icons/SearchSmall.tsx b/components/Icons/SearchSmall.tsx
new file mode 100644
index 00000000..9b27b823
--- /dev/null
+++ b/components/Icons/SearchSmall.tsx
@@ -0,0 +1,21 @@
+import { Props } from "./Props";
+
+export const SearchSmall = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.3882 13.4918C16.0902 13.4116 16.8207 13.6407 17.3591 14.1791L17.368 14.188L17.3679 14.1881L20.8268 17.7645C21.7593 18.7021 21.7577 20.218 20.822 21.1537C19.8848 22.0909 18.3652 22.0909 17.428 21.1537L17.4191 21.1448L17.4192 21.1447L13.9603 17.5684C13.4304 17.0355 13.2022 16.3159 13.2755 15.6222L12.5856 14.9162C11.5587 15.5303 10.3576 15.8831 9.07417 15.8831C5.28991 15.8831 2.22216 12.8154 2.22216 9.03113C2.22216 5.24687 5.28991 2.17912 9.07417 2.17912C12.8584 2.17912 15.9262 5.24687 15.9262 9.03114C15.9262 10.4458 15.4975 11.7603 14.7629 12.8519L15.3882 13.4918ZM15.0363 16.5233C15.3829 16.5101 15.7131 16.3963 15.9528 16.1619C16.2057 15.9149 16.3227 15.6029 16.3364 15.2792L19.7526 18.8114L19.7525 18.8114L19.7614 18.8203C20.1128 19.1717 20.1128 19.7416 19.7614 20.093C19.4112 20.4432 18.8442 20.4445 18.4924 20.0968L15.0363 16.5233ZM9.07417 3.92912C6.25641 3.92912 3.97216 6.21337 3.97216 9.03113C3.97216 11.8489 6.25641 14.1331 9.07417 14.1331C11.8919 14.1331 14.1762 11.8489 14.1762 9.03114C14.1762 6.21337 11.8919 3.92912 9.07417 3.92912ZM10.2779 11.7018C10.4564 12.1657 10.2251 12.6865 9.76119 12.865C9.47813 12.974 9.18509 12.9893 8.95246 12.979C8.70872 12.9683 8.46274 12.926 8.23733 12.8706C7.80084 12.7632 7.33708 12.5802 7.01053 12.3667C6.55802 12.0708 5.66109 11.4318 5.39409 10.3237C5.27767 9.84042 5.57502 9.35431 6.05825 9.23788C6.54148 9.12146 7.02759 9.41881 7.14402 9.90204C7.23429 10.2767 7.57343 10.5841 7.99558 10.8601C8.10636 10.9325 8.36702 11.0488 8.66713 11.1226C8.81002 11.1578 8.93539 11.1765 9.03167 11.1808C9.09302 11.1835 9.12443 11.1795 9.13263 11.1784L9.13269 11.1784C9.59197 11.0126 10.1017 11.2439 10.2779 11.7018ZM5.5481 6.89456C5.19301 7.32017 5.25018 7.95304 5.67578 8.30813C6.10138 8.66322 6.73425 8.60606 7.08934 8.18046C7.44443 7.75485 7.38727 7.12198 6.96167 6.76689C6.53607 6.4118 5.90319 6.46896 5.5481 6.89456Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/Icons/SearchTiny.tsx b/components/Icons/SearchTiny.tsx
new file mode 100644
index 00000000..c01b6894
--- /dev/null
+++ b/components/Icons/SearchTiny.tsx
@@ -0,0 +1,20 @@
+import { Props } from "./Props";
+
+export const SearchTiny = (props: Props) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.82929 7.1256C2.42204 5.14225 3.64873 3.25471 5.51296 2.87192C7.37719 2.48913 9.24843 3.74055 9.65568 5.72391C10.0629 7.70726 8.83624 9.5948 6.97201 9.97759C5.10778 10.3604 3.23654 9.10896 2.82929 7.1256ZM5.24142 1.54951C2.6052 2.09082 0.958359 4.7258 1.50688 7.39714C2.0554 10.0685 4.60732 11.8413 7.24355 11.3C7.9444 11.1561 8.57532 10.8642 9.11365 10.463L13.0573 13.6769C13.4854 14.0258 14.1153 13.9616 14.4642 13.5334C14.8131 13.1053 14.7489 12.4754 14.3207 12.1265L10.4344 8.95927C11.012 7.93759 11.2341 6.69894 10.9781 5.45237C10.4296 2.78102 7.87765 1.0082 5.24142 1.54951ZM4.70667 6.0399C5.09948 5.95924 5.35253 5.57542 5.27187 5.18261C5.19121 4.7898 4.80739 4.53675 4.41458 4.6174C4.02177 4.69806 3.76872 5.08189 3.84938 5.4747C3.93004 5.86751 4.31386 6.12056 4.70667 6.0399ZM5.09658 7.14249C5.03594 6.80268 4.71131 6.57638 4.3715 6.63703C4.03169 6.69767 3.80538 7.02231 3.86603 7.36211C4.05123 8.39982 5.20679 9.33276 6.72726 9.11913C7.06908 9.07111 7.30725 8.75508 7.25923 8.41326C7.2112 8.07143 6.89517 7.83327 6.55335 7.88129C5.61779 8.01274 5.14981 7.44073 5.09658 7.14249Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/Icons/SortSmall.tsx b/components/Icons/SortSmall.tsx
new file mode 100644
index 00000000..795a59c7
--- /dev/null
+++ b/components/Icons/SortSmall.tsx
@@ -0,0 +1,18 @@
+import { Props } from "./Props";
+
+export const SortSmall = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.67186 18.5V8.74805L4.70408 10.7002C4.31199 11.089 3.67892 11.0863 3.29002 10.6943C2.90107 10.3023 2.90381 9.66923 3.29588 9.28027L6.96776 5.6377L7.04295 5.56934C7.43471 5.25182 8.01037 5.27501 8.37596 5.6377L12.0478 9.28027C12.4399 9.66924 12.4427 10.3023 12.0537 10.6943C11.6648 11.0863 11.0317 11.089 10.6396 10.7002L8.67186 8.74805V18.5C8.67186 19.0523 8.22414 19.5 7.67186 19.5C7.1196 19.5 6.67186 19.0523 6.67186 18.5ZM15.3281 5.5C15.3281 4.94772 15.7758 4.5 16.3281 4.5C16.8804 4.50003 17.3281 4.94774 17.3281 5.5V15.1016L19.2959 13.1504C19.688 12.7616 20.321 12.7642 20.7099 13.1562C21.0988 13.5483 21.0961 14.1814 20.7041 14.5703L17.0322 18.2129C16.6423 18.5997 16.0139 18.5997 15.624 18.2129L11.9521 14.5703C11.5601 14.1814 11.5573 13.5483 11.9463 13.1562C12.3352 12.7642 12.9683 12.7615 13.3603 13.1504L15.3281 15.1016V5.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/Icons/TabsSmall.tsx b/components/Icons/TabsSmall.tsx
new file mode 100644
index 00000000..9becc72e
--- /dev/null
+++ b/components/Icons/TabsSmall.tsx
@@ -0,0 +1,18 @@
+import { Props } from "./Props";
+
+export const TabsSmall = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.5741 3.43762C4.71829 3.43388 4.83844 3.45707 4.91101 3.47278L7.50476 4.03333L7.50378 4.0343C7.93101 4.12295 8.3082 4.36081 8.56433 4.70715C8.91472 4.53042 9.32259 4.46201 9.72644 4.5509L11.4755 4.93567C11.8499 5.01812 12.1582 5.22518 12.3632 5.50598C12.7041 5.34426 13.096 5.28489 13.4843 5.37024L15.2343 5.755C15.961 5.91506 16.4399 6.54224 16.3944 7.27454L16.3358 8.20227C17.2858 8.41813 17.9768 9.25659 17.9823 10.2443L20.9491 10.8712L20.954 10.8732C22.0873 11.1209 22.7352 12.3188 22.3212 13.4025L19.8788 19.7941C19.4226 20.9881 18.1618 21.6693 16.913 21.3966L3.97937 18.5724C2.74764 18.3034 1.88959 17.1843 1.9491 15.9249C1.94954 15.9155 1.95025 15.906 1.95105 15.8966L2.85925 5.32043C2.89069 4.14023 3.78539 3.55411 4.42175 3.45129L4.5741 3.43762ZM4.62488 4.94543C4.58481 4.96035 4.52557 4.98845 4.47449 5.04114C4.41904 5.09848 4.35632 5.19676 4.35632 5.38489C4.35631 5.40603 4.35519 5.4273 4.35339 5.44836L3.44714 15.9962V16.0939C3.46785 16.5814 3.81504 17.0007 4.29968 17.1066L17.2333 19.9318C17.7572 20.0461 18.286 19.7598 18.4774 19.2589L20.9198 12.8673C21.0063 12.6408 20.8706 12.3898 20.6337 12.338V12.337L17.8378 11.7472C17.5141 13.7033 17.0716 16.26 16.8915 17.2648C16.8341 17.5855 16.9494 17.7292 17.0175 17.7823C17.1088 17.8537 17.1828 17.8354 17.2089 17.8195C17.562 17.6031 18.0237 17.7134 18.2401 18.0665C18.4564 18.4197 18.3451 18.8814 17.9921 19.0978C17.3655 19.4817 16.6134 19.3701 16.0936 18.964C15.5506 18.5395 15.2689 17.8204 15.4159 17.0001C15.6184 15.871 16.1561 12.765 16.4774 10.7823C16.4808 10.6491 16.4831 10.4619 16.4833 10.257C16.4836 9.97523 16.2841 9.72512 15.996 9.66321L15.9852 9.66028L7.88953 7.79407C7.52736 7.71059 7.28106 7.37451 7.31042 7.00403L7.40808 5.77161C7.40576 5.67206 7.37646 5.61707 7.35046 5.58606C7.3204 5.55031 7.27091 5.51692 7.19812 5.50208L7.18738 5.50012L4.62488 4.94543ZM13.1053 6.56555C12.8679 6.51346 12.6242 6.69552 12.6102 6.93469L12.5868 7.33606L15.0829 7.91223L15.1219 7.30188C15.1323 7.13296 15.022 6.9882 14.8544 6.95129L13.1053 6.56555ZM9.34656 5.74622C9.1658 5.70656 8.98124 5.80266 8.89734 5.95618L8.85632 6.47668L11.328 7.04602L11.3641 6.48254C11.3745 6.31363 11.2632 6.16886 11.0956 6.13196L9.34656 5.74622Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/IdentityProvider.tsx b/components/IdentityProvider.tsx
index f5e3daed..c33709fa 100644
--- a/components/IdentityProvider.tsx
+++ b/components/IdentityProvider.tsx
@@ -2,7 +2,11 @@
 import { getIdentityData } from "actions/getIdentityData";
 import { createContext, useContext } from "react";
 import useSWR, { KeyedMutator, mutate } from "swr";
+import { DashboardState } from "./PageLayouts/DashboardLayout";
 
+export type InterfaceState = {
+  dashboards: { [id: string]: DashboardState | undefined };
+};
 type Identity = Awaited<ReturnType<typeof getIdentityData>>;
 let IdentityContext = createContext({
   identity: null as Identity,
diff --git a/components/Input.tsx b/components/Input.tsx
index 382c4b1e..f172a6d3 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -100,9 +100,9 @@ export const InputWithLabel = (
     JSX.IntrinsicElements["textarea"],
 ) => {
   let { label, textarea, ...inputProps } = props;
-  let style = `appearance-none w-full font-normal bg-transparent text-base text-primary focus:outline-0 ${props.className} outline-none resize-none`;
+  let style = `appearance-none w-full font-normal bg-transparent text-base text-primary focus:outline-0 ${props.className} outline-hidden resize-none`;
   return (
-    <label className=" input-with-border flex flex-col gap-[1px] text-sm text-tertiary font-bold italic leading-tight !py-1 !px-[6px]">
+    <label className=" input-with-border flex flex-col gap-px text-sm text-tertiary font-bold italic leading-tight py-1! px-[6px]!">
       {props.label}
       {textarea ? (
         <textarea {...inputProps} className={style} />
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 9e363837..8f487c88 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -90,9 +90,9 @@ export const MenuItem = (props: {
         font-bold z-10 py-1 px-3
         text-left text-secondary
         flex gap-2
-        data-[highlighted]:bg-border-light data-[highlighted]:text-secondary
+        data-highlighted:bg-border-light data-highlighted:text-secondary
         hover:bg-border-light hover:text-secondary
-        outline-none
+        outline-hidden
         cursor-pointer
         ${props.className}
         `}
diff --git a/components/Media.tsx b/components/Media.tsx
index 66eaeaed..0f4ada77 100644
--- a/components/Media.tsx
+++ b/components/Media.tsx
@@ -20,3 +20,23 @@ export function Media(props: {
     return <div className={props.className}>{props.children}</div>;
   return null;
 }
+
+export function MediaContents(props: {
+  mobile: boolean;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  let initialRender = useIsInitialRender();
+  let isMobile = useIsMobile();
+  if (initialRender)
+    return (
+      <div
+        className={`${props.mobile ? "sm:hidden contents" : "hidden sm:contents"} ${props.className}`}
+      >
+        {props.children}
+      </div>
+    );
+  if ((isMobile && props.mobile) || (!isMobile && !props.mobile))
+    return <div className={props.className}>{props.children}</div>;
+  return null;
+}
diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx
new file mode 100644
index 00000000..046c6eaf
--- /dev/null
+++ b/components/PageHeader.tsx
@@ -0,0 +1,77 @@
+"use client";
+import { useState, useEffect } from "react";
+
+export const Header = (props: {
+  children: React.ReactNode;
+  hasBackgroundImage: boolean;
+}) => {
+  let [scrollPos, setScrollPos] = useState(0);
+
+  useEffect(() => {
+    const homeContent = document.getElementById("home-content");
+
+    const handleScroll = () => {
+      if (homeContent) {
+        setScrollPos(homeContent.scrollTop);
+      }
+    };
+
+    if (homeContent) {
+      homeContent.addEventListener("scroll", handleScroll);
+      return () => homeContent.removeEventListener("scroll", handleScroll);
+    }
+  }, []);
+
+  let headerBGColor = props.hasBackgroundImage
+    ? "var(--bg-page)"
+    : "var(--bg-leaflet)";
+
+  return (
+    <div
+      className={`
+      headerWrapper
+      sticky top-0 z-10
+      w-full bg-transparent
+      `}
+    >
+      <div
+        style={
+          scrollPos < 20
+            ? {
+                paddingLeft: `calc(${scrollPos / 20}*8px)`,
+                paddingRight: `calc(${scrollPos / 20}*8px)`,
+              }
+            : { paddingLeft: `8px`, paddingRight: `8px` }
+        }
+      >
+        <div
+          className={`
+            headerContent
+            border rounded-lg
+            ${scrollPos > 20 ? "border-border-light" : "border-transparent"}
+            py-1
+            w-full flex justify-between items-center gap-4`}
+          style={
+            scrollPos < 20
+              ? {
+                  backgroundColor: `rgba(${headerBGColor}, ${scrollPos / 40 + 0.5})`,
+                  paddingLeft: props.hasBackgroundImage
+                    ? "8px"
+                    : `calc(${scrollPos / 20}*8px)`,
+                  paddingRight: props.hasBackgroundImage
+                    ? "8px"
+                    : `calc(${scrollPos / 20}*8px)`,
+                }
+              : {
+                  backgroundColor: `rgb(${headerBGColor})`,
+                  paddingLeft: "8px",
+                  paddingRight: "8px",
+                }
+          }
+        >
+          {props.children}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/PageLayouts/DashboardLayout.tsx b/components/PageLayouts/DashboardLayout.tsx
new file mode 100644
index 00000000..19ca0613
--- /dev/null
+++ b/components/PageLayouts/DashboardLayout.tsx
@@ -0,0 +1,450 @@
+"use client";
+import { useState, createContext, useContext } from "react";
+import { Header } from "../PageHeader";
+import { Footer } from "components/ActionBar/Footer";
+import { Sidebar } from "components/ActionBar/Sidebar";
+import {
+  DesktopNavigation,
+  MobileNavigation,
+  navPages,
+} from "components/ActionBar/Navigation";
+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 { MediaContents } from "components/Media";
+import { SortSmall } from "components/Icons/SortSmall";
+import { TabsSmall } from "components/Icons/TabsSmall";
+import { Input } from "components/Input";
+import { SearchTiny } from "components/Icons/SearchTiny";
+import { InterfaceState, useIdentityData } from "components/IdentityProvider";
+import { updateIdentityInterfaceState } from "actions/updateIdentityInterfaceState";
+
+export type DashboardState = {
+  display?: "grid" | "list";
+  sort?: "created" | "alphabetical";
+  filter: {
+    drafts: boolean;
+    published: boolean;
+    docs: boolean;
+    templates: boolean;
+  };
+};
+
+type DashboardStore = {
+  dashboards: { [id: string]: DashboardState };
+  setDashboard: (id: string, partial: Partial<DashboardState>) => void;
+};
+
+const defaultDashboardState: DashboardState = {
+  display: undefined,
+  sort: undefined,
+  filter: { drafts: false, published: false, docs: false, templates: false },
+};
+
+export const useDashboardStore = create<DashboardStore>((set, get) => ({
+  dashboards: {},
+  setDashboard: (id: string, partial: Partial<DashboardState>) => {
+    console.log(partial);
+    set((state) => ({
+      dashboards: {
+        ...state.dashboards,
+        [id]: {
+          ...(state.dashboards[id] || defaultDashboardState),
+          ...partial,
+        },
+      },
+    }));
+  },
+}));
+
+const DashboardIdContext = createContext<string | null>(null);
+
+export const useDashboardId = () => {
+  const id = useContext(DashboardIdContext);
+  if (!id) {
+    throw new Error("useDashboardId must be used within a DashboardLayout");
+  }
+  return id;
+};
+
+export const useDashboardState = () => {
+  const id = useDashboardId();
+  let { identity } = useIdentityData();
+  let localState = useDashboardStore(
+    (state) => state.dashboards[id] || defaultDashboardState,
+  );
+  if (!identity) return localState;
+  let metadata = identity.interface_state as InterfaceState;
+  return metadata?.dashboards?.[id] || defaultDashboardState;
+};
+
+export const useSetDashboardState = () => {
+  const id = useDashboardId();
+  let { identity, mutate } = useIdentityData();
+  const setDashboard = useDashboardStore((state) => state.setDashboard);
+  return async (partial: Partial<DashboardState>) => {
+    if (!identity) return setDashboard(id, partial);
+
+    let interface_state = (identity.interface_state as InterfaceState) || {};
+    let newDashboardState = {
+      ...defaultDashboardState,
+      ...interface_state.dashboards?.[id],
+      ...partial,
+    };
+    mutate(
+      {
+        ...identity,
+        interface_state: {
+          ...interface_state,
+          dashboards: {
+            ...interface_state.dashboards,
+            [id]: newDashboardState,
+          },
+        },
+      },
+      { revalidate: false },
+    );
+    await updateIdentityInterfaceState({
+      ...interface_state,
+      dashboards: {
+        [id]: newDashboardState,
+      },
+    });
+  };
+};
+
+export function DashboardLayout<
+  T extends {
+    [name: string]: { content: React.ReactNode; controls: React.ReactNode };
+  },
+>(props: {
+  id: string;
+  hasBackgroundImage: boolean;
+  tabs: T;
+  defaultTab: keyof T;
+  currentPage: navPages;
+  publication?: string;
+  actions: React.ReactNode;
+}) {
+  let [tab, setTab] = useState(props.defaultTab);
+  let { content, controls } = props.tabs[tab];
+
+  let [headerState, setHeaderState] = useState<"default" | "controls">(
+    "default",
+  );
+  return (
+    <DashboardIdContext.Provider value={props.id}>
+      <div
+        className={`dashboard pwa-padding relative max-w-(--breakpoint-lg) w-full h-full mx-auto flex sm:flex-row flex-col sm:items-stretch sm:px-6`}
+      >
+        <MediaContents mobile={false}>
+          <div className="flex flex-col gap-4 my-6">
+            <DesktopNavigation
+              currentPage={props.currentPage}
+              publication={props.publication}
+            />
+            {props.actions && <Sidebar alwaysOpen>{props.actions}</Sidebar>}
+          </div>
+        </MediaContents>
+        <div
+          className={`w-full h-full flex flex-col gap-2 relative overflow-y-scroll pt-3 pb-12 px-3 sm:pt-8 sm:pb-12 sm:pl-6 sm:pr-4 `}
+          id="home-content"
+        >
+          {Object.keys(props.tabs).length <= 1 && !controls ? null : (
+            <>
+              <Header hasBackgroundImage={props.hasBackgroundImage}>
+                {headerState === "default" ? (
+                  <>
+                    {Object.keys(props.tabs).length > 1 && (
+                      <div className="pubDashTabs flex flex-row gap-1">
+                        {Object.keys(props.tabs).map((t) => (
+                          <Tab
+                            key={t}
+                            name={t}
+                            selected={t === tab}
+                            onSelect={() => setTab(t)}
+                          />
+                        ))}
+                      </div>
+                    )}
+                    {props.publication && (
+                      <button
+                        className={`sm:hidden block text-tertiary`}
+                        onClick={() => {
+                          setHeaderState("controls");
+                        }}
+                      >
+                        <SortSmall />
+                      </button>
+                    )}
+                    <div
+                      className={`sm:block ${props.publication && "hidden"} grow`}
+                    >
+                      {controls}
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    {controls}
+                    <button
+                      className="text-tertiary"
+                      onClick={() => {
+                        setHeaderState("default");
+                      }}
+                    >
+                      <TabsSmall />
+                    </button>
+                  </>
+                )}
+              </Header>
+            </>
+          )}
+          {content}
+        </div>
+        <Footer>
+          <MobileNavigation
+            currentPage={props.currentPage}
+            publication={props.publication}
+          />
+          {props.actions && (
+            <>
+              <Separator />
+              {props.actions}
+            </>
+          )}
+        </Footer>
+      </div>
+    </DashboardIdContext.Provider>
+  );
+}
+
+export const HomeDashboardControls = (props: {
+  searchValue: string;
+  setSearchValueAction: (searchValue: string) => void;
+  hasBackgroundImage: boolean;
+  defaultDisplay: Exclude<DashboardState["display"], undefined>;
+  hasPubs: boolean;
+  hasTemplates: boolean;
+}) => {
+  let { display, sort } = useDashboardState();
+  console.log({ display, props });
+  display = display || props.defaultDisplay;
+  let setState = useSetDashboardState();
+
+  let { identity } = useIdentityData();
+  console.log(props);
+
+  return (
+    <div className="dashboardControls w-full flex gap-4">
+      {identity && (
+        <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!" />
+
+        {props.hasPubs || props.hasTemplates ? (
+          <>
+            {props.hasPubs}
+            {props.hasTemplates}
+            <FilterOptions
+              hasPubs={props.hasPubs}
+              hasTemplates={props.hasTemplates}
+            />
+            <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();
+  console.log({ display, props });
+  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>
+    </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>
+  );
+};
+
+function Tab(props: { name: string; selected: boolean; onSelect: () => void }) {
+  return (
+    <div
+      className={`pubTabs px-1 py-0 rounded-md hover:cursor-pointer ${props.selected ? "text-accent-2 bg-accent-1 font-bold -mb-px" : "text-tertiary"}`}
+      onClick={() => props.onSelect()}
+    >
+      {props.name}
+    </div>
+  );
+}
+
+const FilterOptions = (props: { hasPubs: boolean; hasTemplates: 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.hasTemplates && (
+        <>
+          <Checkbox
+            small
+            checked={filter.templates}
+            onChange={(e) =>
+              setState({
+                filter: { ...filter, templates: !!e.target.checked },
+              })
+            }
+          >
+            Templates
+          </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,
+              templates: 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-transparent 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/NotFoundLayout.tsx b/components/PageLayouts/NotFoundLayout.tsx
new file mode 100644
index 00000000..db8e6f25
--- /dev/null
+++ b/components/PageLayouts/NotFoundLayout.tsx
@@ -0,0 +1,9 @@
+export const NotFoundLayout = (props: { children: React.ReactNode }) => {
+  return (
+    <div className="w-screen h-full flex place-items-center bg-bg-leaflet p-4">
+      <div className="bg-bg-page mx-auto p-4 border border-border rounded-md flex flex-col text-center justify-center gap-1 w-fit">
+        {props.children}
+      </div>
+    </div>
+  );
+};
diff --git a/components/Pages/PublicationMetadata.tsx b/components/Pages/PublicationMetadata.tsx
index 00a981d1..6621f688 100644
--- a/components/Pages/PublicationMetadata.tsx
+++ b/components/Pages/PublicationMetadata.tsx
@@ -18,6 +18,7 @@ import {
 } from "app/lish/createPub/getPublicationURL";
 import { useSubscribe } from "src/replicache/useSubscribe";
 import { useEntitySetContext } from "components/EntitySetProvider";
+import { timeAgo } from "src/utils/timeAgo";
 export const PublicationMetadata = ({
   cardBorderHidden,
 }: {
@@ -59,7 +60,7 @@ export const PublicationMetadata = ({
       </div>
       <AsyncValueAutosizeTextarea
         disabled={!permissions.write}
-        className="text-xl font-bold outline-none bg-transparent"
+        className="text-xl font-bold outline-hidden bg-transparent"
         value={title}
         onChange={async (e) => {
           await rep?.mutate.updatePublicationDraft({
@@ -72,7 +73,7 @@ export const PublicationMetadata = ({
       <AsyncValueAutosizeTextarea
         disabled={!permissions.write}
         placeholder="add an optional description..."
-        className="italic text-secondary outline-none bg-transparent"
+        className="italic text-secondary outline-hidden bg-transparent"
         value={description}
         onChange={async (e) => {
           await rep?.mutate.updatePublicationDraft({
@@ -84,16 +85,7 @@ export const PublicationMetadata = ({
       {pub.doc ? (
         <div className="flex flex-row items-center gap-2 pt-3">
           <p className="text-sm text-tertiary">
-            Published{" "}
-            {publishedAt &&
-              new Date(publishedAt).toLocaleString(undefined, {
-                year: "numeric",
-                month: "2-digit",
-                day: "2-digit",
-                hour: "2-digit",
-                minute: "2-digit",
-                hour12: true,
-              })}
+            Published {publishedAt && timeAgo(publishedAt)}
           </p>
           <Separator classname="h-4" />
           <Link
@@ -125,27 +117,18 @@ export const PublicationMetadataPreview = () => {
       </div>
 
       <div
-        className={`text-xl font-bold outline-none bg-transparent ${!pub.title && "text-tertiary italic"}`}
+        className={`text-xl font-bold outline-hidden bg-transparent ${!pub.title && "text-tertiary italic"}`}
       >
         {pub.title ? pub.title : "Untitled"}
       </div>
-      <div className="italic text-secondary outline-none bg-transparent">
+      <div className="italic text-secondary outline-hidden bg-transparent">
         {pub.description}
       </div>
 
       {pub.doc ? (
         <div className="flex flex-row items-center gap-2 pt-3">
           <p className="text-sm text-tertiary">
-            Published{" "}
-            {publishedAt &&
-              new Date(publishedAt).toLocaleString(undefined, {
-                year: "numeric",
-                month: "2-digit",
-                day: "2-digit",
-                hour: "2-digit",
-                minute: "2-digit",
-                hour12: true,
-              })}
+            Published {publishedAt && timeAgo(publishedAt)}
           </p>
         </div>
       ) : (
diff --git a/components/Pages/index.tsx b/components/Pages/index.tsx
index bb80a878..b7c1bafd 100644
--- a/components/Pages/index.tsx
+++ b/components/Pages/index.tsx
@@ -119,12 +119,12 @@ function Page(props: { entityID: string; first?: boolean }) {
               : "rgba(var(--bg-page), var(--bg-page-alpha))",
           }}
           className={`
-            ${pageType === "canvas" ? "!lg:max-w-[1152px]" : "max-w-[var(--page-width-units)]"}
+            ${pageType === "canvas" ? "!lg:max-w-[1152px]" : "max-w-(--page-width-units)"}
               page
               grow flex flex-col
               overscroll-y-none
               overflow-y-auto
-              ${cardBorderHidden ? "border-0 !shadow-none sm:-mt-6 sm:-mb-12 -mt-2 -mb-1 pt-3 " : "border rounded-lg"}
+              ${cardBorderHidden ? "border-0 shadow-none! sm:-mt-6 sm:-mb-12 -mt-2 -mb-1 pt-3 " : "border rounded-lg"}
               ${isFocused ? "shadow-md border-border" : "border-border-light"}
             `}
         >
@@ -359,7 +359,7 @@ const OptionsMenu = (props: {
       trigger={
         <PageOptionButton
           cardBorderHidden={props.cardBorderHidden}
-          className="!w-8 !h-5 sm:!w-5 sm:!h-8"
+          className="w-8! h-5! sm:w-5! sm:h-8!"
         >
           <MoreOptionsTiny className="sm:rotate-90" />
         </PageOptionButton>
diff --git a/components/Popover.tsx b/components/Popover.tsx
index 6d67a719..e30fcdfb 100644
--- a/components/Popover.tsx
+++ b/components/Popover.tsx
@@ -17,6 +17,7 @@ export const Popover = (props: {
   className?: string;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  onOpenAutoFocus?: (e: Event) => void;
   asChild?: boolean;
   arrowFill?: string;
 }) => {
@@ -39,8 +40,8 @@ export const Popover = (props: {
               className={`
               z-20 bg-bg-page
               px-3 py-2
-              max-w-[var(--radix-popover-content-available-width)]
-              max-h-[var(--radix-popover-content-available-height)]
+              max-w-(--radix-popover-content-available-width)
+              max-h-(--radix-popover-content-available-height)
               border border-border rounded-md shadow-md
               overflow-y-scroll no-scrollbar
               ${props.className}
@@ -49,6 +50,7 @@ export const Popover = (props: {
               align={props.align ? props.align : "center"}
               sideOffset={4}
               collisionPadding={16}
+              onOpenAutoFocus={props.onOpenAutoFocus}
             >
               {props.children}
               <RadixPopover.Arrow
diff --git a/components/ShareOptions/DomainOptions.tsx b/components/ShareOptions/DomainOptions.tsx
index f401b348..b579df46 100644
--- a/components/ShareOptions/DomainOptions.tsx
+++ b/components/ShareOptions/DomainOptions.tsx
@@ -234,7 +234,7 @@ const DomainOption = (props: {
             <Input
               type="text"
               autoFocus
-              className="appearance-none focus:outline-none font-normal text-accent-2 w-full bg-transparent placeholder:text-accent-2 placeholder:opacity-50"
+              className="appearance-none focus:outline-hidden font-normal text-accent-2 w-full bg-transparent placeholder:text-accent-2 placeholder:opacity-50"
               placeholder="add-optional-path"
               onChange={(e) => props.setSelectedRoute(e.target.value)}
               value={props.selectedRoute}
diff --git a/components/ShareOptions/index.tsx b/components/ShareOptions/index.tsx
index 6e24eafb..734f7cfb 100644
--- a/components/ShareOptions/index.tsx
+++ b/components/ShareOptions/index.tsx
@@ -6,7 +6,7 @@ import { useSmoker } from "components/Toast";
 import { Menu, MenuItem } from "components/Layout";
 import { ActionButton } from "components/ActionBar/ActionButton";
 import useSWR from "swr";
-import { useTemplateState } from "app/home/CreateNewButton";
+import { useTemplateState } from "app/home/Actions/CreateNewButton";
 import LoginForm from "app/login/LoginForm";
 import { CustomDomainMenu } from "./DomainOptions";
 import { useIdentityData } from "components/IdentityProvider";
diff --git a/components/ThemeManager/Pickers/ColorPicker.tsx b/components/ThemeManager/Pickers/ColorPicker.tsx
index 43e50d82..fbb68441 100644
--- a/components/ThemeManager/Pickers/ColorPicker.tsx
+++ b/components/ThemeManager/Pickers/ColorPicker.tsx
@@ -17,7 +17,7 @@ import { Separator } from "components/Layout";
 import { onMouseDown } from "src/utils/iosInputMouseDown";
 
 export let thumbStyle =
-  "w-4 h-4 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C]";
+  "w-4 h-4 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C,inset_0_0_0_1px_#8C8C8C]";
 
 export const ColorPicker = (props: {
   label?: string;
@@ -80,7 +80,7 @@ export const ColorPicker = (props: {
                   onBlur={(e) => {
                     props.setValue(parseColor(e.currentTarget.value));
                   }}
-                  className="w-[72px] bg-transparent outline-none disabled:text-tertiary"
+                  className="w-[72px] bg-transparent outline-hidden disabled:text-tertiary"
                 />
               </ColorField>
             )}
@@ -105,7 +105,7 @@ export const ColorPicker = (props: {
                         e.currentTarget.blur();
                       } else return;
                     }}
-                    className="w-[72px] bg-transparent outline-none "
+                    className="w-[72px] bg-transparent outline-hidden "
                   />
                 </ColorField>
               </>
diff --git a/components/ThemeManager/Pickers/ImagePicker.tsx b/components/ThemeManager/Pickers/ImagePicker.tsx
index 178f129b..b5203df2 100644
--- a/components/ThemeManager/Pickers/ImagePicker.tsx
+++ b/components/ThemeManager/Pickers/ImagePicker.tsx
@@ -32,8 +32,8 @@ export const ImageSettings = (props: {
       <div className="themeBGImageControls font-bold flex flex-col gap-1 items-center px-3">
         <label htmlFor="cover" className="w-full">
           <Radio
-            radioCheckedClassName="!text-[#595959]"
-            radioEmptyClassName="!text-[#969696]"
+            radioCheckedClassName="text-[#595959]!"
+            radioEmptyClassName="text-[#969696]!"
             type="radio"
             id="cover"
             name="bg-image-options"
@@ -58,8 +58,8 @@ export const ImageSettings = (props: {
             id="repeat"
             name="bg-image-options"
             value="repeat"
-            radioCheckedClassName="!text-[#595959]"
-            radioEmptyClassName="!text-[#969696]"
+            radioCheckedClassName="text-[#595959]!"
+            radioEmptyClassName="text-[#969696]!"
             checked={!!repeat}
             onChange={async (e) => {
               if (!e.currentTarget.checked) return;
@@ -128,7 +128,7 @@ export const ImageSettings = (props: {
                   className={`
                     flex w-4 h-4 rounded-full border-2 border-white cursor-pointer
                     ${repeat ? "bg-[#595959]" : " bg-[#C3C3C3] "}
-                    ${repeat && "shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C]"} `}
+                    ${repeat && "shadow-[0_0_0_1px_#8C8C8C,inset_0_0_0_1px_#8C8C8C]"} `}
                   aria-label="Volume"
                 />
               </Slider.Root>
diff --git a/components/ThemeManager/Pickers/PageThemePickers.tsx b/components/ThemeManager/Pickers/PageThemePickers.tsx
index 206cc63a..8aaf4a61 100644
--- a/components/ThemeManager/Pickers/PageThemePickers.tsx
+++ b/components/ThemeManager/Pickers/PageThemePickers.tsx
@@ -213,7 +213,7 @@ export const PageBackgroundImagePicker = (props: {
             });
           }}
         >
-          <Separator classname="!h-4 my-1 !border-[#C3C3C3]" />
+          <Separator classname="h-4! my-1 border-[#C3C3C3]!" />
           <ColorField className="w-fit pl-[6px]" channel="alpha">
             <Input
               disabled={props.disabled}
@@ -229,7 +229,7 @@ export const PageBackgroundImagePicker = (props: {
                   e.currentTarget.blur();
                 } else return;
               }}
-              className={`w-[48px] bg-transparent outline-none disabled:text-[#969696]`}
+              className={`w-[48px] bg-transparent outline-hidden disabled:text-[#969696]`}
             />
           </ColorField>
         </SpectrumColorPicker>
@@ -305,7 +305,7 @@ const CanvasBGPatternPicker = (props: {
   return (
     <div className="flex gap-2 h-8 ">
       <button
-        className={`w-full rounded-md bg-bg-page border  ${selectedPattern === "grid" ? "outline outline-tertiary border-tertiary" : "transparent-outline hover:outline-border border-border "}`}
+        className={`w-full rounded-md bg-bg-page border  ${selectedPattern === "grid" ? "outline-solid outline-tertiary border-tertiary" : "transparent-outline hover:outline-border border-border "}`}
         onMouseDown={() => {
           props.rep &&
             props.rep.mutate.assertFact({
@@ -318,7 +318,7 @@ const CanvasBGPatternPicker = (props: {
         <CanvasBackgroundPattern pattern="grid" scale={0.5} />
       </button>
       <button
-        className={`w-full rounded-md bg-bg-page border  ${selectedPattern === "dot" ? "outline outline-tertiary border-tertiary" : "transparent-outline hover:outline-border border-border "}`}
+        className={`w-full rounded-md bg-bg-page border  ${selectedPattern === "dot" ? "outline-solid outline-tertiary border-tertiary" : "transparent-outline hover:outline-border border-border "}`}
         onMouseDown={() => {
           props.rep &&
             props.rep.mutate.assertFact({
@@ -331,7 +331,7 @@ const CanvasBGPatternPicker = (props: {
         <CanvasBackgroundPattern pattern="dot" scale={0.5} />
       </button>
       <button
-        className={`w-full rounded-md bg-bg-page border  ${selectedPattern === "plain" ? "outline outline-tertiary border-tertiary" : "transparent-outline hover:outline-border border-border "}`}
+        className={`w-full rounded-md bg-bg-page border  ${selectedPattern === "plain" ? "outline-solid outline-tertiary border-tertiary" : "transparent-outline hover:outline-border border-border "}`}
         onMouseDown={() => {
           props.rep &&
             props.rep.mutate.assertFact({
diff --git a/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx b/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
index 3e96a8fa..99b5ec86 100644
--- a/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
+++ b/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
@@ -216,8 +216,8 @@ export const ImageSettings = (props: {
       <div className="themeBGImageControls font-bold flex flex-col gap-1 items-center px-3">
         <label htmlFor="cover" className="w-full">
           <Radio
-            radioCheckedClassName="!text-[#595959]"
-            radioEmptyClassName="!text-[#969696]"
+            radioCheckedClassName="text-[#595959]!"
+            radioEmptyClassName="text-[#969696]!"
             type="radio"
             id="cover"
             name="bg-image-options"
@@ -242,8 +242,8 @@ export const ImageSettings = (props: {
             id="repeat"
             name="bg-image-options"
             value="repeat"
-            radioCheckedClassName="!text-[#595959]"
-            radioEmptyClassName="!text-[#969696]"
+            radioCheckedClassName="text-[#595959]!"
+            radioEmptyClassName="text-[#969696]!"
             checked={!!props.bgImage?.repeat}
             onChange={async (e) => {
               if (!e.currentTarget.checked) return;
@@ -296,7 +296,7 @@ export const ImageSettings = (props: {
                   className={`
                     flex w-4 h-4 rounded-full border-2 border-white cursor-pointer
                     ${props.bgImage?.repeat ? "bg-[#595959]" : " bg-[#C3C3C3] "}
-                    ${props.bgImage?.repeat && "shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C]"} `}
+                    ${props.bgImage?.repeat && "shadow-[0_0_0_1px_#8C8C8C,inset_0_0_0_1px_#8C8C8C]"} `}
                   aria-label="Volume"
                 />
               </Slider.Root>
diff --git a/components/ThemeManager/PubThemeSetter.tsx b/components/ThemeManager/PubThemeSetter.tsx
index a87845db..d6d22396 100644
--- a/components/ThemeManager/PubThemeSetter.tsx
+++ b/components/ThemeManager/PubThemeSetter.tsx
@@ -27,7 +27,8 @@ export const PubThemeSetter = () => {
   let [loading, setLoading] = useState(false);
   let [sample, setSample] = useState<"pub" | "post">("pub");
   let [openPicker, setOpenPicker] = useState<pickers>("null");
-  let { data: pub, mutate } = usePublicationData();
+  let { data, mutate } = usePublicationData();
+  let { publication: pub } = data || {};
   let record = pub?.record as PubLeafletPublication.Record | undefined;
   let [showPageBackground, setShowPageBackground] = useState(
     !!record?.theme?.showPageBackground,
@@ -87,17 +88,7 @@ export const PubThemeSetter = () => {
         }}
       >
         <h4 className="text-accent-2">Publication Theme</h4>
-        <ButtonSecondary
-          compact
-          disabled={
-            !(
-              showPageBackground === !!record?.theme?.showPageBackground ||
-              changes ||
-              !!image?.file ||
-              record?.theme?.backgroundImage?.width !== image?.repeat
-            )
-          }
-        >
+        <ButtonSecondary compact>
           {loading ? <DotLoader /> : "Update"}
         </ButtonSecondary>
       </form>
@@ -130,7 +121,7 @@ export const PubThemeSetter = () => {
               <SectionArrow
                 fill="white"
                 stroke="#CCCCCC"
-                className="ml-2 -mt-[1px]"
+                className="ml-2 -mt-px"
               />
             </div>
           </div>
@@ -177,7 +168,7 @@ export const PubThemeSetter = () => {
           <div className="flex flex-col mt-4 ">
             <div className="flex gap-2 items-center text-sm  text-[#8C8C8C]">
               <div className="text-sm">Preview</div>
-              <Separator classname="!h-4" />{" "}
+              <Separator classname="h-4!" />{" "}
               <button
                 className={`${sample === "pub" ? "font-bold  text-[#595959]" : ""}`}
                 onClick={() => setSample("pub")}
@@ -216,7 +207,8 @@ const SamplePub = (props: {
   pubBGRepeat: number | null;
   showPageBackground: boolean;
 }) => {
-  let { data: publication } = usePublicationData();
+  let { data } = usePublicationData();
+  let { publication } = data || {};
   let record = publication?.record as PubLeafletPublication.Record | null;
 
   return (
@@ -260,7 +252,7 @@ const SamplePub = (props: {
           <div className="text-[7px] font-normal text-tertiary">
             {record?.description}
           </div>
-          <div className=" flex gap-1 items-center mt-[6px] bg-accent-1 text-accent-2 py-[1px] px-[4px] text-[7px] w-fit font-bold rounded-[2px] mx-auto">
+          <div className=" flex gap-1 items-center mt-[6px] bg-accent-1 text-accent-2 py-px px-[4px] text-[7px] w-fit font-bold rounded-[2px] mx-auto">
             <div className="h-[7px] w-[7px] rounded-full bg-accent-2" />
             Subscribe with Bluesky
           </div>
@@ -283,7 +275,8 @@ const SamplePost = (props: {
   pubBGRepeat: number | null;
   showPageBackground: boolean;
 }) => {
-  let { data: publication } = usePublicationData();
+  let { data } = usePublicationData();
+  let { publication } = data || {};
   let record = publication?.record as PubLeafletPublication.Record | null;
   return (
     <div
diff --git a/components/ThemeManager/PublicationThemeProvider.tsx b/components/ThemeManager/PublicationThemeProvider.tsx
index 74035c53..3b374f7e 100644
--- a/components/ThemeManager/PublicationThemeProvider.tsx
+++ b/components/ThemeManager/PublicationThemeProvider.tsx
@@ -49,7 +49,8 @@ export function PublicationThemeProviderDashboard(props: {
   children: React.ReactNode;
   record?: PubLeafletPublication.Record | null;
 }) {
-  let { data: pub } = usePublicationData();
+  let { data } = usePublicationData();
+  let { publication: pub } = data || {};
   return (
     <PublicationThemeProvider
       pub_creator={pub?.identity_did || ""}
diff --git a/components/ThemeManager/ThemeSetter.tsx b/components/ThemeManager/ThemeSetter.tsx
index 9dde2461..0911b3a6 100644
--- a/components/ThemeManager/ThemeSetter.tsx
+++ b/components/ThemeManager/ThemeSetter.tsx
@@ -114,7 +114,7 @@ export const ThemePopover = (props: { entityID: string; home?: boolean }) => {
               <SectionArrow
                 fill="white"
                 stroke="#CCCCCC"
-                className="ml-2 -mt-[1px]"
+                className="ml-2 -mt-px"
               />
             </div>
           </div>
diff --git a/components/Toolbar/InlineLinkToolbar.tsx b/components/Toolbar/InlineLinkToolbar.tsx
index 1713d332..408b332f 100644
--- a/components/Toolbar/InlineLinkToolbar.tsx
+++ b/components/Toolbar/InlineLinkToolbar.tsx
@@ -135,7 +135,7 @@ export function InlineLinkToolbar(props: { onClose: () => void }) {
       <Separator classname="h-6" />
       <Input
         autoFocus
-        className="w-full grow bg-transparent border-none outline-none "
+        className="w-full grow bg-transparent border-none outline-hidden "
         placeholder="www.example.com"
         value={linkValue}
         onChange={(e) => setLinkValue(e.target.value)}
diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx
new file mode 100644
index 00000000..6f698b0f
--- /dev/null
+++ b/components/Tooltip.tsx
@@ -0,0 +1,68 @@
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+import { PopoverArrow } from "./Icons/PopoverArrow";
+import { theme } from "tailwind.config";
+import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider";
+
+export const Tooltip = (props: {
+  trigger: React.ReactNode;
+  disabled?: boolean;
+  children: React.ReactNode;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+  align?: "start" | "end" | "center";
+  side?: "top" | "bottom" | "left" | "right";
+  background?: string;
+  border?: string;
+  className?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  asChild?: boolean;
+  arrowFill?: string;
+}) => {
+  return (
+    <RadixTooltip.Provider
+      delayDuration={props.delayDuration ? props.delayDuration : 600}
+      skipDelayDuration={
+        props.skipDelayDuration ? props.skipDelayDuration : 300
+      }
+    >
+      <RadixTooltip.Root>
+        <RadixTooltip.Trigger disabled={props.disabled} asChild={props.asChild}>
+          {props.trigger}
+        </RadixTooltip.Trigger>
+        <RadixTooltip.Portal>
+          <NestedCardThemeProvider>
+            <RadixTooltip.Content
+              className={`
+          z-20 bg-bg-page
+          px-3 py-2
+          max-w-(--radix-popover-content-available-width)
+          max-h-(--radix-popover-content-available-height)
+          border border-border rounded-md shadow-md
+          overflow-y-scroll no-scrollbar
+          ${props.className}
+        `}
+              side={props.side}
+              align={props.align ? props.align : "center"}
+              sideOffset={4}
+              collisionPadding={16}
+            >
+              {props.children}
+              <RadixTooltip.Arrow
+                asChild
+                width={16}
+                height={8}
+                viewBox="0 0 16 8"
+              >
+                <PopoverArrow
+                  arrowFill={theme.colors["border"]}
+                  arrowStroke="transparent"
+                />
+              </RadixTooltip.Arrow>
+            </RadixTooltip.Content>
+          </NestedCardThemeProvider>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>
+  );
+};
diff --git a/package-lock.json b/package-lock.json
index cb2c085a..e32795e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,12 +86,12 @@
       "devDependencies": {
         "@atproto/lex-cli": "^0.9.5",
         "@cloudflare/workers-types": "^4.20240512.0",
+        "@tailwindcss/postcss": "^4.1.13",
         "@types/katex": "^0.16.7",
         "@types/node": "^22.15.17",
         "@types/react": "19.1.3",
         "@types/react-dom": "19.1.3",
         "@types/uuid": "^10.0.0",
-        "autoprefixer": "^10.4.19",
         "drizzle-kit": "^0.21.2",
         "esbuild": "^0.25.4",
         "eslint": "8.57.0",
@@ -99,7 +99,7 @@
         "postcss": "^8.4.38",
         "prettier": "3.2.5",
         "supabase": "^1.187.3",
-        "tailwindcss": "^3.4.3",
+        "tailwindcss": "^4.1.13",
         "tsx": "^4.19.3",
         "typescript": "^5.8.3",
         "wrangler": "^3.56.0"
@@ -110,6 +110,7 @@
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
@@ -1144,96 +1145,6 @@
       "integrity": "sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==",
       "license": "(Apache-2.0 AND MIT)"
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
     "node_modules/@isaacs/fs-minipass": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
@@ -1253,17 +1164,25 @@
       "license": "MIT"
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
@@ -1275,26 +1194,19 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -3007,16 +2919,6 @@
         "@opentelemetry/api": "^1.1.0"
       }
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -5871,130 +5773,433 @@
         "tslib": "^2.8.0"
       }
     },
-    "node_modules/@tiptap/core": {
-      "version": "2.11.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.11.5.tgz",
-      "integrity": "sha512-jb0KTdUJaJY53JaN7ooY3XAxHQNoMYti/H6ANo707PsLXVeEqJ9o8+eBup1JU5CuwzrgnDc2dECt2WIGX9f8Jw==",
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
+      "integrity": "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==",
+      "dev": true,
       "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/ueberdosis"
-      },
-      "peerDependencies": {
-        "@tiptap/pm": "^2.7.0"
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.5.1",
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.18",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.13"
       }
     },
-    "node_modules/@tiptap/pm": {
-      "version": "2.11.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.11.5.tgz",
-      "integrity": "sha512-z9JFtqc5ZOsdQLd9vRnXfTCQ8v5ADAfRt9Nm7SqP6FUHII8E1hs38ACzf5xursmth/VonJYb5+73Pqxk1hGIPw==",
+    "node_modules/@tailwindcss/node/node_modules/magic-string": {
+      "version": "0.30.19",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
+      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "prosemirror-changeset": "^2.2.1",
-        "prosemirror-collab": "^1.3.1",
-        "prosemirror-commands": "^1.6.2",
-        "prosemirror-dropcursor": "^1.8.1",
-        "prosemirror-gapcursor": "^1.3.2",
-        "prosemirror-history": "^1.4.1",
-        "prosemirror-inputrules": "^1.4.0",
-        "prosemirror-keymap": "^1.2.2",
-        "prosemirror-markdown": "^1.13.1",
-        "prosemirror-menu": "^1.2.4",
-        "prosemirror-model": "^1.23.0",
-        "prosemirror-schema-basic": "^1.2.3",
-        "prosemirror-schema-list": "^1.4.1",
-        "prosemirror-state": "^1.4.3",
-        "prosemirror-tables": "^1.6.3",
-        "prosemirror-trailing-node": "^3.0.0",
-        "prosemirror-transform": "^1.10.2",
-        "prosemirror-view": "^1.37.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/ueberdosis"
+        "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
-    "node_modules/@ts-morph/common": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.25.0.tgz",
-      "integrity": "sha512-kMnZz+vGGHi4GoHnLmMhGNjm44kGtKUXGnOvrKmMwAuvNjM/PgKVGfUnL7IDvK7Jb2QQ82jq3Zmp04Gy+r3Dkg==",
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.13.tgz",
+      "integrity": "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==",
       "dev": true,
+      "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
-        "minimatch": "^9.0.4",
-        "path-browserify": "^1.0.1",
-        "tinyglobby": "^0.2.9"
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.13",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.13",
+        "@tailwindcss/oxide-darwin-x64": "4.1.13",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.13",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.13",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.13",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.13",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.13",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.13",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.13",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.13",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.13"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.13.tgz",
+      "integrity": "sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@ts-morph/common/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.13.tgz",
+      "integrity": "sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@ts-morph/common/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.13.tgz",
+      "integrity": "sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": ">= 10"
       }
     },
-    "node_modules/@types/acorn": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
-      "integrity": "sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==",
-      "dependencies": {
-        "@types/estree": "*"
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.13.tgz",
+      "integrity": "sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@types/aws-lambda": {
-      "version": "8.10.147",
-      "resolved": "https://registry.npmjs.org/@types/aws-lambda/-/aws-lambda-8.10.147.tgz",
-      "integrity": "sha512-nD0Z9fNIZcxYX5Mai2CTmFD7wX7UldCkW2ezCF8D1T5hdiLsnTWDGRpfRYntU6VjTdLQjOvyszru7I1c1oCQew==",
-      "license": "MIT"
-    },
-    "node_modules/@types/bunyan": {
-      "version": "1.8.11",
-      "resolved": "https://registry.npmjs.org/@types/bunyan/-/bunyan-1.8.11.tgz",
-      "integrity": "sha512-758fRH7umIMk5qt5ELmRMff4mLDlN+xyYzC+dkPTdKwbSkJFvz6xwyScrytPU0QIBbRRwbiE8/BIg8bpajerNQ==",
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.13.tgz",
+      "integrity": "sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@types/connect": {
-      "version": "3.4.38",
-      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
-      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.13.tgz",
+      "integrity": "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@types/debug": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
-      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
-      "dependencies": {
-        "@types/ms": "*"
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.13.tgz",
+      "integrity": "sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@types/estree": {
-      "version": "1.0.6",
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.13.tgz",
+      "integrity": "sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.13.tgz",
+      "integrity": "sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.13.tgz",
+      "integrity": "sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.5",
+        "@emnapi/runtime": "^1.4.5",
+        "@emnapi/wasi-threads": "^1.0.4",
+        "@napi-rs/wasm-runtime": "^0.2.12",
+        "@tybys/wasm-util": "^0.10.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.13.tgz",
+      "integrity": "sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.13.tgz",
+      "integrity": "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide/node_modules/tar": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
+      "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.13.tgz",
+      "integrity": "sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.13",
+        "@tailwindcss/oxide": "4.1.13",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.13"
+      }
+    },
+    "node_modules/@tiptap/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-jb0KTdUJaJY53JaN7ooY3XAxHQNoMYti/H6ANo707PsLXVeEqJ9o8+eBup1JU5CuwzrgnDc2dECt2WIGX9f8Jw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/pm": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.11.5.tgz",
+      "integrity": "sha512-z9JFtqc5ZOsdQLd9vRnXfTCQ8v5ADAfRt9Nm7SqP6FUHII8E1hs38ACzf5xursmth/VonJYb5+73Pqxk1hGIPw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "prosemirror-changeset": "^2.2.1",
+        "prosemirror-collab": "^1.3.1",
+        "prosemirror-commands": "^1.6.2",
+        "prosemirror-dropcursor": "^1.8.1",
+        "prosemirror-gapcursor": "^1.3.2",
+        "prosemirror-history": "^1.4.1",
+        "prosemirror-inputrules": "^1.4.0",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-markdown": "^1.13.1",
+        "prosemirror-menu": "^1.2.4",
+        "prosemirror-model": "^1.23.0",
+        "prosemirror-schema-basic": "^1.2.3",
+        "prosemirror-schema-list": "^1.4.1",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-tables": "^1.6.3",
+        "prosemirror-trailing-node": "^3.0.0",
+        "prosemirror-transform": "^1.10.2",
+        "prosemirror-view": "^1.37.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@ts-morph/common": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.25.0.tgz",
+      "integrity": "sha512-kMnZz+vGGHi4GoHnLmMhGNjm44kGtKUXGnOvrKmMwAuvNjM/PgKVGfUnL7IDvK7Jb2QQ82jq3Zmp04Gy+r3Dkg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimatch": "^9.0.4",
+        "path-browserify": "^1.0.1",
+        "tinyglobby": "^0.2.9"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@types/acorn": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
+      "integrity": "sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/aws-lambda": {
+      "version": "8.10.147",
+      "resolved": "https://registry.npmjs.org/@types/aws-lambda/-/aws-lambda-8.10.147.tgz",
+      "integrity": "sha512-nD0Z9fNIZcxYX5Mai2CTmFD7wX7UldCkW2ezCF8D1T5hdiLsnTWDGRpfRYntU6VjTdLQjOvyszru7I1c1oCQew==",
+      "license": "MIT"
+    },
+    "node_modules/@types/bunyan": {
+      "version": "1.8.11",
+      "resolved": "https://registry.npmjs.org/@types/bunyan/-/bunyan-1.8.11.tgz",
+      "integrity": "sha512-758fRH7umIMk5qt5ELmRMff4mLDlN+xyYzC+dkPTdKwbSkJFvz6xwyScrytPU0QIBbRRwbiE8/BIg8bpajerNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
+      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
     },
@@ -6600,12 +6805,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
-    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -6619,12 +6818,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -6859,43 +7052,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/autoprefixer": {
-      "version": "10.4.19",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
-      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "browserslist": "^4.23.0",
-        "caniuse-lite": "^1.0.30001599",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.0",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -7110,38 +7266,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/browserslist": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
-      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "caniuse-lite": "^1.0.30001587",
-        "electron-to-chromium": "^1.4.668",
-        "node-releases": "^2.0.14",
-        "update-browserslist-db": "^1.0.13"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
     "node_modules/buffer": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@@ -7244,15 +7368,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001717",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001717.tgz",
@@ -7681,18 +7796,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -7947,12 +8050,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
-    },
     "node_modules/difflib": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/difflib/-/difflib-0.2.4.tgz",
@@ -7965,12 +8062,6 @@
         "node": "*"
       }
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
-    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -8200,12 +8291,6 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "license": "MIT"
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
-    },
     "node_modules/ecdsa-sig-formatter": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
@@ -8221,12 +8306,6 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
       "license": "MIT"
     },
-    "node_modules/electron-to-chromium": {
-      "version": "1.4.783",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.783.tgz",
-      "integrity": "sha512-bT0jEz/Xz1fahQpbZ1D7LgmPYZ3iHVY39NcWWro1+hA2IvjiPeaXtfSqrQ+nXjApMvQRE2ASt1itSLRrebHMRQ==",
-      "dev": true
-    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -8243,10 +8322,11 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.16.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz",
-      "integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==",
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -9539,22 +9619,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/foreground-child": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
-      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -9595,19 +9659,6 @@
       "integrity": "sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==",
       "license": "MIT"
     },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/fractional-indexing": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/fractional-indexing/-/fractional-indexing-3.2.0.tgz",
@@ -11224,12 +11275,13 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
-      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.0.tgz",
+      "integrity": "sha512-VXe6RjJkBPj0ohtqaO8vSWP3ZhAKo66fKrFNCll4BTcwljPLz03pCbaNKfzGP5MbrCYcbJ7v0nOYYwUzTEIdXQ==",
       "dev": true,
+      "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/jose": {
@@ -11398,92 +11450,316 @@
         "katex": "cli.js"
       }
     },
-    "node_modules/katex/node_modules/commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-      "license": "MIT",
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "language-subtag-registry": "^0.3.20"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lib0": {
+      "version": "0.2.94",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.94.tgz",
+      "integrity": "sha512-hZ3p54jL4Wpu7IOg26uC7dnEWiMyNlUrb9KoG7+xYs45WkQwpVvKFndVq2+pqLYKe1u8Fp3+zAfZHVvTK34PvQ==",
+      "dependencies": {
+        "isomorphic.js": "^0.2.4"
+      },
+      "bin": {
+        "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
+        "0gentesthtml": "bin/gentesthtml.js",
+        "0serve": "bin/0serve.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">= 12"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/keyv": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
-      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "json-buffer": "3.0.1"
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/language-subtag-registry": {
-      "version": "0.3.23",
-      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
-      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "CC0-1.0"
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
     },
-    "node_modules/language-tags": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
-      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "language-subtag-registry": "^0.3.20"
-      },
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=0.10"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/levn": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "prelude-ls": "^1.2.1",
-        "type-check": "~0.4.0"
-      },
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">= 0.8.0"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lib0": {
-      "version": "0.2.94",
-      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.94.tgz",
-      "integrity": "sha512-hZ3p54jL4Wpu7IOg26uC7dnEWiMyNlUrb9KoG7+xYs45WkQwpVvKFndVq2+pqLYKe1u8Fp3+zAfZHVvTK34PvQ==",
-      "dependencies": {
-        "isomorphic.js": "^0.2.4"
-      },
-      "bin": {
-        "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
-        "0gentesthtml": "bin/gentesthtml.js",
-        "0serve": "bin/0serve.js"
-      },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=16"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "type": "GitHub Sponsors ❤",
-        "url": "https://github.com/sponsors/dmonad"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=10"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
-    },
     "node_modules/linkify-it": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
@@ -12834,95 +13110,18 @@
       }
     },
     "node_modules/minizlib": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.1.tgz",
-      "integrity": "sha512-umcy022ILvb5/3Djuu8LWeqUa8D68JaBzlttKeMWen48SjabqS3iY5w/vzeMzMUNhLDifyhbOwKDSznB1vvrwg==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "minipass": "^7.0.4",
-        "rimraf": "^5.0.5"
+        "minipass": "^7.1.2"
       },
       "engines": {
         "node": ">= 18"
       }
     },
-    "node_modules/minizlib/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/minizlib/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/minizlib/node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
-    "node_modules/minizlib/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/minizlib/node_modules/rimraf": {
-      "version": "5.0.9",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.9.tgz",
-      "integrity": "sha512-3i7b8OcswU6CpU8Ej89quJD4O98id7TtVM5U4Mybh84zQXdrFmDLouWBEEaD/QfO3gDDfH+AGFCGsR7kngzQnA==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^10.3.7"
-      },
-      "bin": {
-        "rimraf": "dist/esm/bin.mjs"
-      },
-      "engines": {
-        "node": "14 >=14.20 || 16 >=16.20 || >=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/mkdirp": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
@@ -12974,27 +13173,17 @@
         "mustache": "bin/mustache"
       }
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -13169,12 +13358,6 @@
         "node-gyp-build-optional-packages-test": "build-test.js"
       }
     },
-    "node_modules/node-releases": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
-      "dev": true
-    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -13184,15 +13367,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/npm-normalize-package-bin": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz",
@@ -13211,15 +13385,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -13490,12 +13655,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
-      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
-      "dev": true
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -13591,22 +13750,6 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/path-to-regexp": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz",
@@ -13703,9 +13846,10 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -13719,15 +13863,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/pino": {
       "version": "8.21.0",
       "resolved": "https://registry.npmjs.org/pino/-/pino-8.21.0.tgz",
@@ -13761,19 +13896,10 @@
       }
     },
     "node_modules/pino-std-serializers": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-6.2.2.tgz",
-      "integrity": "sha512-cHjPPsE+vhj/tnhCy/wiMh3M3z3h/j15zHQX+S9GkTBgqJuTuJzYJ4gUyACLhDaJ7kk9ba9iRDmbH2tJU03OiA==",
-      "license": "MIT"
-    },
-    "node_modules/pirates": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-6.2.2.tgz",
+      "integrity": "sha512-cHjPPsE+vhj/tnhCy/wiMh3M3z3h/j15zHQX+S9GkTBgqJuTuJzYJ4gUyACLhDaJ7kk9ba9iRDmbH2tJU03OiA==",
+      "license": "MIT"
     },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
@@ -13786,9 +13912,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "dev": true,
       "funding": [
         {
@@ -13804,136 +13930,16 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.2.0"
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-load-config/node_modules/lilconfig": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
-      "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
-      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dev": true,
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.11"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
-      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
-      "dev": true,
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
-    },
     "node_modules/postgres": {
       "version": "3.4.4",
       "resolved": "https://registry.npmjs.org/postgres/-/postgres-3.4.4.tgz",
@@ -14676,15 +14682,6 @@
         "react-dom": ">=16.13"
       }
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
     "node_modules/read-cmd-shim": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-4.0.0.tgz",
@@ -15726,9 +15723,10 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15825,27 +15823,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
-    },
     "node_modules/string-width/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -15987,19 +15964,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -16052,101 +16016,6 @@
         }
       }
     },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/sucrase/node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
-      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
-      "dev": true,
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/jackspeak": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.1.2.tgz",
-      "integrity": "sha512-kWmLKn2tRtfYMF/BakihVVRzBKOxz4gJMiL2Rj91WnAB5TPZumSH99R/Yf1qE1u4uRimvCSJfm6hnxohXeEXjQ==",
-      "dev": true,
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
-    "node_modules/sucrase/node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/supabase": {
       "version": "1.187.3",
       "resolved": "https://registry.npmjs.org/supabase/-/supabase-1.187.3.tgz",
@@ -16202,41 +16071,11 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
-      "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
+      "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
       "dev": true,
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.0",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.0",
-        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
+      "license": "MIT"
     },
     "node_modules/tapable": {
       "version": "2.2.1",
@@ -16285,27 +16124,6 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/thread-stream": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/thread-stream/-/thread-stream-2.7.0.tgz",
@@ -16469,12 +16287,6 @@
         "typescript": ">=4.8.4"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
-    },
     "node_modules/ts-morph": {
       "version": "24.0.0",
       "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-24.0.0.tgz",
@@ -16872,36 +16684,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/update-browserslist-db": {
-      "version": "1.0.16",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
-      "integrity": "sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "escalade": "^3.1.2",
-        "picocolors": "^1.0.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    },
     "node_modules/use-callback-ref": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
@@ -16954,12 +16736,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
-    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -17387,24 +17163,6 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -17541,18 +17299,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/yaml": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
-      "integrity": "sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==",
-      "dev": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/package.json b/package.json
index b5447236..699bf8d4 100644
--- a/package.json
+++ b/package.json
@@ -96,12 +96,12 @@
   "devDependencies": {
     "@atproto/lex-cli": "^0.9.5",
     "@cloudflare/workers-types": "^4.20240512.0",
+    "@tailwindcss/postcss": "^4.1.13",
     "@types/katex": "^0.16.7",
     "@types/node": "^22.15.17",
     "@types/react": "19.1.3",
     "@types/react-dom": "19.1.3",
     "@types/uuid": "^10.0.0",
-    "autoprefixer": "^10.4.19",
     "drizzle-kit": "^0.21.2",
     "esbuild": "^0.25.4",
     "eslint": "8.57.0",
@@ -109,7 +109,7 @@
     "postcss": "^8.4.38",
     "prettier": "3.2.5",
     "supabase": "^1.187.3",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.1.13",
     "tsx": "^4.19.3",
     "typescript": "^5.8.3",
     "wrangler": "^3.56.0"
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091d..52b9b4ba 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }
diff --git a/src/utils/timeAgo.ts b/src/utils/timeAgo.ts
new file mode 100644
index 00000000..bed5d22b
--- /dev/null
+++ b/src/utils/timeAgo.ts
@@ -0,0 +1,22 @@
+export function timeAgo(timestamp: string): string {
+  const now = new Date();
+  const date = new Date(timestamp);
+  const diffMs = now.getTime() - date.getTime();
+  const diffSeconds = Math.floor(diffMs / 1000);
+  const diffMinutes = Math.floor(diffSeconds / 60);
+  const diffHours = Math.floor(diffMinutes / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  const diffYears = Math.floor(diffDays / 365);
+
+  if (diffYears > 0) {
+    return `${diffYears} year${diffYears === 1 ? "" : "s"} ago`;
+  } else if (diffDays > 0) {
+    return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
+  } else if (diffHours > 0) {
+    return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
+  } else if (diffMinutes > 0) {
+    return `${diffMinutes} minute${diffMinutes === 1 ? "" : "s"} ago`;
+  } else {
+    return "just now";
+  }
+}