diff --git a/app/lish/[did]/[publication]/PublicationHomeLayout.tsx b/app/lish/[did]/[publication]/PublicationHomeLayout.tsx
new file mode 100644
index 00000000..4324f834
--- /dev/null
+++ b/app/lish/[did]/[publication]/PublicationHomeLayout.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { usePreserveScroll } from "src/hooks/usePreserveScroll";
+
+export function PublicationHomeLayout(props: {
+  uri: string;
+  showPageBackground: boolean;
+  children: React.ReactNode;
+}) {
+  let { ref } = usePreserveScroll<HTMLDivElement>(props.uri);
+  return (
+    <div
+      ref={props.showPageBackground ? null : ref}
+      className={`pubWrapper flex flex-col sm:py-6 h-full   ${props.showPageBackground ? "max-w-prose mx-auto sm:px-0 px-[6px] py-2" : "w-full overflow-y-scroll"}`}
+    >
+      <div
+        ref={!props.showPageBackground ? null : ref}
+        className={`pub sm:max-w-prose max-w-(--page-width-units) w-[1000px] mx-auto px-3 sm:px-4 py-5  ${props.showPageBackground ? "overflow-auto h-full bg-[rgba(var(--bg-page),var(--bg-page-alpha))] border border-border rounded-lg" : "h-fit"}`}
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/app/lish/[did]/[publication]/page.tsx b/app/lish/[did]/[publication]/page.tsx
index 0d217124..20487e88 100644
--- a/app/lish/[did]/[publication]/page.tsx
+++ b/app/lish/[did]/[publication]/page.tsx
@@ -15,6 +15,7 @@ import { SpeedyLink } from "components/SpeedyLink";
 import { QuoteTiny } from "components/Icons/QuoteTiny";
 import { CommentTiny } from "components/Icons/CommentTiny";
 import { LocalizedDate } from "./LocalizedDate";
+import { PublicationHomeLayout } from "./PublicationHomeLayout";
 
 export default async function Publication(props: {
   params: Promise<{ publication: string; did: string }>;
@@ -66,131 +67,126 @@ export default async function Publication(props: {
           record={record}
           pub_creator={publication.identity_did}
         >
-          <div
-            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"}`}
+          <PublicationHomeLayout
+            uri={publication.uri}
+            showPageBackground={showPageBackground}
           >
-            <div
-              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 && (
-                  <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}{" "}
+            <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 && (
+                <p className="italic text-tertiary sm:text-base text-sm">
+                  <strong className="">by {profile.displayName}</strong>{" "}
+                  <a
+                    className="text-tertiary"
+                    href={`https://bsky.app/profile/${profile.handle}`}
+                  >
+                    @{profile.handle}
+                  </a>
                 </p>
-                {profile && (
-                  <p className="italic text-tertiary sm:text-base text-sm">
-                    <strong className="">by {profile.displayName}</strong>{" "}
-                    <a
-                      className="text-tertiary"
-                      href={`https://bsky.app/profile/${profile.handle}`}
-                    >
-                      @{profile.handle}
-                    </a>
-                  </p>
-                )}
-                <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 className="sm:pt-4 pt-4">
+                <SubscribeWithBluesky
+                  base_url={getPublicationURL(publication)}
+                  pubName={publication.name}
+                  pub_uri={publication.uri}
+                  subscribers={publication.publication_subscriptions}
+                />
               </div>
-              <div className="publicationPostList w-full flex flex-col gap-4">
-                {publication.documents_in_publications
-                  .filter((d) => !!d?.documents)
-                  .sort((a, b) => {
-                    let aRecord = a.documents
-                      ?.data! as PubLeafletDocument.Record;
-                    let bRecord = b.documents
-                      ?.data! as PubLeafletDocument.Record;
-                    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;
-                    let uri = new AtUri(doc.documents.uri);
-                    let doc_record = doc.documents
-                      .data as PubLeafletDocument.Record;
-                    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;
+            </div>
+            <div className="publicationPostList w-full flex flex-col gap-4">
+              {publication.documents_in_publications
+                .filter((d) => !!d?.documents)
+                .sort((a, b) => {
+                  let aRecord = a.documents?.data! as PubLeafletDocument.Record;
+                  let bRecord = b.documents?.data! as PubLeafletDocument.Record;
+                  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;
+                  let uri = new AtUri(doc.documents.uri);
+                  let doc_record = doc.documents
+                    .data as PubLeafletDocument.Record;
+                  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;
 
-                    return (
-                      <React.Fragment key={doc.documents?.uri}>
-                        <div className="flex w-full grow flex-col ">
-                          <SpeedyLink
-                            href={`${getPublicationURL(publication)}/${uri.rkey}`}
-                            className="publishedPost hover:no-underline! flex flex-col"
-                          >
-                            <h3 className="text-primary">{doc_record.title}</h3>
-                            <p className="italic text-secondary">
-                              {doc_record.description}
-                            </p>
-                          </SpeedyLink>
+                  return (
+                    <React.Fragment key={doc.documents?.uri}>
+                      <div className="flex w-full grow flex-col ">
+                        <SpeedyLink
+                          href={`${getPublicationURL(publication)}/${uri.rkey}`}
+                          className="publishedPost hover:no-underline! flex flex-col"
+                        >
+                          <h3 className="text-primary">{doc_record.title}</h3>
+                          <p className="italic text-secondary">
+                            {doc_record.description}
+                          </p>
+                        </SpeedyLink>
 
-                          <div className="text-sm text-tertiary flex gap-1 flex-wrap pt-2">
-                            <p className="text-sm text-tertiary ">
-                              {doc_record.publishedAt && (
-                                <LocalizedDate
-                                  dateString={doc_record.publishedAt}
-                                  options={{
-                                    year: "numeric",
-                                    month: "long",
-                                    day: "2-digit",
-                                  }}
-                                />
-                              )}{" "}
-                            </p>
-                            {comments > 0 || quotes > 0 ? "| " : ""}
-                            {quotes > 0 && (
+                        <div className="text-sm text-tertiary flex gap-1 flex-wrap pt-2">
+                          <p className="text-sm text-tertiary ">
+                            {doc_record.publishedAt && (
+                              <LocalizedDate
+                                dateString={doc_record.publishedAt}
+                                options={{
+                                  year: "numeric",
+                                  month: "long",
+                                  day: "2-digit",
+                                }}
+                              />
+                            )}{" "}
+                          </p>
+                          {comments > 0 || quotes > 0 ? "| " : ""}
+                          {quotes > 0 && (
+                            <SpeedyLink
+                              href={`${getPublicationURL(publication)}/${uri.rkey}?interactionDrawer=quotes`}
+                              className="flex flex-row gap-0 text-sm text-tertiary items-center flex-wrap"
+                            >
+                              <QuoteTiny /> {quotes}
+                            </SpeedyLink>
+                          )}
+                          {comments > 0 &&
+                            record?.preferences?.showComments !== false && (
                               <SpeedyLink
-                                href={`${getPublicationURL(publication)}/${uri.rkey}?interactionDrawer=quotes`}
+                                href={`${getPublicationURL(publication)}/${uri.rkey}?interactionDrawer=comments`}
                                 className="flex flex-row gap-0 text-sm text-tertiary items-center flex-wrap"
                               >
-                                <QuoteTiny /> {quotes}
+                                <CommentTiny /> {comments}
                               </SpeedyLink>
                             )}
-                            {comments > 0 &&
-                              record?.preferences?.showComments !== false && (
-                                <SpeedyLink
-                                  href={`${getPublicationURL(publication)}/${uri.rkey}?interactionDrawer=comments`}
-                                  className="flex flex-row gap-0 text-sm text-tertiary items-center flex-wrap"
-                                >
-                                  <CommentTiny /> {comments}
-                                </SpeedyLink>
-                              )}
-                          </div>
                         </div>
-                        <hr className="last:hidden border-border-light" />
-                      </React.Fragment>
-                    );
-                  })}
-              </div>
+                      </div>
+                      <hr className="last:hidden border-border-light" />
+                    </React.Fragment>
+                  );
+                })}
             </div>
-          </div>
+          </PublicationHomeLayout>
         </PublicationBackgroundProvider>
       </PublicationThemeProvider>
     );
diff --git a/components/Pages/Page.tsx b/components/Pages/Page.tsx
index f9c7144f..59b5183c 100644
--- a/components/Pages/Page.tsx
+++ b/components/Pages/Page.tsx
@@ -16,6 +16,7 @@ import { focusPage } from ".";
 import { PageOptions } from "./PageOptions";
 import { CardThemeProvider } from "components/ThemeManager/ThemeProvider";
 import { useDrawerOpen } from "app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer";
+import { usePreserveScroll } from "src/hooks/usePreserveScroll";
 
 export function Page(props: {
   entityID: string;
@@ -83,6 +84,7 @@ export const PageWrapper = (props: {
   pageType: "canvas" | "doc";
   drawerOpen: boolean | undefined;
 }) => {
+  let { ref } = usePreserveScroll(props.id);
   return (
     // this div wraps the contents AND the page options.
     // it needs to be its own div because this container does NOT scroll, and therefore doesn't clip the absolutely positioned pageOptions
@@ -95,6 +97,7 @@ export const PageWrapper = (props: {
         it needs to be a separate div so that the user can scroll from anywhere on the page if there isn't a card border
         */}
       <div
+        ref={ref}
         onClick={props.onClickAction}
         id={props.id}
         className={`