diff --git a/app/globals.css b/app/globals.css
index 03008310..e9ee4e6d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -377,6 +377,13 @@ pre.shiki {
   @apply rounded-md;
 }
 
+.page-container {
+  background: rgba(var(--bg-page), var(--bg-page-alpha));
+  @apply border;
+  @apply border-bg-page;
+  @apply rounded-md;
+}
+
 .container {
   background: rgba(var(--bg-page), 0.75);
   @apply border;
diff --git a/app/lish/[did]/[publication]/PubNotFound.tsx b/app/lish/[did]/[publication]/PubNotFound.tsx
new file mode 100644
index 00000000..73bddce3
--- /dev/null
+++ b/app/lish/[did]/[publication]/PubNotFound.tsx
@@ -0,0 +1,13 @@
+import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
+
+export const PubNotFound = () => {
+  return (
+    <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>
+    </NotFoundLayout>
+  );
+};
diff --git a/app/lish/[did]/[publication]/dashboard/publicationSettings/PublicationContributors.tsx b/app/lish/[did]/[publication]/dashboard/publicationSettings/PublicationContributors.tsx
index 1b9d1bef..cd10a4f7 100644
--- a/app/lish/[did]/[publication]/dashboard/publicationSettings/PublicationContributors.tsx
+++ b/app/lish/[did]/[publication]/dashboard/publicationSettings/PublicationContributors.tsx
@@ -40,7 +40,7 @@ export const PubContributorManager = (props: {
 const PubContributorsEmpty = () => {
   return (
     <div className="flex flex-col gap-2 justify-center accent-container text-sm text-center sm:p-4 p-3 mb-1 mt-3">
-      <PubContibutorEmptyIllo />
+      <PubContributorEmptyIllo />
       <div className="font-bold">
         Contributors can make drafts and publish in this publication!{" "}
       </div>
@@ -135,7 +135,7 @@ const PubContributorOptions = () => {
   );
 };
 
-const PubContibutorEmptyIllo = () => {
+export const PubContributorEmptyIllo = () => {
   return (
     <svg
       width="52"
diff --git a/app/lish/[did]/[publication]/invite-contributor/page.tsx b/app/lish/[did]/[publication]/invite-contributor/page.tsx
new file mode 100644
index 00000000..5328c92d
--- /dev/null
+++ b/app/lish/[did]/[publication]/invite-contributor/page.tsx
@@ -0,0 +1,172 @@
+import { BskyAgent } from "@atproto/api";
+import { AtUri } from "@atproto/syntax";
+import {
+  PublicationThemeProvider,
+  PublicationBackgroundProvider,
+} from "components/ThemeManager/PublicationThemeProvider";
+import { PubLeafletPublication } from "lexicons/api";
+import { supabaseServerClient } from "supabase/serverClient";
+import { ButtonPrimary } from "components/Buttons";
+import { PubContributorEmptyIllo } from "../dashboard/publicationSettings/PublicationContributors";
+import { PubNotFound } from "../PubNotFound";
+import { PubIcon } from "components/ActionBar/Publications";
+import { PubListing } from "app/(home-pages)/discover/PubListing";
+import { SpeedyLink } from "components/SpeedyLink";
+import { BlueskyLogin } from "app/login/LoginForm";
+import { getIdentityData } from "actions/getIdentityData";
+import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
+
+export default async function Publication(props: {
+  params: Promise<{ publication: string; did: string }>;
+}) {
+  let identity = await getIdentityData();
+  let params = await props.params;
+  let did = decodeURIComponent(params.did);
+  if (!did) return <PubNotFound />;
+  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 Promise.all([
+    supabaseServerClient
+      .from("publications")
+      .select(
+        `*,
+        publication_subscriptions(*),
+        documents_in_publications(documents(
+          *,
+          comments_on_documents(count),
+          document_mentions_in_bsky(count)
+        ))
+      `,
+      )
+      .eq("identity_did", did)
+      .or(`name.eq."${publication_name}", uri.eq."${uri}"`)
+      .single(),
+  ]);
+
+  let pubRecord = publication?.record as PubLeafletPublication.Record;
+  let showPageBackground = pubRecord?.theme?.showPageBackground;
+  let pubUrl = getPublicationURL(publication!);
+  let invited = false;
+
+  if (!publication) return <PubNotFound />;
+
+  return (
+    <PublicationThemeProvider
+      record={pubRecord}
+      pub_creator={publication.identity_did}
+    >
+      <PublicationBackgroundProvider
+        record={pubRecord}
+        pub_creator={publication.identity_did}
+      >
+        <div className={`flex h-full place-items-center`}>
+          <div
+            className={`${showPageBackground ? "page-container" : ""} sm:mx-auto mx-3 max-w-sm w-full p-3 sm:p-4 flex flex-col justify-center text-center`}
+          >
+            {!identity || !identity?.atp_did ? (
+              <LoggedOutContent
+                pubRecord={pubRecord}
+                uri={publication.uri}
+                pubUrl={pubUrl}
+              />
+            ) : invited ? (
+              <InvitedContent
+                pubRecord={pubRecord}
+                uri={publication.uri}
+                pubUrl={pubUrl}
+              />
+            ) : (
+              <NotInvitedContent
+                pubRecord={pubRecord}
+                uri={publication.uri}
+                pubUrl={pubUrl}
+              />
+            )}
+          </div>
+        </div>
+      </PublicationBackgroundProvider>
+    </PublicationThemeProvider>
+  );
+}
+
+const InvitedContent = (props: {
+  pubRecord: PubLeafletPublication.Record;
+  uri: string;
+  pubUrl: string;
+}) => {
+  return (
+    <>
+      <h2>Become a Contributor!</h2>
+      <PubLink {...props} />
+      <div>
+        You've been invited to write for <br />
+        {props.pubRecord.name}!{" "}
+      </div>
+      <ButtonPrimary className="mx-auto mt-4 mb-2">Accept Invite</ButtonPrimary>
+    </>
+  );
+};
+
+const NotInvitedContent = (props: {
+  pubRecord: PubLeafletPublication.Record;
+  uri: string;
+  pubUrl: string;
+}) => {
+  return (
+    <>
+      <h3 className="pb-2">You haven't been invited to contribute yet...</h3>
+      <PubLink {...props} />
+
+      <div>
+        If you are expecting an invite, please check that the owner of this
+        publication added you to the invited contributors list.
+      </div>
+    </>
+  );
+};
+
+const LoggedOutContent = (props: {
+  pubRecord: PubLeafletPublication.Record;
+  uri: string;
+  pubUrl: string;
+}) => {
+  return (
+    <>
+      <h2>Log in to Contribute</h2>
+      <PubLink {...props} />
+      <div className="pb-2">
+        Log in with an AT Proto handle to contribute this publication
+      </div>
+      <BlueskyLogin redirectRoute={`${props.pubUrl}/invite-contributor`} />
+    </>
+  );
+};
+
+const PubLink = (props: {
+  pubRecord: PubLeafletPublication.Record;
+  uri: string;
+  pubUrl: string;
+}) => {
+  return (
+    <SpeedyLink
+      href={props.pubUrl}
+      className="p-4  flex flex-col justify-center text-center border border-border rounded-lg mt-2 mb-4 hover:no-underline! no-underline!"
+    >
+      <PubIcon
+        large
+        record={props.pubRecord}
+        uri={props.uri}
+        className="mx-auto mb-3 mt-1"
+      />
+      <h3 className="leading-tight">{props.pubRecord.name}</h3>
+      <div className="text-tertiary italic">{props.pubRecord.description}</div>
+    </SpeedyLink>
+  );
+};
diff --git a/app/lish/[did]/[publication]/page.tsx b/app/lish/[did]/[publication]/page.tsx
index aa1ac273..59b52ee3 100644
--- a/app/lish/[did]/[publication]/page.tsx
+++ b/app/lish/[did]/[publication]/page.tsx
@@ -16,6 +16,7 @@ import { QuoteTiny } from "components/Icons/QuoteTiny";
 import { CommentTiny } from "components/Icons/CommentTiny";
 import { LocalizedDate } from "./LocalizedDate";
 import { PublicationHomeLayout } from "./PublicationHomeLayout";
+import { PubNotFound } from "./PubNotFound";
 
 export default async function Publication(props: {
   params: Promise<{ publication: string; did: string }>;
@@ -195,15 +196,3 @@ export default async function Publication(props: {
     return <pre>{JSON.stringify(e, undefined, 2)}</pre>;
   }
 }
-
-const PubNotFound = () => {
-  return (
-    <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>
-    </NotFoundLayout>
-  );
-};
diff --git a/components/Buttons.tsx b/components/Buttons.tsx
index 9dc29742..55bafb83 100644
--- a/components/Buttons.tsx
+++ b/components/Buttons.tsx
@@ -35,10 +35,10 @@ export const ButtonPrimary = forwardRef<
         m-0 h-max
         ${fullWidth ? "w-full" : fullWidthOnMobile ? "w-full sm:w-max" : "w-max"}
         ${compact ? "py-0 px-1" : "px-2 py-0.5 "}
-        bg-accent-1  outline-transparent border border-accent-1
+        bg-accent-1 border border-accent-1
         rounded-md text-base font-bold text-accent-2
         flex gap-2 items-center justify-center shrink-0
-        transparent-outline focus:outline-accent-1 hover:outline-accent-1 outline-offset-1
+        transparent-outline focus:outline-accent-1! hover:outline-accent-1! outline-offset-1
         disabled:bg-border-light disabled:border-border-light disabled:text-border disabled:hover:text-border
         ${className}
       `}
@@ -73,13 +73,13 @@ export const ButtonSecondary = forwardRef<
       className={`m-0 h-max
         ${fullWidth ? "w-full" : fullWidthOnMobile ? "w-full sm:w-max" : "w-max"}
         ${props.compact ? "py-0 px-1" : "px-2 py-0.5 "}
-  bg-bg-page outline-transparent
-  rounded-md text-base font-bold text-accent-contrast
-  flex gap-2 items-center justify-center shrink-0
-  transparent-outline focus:outline-accent-contrast hover:outline-accent-contrast outline-offset-1
-  border border-accent-contrast
-  disabled:bg-border-light disabled:text-border disabled:hover:text-border
-  ${props.className}
+        bg-bg-page
+        rounded-md text-base font-bold text-accent-contrast
+        flex gap-2 items-center justify-center shrink-0
+        transparent-outline focus:outline-accent-contrast! hover:outline-accent-contrast! outline-offset-1
+        border border-accent-contrast
+        disabled:bg-border-light disabled:text-border disabled:hover:text-border
+        ${props.className}
 `}
     >
       {props.children}
diff --git a/components/PageLayouts/ModalLayout.tsx b/components/PageLayouts/ModalLayout.tsx
new file mode 100644
index 00000000..aba5d6cb
--- /dev/null
+++ b/components/PageLayouts/ModalLayout.tsx
@@ -0,0 +1,9 @@
+export const ModalLayout = (props: { children: React.ReactNode }) => {
+  return (
+    <div className="w-screen h-full flex place-items-center bg-bg-leaflet p-4 text-primary">
+      <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>
+  );
+};