diff --git a/app/(home-pages)/notifications/ContributorNotification.tsx b/app/(home-pages)/notifications/ContributorNotification.tsx
new file mode 100644
index 00000000..6ef38039
--- /dev/null
+++ b/app/(home-pages)/notifications/ContributorNotification.tsx
@@ -0,0 +1,98 @@
+import { Notification } from "./Notification";
+import { HydratedSubscribeNotification } from "src/notifications";
+import { blobRefToSrc } from "src/utils/blobRefToSrc";
+import { AppBskyActorProfile, PubLeafletPublication } from "lexicons/api";
+import { PubIcon } from "components/ActionBar/Publications";
+import { InvitedContent } from "app/lish/[did]/[publication]/invite-contributor/content";
+import { ButtonPrimary } from "components/Buttons";
+import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
+import { AtUri } from "@atproto/api";
+import { BaseThemeProvider } from "components/ThemeManager/ThemeProvider";
+
+export const ContributorNotification = (
+  props: HydratedSubscribeNotification,
+) => {
+  const profileRecord = props.subscriptionData?.identities?.bsky_profiles
+    ?.record as AppBskyActorProfile.Record;
+  const displayName =
+    profileRecord?.displayName ||
+    props.subscriptionData?.identities?.bsky_profiles?.handle ||
+    "Someone";
+  const pubRecord = props.subscriptionData?.publications
+    ?.record as PubLeafletPublication.Record;
+
+  return (
+    // TODO: GET CORRECT TIMESTAMP
+    <Notification
+      timestamp={""}
+      href={`https://${pubRecord?.base_path}/invite-contributor`}
+      icon={
+        <PubIcon
+          record={pubRecord}
+          uri={props.subscriptionData?.publications?.uri}
+          small
+        />
+      }
+      actionText={
+        <>
+          {displayName} invited you to contribute to {pubRecord?.name}!
+        </>
+      }
+      content={
+        <PubListing
+          record={pubRecord}
+          uri={props.subscriptionData?.publications?.uri!}
+        />
+      }
+    />
+  );
+};
+
+const PubListing = (props: {
+  record: PubLeafletPublication.Record;
+  uri: string;
+}) => {
+  let record = props.record;
+  let theme = usePubTheme(record);
+  let backgroundImage = record?.theme?.backgroundImage?.image?.ref
+    ? blobRefToSrc(
+        record?.theme?.backgroundImage?.image?.ref,
+        new AtUri(props.uri).host,
+      )
+    : null;
+
+  let backgroundImageRepeat = record?.theme?.backgroundImage?.repeat;
+  let backgroundImageSize = record?.theme?.backgroundImage?.width || 500;
+  if (!record) return null;
+  return (
+    <BaseThemeProvider {...theme} local>
+      <div
+        className={`no-underline! flex flex-row gap-2
+            bg-bg-leaflet
+            border border-border-light rounded-lg
+            p-2 selected-outline
+            hover:outline-accent-contrast hover:border-accent-contrast
+            relative overflow-hidden`}
+        style={{
+          backgroundImage: `url(${backgroundImage})`,
+          backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
+          backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`,
+        }}
+      >
+        <div
+          className={`
+            p-3 w-full  flex flex-col justify-center text-center border border-border-light rounded-lg  hover:no-underline! no-underline! ${record.theme?.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))]" : ""}`}
+        >
+          <PubIcon record={record} uri={props.uri} className="mx-auto my-1" />
+          <h4 className="leading-tight">{record.name}</h4>
+          <div className="text-tertiary text-sm italic">
+            {record.description}
+          </div>
+          <ButtonPrimary compact className="mx-auto mt-2 mb-1 text-sm">
+            Accept Invite
+          </ButtonPrimary>
+        </div>
+      </div>
+    </BaseThemeProvider>
+  );
+};
diff --git a/app/(home-pages)/notifications/FollowNotification.tsx b/app/(home-pages)/notifications/FollowNotification.tsx
index dd8b2b74..ba3932f8 100644
--- a/app/(home-pages)/notifications/FollowNotification.tsx
+++ b/app/(home-pages)/notifications/FollowNotification.tsx
@@ -24,7 +24,7 @@ export const FollowNotification = (props: HydratedSubscribeNotification) => {
     <Notification
       timestamp={props.created_at}
       href={`https://${pubRecord?.base_path}`}
-      icon={<Avatar src={avatarSrc} displayName={displayName} tiny />}
+      icon={<Avatar src={avatarSrc} displayName={displayName} small />}
       actionText={
         <>
           {displayName} subscribed to {pubRecord?.name}!
diff --git a/app/(home-pages)/notifications/MentionNotification.tsx b/app/(home-pages)/notifications/MentionNotification.tsx
index a50304d8..28d1249d 100644
--- a/app/(home-pages)/notifications/MentionNotification.tsx
+++ b/app/(home-pages)/notifications/MentionNotification.tsx
@@ -24,13 +24,10 @@ export const QuoteNotification = (props: HydratedQuoteNotification) => {
       content={
         <ContentLayout postTitle={docRecord.title} pubRecord={pubRecord}>
           <div className="flex gap-2 text-sm w-full">
-            <Avatar
-              src={author.avatar}
-              displayName={displayName}
-            />
+            <Avatar src={author.avatar} displayName={displayName} />
             <pre
               style={{ wordBreak: "break-word" }}
-              className="whitespace-pre-wrap text-secondary line-clamp-3 sm:line-clamp-6"
+              className="pt-[2px] whitespace-pre-wrap text-secondary line-clamp-3 sm:line-clamp-6"
             >
               {postText}
             </pre>
diff --git a/app/(home-pages)/notifications/Notification.tsx b/app/(home-pages)/notifications/Notification.tsx
index 2d5c2710..359ae9fb 100644
--- a/app/(home-pages)/notifications/Notification.tsx
+++ b/app/(home-pages)/notifications/Notification.tsx
@@ -102,7 +102,7 @@ export const CommentInNotification = (props: {
       <Avatar src={props.avatar} displayName={props.displayName} />
       <pre
         style={{ wordBreak: "break-word" }}
-        className={`whitespace-pre-wrap text-secondary line-clamp-3 sm:line-clamp-6 ${props.className}`}
+        className={`pt-[2px] whitespace-pre-wrap text-secondary line-clamp-3 sm:line-clamp-6 ${props.className}`}
       >
         <BaseTextBlock
           preview
diff --git a/app/(home-pages)/notifications/NotificationList.tsx b/app/(home-pages)/notifications/NotificationList.tsx
index 74f085a0..59af4056 100644
--- a/app/(home-pages)/notifications/NotificationList.tsx
+++ b/app/(home-pages)/notifications/NotificationList.tsx
@@ -33,7 +33,7 @@ export function NotificationList({
       </div>
     );
   return (
-    <div className="max-w-prose mx-auto w-full">
+    <div className="max-w-prose mx-auto w-full pt-1 sm:pt-2">
       <div className={`flex flex-col gap-2`}>
         {notifications.map((n) => {
           if (n.type === "comment") {
diff --git a/app/lish/[did]/[publication]/invite-contributor/content.tsx b/app/lish/[did]/[publication]/invite-contributor/content.tsx
new file mode 100644
index 00000000..23a76ed5
--- /dev/null
+++ b/app/lish/[did]/[publication]/invite-contributor/content.tsx
@@ -0,0 +1,80 @@
+import { PubLeafletPublication } from "lexicons/api";
+import { ButtonPrimary } from "components/Buttons";
+import { PubIcon } from "components/ActionBar/Publications";
+import { SpeedyLink } from "components/SpeedyLink";
+import { BlueskyLogin } from "app/login/LoginForm";
+
+export const InvitedContent = (props: {
+  pubRecord: PubLeafletPublication.Record;
+  uri: string | undefined;
+  href: 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>
+    </>
+  );
+};
+
+export const NotInvitedContent = (props: {
+  pubRecord: PubLeafletPublication.Record;
+  uri: string | undefined;
+  href: 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>
+    </>
+  );
+};
+
+export const LoggedOutContent = (props: {
+  pubRecord: PubLeafletPublication.Record;
+  uri: string | undefined;
+  href: 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.href}/invite-contributor`} />
+    </>
+  );
+};
+
+const PubLink = (props: {
+  pubRecord: PubLeafletPublication.Record;
+  uri: string | undefined;
+  href: string;
+}) => {
+  return (
+    <SpeedyLink
+      href={props.href}
+      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]/invite-contributor/page.tsx b/app/lish/[did]/[publication]/invite-contributor/page.tsx
index 04557915..9904ad26 100644
--- a/app/lish/[did]/[publication]/invite-contributor/page.tsx
+++ b/app/lish/[did]/[publication]/invite-contributor/page.tsx
@@ -5,13 +5,10 @@ import {
 } from "components/ThemeManager/PublicationThemeProvider";
 import { PubLeafletPublication } from "lexicons/api";
 import { supabaseServerClient } from "supabase/serverClient";
-import { ButtonPrimary } from "components/Buttons";
 import { PubNotFound } from "../PubNotFound";
-import { PubIcon } from "components/ActionBar/Publications";
-import { SpeedyLink } from "components/SpeedyLink";
-import { BlueskyLogin } from "app/login/LoginForm";
 import { getIdentityData } from "actions/getIdentityData";
 import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
+import { InvitedContent, NotInvitedContent, LoggedOutContent } from "./content";
 
 export default async function Publication(props: {
   params: Promise<{ publication: string; did: string }>;
@@ -71,19 +68,19 @@ export default async function Publication(props: {
               <LoggedOutContent
                 pubRecord={pubRecord}
                 uri={publication.uri}
-                pubUrl={pubUrl}
+                href={pubUrl}
               />
             ) : invited ? (
               <InvitedContent
                 pubRecord={pubRecord}
                 uri={publication.uri}
-                pubUrl={pubUrl}
+                href={pubUrl}
               />
             ) : (
               <NotInvitedContent
                 pubRecord={pubRecord}
                 uri={publication.uri}
-                pubUrl={pubUrl}
+                href={pubUrl}
               />
             )}
           </div>
@@ -92,78 +89,3 @@ export default async function Publication(props: {
     </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/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx
index a16f8aee..8f2a87a8 100644
--- a/components/ActionBar/Publications.tsx
+++ b/components/ActionBar/Publications.tsx
@@ -157,7 +157,7 @@ const PublishPopoverContent = () => {
 
 export const PubIcon = (props: {
   record: PubLeafletPublication.Record;
-  uri: string;
+  uri: string | undefined;
   small?: boolean;
   large?: boolean;
   className?: string;
@@ -166,7 +166,7 @@ export const PubIcon = (props: {
 
   let iconSizeClassName = `${props.small ? "w-4 h-4" : props.large ? "w-12 h-12" : "w-6 h-6"} rounded-full`;
 
-  return props.record.icon ? (
+  return props.record.icon && props.uri ? (
     <div
       className={`${iconSizeClassName} ${props.className} relative overflow-hidden`}
     >
diff --git a/components/Avatar.tsx b/components/Avatar.tsx
index bc9bb6a3..7e68ecbd 100644
--- a/components/Avatar.tsx
+++ b/components/Avatar.tsx
@@ -3,12 +3,12 @@ import { AccountTiny } from "./Icons/AccountTiny";
 export const Avatar = (props: {
   src: string | undefined;
   displayName: string | undefined;
-  tiny?: boolean;
+  small?: boolean;
 }) => {
   if (props.src)
     return (
       <img
-        className={`${props.tiny ? "w-4 h-4" : "w-5 h-5"} rounded-full shrink-0 border border-border-light`}
+        className={`${props.small ? "w-4 h-4" : "w-6 h-6"} rounded-full shrink-0 border border-border-light`}
         src={props.src}
         alt={
           props.displayName
@@ -20,9 +20,9 @@ export const Avatar = (props: {
   else
     return (
       <div
-        className={`bg-[var(--accent-light)] flex rounded-full shrink-0 border border-border-light place-items-center justify-center text-accent-1 ${props.tiny ? "w-4 h-4" : "w-5 h-5"}`}
+        className={`bg-[var(--accent-light)] flex rounded-full shrink-0 border border-border-light place-items-center justify-center text-accent-1 ${props.small ? "w-4 h-4" : "w-5 h-5"}`}
       >
-        <AccountTiny className={props.tiny ? "scale-80" : "scale-90"} />
+        <AccountTiny className={props.small ? "scale-80" : "scale-90"} />
       </div>
     );
 };