diff --git a/app/[leaflet_id]/WelcomeModal.tsx b/app/[leaflet_id]/WelcomeModal.tsx
index 60ab0993..435384d3 100644
--- a/app/[leaflet_id]/WelcomeModal.tsx
+++ b/app/[leaflet_id]/WelcomeModal.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { PublishSmall } from "components/Icons/PublishSmall";
 import { Modal } from "components/Modal";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
@@ -21,8 +22,31 @@ export function WelcomeModal() {
   };
 
   return (
-    <Modal open={open} onOpenChange={handleOpenChange} title="Welcome to Leaflet!">
-      <p className="text-secondary">Placeholder welcome content.</p>
+    <Modal
+      open={open}
+      onOpenChange={handleOpenChange}
+      title="Welcome to Leaflet!"
+      className="text-center w-full sm:w-[1000px] sm:max-w-sm text-secondary"
+    >
+      <div className="accent-container mt-1 p-2 py-4 flex flex-col gap-3 leadingleading-loose">
+        <p className="font-bold">
+          Start writing right away,
+          <br /> no account needed.
+        </p>
+        <hr className="border-white" />
+        <p>
+          When you're ready, <br />
+          hit{" "}
+          <span className="align-middle inline-block">
+            <div className=" mb-0.5 flex gap-1 bg-accent-1 w-fit items-center text-white pl-1 pr-1.5 rounded-md font-bold text-sm  ">
+              <PublishSmall className="scale-80" /> Publish
+            </div>
+          </span>{" "}
+          to create
+          <br /> a new publication.
+        </p>
+      </div>
+      <p className="text-sm text-tertiary pt-2">Happy writing!</p>
     </Modal>
   );
 }
diff --git a/app/about/Examples.tsx b/app/about/Examples.tsx
index a5795cce..6a981097 100644
--- a/app/about/Examples.tsx
+++ b/app/about/Examples.tsx
@@ -3,6 +3,7 @@ import { supabaseServerClient } from "supabase/serverClient";
 import { normalizePublicationRecord } from "src/utils/normalizeRecords";
 import { PubListing } from "app/(home-pages)/p/[didOrHandle]/PubListing";
 import { idResolver } from "app/(home-pages)/reader/idResolver";
+import { SpeedyLink } from "components/SpeedyLink";
 
 const pubs = [
   "at://did:plc:e27b62phtzr3sjgs3zwdbctq/site.standard.publication/3lyevoglvs224", // zjsm.fm
@@ -70,11 +71,14 @@ export const Examples = async () => {
   return (
     <div className="aboutExamples mx-auto pt-32 sm:pt-48 text-center w-full">
       <h2>Loved by thousands of writers</h2>
-      <div className="flex gap-2 w-fit items-center font-bold text-[#57822B] mx-auto">
+      <SpeedyLink
+        href="/reader"
+        className="no-underline! flex gap-2 w-fit items-center font-bold text-[#57822B] mx-auto"
+      >
         <p>Explore More</p>
         <GoToArrow className="scale-110" />
-      </div>
-      <div className="pubAndPostCarousel overflow-hidden pt-6 w-screen sm:-mx-12 -mx-4">
+      </SpeedyLink>
+      <div className="pubAndPostCarousel overflow-hidden pt-12 w-screen sm:-mx-12 -mx-4">
         <div className="pubAndPostCarouselTrack flex w-max">
           {pubsWithMargins.map((pub) => renderPub(pub, "orig"))}
           {pubsWithMargins.map((pub) => renderPub(pub, "dup"))}
diff --git a/app/about/Pricing.tsx b/app/about/Pricing.tsx
index 4c2e2814..6c3a892d 100644
--- a/app/about/Pricing.tsx
+++ b/app/about/Pricing.tsx
@@ -9,7 +9,7 @@ export const Pricing = () => {
   let [cadence, setCadence] = useState<"monthly" | "yearly">("yearly");
 
   return (
-    <div className="aboutPricing mx-auto w-full text-center pt-24 sm:pt-48">
+    <div className="aboutPricing mx-auto w-full text-center pt-24 sm:pt-32">
       <h2 className="pb-4">Pricing</h2>
       <ToggleGroup
         fullWidth