diff --git a/app/lish/[did]/[publication]/PublicationContent.tsx b/app/lish/[did]/[publication]/PublicationContent.tsx
new file mode 100644
index 00000000..5c2d9989
--- /dev/null
+++ b/app/lish/[did]/[publication]/PublicationContent.tsx
@@ -0,0 +1,185 @@
+import React from "react";
+import { AtUri } from "@atproto/syntax";
+import {
+  getPublicationURL,
+  getDocumentURL,
+} from "app/lish/createPub/getPublicationURL";
+import { SubscribeWithBluesky } from "app/lish/Subscribe";
+import {
+  PublicationBackgroundProvider,
+  PublicationThemeProvider,
+} from "components/ThemeManager/PublicationThemeProvider";
+import { InteractionPreview } from "components/InteractionsPreview";
+import { LocalizedDate } from "./LocalizedDate";
+import { PublicationHomeLayout } from "./PublicationHomeLayout";
+import { PublicationAuthor } from "./PublicationAuthor";
+import {
+  normalizePublicationRecord,
+  normalizeDocumentRecord,
+} from "src/utils/normalizeRecords";
+import { getFirstParagraph } from "src/utils/getFirstParagraph";
+import { FontLoader } from "components/FontLoader";
+import {
+  PublicationHeader,
+  PublicationPostItem,
+} from "./PublicationPageContent";
+
+export const PublicationContent = ({
+  record,
+  publication,
+  did,
+  profile,
+  showPageBackground,
+}: {
+  record: ReturnType<typeof normalizePublicationRecord>;
+  publication: {
+    uri: string;
+    name: string;
+    identity_did: string;
+    record: unknown;
+    publication_subscriptions: { identity: string }[];
+    documents_in_publications: {
+      documents: {
+        uri: string;
+        data: unknown;
+        comments_on_documents: { count: number }[];
+        document_mentions_in_bsky: { count: number }[];
+        recommends_on_documents: { count: number }[];
+      } | null;
+    }[];
+  };
+  did: string;
+  profile: { did: string; displayName?: string; handle: string } | undefined;
+  showPageBackground: boolean | undefined;
+}) => {
+  return (
+    <>
+      <FontLoader
+        headingFontId={record?.theme?.headingFont}
+        bodyFontId={record?.theme?.bodyFont}
+      />
+      <PublicationThemeProvider
+        theme={record?.theme}
+        pub_creator={publication.identity_did}
+      >
+        <PublicationBackgroundProvider
+          theme={record?.theme}
+          pub_creator={publication.identity_did}
+        >
+          <PublicationHomeLayout
+            uri={publication.uri}
+            showPageBackground={!!showPageBackground}
+          >
+            <PublicationHeader
+              iconUrl={
+                record?.icon
+                  ? `/api/atproto_images?did=${did}&cid=${(record.icon.ref as unknown as { $link: string })["$link"]}`
+                  : undefined
+              }
+              publicationName={publication.name}
+              description={record?.description}
+              author={
+                profile ? (
+                  <PublicationAuthor
+                    did={profile.did}
+                    displayName={profile.displayName}
+                    handle={profile.handle}
+                  />
+                ) : undefined
+              }
+              subscribeButton={
+                <SubscribeWithBluesky
+                  base_url={getPublicationURL(publication)}
+                  pubName={publication.name}
+                  pub_uri={publication.uri}
+                  subscribers={publication.publication_subscriptions}
+                />
+              }
+            />
+            <div className="publicationPostList w-full flex flex-col gap-4">
+              {publication.documents_in_publications
+                .filter((d) => !!d?.documents)
+                .sort((a, b) => {
+                  const aRecord = normalizeDocumentRecord(a.documents?.data);
+                  const bRecord = normalizeDocumentRecord(b.documents?.data);
+                  const aDate = aRecord?.publishedAt
+                    ? new Date(aRecord.publishedAt)
+                    : new Date(0);
+                  const bDate = bRecord?.publishedAt
+                    ? new Date(bRecord.publishedAt)
+                    : new Date(0);
+                  return bDate.getTime() - aDate.getTime(); // Sort by most recent first
+                })
+                .map((doc) => {
+                  if (!doc.documents) return null;
+                  const doc_record = normalizeDocumentRecord(
+                    doc.documents.data,
+                  );
+                  if (!doc_record) return null;
+                  let uri = new AtUri(doc.documents.uri);
+                  let quotes =
+                    doc.documents.document_mentions_in_bsky[0].count || 0;
+                  let comments =
+                    record?.preferences?.showComments === false
+                      ? 0
+                      : doc.documents.comments_on_documents[0].count || 0;
+                  let recommends =
+                    doc.documents.recommends_on_documents?.[0]?.count || 0;
+                  let tags = doc_record.tags || [];
+
+                  const docUrl = getDocumentURL(
+                    doc_record,
+                    doc.documents.uri,
+                    publication,
+                  );
+                  return (
+                    <React.Fragment key={doc.documents?.uri}>
+                      <PublicationPostItem
+                        href={docUrl}
+                        title={doc_record.title}
+                        description={
+                          doc_record.description ||
+                          getFirstParagraph(doc_record)
+                        }
+                        date={
+                          doc_record.publishedAt ? (
+                            <LocalizedDate
+                              dateString={doc_record.publishedAt}
+                              options={{
+                                year: "numeric",
+                                month: "long",
+                                day: "2-digit",
+                              }}
+                            />
+                          ) : undefined
+                        }
+                        interactions={
+                          <InteractionPreview
+                            quotesCount={quotes}
+                            commentsCount={comments}
+                            recommendsCount={recommends}
+                            documentUri={doc.documents.uri}
+                            tags={tags}
+                            postUrl={docUrl}
+                            showComments={
+                              record?.preferences?.showComments !== false
+                            }
+                            showMentions={
+                              record?.preferences?.showMentions !== false
+                            }
+                            showRecommends={
+                              record?.preferences?.showRecommends !== false
+                            }
+                          />
+                        }
+                      />
+                    </React.Fragment>
+                  );
+                })}
+            </div>
+          </PublicationHomeLayout>
+        </PublicationBackgroundProvider>
+      </PublicationThemeProvider>
+    </>
+  );
+};
diff --git a/app/lish/[did]/[publication]/PublicationHomeLayout.tsx b/app/lish/[did]/[publication]/PublicationHomeLayout.tsx
index 621119ff..1e4328bc 100644
--- a/app/lish/[did]/[publication]/PublicationHomeLayout.tsx
+++ b/app/lish/[did]/[publication]/PublicationHomeLayout.tsx
@@ -11,7 +11,7 @@ export function PublicationHomeLayout(props: {
   return (
     <div
       ref={props.showPageBackground ? null : ref}
-      className={`pubWrapper flex flex-col sm:py-6 h-full   ${props.showPageBackground ? "max-w-(--page-width-units) mx-auto sm:px-0 px-[6px] py-2" : "w-full overflow-y-scroll"}`}
+      className={`pubWrapper flex flex-col sm:py-6 min-h-full ${props.showPageBackground ? "max-w-(--page-width-units) mx-auto sm:px-0 px-[6px] py-2" : "w-full overflow-y-scroll"}`}
     >
       <div
         ref={!props.showPageBackground ? null : ref}
diff --git a/app/lish/[did]/[publication]/PublicationPageContent.tsx b/app/lish/[did]/[publication]/PublicationPageContent.tsx
new file mode 100644
index 00000000..3f6922c1
--- /dev/null
+++ b/app/lish/[did]/[publication]/PublicationPageContent.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import { SpeedyLink } from "components/SpeedyLink";
+
+export function PublicationHeader(props: {
+  iconUrl?: string;
+  publicationName: string;
+  description?: string;
+  author?: React.ReactNode;
+  subscribeButton?: React.ReactNode;
+}) {
+  return (
+    <div className="pubHeader flex flex-col pb-8 w-full text-center justify-center ">
+      {props.iconUrl && (
+        <div
+          className="shrink-0 w-10 h-10 rounded-full mx-auto"
+          style={{
+            backgroundImage: `url(${props.iconUrl})`,
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center",
+            backgroundSize: "cover",
+          }}
+        />
+      )}
+      <h2 className="text-accent-contrast sm:text-xl text-[22px] pt-1 ">
+        {props.publicationName}
+      </h2>
+      <p className="sm:text-lg text-secondary">
+        {props.description}{" "}
+      </p>
+      {props.author}
+      <div className="sm:pt-4 pt-4">{props.subscribeButton}</div>
+    </div>
+  );
+}
+
+export function PublicationPostItem(props: {
+  href?: string;
+  title?: string;
+  description?: string;
+  date?: React.ReactNode;
+  interactions?: React.ReactNode;
+}) {
+  const content = (
+    <>
+      {props.title && <h3 className="text-primary">{props.title}</h3>}
+      <p className="italic text-secondary line-clamp-3">
+        {props.description}
+      </p>
+    </>
+  );
+
+  return (
+    <>
+      <div className="flex w-full grow flex-col ">
+        {props.href ? (
+          <SpeedyLink
+            href={props.href}
+            className="publishedPost no-underline! flex flex-col"
+          >
+            {content}
+          </SpeedyLink>
+        ) : (
+          <div className="publishedPost no-underline! flex flex-col">
+            {content}
+          </div>
+        )}
+
+        <div className="justify-between w-full text-sm text-tertiary flex gap-1 flex-wrap pt-2 items-center">
+          <p className="text-sm text-tertiary ">
+            {props.date}{" "}
+          </p>
+          {props.interactions}
+        </div>
+      </div>
+      <hr className="last:hidden border-border-light" />
+    </>
+  );
+}
diff --git a/app/lish/[did]/[publication]/UpgradeModal.tsx b/app/lish/[did]/[publication]/UpgradeModal.tsx
index f28f0576..ced03403 100644
--- a/app/lish/[did]/[publication]/UpgradeModal.tsx
+++ b/app/lish/[did]/[publication]/UpgradeModal.tsx
@@ -3,6 +3,7 @@ import { Modal } from "components/Modal";
 import { useState } from "react";
 import { createCheckoutSession } from "actions/createCheckoutSession";
 import { DotLoader } from "components/utils/DotLoader";
+import { ToggleGroup } from "components/ToggleGroup";
 
 export const UpgradeContent = () => {
   let [cadence, setCadence] = useState<"year" | "month">("year");
@@ -37,20 +38,15 @@ export const UpgradeContent = () => {
         </div>
         <div className="sm:w-64  w-full accent-container flex justify-center items-center">
           <div className="flex flex-col justify-center text-center py-6">
-            <div className="flex gap-2 mb-3 p-1 bg-accent-contrast rounded-lg text-sm">
-              <button
-                className={`px-1 rounded-md ${cadence === "year" ? "bg-bg-page font-bold text-accent-contrast" : "bg-transparent text-bg-page"}`}
-                onClick={() => setCadence("year")}
-              >
-                Yearly
-              </button>
-              <button
-                className={`px-1 rounded-md ${cadence === "month" ? "bg-bg-page font-bold text-accent-contrast" : "bg-transparent text-bg-page"}`}
-                onClick={() => setCadence("month")}
-              >
-                Monthly
-              </button>
-            </div>
+            <ToggleGroup
+              className="mb-3"
+              value={cadence}
+              onChange={setCadence}
+              options={[
+                { value: "year", label: "Yearly" },
+                { value: "month", label: "Monthly" },
+              ]}
+            />
             <div className="flex gap-1 items-baseline justify-center">
               <div className="text-2xl font-bold leading-tight">
                 {cadence === "year" ? "$120" : "$12"}
diff --git a/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx b/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
index 159300e3..76b5f7f9 100644
--- a/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
@@ -41,8 +41,6 @@ export function LinearDocumentPage({
     did,
     profile,
     preferences,
-    pubRecord,
-    theme,
     prerenderedCodeBlocks,
     bskyPostData,
     pollData,
@@ -73,7 +71,10 @@ export function LinearDocumentPage({
         pageOptions={pageOptions}
         footnoteSideColumn={
           !props.hasContentToRight ? (
-            <PublishedFootnoteSideColumn footnotes={footnotes} fullPageScroll={fullPageScroll} />
+            <PublishedFootnoteSideColumn
+              footnotes={footnotes}
+              fullPageScroll={fullPageScroll}
+            />
           ) : undefined
         }
       >
diff --git a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
index 7aa1d731..c248e4dc 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
@@ -23,25 +23,6 @@ import { InlineUpgrade } from "../../UpgradeModal";
 type SettingsView = "all" | "theme";
 
 export function SettingsContent(props: { showPageBackground: boolean }) {
-  let [view, setView] = useState<SettingsView>("all");
-  let [themeLoading, setThemeLoading] = useState(false);
-
-  if (view === "theme") {
-    return (
-      <div className="flex flex-col gap-0 w-full pb-8">
-        <PubThemeSetter
-          backToMenu={() => setView("all")}
-          loading={themeLoading}
-          setLoading={setThemeLoading}
-        />
-      </div>
-    );
-  }
-
-  return <SettingsForm onOpenTheme={() => setView("theme")} />;
-}
-
-function SettingsForm(props: { onOpenTheme: () => void }) {
   let { data } = usePublicationData();
   let { publication: pubData } = data || {};
   let isPro = useIsPro();
@@ -153,7 +134,7 @@ function SettingsForm(props: { onOpenTheme: () => void }) {
         {cardBorderHidden && <hr className="border-border-light" />}
 
         <DashboardContainer>
-          <ThemeSettings onOpenTheme={props.onOpenTheme} />
+          <ThemeSettings />
         </DashboardContainer>
 
         {cardBorderHidden && <hr className="border-border-light" />}
diff --git a/app/lish/[did]/[publication]/dashboard/settings/ThemeSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/ThemeSettings.tsx
index 6b07eff5..d0d0575e 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/ThemeSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/ThemeSettings.tsx
@@ -1,16 +1,22 @@
+"use client";
+
 import { GoToArrow } from "components/Icons/GoToArrow";
+import { SpeedyLink } from "components/SpeedyLink";
+import { useParams } from "next/navigation";
+
+export function ThemeSettings() {
+  let params = useParams<{ did: string; publication: string }>();
+  let href = `/lish/${params.did}/${params.publication}/theme-settings`;
 
-export function ThemeSettings(props: { onOpenTheme: () => void }) {
   return (
     <>
       <h3 className="font-bold text-primary">Theme and Layout</h3>
-      <button
-        type="button"
-        className="text-left flex gap-2 items-center text-accent-contrast font-bold  w-fit"
-        onClick={props.onOpenTheme}
+      <SpeedyLink
+        className="text-left flex gap-2 items-center text-accent-contrast font-bold no-underline! w-fit"
+        href={href}
       >
         Customize Theme <GoToArrow />
-      </button>
+      </SpeedyLink>
     </>
   );
 }
diff --git a/app/lish/[did]/[publication]/page.tsx b/app/lish/[did]/[publication]/page.tsx
index c4fce3f1..790b8ea3 100644
--- a/app/lish/[did]/[publication]/page.tsx
+++ b/app/lish/[did]/[publication]/page.tsx
@@ -1,40 +1,24 @@
 import { supabaseServerClient } from "supabase/serverClient";
-import { AtUri } from "@atproto/syntax";
 import {
   getPublicationURL,
   getDocumentURL,
 } from "app/lish/createPub/getPublicationURL";
 import { BskyAgent } from "@atproto/api";
 import { publicationNameOrUriFilter } from "src/utils/uriHelpers";
-import { SubscribeWithBluesky } from "app/lish/Subscribe";
 import React from "react";
-import {
-  PublicationBackgroundProvider,
-  PublicationThemeProvider,
-} from "components/ThemeManager/PublicationThemeProvider";
 import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
-import { SpeedyLink } from "components/SpeedyLink";
-import { InteractionPreview } from "components/InteractionsPreview";
-import { LocalizedDate } from "./LocalizedDate";
-import { PublicationHomeLayout } from "./PublicationHomeLayout";
-import { PublicationAuthor } from "./PublicationAuthor";
-import { Separator } from "components/Layout";
-import {
-  normalizePublicationRecord,
-  normalizeDocumentRecord,
-} from "src/utils/normalizeRecords";
-import { getFirstParagraph } from "src/utils/getFirstParagraph";
-import { FontLoader } from "components/FontLoader";
+import { normalizePublicationRecord } from "src/utils/normalizeRecords";
+import { PublicationContent } from "./PublicationContent";
 
 export default async function Publication(props: {
   params: Promise<{ publication: string; did: string }>;
 }) {
   let params = await props.params;
-  let did = decodeURIComponent(params.did);
+  const did = decodeURIComponent(params.did);
   if (!did) return <PubNotFound />;
-  let agent = new BskyAgent({ service: "https://public.api.bsky.app" });
-  let publication_name = decodeURIComponent(params.publication);
-  let [{ data: publications }, { data: profile }] = await Promise.all([
+  const agent = new BskyAgent({ service: "https://public.api.bsky.app" });
+  const publication_name = decodeURIComponent(params.publication);
+  const [{ data: publications }, { data: profile }] = await Promise.all([
     supabaseServerClient
       .from("publications")
       .select(
@@ -54,161 +38,23 @@ export default async function Publication(props: {
       .limit(1),
     agent.getProfile({ actor: did }),
   ]);
-  let publication = publications?.[0];
+  const publication = publications?.[0];
 
   const record = normalizePublicationRecord(publication?.record);
 
-  let showPageBackground = record?.theme?.showPageBackground;
+  const showPageBackground = record?.theme?.showPageBackground;
 
   if (!publication) return <PubNotFound />;
   try {
     return (
       <>
-        <FontLoader
-          headingFontId={record?.theme?.headingFont}
-          bodyFontId={record?.theme?.bodyFont}
+        <PublicationContent
+          record={record}
+          publication={publication}
+          did={did}
+          profile={profile}
+          showPageBackground={showPageBackground}
         />
-        <PublicationThemeProvider
-          theme={record?.theme}
-          pub_creator={publication.identity_did}
-        >
-          <PublicationBackgroundProvider
-            theme={record?.theme}
-            pub_creator={publication.identity_did}
-          >
-            <PublicationHomeLayout
-              uri={publication.uri}
-              showPageBackground={!!showPageBackground}
-            >
-              <div className="pubHeader flex flex-col pb-8 w-full text-center justify-center ">
-                {record?.icon && (
-                  <div
-                    className="shrink-0 w-10 h-10 rounded-full mx-auto"
-                    style={{
-                      backgroundImage: `url(/api/atproto_images?did=${did}&cid=${(record.icon.ref as unknown as { $link: string })["$link"]})`,
-                      backgroundRepeat: "no-repeat",
-                      backgroundPosition: "center",
-                      backgroundSize: "cover",
-                    }}
-                  />
-                )}
-                <h2 className="text-accent-contrast sm:text-xl text-[22px] pt-1 ">
-                  {publication.name}
-                </h2>
-                <p className="sm:text-lg text-secondary">
-                  {record?.description}{" "}
-                </p>
-                {profile && (
-                  <PublicationAuthor
-                    did={profile.did}
-                    displayName={profile.displayName}
-                    handle={profile.handle}
-                  />
-                )}
-                <div className="sm:pt-4 pt-4">
-                  <SubscribeWithBluesky
-                    base_url={getPublicationURL(publication)}
-                    pubName={publication.name}
-                    pub_uri={publication.uri}
-                    subscribers={publication.publication_subscriptions}
-                  />
-                </div>
-              </div>
-              <div className="publicationPostList w-full flex flex-col gap-4">
-                {publication.documents_in_publications
-                  .filter((d) => !!d?.documents)
-                  .sort((a, b) => {
-                    const aRecord = normalizeDocumentRecord(a.documents?.data);
-                    const bRecord = normalizeDocumentRecord(b.documents?.data);
-                    const aDate = aRecord?.publishedAt
-                      ? new Date(aRecord.publishedAt)
-                      : new Date(0);
-                    const bDate = bRecord?.publishedAt
-                      ? new Date(bRecord.publishedAt)
-                      : new Date(0);
-                    return bDate.getTime() - aDate.getTime(); // Sort by most recent first
-                  })
-                  .map((doc) => {
-                    if (!doc.documents) return null;
-                    const doc_record = normalizeDocumentRecord(
-                      doc.documents.data,
-                    );
-                    if (!doc_record) return null;
-                    let uri = new AtUri(doc.documents.uri);
-                    let quotes =
-                      doc.documents.document_mentions_in_bsky[0].count || 0;
-                    let comments =
-                      record?.preferences?.showComments === false
-                        ? 0
-                        : doc.documents.comments_on_documents[0].count || 0;
-                    let recommends =
-                      doc.documents.recommends_on_documents?.[0]?.count || 0;
-                    let tags = doc_record.tags || [];
-
-                    const docUrl = getDocumentURL(
-                      doc_record,
-                      doc.documents.uri,
-                      publication,
-                    );
-                    return (
-                      <React.Fragment key={doc.documents?.uri}>
-                        <div className="flex w-full grow flex-col ">
-                          <SpeedyLink
-                            href={docUrl}
-                            className="publishedPost no-underline! flex flex-col"
-                          >
-                            {doc_record.title && (
-                              <h3 className="text-primary">
-                                {doc_record.title}
-                              </h3>
-                            )}
-                            <p className="italic text-secondary line-clamp-3">
-                              {doc_record.description ||
-                                getFirstParagraph(doc_record)}
-                            </p>
-                          </SpeedyLink>
-
-                          <div className="justify-between w-full text-sm text-tertiary flex gap-1 flex-wrap pt-2 items-center">
-                            <p className="text-sm text-tertiary ">
-                              {doc_record.publishedAt && (
-                                <LocalizedDate
-                                  dateString={doc_record.publishedAt}
-                                  options={{
-                                    year: "numeric",
-                                    month: "long",
-                                    day: "2-digit",
-                                  }}
-                                />
-                              )}{" "}
-                            </p>
-
-                            <InteractionPreview
-                              quotesCount={quotes}
-                              commentsCount={comments}
-                              recommendsCount={recommends}
-                              documentUri={doc.documents.uri}
-                              tags={tags}
-                              postUrl={docUrl}
-                              showComments={
-                                record?.preferences?.showComments !== false
-                              }
-                              showMentions={
-                                record?.preferences?.showMentions !== false
-                              }
-                              showRecommends={
-                                record?.preferences?.showRecommends !== false
-                              }
-                            />
-                          </div>
-                        </div>
-                        <hr className="last:hidden border-border-light" />
-                      </React.Fragment>
-                    );
-                  })}
-              </div>
-            </PublicationHomeLayout>
-          </PublicationBackgroundProvider>
-        </PublicationThemeProvider>
       </>
     );
   } catch (e) {
diff --git a/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx b/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx
new file mode 100644
index 00000000..5c592d32
--- /dev/null
+++ b/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import { LinearDocumentPage } from "app/lish/[did]/[publication]/[rkey]/LinearDocumentPage";
+import { LeafletContentProvider } from "contexts/LeafletContentContext";
+import { DocumentProvider } from "contexts/DocumentContext";
+import { useIdentityData } from "components/IdentityProvider";
+import type { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import type { PubLeafletPagesLinearDocument } from "lexicons/api";
+import type { PostPageData } from "app/lish/[did]/[publication]/[rkey]/getPostPageData";
+import type { DocumentContextValue } from "contexts/DocumentContext";
+import {
+  usePublicationData,
+  useNormalizedPublicationRecord,
+} from "../dashboard/PublicationSWRProvider";
+
+const FAKE_DID = "did:plc:fake-preview-user";
+const FAKE_DOC_URI =
+  "at://did:plc:fake-preview-user/site.standard.document/preview";
+
+const fakeBlocks: PubLeafletPagesLinearDocument.Block[] = [
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.header",
+      level: 2,
+      plaintext: "A Heading",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext:
+        "This is a preview of what your posts will look like with the current theme settings. You can adjust colors, fonts, and layout options to match your style.",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext:
+        "Try changing the heading font, body font, accent color, and background to see how they affect the look and feel of your publication.",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.horizontalRule",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext:
+        "Your readers will see posts rendered just like this. Make sure you're happy with the typography and spacing before publishing!",
+    },
+  },
+];
+
+const fakePage: PubLeafletPagesLinearDocument.Main = {
+  $type: "pub.leaflet.pages.linearDocument",
+  id: "preview-page",
+  blocks: fakeBlocks,
+};
+
+const fakeNormalizedDocument = {
+  $type: "site.standard.document" as const,
+  title: "Preview Post Title",
+  description: "A short description of this preview post.",
+  publishedAt: new Date().toISOString(),
+  site: "at://did:plc:fake-preview-user/site.standard.publication/preview",
+  tags: ["preview", "theme"],
+};
+
+const fakeDocument: NonNullable<PostPageData> = {
+  data: {},
+  uri: FAKE_DOC_URI,
+  normalizedDocument: fakeNormalizedDocument,
+  normalizedPublication: null,
+  quotesAndMentions: [],
+  theme: null,
+  prevNext: undefined,
+  publication: null,
+  comments: [],
+  comments_on_documents: [],
+  mentions: [],
+  document_mentions_in_bsky: [],
+  leaflets_in_publications: [],
+  leafletId: null,
+  recommendsCount: 0,
+  documents_in_publications: [],
+  recommends_on_documents: [],
+} as unknown as NonNullable<PostPageData>;
+
+const fakeDocumentContextValue: DocumentContextValue = {
+  uri: FAKE_DOC_URI,
+  normalizedDocument: fakeNormalizedDocument,
+  normalizedPublication: null,
+  theme: undefined,
+  prevNext: undefined,
+  quotesAndMentions: [],
+  publication: null,
+  comments: [],
+  mentions: [],
+  leafletId: null,
+  recommendsCount: 0,
+};
+
+export function PostPreview(props: {
+  showPageBackground: boolean;
+  pageWidth: number;
+}) {
+  let { identity } = useIdentityData();
+  let { data } = usePublicationData();
+  let { publication } = data || {};
+  let record = useNormalizedPublicationRecord();
+  let preferences = record?.preferences;
+  let profileRecord = identity?.bsky_profiles
+    ?.record as unknown as ProfileViewDetailed;
+
+  let profile = profileRecord ?? {
+    did: FAKE_DID,
+    handle: "preview.bsky.social",
+    displayName: "Preview Author",
+  };
+
+  return (
+    <DocumentProvider value={fakeDocumentContextValue}>
+      <LeafletContentProvider
+        value={{
+          pages: [
+            fakePage as PubLeafletPagesLinearDocument.Main & {
+              $type: string;
+            },
+          ],
+        }}
+      >
+        <div className="w-fit pointer-events-none">
+          <LinearDocumentPage
+            document={fakeDocument}
+            did={profile.did || FAKE_DID}
+            profile={profile as ProfileViewDetailed}
+            preferences={{
+              showComments: preferences?.showComments,
+              showMentions: preferences?.showMentions,
+              showRecommends: preferences?.showRecommends,
+              showPrevNext: preferences?.showPrevNext,
+            }}
+            prerenderedCodeBlocks={new Map()}
+            bskyPostData={[]}
+            pollData={[]}
+            document_uri={FAKE_DOC_URI}
+            fullPageScroll={!props.showPageBackground}
+            hasPageBackground={props.showPageBackground}
+            blocks={fakeBlocks}
+          />
+        </div>
+      </LeafletContentProvider>
+    </DocumentProvider>
+  );
+}
diff --git a/app/lish/[did]/[publication]/theme-settings/PubPreview.tsx b/app/lish/[did]/[publication]/theme-settings/PubPreview.tsx
new file mode 100644
index 00000000..23e90e03
--- /dev/null
+++ b/app/lish/[did]/[publication]/theme-settings/PubPreview.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import {
+  usePublicationData,
+  useNormalizedPublicationRecord,
+} from "app/lish/[did]/[publication]/dashboard/PublicationSWRProvider";
+import { useIdentityData } from "components/IdentityProvider";
+import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { PublicationContent } from "../PublicationContent";
+
+export function PubPreview(props: {
+  showPageBackground: boolean;
+  pageWidth: number;
+}) {
+  let { data } = usePublicationData();
+  let { publication } = data || {};
+  let { identity } = useIdentityData();
+  let record = useNormalizedPublicationRecord();
+
+  let profileRecord = identity?.bsky_profiles
+    ?.record as unknown as ProfileViewDetailed;
+
+  let did = publication?.identity_did || "";
+
+  let profile = profileRecord
+    ? {
+        did: profileRecord.did,
+        displayName: profileRecord.displayName,
+        handle: profileRecord.handle,
+      }
+    : undefined;
+
+  if (!publication) return null;
+
+  return (
+    <PublicationContent
+      record={record}
+      publication={publication}
+      did={did}
+      profile={profile}
+      showPageBackground={props.showPageBackground}
+    />
+  );
+}
diff --git a/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx b/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx
new file mode 100644
index 00000000..fa120eca
--- /dev/null
+++ b/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import { BaseThemeProvider } from "components/ThemeManager/ThemeProvider";
+import { ButtonPrimary } from "components/Buttons";
+import { DotLoader } from "components/utils/DotLoader";
+import { ToggleGroup } from "components/ToggleGroup";
+import { PaintSmall } from "components/Icons/PaintSmall";
+import { Popover } from "components/Popover";
+import {
+  usePubThemeEditorState,
+  PubThemePickerPanel,
+} from "components/ThemeManager/PubThemeSetter";
+import { PubPreview } from "./PubPreview";
+import { PostPreview } from "./PostPreview";
+
+export function ThemeSettingsContent() {
+  let [previewMode, setPreviewMode] = useState<"post" | "pub">("post");
+  let [loading, setLoading] = useState(false);
+
+  let state = usePubThemeEditorState();
+  let {
+    localPubTheme,
+    headingFont,
+    bodyFont,
+    image,
+    pageWidth,
+    pubBGImage,
+    leafletBGRepeat,
+    showPageBackground,
+    submitTheme,
+    toaster,
+  } = state;
+
+  return (
+    <BaseThemeProvider
+      local
+      {...localPubTheme}
+      headingFontId={headingFont}
+      bodyFontId={bodyFont}
+      hasBackgroundImage={!!image}
+      pageWidth={pageWidth}
+    >
+      <div className="w-full h-full flex relative overflow-hidden">
+        {/* Theme Setter Panel */}
+        <div className="absolute top-6 left-6 z-20">
+          <Popover
+            align="start"
+            side="bottom"
+            className="sm:w-sm w-full rounded-lg! max-h-full  overflow-y-auto !p-0 bg-white!"
+            trigger={
+              <button
+                type="button"
+                className="w-12 h-12 rounded-full bg-accent-1 text-accent-2 data-[state=open]:bg-accent-2 data-[state=open]:text-accent-1 flex items-center justify-center transition-colors cursor-pointer"
+              >
+                <PaintSmall />
+              </button>
+            }
+            asChild
+          >
+            <form
+              className="flex flex-col"
+              onSubmit={async (e) => {
+                e.preventDefault();
+                let result = await submitTheme(setLoading);
+                if (result?.success) {
+                  toaster({ content: "Theme updated!", type: "success" });
+                }
+              }}
+            >
+              {/* Toggle + Save Header */}
+              <div className="flex items-center justify-between px-3 pt-3 pb-2">
+                <div className="font-bold text-[#272727]">Preview Mode</div>
+                <ToggleGroup
+                  value={previewMode}
+                  optionClassName="text-base!"
+                  onChange={setPreviewMode}
+                  options={[
+                    { value: "post", label: "Post" },
+                    { value: "pub", label: "Pub" },
+                  ]}
+                />
+              </div>
+
+              <div className="px-3 pb-3 gap-2 flex flex-col">
+                <PubThemePickerPanel state={state} />
+              </div>
+              <div className="p-3 pt-0!">
+                <ButtonPrimary fullWidth type="submit" disabled={loading}>
+                  {loading ? <DotLoader /> : "Update"}
+                </ButtonPrimary>
+              </div>
+            </form>
+          </Popover>
+        </div>
+
+        {/* Full-page Preview */}
+        <div
+          className="w-full h-full overflow-y-auto"
+          style={{
+            backgroundImage: pubBGImage ? `url(${pubBGImage})` : undefined,
+            backgroundRepeat: leafletBGRepeat ? "repeat" : "no-repeat",
+            backgroundPosition: "center",
+            backgroundSize: !leafletBGRepeat
+              ? "cover"
+              : `calc(${leafletBGRepeat}px / 2)`,
+          }}
+        >
+          <div className="w-full h-full bg-bg-leaflet">
+            <div
+              className="w-full min-h-full"
+              style={{
+                backgroundImage: pubBGImage ? `url(${pubBGImage})` : undefined,
+                backgroundRepeat: leafletBGRepeat ? "repeat" : "no-repeat",
+                backgroundPosition: "center",
+                backgroundSize: !leafletBGRepeat
+                  ? "cover"
+                  : `calc(${leafletBGRepeat}px / 2)`,
+              }}
+            >
+              {previewMode === "pub" ? (
+                <PubPreview
+                  showPageBackground={showPageBackground}
+                  pageWidth={pageWidth}
+                />
+              ) : (
+                <PostPreview
+                  showPageBackground={showPageBackground}
+                  pageWidth={pageWidth}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </BaseThemeProvider>
+  );
+}
diff --git a/app/lish/[did]/[publication]/theme-settings/page.tsx b/app/lish/[did]/[publication]/theme-settings/page.tsx
new file mode 100644
index 00000000..f668745c
--- /dev/null
+++ b/app/lish/[did]/[publication]/theme-settings/page.tsx
@@ -0,0 +1,69 @@
+import { supabaseServerClient } from "supabase/serverClient";
+import { getIdentityData } from "actions/getIdentityData";
+import { get_publication_data } from "app/api/rpc/[command]/get_publication_data";
+import { PublicationSWRDataProvider } from "../dashboard/PublicationSWRProvider";
+import { PublicationThemeProviderDashboard } from "components/ThemeManager/PublicationThemeProvider";
+import { AtUri } from "@atproto/syntax";
+import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
+import { normalizePublicationRecord } from "src/utils/normalizeRecords";
+import { ThemeSettingsContent } from "./ThemeSettingsContent";
+
+export default async function ThemeSettingsPage(props: {
+  params: Promise<{ publication: string; did: string }>;
+}) {
+  let params = await props.params;
+  let identity = await getIdentityData();
+  if (!identity || !identity.atp_did)
+    return (
+      <NotFoundLayout>
+        <p>Looks like you&apos;re not logged in.</p>
+        <p>
+          If the issue persists please{" "}
+          <a href="mailto:contact@leaflet.pub">send us a note</a>.
+        </p>
+      </NotFoundLayout>
+    );
+  let did = decodeURIComponent(params.did);
+  if (!did) return <ThemeNotFound />;
+  let { result: publication_data } = await get_publication_data.handler(
+    {
+      did,
+      publication_name: decodeURIComponent(params.publication),
+    },
+    { supabase: supabaseServerClient },
+  );
+  let { publication } = publication_data;
+  const record = normalizePublicationRecord(publication?.record);
+
+  if (!publication || identity.atp_did !== publication.identity_did || !record)
+    return <ThemeNotFound />;
+  let uri = new AtUri(publication.uri);
+
+  try {
+    return (
+      <PublicationSWRDataProvider
+        publication_did={did}
+        publication_rkey={uri.rkey}
+        publication_data={publication_data}
+      >
+        <PublicationThemeProviderDashboard>
+          <ThemeSettingsContent />
+        </PublicationThemeProviderDashboard>
+      </PublicationSWRDataProvider>
+    );
+  } catch (e) {
+    return <pre>{JSON.stringify(e, undefined, 2)}</pre>;
+  }
+}
+
+const ThemeNotFound = () => {
+  return (
+    <NotFoundLayout>
+      <p className="font-bold">Sorry, we can&apos;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>
+    </NotFoundLayout>
+  );
+};
diff --git a/components/ThemeManager/PubThemeSetter.tsx b/components/ThemeManager/PubThemeSetter.tsx
index 72150cef..1e0a1592 100644
--- a/components/ThemeManager/PubThemeSetter.tsx
+++ b/components/ThemeManager/PubThemeSetter.tsx
@@ -29,12 +29,8 @@ export type ImageState = {
   file?: File;
   repeat: number | null;
 };
-export const PubThemeSetter = (props: {
-  backToMenu: () => void;
-  loading: boolean;
-  setLoading: (l: boolean) => void;
-}) => {
-  let [sample, setSample] = useState<"pub" | "post">("pub");
+
+export function usePubThemeEditorState() {
   let [openPicker, setOpenPicker] = useState<pickers>("null");
   let { data, mutate } = usePublicationData();
   let { publication: pub } = data || {};
@@ -73,6 +69,216 @@ export const PubThemeSetter = (props: {
   let leafletBGRepeat = image?.repeat || null;
   let toaster = useToaster();
 
+  let submitTheme = async (setLoading: (l: boolean) => void) => {
+    if (!pub) return;
+    setLoading(true);
+    let result = await updatePublicationTheme({
+      uri: pub.uri,
+      theme: {
+        pageBackground: ColorToRGBA(localPubTheme.bgPage),
+        showPageBackground: showPageBackground,
+        backgroundColor: image
+          ? ColorToRGBA(localPubTheme.bgLeaflet)
+          : ColorToRGB(localPubTheme.bgLeaflet),
+        backgroundRepeat: image?.repeat,
+        backgroundImage: image ? image.file : null,
+        pageWidth: pageWidth,
+        primary: ColorToRGB(localPubTheme.primary),
+        accentBackground: ColorToRGB(localPubTheme.accent1),
+        accentText: ColorToRGB(localPubTheme.accent2),
+        headingFont: headingFont,
+        bodyFont: bodyFont,
+      },
+    });
+
+    if (!result.success) {
+      setLoading(false);
+      if (result.error && isOAuthSessionError(result.error)) {
+        toaster({
+          content: <OAuthErrorMessage error={result.error} />,
+          type: "error",
+        });
+      } else {
+        toaster({
+          content: "Failed to update theme",
+          type: "error",
+        });
+      }
+      return result;
+    }
+
+    mutate((pub) => {
+      if (result.publication && pub?.publication)
+        return {
+          ...pub,
+          publication: { ...pub.publication, ...result.publication },
+        };
+      return pub;
+    }, false);
+    setLoading(false);
+    return result;
+  };
+
+  return {
+    openPicker,
+    setOpenPicker,
+    pub,
+    record,
+    mutate,
+    showPageBackground,
+    setShowPageBackground,
+    localPubTheme,
+    setTheme,
+    changes,
+    image,
+    setImage,
+    pageWidth,
+    setPageWidth,
+    headingFont,
+    setHeadingFont,
+    bodyFont,
+    setBodyFont,
+    pubBGImage,
+    leafletBGRepeat,
+    toaster,
+    submitTheme,
+  };
+}
+
+export type PubThemeEditorState = ReturnType<typeof usePubThemeEditorState>;
+
+export function PubThemePickerPanel(props: { state: PubThemeEditorState }) {
+  let {
+    openPicker,
+    setOpenPicker,
+    showPageBackground,
+    setShowPageBackground,
+    localPubTheme,
+    setTheme,
+    image,
+    setImage,
+    pageWidth,
+    setPageWidth,
+    headingFont,
+    setHeadingFont,
+    bodyFont,
+    setBodyFont,
+    pubBGImage,
+    leafletBGRepeat,
+  } = props.state;
+
+  return (
+    <div className="themeSetterContent flex flex-col w-full">
+      <PubPageWidthSetter
+        pageWidth={pageWidth}
+        setPageWidth={setPageWidth}
+        thisPicker="page-width"
+        openPicker={openPicker}
+        setOpenPicker={setOpenPicker}
+      />
+      <div className="themeBGLeaflet flex flex-col">
+        <div
+          className={`themeBgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full `}
+        >
+          <div className="bgPickerBody w-full flex flex-col gap-2 p-2 mt-1 border border-[#CCCCCC] rounded-md text-[#595959] bg-white">
+            <BackgroundPicker
+              bgImage={image}
+              setBgImage={setImage}
+              backgroundColor={localPubTheme.bgLeaflet}
+              pageBackground={localPubTheme.bgPage}
+              setPageBackground={(color) => {
+                setTheme((t) => ({ ...t, bgPage: color }));
+              }}
+              setBackgroundColor={(color) => {
+                setTheme((t) => ({ ...t, bgLeaflet: color }));
+              }}
+              openPicker={openPicker}
+              setOpenPicker={setOpenPicker}
+              hasPageBackground={!!showPageBackground}
+              setHasPageBackground={setShowPageBackground}
+            />
+          </div>
+
+          <SectionArrow
+            fill="white"
+            stroke="#CCCCCC"
+            className="ml-2 -mt-[1px]"
+          />
+        </div>
+      </div>
+
+      <div
+        style={{
+          backgroundImage: pubBGImage ? `url(${pubBGImage})` : undefined,
+          backgroundRepeat: leafletBGRepeat ? "repeat" : "no-repeat",
+          backgroundPosition: "center",
+          backgroundSize: !leafletBGRepeat
+            ? "cover"
+            : `calc(${leafletBGRepeat}px / 2 )`,
+        }}
+        className={` relative bg-bg-leaflet px-3 py-4 flex flex-col rounded-md  border border-border `}
+      >
+        <div className={`flex flex-col  gap-3 z-10`}>
+          <PagePickers
+            pageBackground={localPubTheme.bgPage}
+            primary={localPubTheme.primary}
+            setPageBackground={(color) => {
+              setTheme((t) => ({ ...t, bgPage: color }));
+            }}
+            setPrimary={(color) => {
+              setTheme((t) => ({ ...t, primary: color }));
+            }}
+            openPicker={openPicker}
+            setOpenPicker={(pickers) => setOpenPicker(pickers)}
+            hasPageBackground={showPageBackground}
+          />
+          <div className="bg-bg-page p-2 rounded-md border border-primary shadow-[0_0_0_1px_rgb(var(--bg-page))] flex flex-col gap-1">
+            <FontPicker
+              label="Heading"
+              value={headingFont}
+              onChange={setHeadingFont}
+            />
+            <FontPicker label="Body" value={bodyFont} onChange={setBodyFont} />
+          </div>
+          <PubAccentPickers
+            accent1={localPubTheme.accent1}
+            setAccent1={(color) => {
+              setTheme((t) => ({ ...t, accent1: color }));
+            }}
+            accent2={localPubTheme.accent2}
+            setAccent2={(color) => {
+              setTheme((t) => ({ ...t, accent2: color }));
+            }}
+            openPicker={openPicker}
+            setOpenPicker={(pickers) => setOpenPicker(pickers)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const PubThemeSetter = (props: {
+  backToMenu: () => void;
+  loading: boolean;
+  setLoading: (l: boolean) => void;
+}) => {
+  let [sample, setSample] = useState<"pub" | "post">("pub");
+  let state = usePubThemeEditorState();
+  let {
+    localPubTheme,
+    headingFont,
+    bodyFont,
+    image,
+    pageWidth,
+    pubBGImage,
+    leafletBGRepeat,
+    pub,
+    record,
+    showPageBackground,
+    submitTheme,
+  } = state;
+
   return (
     <BaseThemeProvider
       local
@@ -87,150 +293,16 @@ export const PubThemeSetter = (props: {
           className="flex-shrink-0"
           onSubmit={async (e) => {
             e.preventDefault();
-            if (!pub) return;
-            props.setLoading(true);
-            let result = await updatePublicationTheme({
-              uri: pub.uri,
-              theme: {
-                pageBackground: ColorToRGBA(localPubTheme.bgPage),
-                showPageBackground: showPageBackground,
-                backgroundColor: image
-                  ? ColorToRGBA(localPubTheme.bgLeaflet)
-                  : ColorToRGB(localPubTheme.bgLeaflet),
-                backgroundRepeat: image?.repeat,
-                backgroundImage: image ? image.file : null,
-                pageWidth: pageWidth,
-                primary: ColorToRGB(localPubTheme.primary),
-                accentBackground: ColorToRGB(localPubTheme.accent1),
-                accentText: ColorToRGB(localPubTheme.accent2),
-                headingFont: headingFont,
-                bodyFont: bodyFont,
-              },
-            });
-
-            if (!result.success) {
-              props.setLoading(false);
-              if (result.error && isOAuthSessionError(result.error)) {
-                toaster({
-                  content: <OAuthErrorMessage error={result.error} />,
-                  type: "error",
-                });
-              } else {
-                toaster({
-                  content: "Failed to update theme",
-                  type: "error",
-                });
-              }
-              return;
-            }
-
-            mutate((pub) => {
-              if (result.publication && pub?.publication)
-                return {
-                  ...pub,
-                  publication: { ...pub.publication, ...result.publication },
-                };
-              return pub;
-            }, false);
-            props.setLoading(false);
+            await submitTheme(props.setLoading);
           }}
         >
           <button onClick={props.backToMenu}>
             <GoToArrow />
           </button>
-          <ButtonPrimary onClick={props.setLoading}>update</ButtonPrimary>
         </form>
 
         <div className="themeSetterContent flex flex-col w-full overflow-y-scroll min-h-0 -mb-2 pt-2 ">
-          <PubPageWidthSetter
-            pageWidth={pageWidth}
-            setPageWidth={setPageWidth}
-            thisPicker="page-width"
-            openPicker={openPicker}
-            setOpenPicker={setOpenPicker}
-          />
-          <div className="themeBGLeaflet flex flex-col">
-            <div
-              className={`themeBgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full `}
-            >
-              <div className="bgPickerBody w-full flex flex-col gap-2 p-2 mt-1 border border-[#CCCCCC] rounded-md text-[#595959] bg-white">
-                <BackgroundPicker
-                  bgImage={image}
-                  setBgImage={setImage}
-                  backgroundColor={localPubTheme.bgLeaflet}
-                  pageBackground={localPubTheme.bgPage}
-                  setPageBackground={(color) => {
-                    setTheme((t) => ({ ...t, bgPage: color }));
-                  }}
-                  setBackgroundColor={(color) => {
-                    setTheme((t) => ({ ...t, bgLeaflet: color }));
-                  }}
-                  openPicker={openPicker}
-                  setOpenPicker={setOpenPicker}
-                  hasPageBackground={!!showPageBackground}
-                  setHasPageBackground={setShowPageBackground}
-                />
-              </div>
-
-              <SectionArrow
-                fill="white"
-                stroke="#CCCCCC"
-                className="ml-2 -mt-[1px]"
-              />
-            </div>
-          </div>
-
-          <div
-            style={{
-              backgroundImage: pubBGImage ? `url(${pubBGImage})` : undefined,
-              backgroundRepeat: leafletBGRepeat ? "repeat" : "no-repeat",
-              backgroundPosition: "center",
-              backgroundSize: !leafletBGRepeat
-                ? "cover"
-                : `calc(${leafletBGRepeat}px / 2 )`,
-            }}
-            className={` relative bg-bg-leaflet px-3 py-4 flex flex-col rounded-md  border border-border `}
-          >
-            <div className={`flex flex-col  gap-3 z-10`}>
-              <PagePickers
-                pageBackground={localPubTheme.bgPage}
-                primary={localPubTheme.primary}
-                setPageBackground={(color) => {
-                  setTheme((t) => ({ ...t, bgPage: color }));
-                }}
-                setPrimary={(color) => {
-                  setTheme((t) => ({ ...t, primary: color }));
-                }}
-                openPicker={openPicker}
-                setOpenPicker={(pickers) => setOpenPicker(pickers)}
-                hasPageBackground={showPageBackground}
-              />
-              <div className="bg-bg-page p-2 rounded-md border border-primary shadow-[0_0_0_1px_rgb(var(--bg-page))] flex flex-col gap-1">
-                <FontPicker
-                  label="Heading"
-                  value={headingFont}
-                  onChange={setHeadingFont}
-                />
-                <FontPicker
-                  label="Body"
-                  value={bodyFont}
-                  onChange={setBodyFont}
-                />
-              </div>
-              <PubAccentPickers
-                accent1={localPubTheme.accent1}
-                setAccent1={(color) => {
-                  setTheme((t) => ({ ...t, accent1: color }));
-                }}
-                accent2={localPubTheme.accent2}
-                setAccent2={(color) => {
-                  setTheme((t) => ({ ...t, accent2: color }));
-                }}
-                openPicker={openPicker}
-                setOpenPicker={(pickers) => setOpenPicker(pickers)}
-              />
-            </div>
-          </div>
+          <PubThemePickerPanel state={state} />
           <div className="flex flex-col mt-4 ">
             <div className="flex gap-2 items-center text-sm  text-[#8C8C8C]">
               <div className="text-sm">Preview</div>
@@ -248,19 +320,6 @@ export const PubThemeSetter = (props: {
                 Post
               </button>
             </div>
-            {sample === "pub" ? (
-              <SamplePub
-                pubBGImage={pubBGImage}
-                pubBGRepeat={leafletBGRepeat}
-                showPageBackground={showPageBackground}
-              />
-            ) : (
-              <SamplePost
-                pubBGImage={pubBGImage}
-                pubBGRepeat={leafletBGRepeat}
-                showPageBackground={showPageBackground}
-              />
-            )}
           </div>
         </div>
       </div>
diff --git a/components/ToggleGroup.tsx b/components/ToggleGroup.tsx
new file mode 100644
index 00000000..74c07f51
--- /dev/null
+++ b/components/ToggleGroup.tsx
@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+
+export function ToggleGroup<T extends string>(props: {
+  value: T;
+  onChange: (value: T) => void;
+  options: { value: T; label: ReactNode }[];
+  className?: string;
+  optionClassName?: string;
+}) {
+  return (
+    <div
+      className={`flex gap-1 p-1 bg-accent-contrast rounded-lg text-sm ${props.className || ""}`}
+    >
+      {props.options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          className={`px-1 rounded-md ${
+            props.value === option.value
+              ? "bg-accent-2 font-bold text-accent-contrast"
+              : "bg-transparent text-bg-page"
+          }
+          ${props.optionClassName}
+            `}
+          onClick={() => props.onChange(option.value)}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}