diff --git a/.claude/napkin.md b/.claude/napkin.md
new file mode 100644
index 00000000..7d2370cd
--- /dev/null
+++ b/.claude/napkin.md
@@ -0,0 +1,20 @@
+# Napkin
+
+## Corrections
+| Date | Source | What Went Wrong | What To Do Instead |
+|------|--------|----------------|-------------------|
+
+## User Preferences
+- Hide navbar on full-screen flow pages (invite, dashboard, admin) via `ConditionalHeader` patterns + remove `page-with-header` class
+
+## Patterns That Work
+- Convex queries can join related data inline (e.g., activity types + categories in one query)
+- `conditional-header.tsx` DASHBOARD_LAYOUT_PATTERNS array controls navbar visibility per route
+
+## Patterns That Don't Work
+
+## Domain Notes
+- Scoring configs have types: distance, duration, count, variant
+- `page-with-header` CSS class = `pt-16` to offset fixed navbar
+- Seed data lives in `packages/backend/actions/seed.ts`
+- Schema changes auto-deploy locally via `pnpm dev`
diff --git a/apps/web/app/challenges/[id]/admin/emails/page.tsx b/apps/web/app/challenges/[id]/admin/emails/page.tsx
index 6dfa175a..0b743bbf 100644
--- a/apps/web/app/challenges/[id]/admin/emails/page.tsx
+++ b/apps/web/app/challenges/[id]/admin/emails/page.tsx
@@ -9,6 +9,8 @@ import {
   CheckCircle,
   Clock,
   Edit2,
+  Eye,
+  Layers,
   Mail,
   Plus,
   Save,
@@ -95,10 +97,13 @@ const triggerInfo: Record<
   },
 };
 
+type ViewMode = "sequences" | "template";
+
 export default function EmailsAdminPage() {
   const params = useParams();
   const challengeId = params.id as string;
 
+  const [viewMode, setViewMode] = useState<ViewMode>("sequences");
   const [selectedEmailId, setSelectedEmailId] = useState<string | null>(null);
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
@@ -123,6 +128,8 @@ export default function EmailsAdminPage() {
     challengeId: challengeId as Id<"challenges">,
   });
 
+  const templatePreview = useQuery(api.queries.emailSequences.getEmailTemplatePreview);
+
   const selectedEmail = useQuery(
     api.queries.emailSequences.getById,
     selectedEmailId ? { emailSequenceId: selectedEmailId as Id<"emailSequences"> } : "skip"
@@ -261,7 +268,130 @@ export default function EmailsAdminPage() {
   }
 
   return (
-    <div className="flex h-[calc(100vh-140px)] gap-4">
+    <div className="flex h-[calc(100vh-140px)] flex-col gap-3">
+      {/* View Mode Toggle */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => setViewMode("sequences")}
+          className={cn(
+            "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+            viewMode === "sequences"
+              ? "bg-amber-500/15 text-amber-400"
+              : "text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300"
+          )}
+        >
+          <Layers className="h-3.5 w-3.5" />
+          Email Sequences
+        </button>
+        <button
+          onClick={() => setViewMode("template")}
+          className={cn(
+            "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+            viewMode === "template"
+              ? "bg-amber-500/15 text-amber-400"
+              : "text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300"
+          )}
+        >
+          <Eye className="h-3.5 w-3.5" />
+          Email Template
+        </button>
+      </div>
+
+      {/* Template Preview Mode */}
+      {viewMode === "template" ? (
+        <div className="flex flex-1 gap-4 overflow-hidden">
+          {/* Info Panel */}
+          <div className="flex w-1/3 flex-col gap-3">
+            <div className="rounded border border-zinc-800 bg-zinc-900 p-4">
+              <div className="mb-3 flex items-center gap-2">
+                <div className="flex h-8 w-8 items-center justify-center rounded bg-amber-500/15">
+                  <Mail className="h-4 w-4 text-amber-400" />
+                </div>
+                <div>
+                  <h3 className="text-sm font-medium text-zinc-100">Base Email Template</h3>
+                  <p className="text-[10px] text-zinc-500">Used across all transactional emails</p>
+                </div>
+              </div>
+              <p className="text-xs leading-relaxed text-zinc-400">
+                This is the shared email template that wraps all transactional emails sent from March Fitness, including invite emails, welcome emails, and weekly recaps.
+              </p>
+            </div>
+
+            <div className="rounded border border-zinc-800 bg-zinc-900 p-4">
+              <h4 className="mb-2 text-[10px] font-medium uppercase tracking-wider text-zinc-500">
+                Template Components
+              </h4>
+              <div className="space-y-2">
+                <div className="rounded border border-zinc-800 bg-zinc-800/50 px-3 py-2">
+                  <div className="text-xs font-medium text-zinc-300">Brand Header</div>
+                  <div className="text-[10px] text-zinc-500">Wordmark + indigo-fuchsia gradient divider</div>
+                </div>
+                <div className="rounded border border-zinc-800 bg-zinc-800/50 px-3 py-2">
+                  <div className="text-xs font-medium text-zinc-300">Dark Card</div>
+                  <div className="text-[10px] text-zinc-500">Title, subtitle, content, callouts, and CTA buttons</div>
+                </div>
+                <div className="rounded border border-zinc-800 bg-zinc-800/50 px-3 py-2">
+                  <div className="text-xs font-medium text-zinc-300">Footer</div>
+                  <div className="text-[10px] text-zinc-500">Context line + march.fit wordmark link</div>
+                </div>
+              </div>
+            </div>
+
+            <div className="rounded border border-zinc-800 bg-zinc-900 p-4">
+              <h4 className="mb-2 text-[10px] font-medium uppercase tracking-wider text-zinc-500">
+                Used In
+              </h4>
+              <div className="space-y-1.5">
+                {[
+                  { name: "Invite Emails", desc: "Sent when users invite friends" },
+                  { name: "Welcome Email", desc: "Auto-sent on challenge signup" },
+                  { name: "Weekly Recaps", desc: "Sent after each week" },
+                  { name: "Challenge Complete", desc: "Sent when challenge ends" },
+                ].map((item) => (
+                  <div key={item.name} className="flex items-center gap-2 rounded bg-zinc-800/50 px-3 py-1.5">
+                    <CheckCircle className="h-3 w-3 flex-shrink-0 text-emerald-400" />
+                    <div>
+                      <div className="text-xs text-zinc-300">{item.name}</div>
+                      <div className="text-[10px] text-zinc-500">{item.desc}</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Template Preview */}
+          <div className="flex flex-1 flex-col overflow-hidden rounded border border-zinc-800 bg-zinc-900">
+            <div className="flex items-center justify-between border-b border-zinc-800 px-3 py-2">
+              <div className="flex items-center gap-2">
+                <h2 className="text-sm font-medium text-zinc-100">Template Preview</h2>
+                <span className="rounded bg-emerald-500/20 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400">
+                  Active
+                </span>
+              </div>
+              <div className="text-[10px] text-zinc-500">
+                All emails use this layout
+              </div>
+            </div>
+            <div className="flex-1 overflow-hidden bg-[#09090b]">
+              {templatePreview ? (
+                <iframe
+                  srcDoc={templatePreview.html}
+                  className="h-full w-full border-0"
+                  title="Email Template Preview"
+                  sandbox=""
+                />
+              ) : (
+                <div className="flex h-full items-center justify-center text-zinc-500">
+                  Loading template...
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      ) : (
+      /* Email Sequences Mode */
+      <div className="flex flex-1 gap-4 overflow-hidden">
       {/* Left Column - Email List */}
       <div className="flex w-1/2 flex-col">
         {/* Header */}
@@ -781,6 +911,8 @@ export default function EmailsAdminPage() {
           </div>
         )}
       </div>
+      </div>
+      )}
     </div>
   );
 }
diff --git a/apps/web/app/challenges/[id]/dashboard/page.tsx b/apps/web/app/challenges/[id]/dashboard/page.tsx
index cd348b6c..54f123b2 100644
--- a/apps/web/app/challenges/[id]/dashboard/page.tsx
+++ b/apps/web/app/challenges/[id]/dashboard/page.tsx
@@ -4,6 +4,7 @@ import { api } from "@repo/backend";
 import type { Id } from "@repo/backend/_generated/dataModel";
 
 import { ActivityFeed } from "@/components/dashboard/activity-feed";
+import { OnboardingCard } from "@/components/dashboard/onboarding-card";
 import { type ChallengeSummary } from "@/components/dashboard/challenge-realtime-context";
 import { getCurrentUser } from "@/lib/auth";
 import { isAuthenticated } from "@/lib/server-auth";
@@ -61,7 +62,6 @@ export default async function ChallengeDashboardPage({
     0,
     Math.ceil((dateOnlyToUtcMs(challenge.endDate) - now.getTime()) / DAY_IN_MS),
   );
-
   const initialSummary: ChallengeSummary = {
     stats: {
       ...stats,
@@ -89,7 +89,8 @@ export default async function ChallengeDashboardPage({
       currentUser={user}
       initialSummary={initialSummary}
     >
-      <div className="mx-auto max-w-2xl px-4 py-6">
+      <div className="mx-auto max-w-2xl px-4 py-6 space-y-4">
+        <OnboardingCard challengeId={challenge.id} userId={user._id} />
         <ActivityFeed challengeId={challenge.id} />
       </div>
     </DashboardLayoutWrapper>
diff --git a/apps/web/app/challenges/[id]/invite/[code]/page.tsx b/apps/web/app/challenges/[id]/invite/[code]/page.tsx
new file mode 100644
index 00000000..2b012630
--- /dev/null
+++ b/apps/web/app/challenges/[id]/invite/[code]/page.tsx
@@ -0,0 +1,292 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+import { useMutation, useQuery } from "convex/react";
+import { api } from "@repo/backend";
+import { useState, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  CalendarDays,
+  Loader2,
+  Users,
+  CreditCard,
+  Flame,
+  ArrowLeft,
+} from "lucide-react";
+import { formatDateShortFromDateOnly } from "@/lib/date-only";
+import { ActivityTypesList } from "../../activity-types/activity-types-list";
+
+export default function InviteAcceptPage() {
+  const params = useParams<{ id: string; code: string }>();
+  const router = useRouter();
+  const [isJoining, setIsJoining] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const inviteData = useQuery(api.queries.challengeInvites.resolveInviteCode, {
+    code: params.code,
+  });
+
+  const participation = useQuery(
+    api.queries.participations.getCurrentUserParticipation,
+    inviteData ? { challengeId: inviteData.challengeId } : "skip"
+  );
+
+  const paymentInfo = useQuery(
+    api.queries.paymentConfig.getPublicPaymentInfo,
+    inviteData
+      ? { challengeId: inviteData.challengeId }
+      : "skip"
+  );
+
+  const activityTypes = useQuery(
+    api.queries.activityTypes.getByChallengeId,
+    inviteData ? { challengeId: inviteData.challengeId } : "skip"
+  );
+
+  const categories = useQuery(
+    api.queries.categories.getChallengeCategories,
+    inviteData ? { challengeId: inviteData.challengeId } : "skip"
+  );
+
+  const categoryMap = useMemo(() => {
+    if (!categories) return new Map<string, { _id: string; name: string }>();
+    return new Map<string, { _id: string; name: string }>(
+      categories.map((c: { _id: string; name: string }) => [c._id, { _id: c._id, name: c.name }] as const)
+    );
+  }, [categories]);
+
+  const joinChallenge = useMutation(api.mutations.participations.join);
+  const createCheckoutSession = useMutation(api.mutations.payments.createCheckoutSession);
+
+  const handleJoin = async () => {
+    if (!inviteData) return;
+
+    try {
+      setError(null);
+      setIsJoining(true);
+
+      const requiresPayment =
+        paymentInfo?.requiresPayment && paymentInfo.priceInCents > 0;
+
+      if (requiresPayment) {
+        const result = await createCheckoutSession({
+          challengeId: inviteData.challengeId,
+          successUrl: `${window.location.origin}/challenges/${inviteData.challengeId}/payment-success`,
+          cancelUrl: window.location.href,
+        });
+
+        if (result.url) {
+          sessionStorage.setItem(
+            `invite_code_${inviteData.challengeId}`,
+            params.code
+          );
+          window.location.href = result.url;
+        } else {
+          throw new Error("Failed to create checkout session");
+        }
+        return;
+      }
+
+      await joinChallenge({
+        challengeId: inviteData.challengeId,
+        inviteCode: params.code,
+      });
+
+      router.push(`/challenges/${inviteData.challengeId}/dashboard`);
+    } catch (err) {
+      console.error("Failed to join challenge", err);
+      if (err instanceof Error) {
+        if (
+          err.message.includes("Not authenticated") ||
+          err.message.includes("User not found")
+        ) {
+          router.push(
+            `/sign-up?redirect_url=/challenges/${params.id}/invite/${params.code}`
+          );
+          return;
+        }
+        if (err.message.includes("Already joined")) {
+          router.push(`/challenges/${inviteData!.challengeId}/dashboard`);
+          return;
+        }
+      }
+      setError("Something went wrong while joining. Please try again.");
+    } finally {
+      setIsJoining(false);
+    }
+  };
+
+  // Loading state
+  if (inviteData === undefined) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <Loader2 className="h-5 w-5 animate-spin" />
+          Loading invite...
+        </div>
+      </div>
+    );
+  }
+
+  // Invalid invite code
+  if (inviteData === null) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Card className="max-w-md">
+          <CardHeader>
+            <CardTitle>Invalid Invite Link</CardTitle>
+            <p className="text-sm text-muted-foreground">
+              This invite link is invalid or has expired. Ask your friend for a
+              new link.
+            </p>
+          </CardHeader>
+          <CardContent>
+            <Button variant="outline" onClick={() => router.push("/challenges")}>
+              Browse Challenges
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // Already participating
+  if (participation) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Card className="max-w-md">
+          <CardHeader>
+            <CardTitle>You&apos;re already in!</CardTitle>
+            <p className="text-sm text-muted-foreground">
+              You&apos;re already participating in {inviteData.challengeName}.
+            </p>
+          </CardHeader>
+          <CardContent>
+            <Button
+              onClick={() =>
+                router.push(
+                  `/challenges/${inviteData.challengeId}/dashboard`
+                )
+              }
+            >
+              Go to Dashboard
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  const requiresPayment =
+    paymentInfo?.requiresPayment && paymentInfo.priceInCents > 0;
+
+  const formatPrice = (cents: number, currency: string = "usd") => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currency.toUpperCase(),
+    }).format(cents / 100);
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-background to-background/95">
+      <div className="mx-auto max-w-2xl px-4 py-8 sm:py-12">
+        {/* Back link */}
+        <button
+          onClick={() => router.push("/challenges")}
+          className="mb-6 flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Browse challenges
+        </button>
+
+        {/* Hero section */}
+        <div className="mb-8 text-center">
+          <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            {inviteData.challengeName}
+          </h1>
+          {inviteData.challengeDescription && (
+            <p className="mt-3 text-base text-muted-foreground max-w-lg mx-auto">
+              {inviteData.challengeDescription}
+            </p>
+          )}
+          <p className="mt-3 text-sm text-muted-foreground">
+            <span className="font-medium text-foreground">
+              {inviteData.inviter.name ?? inviteData.inviter.username}
+            </span>{" "}
+            invited you to join
+          </p>
+        </div>
+
+        {/* Stats row */}
+        <div className="mb-8 grid grid-cols-3 gap-3">
+          <div className="rounded-lg border bg-card p-3 text-center">
+            <CalendarDays className="mx-auto mb-1 h-5 w-5 text-muted-foreground" />
+            <p className="text-sm font-medium">
+              {formatDateShortFromDateOnly(inviteData.startDate)} &ndash;{" "}
+              {formatDateShortFromDateOnly(inviteData.endDate)}
+            </p>
+            <p className="text-xs text-muted-foreground">{inviteData.durationDays} days</p>
+          </div>
+          <div className="rounded-lg border bg-card p-3 text-center">
+            <Users className="mx-auto mb-1 h-5 w-5 text-muted-foreground" />
+            <p className="text-sm font-medium">{inviteData.participantCount}</p>
+            <p className="text-xs text-muted-foreground">participants</p>
+          </div>
+          <div className="rounded-lg border bg-card p-3 text-center">
+            <Flame className="mx-auto mb-1 h-5 w-5 text-muted-foreground" />
+            <p className="text-sm font-medium">{inviteData.streakMinPoints}+ pts</p>
+            <p className="text-xs text-muted-foreground">daily for streak</p>
+          </div>
+        </div>
+
+        {/* Activity types & scoring - reuse the shared component */}
+        {activityTypes && activityTypes.length > 0 && (
+          <div className="mb-8">
+            <ActivityTypesList
+              activityTypes={activityTypes}
+              categoryMap={categoryMap}
+              streakMinPoints={inviteData.streakMinPoints}
+            />
+          </div>
+        )}
+
+        {/* Join CTA */}
+        <div className="sticky bottom-4 z-10">
+          <div className="rounded-xl border bg-card/95 backdrop-blur p-4 shadow-lg">
+            {error && (
+              <p className="mb-3 text-sm text-destructive text-center">{error}</p>
+            )}
+            <Button
+              className="w-full"
+              size="lg"
+              onClick={handleJoin}
+              disabled={isJoining}
+            >
+              {isJoining ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  {requiresPayment
+                    ? "Redirecting to payment..."
+                    : "Joining..."}
+                </>
+              ) : (
+                <>
+                  {requiresPayment && <CreditCard className="mr-2 h-4 w-4" />}
+                  {requiresPayment
+                    ? `Join for ${formatPrice(paymentInfo!.priceInCents, paymentInfo!.currency)}`
+                    : "Join Challenge"}
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/app/challenges/[id]/users/[userId]/user-profile-content.tsx b/apps/web/app/challenges/[id]/users/[userId]/user-profile-content.tsx
index 752023a5..a9d0607f 100644
--- a/apps/web/app/challenges/[id]/users/[userId]/user-profile-content.tsx
+++ b/apps/web/app/challenges/[id]/users/[userId]/user-profile-content.tsx
@@ -206,19 +206,16 @@ export function UserProfileContent({
       </Card>
 
       {showStravaCard && (
-        <Card>
-          <CardHeader>
-            <CardTitle>Connect Strava</CardTitle>
-            <CardDescription>
-              Link your Strava account to auto-import workouts for this challenge.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            <StravaConnectButton successUrl={profilePath} errorUrl={errorUrl} />
-            <Button asChild variant="ghost" className="w-full">
-              <Link href="/integrations">Manage integrations</Link>
-            </Button>
-          </CardContent>
+        <Card className="p-4">
+          <div className="flex items-center gap-4">
+            <div className="min-w-0 flex-1">
+              <CardTitle className="text-sm font-medium">Connect Strava</CardTitle>
+              <CardDescription className="text-xs">
+                Auto-import workouts for this challenge.
+              </CardDescription>
+            </div>
+            <StravaConnectButton successUrl={profilePath} errorUrl={errorUrl} className="w-auto shrink-0" />
+          </div>
         </Card>
       )}
 
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 0a08dd9c..c7128557 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Script from "next/script";
 import { Geist, Geist_Mono } from "next/font/google";
 import { ConvexProviderWrapper } from "@/components/providers/convex-provider";
 import { ConditionalHeader } from "@/components/layout/conditional-header";
@@ -32,6 +33,21 @@ export default async function RootLayout({
   return (
     <ConvexProviderWrapper initialToken={token ?? null}>
       <html lang="en">
+      <head>
+        {process.env.NODE_ENV === "development" && (
+          <Script
+            src="//unpkg.com/react-grab/dist/index.global.js"
+            crossOrigin="anonymous"
+            strategy="beforeInteractive"
+          />
+        )}
+        {process.env.NODE_ENV === "development" && (
+          <Script
+            src="//unpkg.com/@react-grab/cursor/dist/client.global.js"
+            strategy="lazyOnload"
+          />
+        )}
+      </head>
         <body
           className={`${geistSans.variable} ${geistMono.variable} bg-black text-white antialiased`}
         >
diff --git a/apps/web/components/dashboard/invite-card.tsx b/apps/web/components/dashboard/invite-card.tsx
new file mode 100644
index 00000000..60398e6d
--- /dev/null
+++ b/apps/web/components/dashboard/invite-card.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import { useMutation, useQuery } from "convex/react";
+import { api } from "@repo/backend";
+import type { Id } from "@repo/backend/_generated/dataModel";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Check, Copy, Share2, UserPlus } from "lucide-react";
+
+interface InviteCardProps {
+  challengeId: string;
+}
+
+export function InviteCard({ challengeId }: InviteCardProps) {
+  const [copied, setCopied] = useState(false);
+  const [generating, setGenerating] = useState(false);
+
+  const existingCode = useQuery(api.queries.challengeInvites.getMyInviteCode, {
+    challengeId: challengeId as Id<"challenges">,
+  });
+
+  const generateCode = useMutation(
+    api.mutations.challengeInvites.getOrCreateInviteCode
+  );
+
+  const [inviteCode, setInviteCode] = useState<string | null>(null);
+
+  // Use existing code from query, or the one we just generated
+  const code = inviteCode ?? existingCode;
+
+  const inviteUrl = code
+    ? `${typeof window !== "undefined" ? window.location.origin : ""}/challenges/${challengeId}/invite/${code}`
+    : null;
+
+  const handleGenerateCode = async () => {
+    try {
+      setGenerating(true);
+      const result = await generateCode({
+        challengeId: challengeId as Id<"challenges">,
+      });
+      setInviteCode(result);
+    } catch (error) {
+      console.error("Failed to generate invite code", error);
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  const handleCopy = async () => {
+    if (!inviteUrl) return;
+    try {
+      await navigator.clipboard.writeText(inviteUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback for older browsers
+      console.error("Failed to copy to clipboard");
+    }
+  };
+
+  const handleShare = async () => {
+    if (!inviteUrl) return;
+    try {
+      if (navigator.share) {
+        await navigator.share({
+          title: "Join my fitness challenge!",
+          url: inviteUrl,
+        });
+      } else {
+        await handleCopy();
+      }
+    } catch (error) {
+      // User cancelled share or it failed - that's ok
+      if ((error as Error)?.name !== "AbortError") {
+        console.error("Share failed", error);
+      }
+    }
+  };
+
+  return (
+    <Card className="border-indigo-500/30 bg-indigo-500/5">
+      <CardHeader className="pb-3">
+        <div className="flex items-center gap-2">
+          <UserPlus className="h-5 w-5 text-indigo-400" />
+          <CardTitle className="text-base">Invite friends</CardTitle>
+        </div>
+        <CardDescription>
+          Share your personal link to invite friends to this challenge.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {code ? (
+          <div className="flex gap-2">
+            <div className="flex-1 truncate rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-muted-foreground">
+              {inviteUrl}
+            </div>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={handleCopy}
+              title="Copy link"
+            >
+              {copied ? (
+                <Check className="h-4 w-4 text-green-400" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={handleShare}
+              title="Share link"
+            >
+              <Share2 className="h-4 w-4" />
+            </Button>
+          </div>
+        ) : (
+          <Button
+            onClick={handleGenerateCode}
+            disabled={generating}
+            variant="secondary"
+            className="w-full"
+          >
+            {generating ? "Generating..." : "Get your invite link"}
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/web/components/dashboard/onboarding-card.tsx b/apps/web/components/dashboard/onboarding-card.tsx
new file mode 100644
index 00000000..01865039
--- /dev/null
+++ b/apps/web/components/dashboard/onboarding-card.tsx
@@ -0,0 +1,590 @@
+"use client";
+
+import { useState } from "react";
+import { useMutation, useQuery } from "convex/react";
+import { api } from "@repo/backend";
+import type { Id } from "@repo/backend/_generated/dataModel";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { StravaConnectButton } from "@/components/integrations/strava-connect-button";
+import {
+  CheckCircle2,
+  UserPlus,
+  CreditCard,
+  Loader2,
+  Copy,
+  Check,
+  Share2,
+  Mail,
+  User,
+  ChevronDown,
+  ChevronUp,
+} from "lucide-react";
+
+interface OnboardingCardProps {
+  challengeId: string;
+  userId: string;
+}
+
+export function OnboardingCard({ challengeId, userId }: OnboardingCardProps) {
+  const [dismissed, setDismissed] = useState(false);
+  const [expandedStep, setExpandedStep] = useState<number | null>(null);
+
+  // Data fetching
+  const currentUser = useQuery(api.queries.users.current);
+  const participation = useQuery(
+    api.queries.participations.getCurrentUserParticipation,
+    { challengeId: challengeId as Id<"challenges"> }
+  );
+  const paymentInfo = useQuery(api.queries.paymentConfig.getPublicPaymentInfo, {
+    challengeId: challengeId as Id<"challenges">,
+  });
+  const integrations = useQuery(api.queries.integrations.getByUser, {
+    userId: userId as Id<"users">,
+  });
+  const existingInviteCode = useQuery(
+    api.queries.challengeInvites.getMyInviteCode,
+    { challengeId: challengeId as Id<"challenges"> }
+  );
+
+  // Completion checks
+  const bioComplete =
+    currentUser?.gender != null && currentUser?.age != null;
+  const requiresPayment = Boolean(
+    paymentInfo?.requiresPayment && paymentInfo.priceInCents > 0
+  );
+  const paymentComplete = participation?.paymentStatus === "paid";
+  const stravaConnected = integrations?.some(
+    (i: { service: string; revoked: boolean }) => i.service === "strava" && !i.revoked
+  );
+
+  const allCompletableStepsDone =
+    bioComplete &&
+    (!requiresPayment || paymentComplete) &&
+    stravaConnected;
+
+  // Auto-hide when all steps done and dismissed
+  if (dismissed && allCompletableStepsDone) {
+    return null;
+  }
+
+  // Still loading data
+  if (
+    currentUser === undefined ||
+    participation === undefined ||
+    paymentInfo === undefined ||
+    integrations === undefined
+  ) {
+    return null;
+  }
+
+  const steps = [
+    {
+      key: "bio",
+      label: "Fill out your bio",
+      description: "Gender & age (displayed as decade, e.g. 30s)",
+      complete: bioComplete,
+      icon: User,
+    },
+    ...(requiresPayment
+      ? [
+          {
+            key: "payment",
+            label: "Complete payment",
+            description: `Pay to participate in this challenge`,
+            complete: paymentComplete,
+            icon: CreditCard,
+          },
+        ]
+      : []),
+    {
+      key: "strava",
+      label: "Link Strava",
+      description: "Sync your workouts automatically",
+      complete: stravaConnected ?? false,
+      icon: CheckCircle2,
+    },
+    {
+      key: "invite",
+      label: "Invite friends",
+      description: "Share your invite link or send emails",
+      complete: false, // Always actionable
+      icon: UserPlus,
+    },
+  ];
+
+  const completedCount = steps.filter((s) => s.complete).length;
+  // Don't count the invite step in total since it's never "complete"
+  const completableCount = steps.filter((s) => s.key !== "invite").length;
+  const completedCompletable = steps.filter(
+    (s) => s.key !== "invite" && s.complete
+  ).length;
+
+  const toggleStep = (index: number) => {
+    setExpandedStep(expandedStep === index ? null : index);
+  };
+
+  return (
+    <Card className="border-indigo-500/30 bg-indigo-500/5">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-base">Get ready for the challenge</CardTitle>
+            <CardDescription>
+              {completedCompletable}/{completableCount} steps completed
+            </CardDescription>
+          </div>
+          {allCompletableStepsDone && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setDismissed(true)}
+              className="text-xs text-muted-foreground"
+            >
+              Dismiss
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {steps.map((step, index) => (
+          <div key={step.key} className="rounded-lg border border-zinc-800">
+            <button
+              onClick={() => toggleStep(index)}
+              className="flex w-full items-center gap-3 p-3 text-left"
+            >
+              {step.complete ? (
+                <CheckCircle2 className="h-5 w-5 shrink-0 text-green-400" />
+              ) : (
+                <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-zinc-600 text-xs text-muted-foreground">
+                  {index + 1}
+                </div>
+              )}
+              <div className="flex-1 min-w-0">
+                <div
+                  className={`text-sm font-medium ${step.complete ? "text-muted-foreground line-through" : ""}`}
+                >
+                  {step.label}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {step.description}
+                </div>
+              </div>
+              {expandedStep === index ? (
+                <ChevronUp className="h-4 w-4 text-muted-foreground" />
+              ) : (
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              )}
+            </button>
+
+            {expandedStep === index && (
+              <div className="border-t border-zinc-800 p-3">
+                {step.key === "bio" && (
+                  <BioForm
+                    userId={userId}
+                    currentGender={currentUser?.gender}
+                    currentAge={currentUser?.age}
+                  />
+                )}
+                {step.key === "payment" && (
+                  <PaymentStep challengeId={challengeId} />
+                )}
+                {step.key === "strava" && (
+                  <StravaStep
+                    challengeId={challengeId}
+                    connected={stravaConnected ?? false}
+                  />
+                )}
+                {step.key === "invite" && (
+                  <InviteStep
+                    challengeId={challengeId}
+                    existingCode={existingInviteCode ?? null}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
+
+// --- Bio Form ---
+function BioForm({
+  userId,
+  currentGender,
+  currentAge,
+}: {
+  userId: string;
+  currentGender?: string;
+  currentAge?: number;
+}) {
+  const [gender, setGender] = useState<string>(currentGender ?? "");
+  const [age, setAge] = useState<string>(currentAge?.toString() ?? "");
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const updateUser = useMutation(api.mutations.users.updateUser);
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await updateUser({
+        userId: userId as Id<"users">,
+        gender: gender as "male" | "female",
+        age: parseInt(age, 10),
+      });
+      setSaved(true);
+    } catch (error) {
+      console.error("Failed to save bio", error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleSkip = async () => {
+    // Just collapse — no action needed
+    setSaved(true);
+  };
+
+  if (saved) {
+    return (
+      <div className="text-sm text-green-400 flex items-center gap-2">
+        <Check className="h-4 w-4" />
+        Saved!
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex gap-3">
+        <div className="flex-1">
+          <label className="text-xs text-muted-foreground mb-1 block">
+            Gender
+          </label>
+          <Select value={gender} onValueChange={setGender}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select..." />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="male">Male</SelectItem>
+              <SelectItem value="female">Female</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex-1">
+          <label className="text-xs text-muted-foreground mb-1 block">
+            Age
+          </label>
+          <Input
+            type="number"
+            placeholder="e.g. 35"
+            value={age}
+            onChange={(e) => setAge(e.target.value)}
+            min={13}
+            max={120}
+          />
+        </div>
+      </div>
+      <div className="flex gap-2">
+        <Button
+          onClick={handleSave}
+          disabled={saving || !gender || !age}
+          size="sm"
+        >
+          {saving ? (
+            <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+          ) : null}
+          Save
+        </Button>
+        <Button variant="ghost" size="sm" onClick={handleSkip}>
+          Skip
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// --- Payment Step ---
+function PaymentStep({ challengeId }: { challengeId: string }) {
+  const [isRedirecting, setIsRedirecting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const createCheckoutSession = useMutation(
+    api.mutations.payments.createCheckoutSession
+  );
+
+  const handlePay = async () => {
+    setErrorMessage(null);
+    setIsRedirecting(true);
+    try {
+      const result = await createCheckoutSession({
+        challengeId: challengeId as Id<"challenges">,
+        successUrl: `${window.location.origin}/challenges/${challengeId}/payment-success`,
+        cancelUrl: `${window.location.origin}/challenges/${challengeId}/dashboard`,
+      });
+      if (result.url) {
+        window.location.href = result.url;
+      } else {
+        throw new Error("Failed to create checkout session");
+      }
+    } catch (error) {
+      setErrorMessage(
+        error instanceof Error ? error.message : "Payment failed"
+      );
+      setIsRedirecting(false);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      {errorMessage && (
+        <div className="text-xs text-red-400">{errorMessage}</div>
+      )}
+      <Button onClick={handlePay} disabled={isRedirecting} size="sm">
+        {isRedirecting ? (
+          <>
+            <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+            Redirecting...
+          </>
+        ) : (
+          <>
+            <CreditCard className="mr-1 h-3 w-3" />
+            Pay now
+          </>
+        )}
+      </Button>
+    </div>
+  );
+}
+
+// --- Strava Step ---
+function StravaStep({
+  challengeId,
+  connected,
+}: {
+  challengeId: string;
+  connected: boolean;
+}) {
+  if (connected) {
+    return (
+      <div className="text-sm text-green-400 flex items-center gap-2">
+        <Check className="h-4 w-4" />
+        Connected
+      </div>
+    );
+  }
+
+  const origin =
+    typeof window !== "undefined" ? window.location.origin : "";
+
+  return (
+    <StravaConnectButton
+      successUrl={`${origin}/challenges/${challengeId}/dashboard`}
+      errorUrl={`${origin}/challenges/${challengeId}/dashboard`}
+    />
+  );
+}
+
+// --- Invite Step ---
+function InviteStep({
+  challengeId,
+  existingCode,
+}: {
+  challengeId: string;
+  existingCode: string | null;
+}) {
+  const [copied, setCopied] = useState(false);
+  const [generating, setGenerating] = useState(false);
+  const [inviteCode, setInviteCode] = useState<string | null>(null);
+  const [emails, setEmails] = useState("");
+  const [sending, setSending] = useState(false);
+  const [sendResult, setSendResult] = useState<{
+    sentCount: number;
+    failedCount: number;
+  } | null>(null);
+
+  const generateCode = useMutation(
+    api.mutations.challengeInvites.getOrCreateInviteCode
+  );
+  const sendInviteEmails = useMutation(
+    api.mutations.challengeInvites.sendInviteEmails
+  );
+
+  const code = inviteCode ?? existingCode;
+
+  const inviteUrl = code
+    ? `${typeof window !== "undefined" ? window.location.origin : ""}/challenges/${challengeId}/invite/${code}`
+    : null;
+
+  const handleGenerateCode = async () => {
+    try {
+      setGenerating(true);
+      const result = await generateCode({
+        challengeId: challengeId as Id<"challenges">,
+      });
+      setInviteCode(result);
+    } catch (error) {
+      console.error("Failed to generate invite code", error);
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  const handleCopy = async () => {
+    if (!inviteUrl) return;
+    try {
+      await navigator.clipboard.writeText(inviteUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      console.error("Failed to copy to clipboard");
+    }
+  };
+
+  const handleShare = async () => {
+    if (!inviteUrl) return;
+    try {
+      if (navigator.share) {
+        await navigator.share({
+          title: "Join my fitness challenge!",
+          url: inviteUrl,
+        });
+      } else {
+        await handleCopy();
+      }
+    } catch (error) {
+      if ((error as Error)?.name !== "AbortError") {
+        console.error("Share failed", error);
+      }
+    }
+  };
+
+  const handleSendEmails = async () => {
+    const emailList = emails
+      .split(",")
+      .map((e) => e.trim())
+      .filter((e) => e.length > 0);
+    if (emailList.length === 0) return;
+
+    setSending(true);
+    setSendResult(null);
+    try {
+      // Ensure we have an invite code first
+      if (!code) {
+        const newCode = await generateCode({
+          challengeId: challengeId as Id<"challenges">,
+        });
+        setInviteCode(newCode);
+      }
+
+      const result = await sendInviteEmails({
+        challengeId: challengeId as Id<"challenges">,
+        emails: emailList,
+        origin:
+          typeof window !== "undefined" ? window.location.origin : "",
+      });
+      setSendResult(result);
+      setEmails("");
+    } catch (error) {
+      console.error("Failed to send invite emails", error);
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      {/* Invite link section */}
+      {code ? (
+        <div className="flex gap-2">
+          <div className="flex-1 truncate rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-muted-foreground">
+            {inviteUrl}
+          </div>
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleCopy}
+            title="Copy link"
+          >
+            {copied ? (
+              <Check className="h-4 w-4 text-green-400" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleShare}
+            title="Share link"
+          >
+            <Share2 className="h-4 w-4" />
+          </Button>
+        </div>
+      ) : (
+        <Button
+          onClick={handleGenerateCode}
+          disabled={generating}
+          variant="secondary"
+          size="sm"
+          className="w-full"
+        >
+          {generating ? "Generating..." : "Get your invite link"}
+        </Button>
+      )}
+
+      {/* Email invite section */}
+      <div className="space-y-2">
+        <div className="flex gap-2">
+          <Input
+            placeholder="friend@example.com, another@example.com"
+            value={emails}
+            onChange={(e) => setEmails(e.target.value)}
+            className="flex-1"
+          />
+          <Button
+            onClick={handleSendEmails}
+            disabled={sending || !emails.trim()}
+            size="sm"
+          >
+            {sending ? (
+              <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+            ) : (
+              <Mail className="mr-1 h-3 w-3" />
+            )}
+            Send
+          </Button>
+        </div>
+        {sendResult && (
+          <div className="text-xs text-muted-foreground">
+            {sendResult.sentCount > 0 && (
+              <span className="text-green-400">
+                {sendResult.sentCount} invite{sendResult.sentCount !== 1 ? "s" : ""} sent!
+              </span>
+            )}
+            {sendResult.failedCount > 0 && (
+              <span className="text-red-400 ml-2">
+                {sendResult.failedCount} failed
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/layout/conditional-header.tsx b/apps/web/components/layout/conditional-header.tsx
index d17712e3..95d27642 100644
--- a/apps/web/components/layout/conditional-header.tsx
+++ b/apps/web/components/layout/conditional-header.tsx
@@ -14,6 +14,7 @@ const DASHBOARD_LAYOUT_PATTERNS = [
   /^\/challenges\/[^/]+\/users\/[^/]+$/,
   /^\/challenges\/[^/]+\/activities\/[^/]+$/,
   /^\/challenges\/[^/]+\/admin(\/.*)?$/,
+  /^\/challenges\/[^/]+\/invite\/[^/]+$/,
 ];
 
 export function ConditionalHeader({
diff --git a/apps/web/package.json b/apps/web/package.json
index 05cba898..dd397401 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "PORT=3001 dotenv -e ../../.env.local -e ../../.env -- next dev",
+    "dev": "pnpm dlx @react-grab/cursor@latest && PORT=3001 dotenv -e ../../.env.local -e ../../.env -- next dev",
     "build": "dotenv -e ../../.env.local -e ../../.env -- next build",
     "start": "next start",
     "typecheck": "tsc --noEmit",
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index d14d9f24..f5d2dcc0 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -1,10 +1,18 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
-    "types": ["node", "react", "react-dom"],
+    "types": [
+      "node",
+      "react",
+      "react-dom"
+    ],
     "strict": true,
     "noEmit": true,
     "esModuleInterop": true,
@@ -12,7 +20,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -20,9 +28,20 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules", "tests"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "tests"
+  ]
 }
diff --git a/packages/backend/_generated/api.d.ts b/packages/backend/_generated/api.d.ts
index 6139e0a7..d8ff0c1a 100644
--- a/packages/backend/_generated/api.d.ts
+++ b/packages/backend/_generated/api.d.ts
@@ -22,6 +22,7 @@ import type * as http from "../http.js";
 import type * as index from "../index.js";
 import type * as lib_dateOnly from "../lib/dateOnly.js";
 import type * as lib_defaultEmailPlan from "../lib/defaultEmailPlan.js";
+import type * as lib_emailTemplate from "../lib/emailTemplate.js";
 import type * as lib_ids from "../lib/ids.js";
 import type * as lib_payments from "../lib/payments.js";
 import type * as lib_resend from "../lib/resend.js";
@@ -35,6 +36,7 @@ import type * as mutations_activities from "../mutations/activities.js";
 import type * as mutations_activityTypes from "../mutations/activityTypes.js";
 import type * as mutations_admin from "../mutations/admin.js";
 import type * as mutations_categories from "../mutations/categories.js";
+import type * as mutations_challengeInvites from "../mutations/challengeInvites.js";
 import type * as mutations_challenges from "../mutations/challenges.js";
 import type * as mutations_cleanup from "../mutations/cleanup.js";
 import type * as mutations_clear from "../mutations/clear.js";
@@ -57,6 +59,7 @@ import type * as queries_activities from "../queries/activities.js";
 import type * as queries_activityTypes from "../queries/activityTypes.js";
 import type * as queries_admin from "../queries/admin.js";
 import type * as queries_categories from "../queries/categories.js";
+import type * as queries_challengeInvites from "../queries/challengeInvites.js";
 import type * as queries_challenges from "../queries/challenges.js";
 import type * as queries_comments from "../queries/comments.js";
 import type * as queries_emailSequences from "../queries/emailSequences.js";
@@ -102,6 +105,7 @@ declare const fullApi: ApiFromModules<{
   index: typeof index;
   "lib/dateOnly": typeof lib_dateOnly;
   "lib/defaultEmailPlan": typeof lib_defaultEmailPlan;
+  "lib/emailTemplate": typeof lib_emailTemplate;
   "lib/ids": typeof lib_ids;
   "lib/payments": typeof lib_payments;
   "lib/resend": typeof lib_resend;
@@ -115,6 +119,7 @@ declare const fullApi: ApiFromModules<{
   "mutations/activityTypes": typeof mutations_activityTypes;
   "mutations/admin": typeof mutations_admin;
   "mutations/categories": typeof mutations_categories;
+  "mutations/challengeInvites": typeof mutations_challengeInvites;
   "mutations/challenges": typeof mutations_challenges;
   "mutations/cleanup": typeof mutations_cleanup;
   "mutations/clear": typeof mutations_clear;
@@ -137,6 +142,7 @@ declare const fullApi: ApiFromModules<{
   "queries/activityTypes": typeof queries_activityTypes;
   "queries/admin": typeof queries_admin;
   "queries/categories": typeof queries_categories;
+  "queries/challengeInvites": typeof queries_challengeInvites;
   "queries/challenges": typeof queries_challenges;
   "queries/comments": typeof queries_comments;
   "queries/emailSequences": typeof queries_emailSequences;
diff --git a/packages/backend/actions/seed.ts b/packages/backend/actions/seed.ts
index 09a00e11..6507864a 100644
--- a/packages/backend/actions/seed.ts
+++ b/packages/backend/actions/seed.ts
@@ -528,6 +528,15 @@ async function seedChallenges(ctx: any, adminUserId: any, idempotent = false) {
       streakMinPoints: 20,
       weekCalcMethod: "sunday",
     },
+    {
+      name: "March Fitness 2026",
+      description: "The ultimate March Fitness challenge returns for 2026! 31 days of movement, streaks, and friendly competition.",
+      startDate: "2026-03-01",
+      endDate: "2026-03-31",
+      durationDays: 31,
+      streakMinPoints: 10,
+      weekCalcMethod: "sunday",
+    },
   ];
 
   const challengeIds = [];
diff --git a/packages/backend/auth.ts b/packages/backend/auth.ts
index 59f4bdd6..1e4a72db 100644
--- a/packages/backend/auth.ts
+++ b/packages/backend/auth.ts
@@ -11,7 +11,7 @@ import authConfig from "./auth.config";
  * This provides the adapter and HTTP route registration for Better Auth
  */
 export const authComponent = createClient<DataModel>(components.betterAuth, {
-  verbose: process.env.NODE_ENV === "development",
+  verbose: false,
 });
 
 /**
diff --git a/packages/backend/lib/defaultEmailPlan.ts b/packages/backend/lib/defaultEmailPlan.ts
index 945fd245..7f984af6 100644
--- a/packages/backend/lib/defaultEmailPlan.ts
+++ b/packages/backend/lib/defaultEmailPlan.ts
@@ -3,10 +3,18 @@
  *
  * Includes:
  * - Welcome email (on signup)
- * - Weekly recap emails (weeks 1-4)
+ * - Weekly recap emails (weeks 1-3)
  * - Challenge completion email
+ *
+ * All templates use the shared email template wrapper for consistent branding.
  */
 
+import {
+  wrapEmailTemplate,
+  emailButton,
+  emailCallout,
+} from "./emailTemplate";
+
 export interface DefaultEmailTemplate {
   name: string;
   subject: string;
@@ -20,262 +28,138 @@ export const DEFAULT_EMAIL_PLAN: DefaultEmailTemplate[] = [
   // Welcome Email - sent immediately on signup
   {
     name: "Welcome Email",
-    subject: "Welcome to the Challenge! Let's Get Started",
+    subject: "You're in. Let's go.",
     trigger: "on_signup",
     sendOnDay: null,
-    body: `
-<!DOCTYPE html>
-<html>
-<head>
-  <style>
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px; }
-    .header { background: linear-gradient(135deg, #f59e0b, #d97706); padding: 30px; border-radius: 12px; text-align: center; margin-bottom: 24px; }
-    .header h1 { color: white; margin: 0; font-size: 28px; }
-    .content { background: #fafafa; padding: 24px; border-radius: 8px; }
-    .highlight { background: #fef3c7; padding: 16px; border-radius: 8px; margin: 16px 0; border-left: 4px solid #f59e0b; }
-    .cta { display: inline-block; background: #f59e0b; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600; margin: 16px 0; }
-    .footer { text-align: center; color: #666; font-size: 14px; margin-top: 24px; }
-  </style>
-</head>
-<body>
-  <div class="header">
-    <h1>Welcome to the Challenge!</h1>
-  </div>
-  <div class="content">
-    <p>Hey there!</p>
-    <p>You're officially in! Welcome to the fitness challenge. We're excited to have you join us on this journey.</p>
-
-    <div class="highlight">
-      <strong>Quick Start Guide:</strong>
-      <ul>
-        <li>Log your first activity to get started</li>
-        <li>Check the leaderboard to see where you stand</li>
-        <li>Every activity counts toward your streak!</li>
-      </ul>
-    </div>
-
-    <p>The next 30 days are going to be transformative. Remember, consistency beats intensity. Even a small workout counts!</p>
-
-    <a href="#" class="cta">Log Your First Activity</a>
-
-    <p>Let's crush this together!</p>
-  </div>
-  <div class="footer">
-    <p>You're receiving this because you joined the challenge.</p>
-  </div>
-</body>
-</html>
-    `.trim(),
+    body: wrapEmailTemplate({
+      headerTitle: "Welcome to the Challenge",
+      content: `
+        <p style="margin: 0 0 16px;">You\u2019re officially in. The next 30 days are going to be worth it.</p>
+
+        ${emailCallout({
+          content: `<strong style="color: #e4e4e7;">Here\u2019s the deal:</strong>
+          <ul style="margin: 8px 0 0; padding-left: 18px; color: #a1a1aa;">
+            <li style="margin-bottom: 4px;">Log activities to earn points</li>
+            <li style="margin-bottom: 4px;">Keep your streak alive every day</li>
+            <li>Climb the leaderboard</li>
+          </ul>`,
+        })}
+
+        <p style="margin: 20px 0;">Consistency beats intensity. Even a 10-minute walk counts. Show up every day and you\u2019ll be surprised where you end up.</p>
+
+        <div style="text-align: center; margin: 28px 0;">
+          ${emailButton({ href: "#", label: "Log Your First Activity" })}
+        </div>
+      `,
+      footerText: "You\u2019re receiving this because you joined a challenge.",
+    }),
   },
 
   // Week 1 Recap - Day 7
   {
     name: "Week 1 Recap",
-    subject: "Week 1 Complete! Here's How You Did",
+    subject: "Week 1 done. Keep going.",
     trigger: "manual",
     sendOnDay: 7,
-    body: `
-<!DOCTYPE html>
-<html>
-<head>
-  <style>
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px; }
-    .header { background: linear-gradient(135deg, #10b981, #059669); padding: 30px; border-radius: 12px; text-align: center; margin-bottom: 24px; }
-    .header h1 { color: white; margin: 0; font-size: 28px; }
-    .header p { color: rgba(255,255,255,0.9); margin: 8px 0 0; }
-    .content { background: #fafafa; padding: 24px; border-radius: 8px; }
-    .stat-box { background: white; padding: 16px; border-radius: 8px; text-align: center; margin: 8px 0; border: 1px solid #e5e7eb; }
-    .stat-number { font-size: 32px; font-weight: 700; color: #10b981; }
-    .stat-label { color: #666; font-size: 14px; }
-    .highlight { background: #d1fae5; padding: 16px; border-radius: 8px; margin: 16px 0; border-left: 4px solid #10b981; }
-    .footer { text-align: center; color: #666; font-size: 14px; margin-top: 24px; }
-  </style>
-</head>
-<body>
-  <div class="header">
-    <h1>Week 1 Complete!</h1>
-    <p>You've made it through the first week</p>
-  </div>
-  <div class="content">
-    <p>Congratulations on completing your first week! The hardest part is starting, and you've already done that.</p>
-
-    <div class="highlight">
-      <strong>Week 1 Highlights:</strong>
-      <p>Check your dashboard to see your stats, points earned, and current streak. Every day you showed up counts!</p>
-    </div>
-
-    <p><strong>Pro tip for Week 2:</strong> Try to maintain your streak. Even on tough days, a short 10-minute activity keeps you in the game.</p>
-
-    <p>Three more weeks to go. You've got this!</p>
-  </div>
-  <div class="footer">
-    <p>Keep pushing - Week 2 awaits!</p>
-  </div>
-</body>
-</html>
-    `.trim(),
+    body: wrapEmailTemplate({
+      headerTitle: "Week 1 Complete",
+      headerSubtitle: "The hardest part is already behind you",
+      content: `
+        <p style="margin: 0 0 16px;">Seven days in. You showed up, and that\u2019s what matters.</p>
+
+        ${emailCallout({
+          content: `<strong style="color: #e4e4e7;">Pro tip for Week 2:</strong> Don\u2019t break the streak. Even on rough days, a quick 10-minute session keeps you in the game.`,
+        })}
+
+        <p style="margin: 20px 0;">Check your dashboard to see your stats, points, and streak. Three more weeks \u2014 you\u2019ve got this.</p>
+      `,
+      footerText: "Keep pushing \u2014 Week 2 awaits.",
+    }),
   },
 
   // Week 2 Recap - Day 14
   {
     name: "Week 2 Recap",
-    subject: "Halfway There! Week 2 Recap",
+    subject: "Halfway there.",
     trigger: "manual",
     sendOnDay: 14,
-    body: `
-<!DOCTYPE html>
-<html>
-<head>
-  <style>
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px; }
-    .header { background: linear-gradient(135deg, #8b5cf6, #7c3aed); padding: 30px; border-radius: 12px; text-align: center; margin-bottom: 24px; }
-    .header h1 { color: white; margin: 0; font-size: 28px; }
-    .header p { color: rgba(255,255,255,0.9); margin: 8px 0 0; }
-    .content { background: #fafafa; padding: 24px; border-radius: 8px; }
-    .progress-bar { background: #e5e7eb; border-radius: 999px; height: 12px; overflow: hidden; margin: 16px 0; }
-    .progress-fill { background: linear-gradient(90deg, #8b5cf6, #7c3aed); height: 100%; width: 50%; border-radius: 999px; }
-    .highlight { background: #ede9fe; padding: 16px; border-radius: 8px; margin: 16px 0; border-left: 4px solid #8b5cf6; }
-    .footer { text-align: center; color: #666; font-size: 14px; margin-top: 24px; }
-  </style>
-</head>
-<body>
-  <div class="header">
-    <h1>You're Halfway There!</h1>
-    <p>Week 2 is in the books</p>
-  </div>
-  <div class="content">
-    <p>Amazing work! You've hit the halfway point of the challenge. This is where habits start to form.</p>
-
-    <div class="progress-bar">
-      <div class="progress-fill"></div>
-    </div>
-    <p style="text-align: center; color: #666; font-size: 14px;">50% Complete</p>
-
-    <div class="highlight">
-      <strong>Midpoint Check-in:</strong>
-      <p>By now, you're probably starting to feel the routine. The activities that felt hard in week 1 might be getting easier. That's progress!</p>
-    </div>
-
-    <p><strong>Challenge for Week 3:</strong> Try a new activity type you haven't done yet, or push a little harder on your favorite one.</p>
-
-    <p>The finish line is closer than you think. Keep that momentum going!</p>
-  </div>
-  <div class="footer">
-    <p>Two weeks down, two to go!</p>
-  </div>
-</body>
-</html>
-    `.trim(),
+    body: wrapEmailTemplate({
+      headerTitle: "You\u2019re Halfway",
+      headerSubtitle: "This is where habits start to stick",
+      content: `
+        <p style="margin: 0 0 16px;">Two weeks down. The routine is setting in \u2014 what felt hard in week one is probably getting easier. That\u2019s progress.</p>
+
+        <!-- Progress -->
+        <div style="margin: 24px 0;">
+          <div style="background: #27272a; border-radius: 999px; height: 8px; overflow: hidden;">
+            <div style="background: linear-gradient(90deg, #6366f1, #d946ef); height: 100%; width: 50%; border-radius: 999px;"></div>
+          </div>
+          <p style="text-align: center; color: #52525b; font-size: 12px; margin: 8px 0 0; letter-spacing: 0.05em;">50% COMPLETE</p>
+        </div>
+
+        ${emailCallout({
+          content: `<strong style="color: #e4e4e7;">Week 3 challenge:</strong> Try an activity type you haven\u2019t done yet, or push harder on your favorite.`,
+          borderColor: "#d946ef",
+        })}
+
+        <p style="margin: 20px 0;">The finish line is closer than you think. Keep the momentum going.</p>
+      `,
+      footerText: "Two weeks down, two to go.",
+    }),
   },
 
   // Week 3 Recap - Day 21
   {
     name: "Week 3 Recap",
-    subject: "One Week Left! Week 3 Recap",
+    subject: "One week left. Finish strong.",
     trigger: "manual",
     sendOnDay: 21,
-    body: `
-<!DOCTYPE html>
-<html>
-<head>
-  <style>
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px; }
-    .header { background: linear-gradient(135deg, #f59e0b, #d97706); padding: 30px; border-radius: 12px; text-align: center; margin-bottom: 24px; }
-    .header h1 { color: white; margin: 0; font-size: 28px; }
-    .header p { color: rgba(255,255,255,0.9); margin: 8px 0 0; }
-    .content { background: #fafafa; padding: 24px; border-radius: 8px; }
-    .progress-bar { background: #e5e7eb; border-radius: 999px; height: 12px; overflow: hidden; margin: 16px 0; }
-    .progress-fill { background: linear-gradient(90deg, #f59e0b, #d97706); height: 100%; width: 75%; border-radius: 999px; }
-    .highlight { background: #fef3c7; padding: 16px; border-radius: 8px; margin: 16px 0; border-left: 4px solid #f59e0b; }
-    .footer { text-align: center; color: #666; font-size: 14px; margin-top: 24px; }
-  </style>
-</head>
-<body>
-  <div class="header">
-    <h1>Final Week Incoming!</h1>
-    <p>Week 3 complete - you're almost there</p>
-  </div>
-  <div class="content">
-    <p>Incredible! You've made it through three weeks. Just 7 more days and you'll have completed the entire challenge.</p>
-
-    <div class="progress-bar">
-      <div class="progress-fill"></div>
-    </div>
-    <p style="text-align: center; color: #666; font-size: 14px;">75% Complete</p>
-
-    <div class="highlight">
-      <strong>The Final Push:</strong>
-      <p>This is the home stretch. Your body has adapted, your routine is set, and you've proven you can do this. Now let's finish strong!</p>
-    </div>
-
-    <p><strong>Week 4 Goal:</strong> Give it everything you've got. No regrets. Make these last 7 days count!</p>
-
-    <p>Check the leaderboard - there's still time to climb those rankings!</p>
-  </div>
-  <div class="footer">
-    <p>One week to glory. Let's go!</p>
-  </div>
-</body>
-</html>
-    `.trim(),
+    body: wrapEmailTemplate({
+      headerTitle: "Final Week",
+      headerSubtitle: "Seven days to the finish line",
+      content: `
+        <p style="margin: 0 0 16px;">Three weeks done. Your body has adapted, your routine is locked in, and you\u2019ve proven you can do this.</p>
+
+        <!-- Progress -->
+        <div style="margin: 24px 0;">
+          <div style="background: #27272a; border-radius: 999px; height: 8px; overflow: hidden;">
+            <div style="background: linear-gradient(90deg, #6366f1, #d946ef); height: 100%; width: 75%; border-radius: 999px;"></div>
+          </div>
+          <p style="text-align: center; color: #52525b; font-size: 12px; margin: 8px 0 0; letter-spacing: 0.05em;">75% COMPLETE</p>
+        </div>
+
+        ${emailCallout({
+          content: `<strong style="color: #e4e4e7;">The final push:</strong> Give it everything. No regrets. Make these last 7 days count.`,
+        })}
+
+        <p style="margin: 20px 0;">Check the leaderboard \u2014 there\u2019s still time to climb.</p>
+      `,
+      footerText: "One week to go. Let\u2019s finish this.",
+    }),
   },
 
   // Challenge Complete - Day 30
   {
     name: "Challenge Complete",
-    subject: "You Did It! Challenge Complete",
+    subject: "You did it.",
     trigger: "manual",
     sendOnDay: 30,
-    body: `
-<!DOCTYPE html>
-<html>
-<head>
-  <style>
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px; }
-    .header { background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706); padding: 40px; border-radius: 12px; text-align: center; margin-bottom: 24px; }
-    .header h1 { color: white; margin: 0; font-size: 32px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
-    .header p { color: rgba(255,255,255,0.95); margin: 12px 0 0; font-size: 18px; }
-    .trophy { font-size: 64px; margin-bottom: 16px; }
-    .content { background: #fafafa; padding: 24px; border-radius: 8px; }
-    .highlight { background: #fef3c7; padding: 20px; border-radius: 8px; margin: 16px 0; text-align: center; }
-    .highlight h3 { margin: 0 0 8px; color: #92400e; }
-    .cta { display: inline-block; background: #f59e0b; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600; margin: 16px 0; }
-    .footer { text-align: center; color: #666; font-size: 14px; margin-top: 24px; }
-  </style>
-</head>
-<body>
-  <div class="header">
-    <div class="trophy">🏆</div>
-    <h1>CONGRATULATIONS!</h1>
-    <p>You completed the 30-day challenge!</p>
-  </div>
-  <div class="content">
-    <p>What an incredible achievement! You showed up, put in the work, and made it all the way to the finish line.</p>
-
-    <div class="highlight">
-      <h3>30 Days of Dedication</h3>
-      <p>You've built habits that can last a lifetime. The discipline you've shown is something to be truly proud of.</p>
-    </div>
-
-    <p>Take a moment to celebrate this accomplishment. You earned it!</p>
-
-    <p><strong>What's next?</strong></p>
-    <ul>
-      <li>Check your final standings on the leaderboard</li>
-      <li>Share your achievement with friends</li>
-      <li>Keep the momentum going - don't let those habits fade!</li>
-    </ul>
-
-    <a href="#" class="cta">View Final Results</a>
-
-    <p>Thank you for being part of this challenge. Until next time!</p>
-  </div>
-  <div class="footer">
-    <p>Congratulations, Champion! 🎉</p>
-  </div>
-</body>
-</html>
-    `.trim(),
+    body: wrapEmailTemplate({
+      headerTitle: "Challenge Complete",
+      headerSubtitle: "30 days of showing up",
+      content: `
+        <p style="margin: 0 0 20px; font-size: 16px; color: #e4e4e7;">You made it. That\u2019s not nothing \u2014 that\u2019s 30 days of discipline, consistency, and effort.</p>
+
+        <p style="margin: 0 0 20px;">You\u2019ve built habits that can last well beyond this challenge. The hard part was starting. You did that, and then you kept going.</p>
+
+        <div style="text-align: center; margin: 28px 0;">
+          ${emailButton({ href: "#", label: "View Final Results" })}
+        </div>
+
+        <p style="margin: 20px 0 0; color: #71717a; font-size: 13px;">Share your results, check the final leaderboard, and keep the momentum going.</p>
+      `,
+      footerText: "Thanks for being part of this. Until next time.",
+    }),
   },
 ];
 
diff --git a/packages/backend/lib/emailTemplate.ts b/packages/backend/lib/emailTemplate.ts
new file mode 100644
index 00000000..56e90be0
--- /dev/null
+++ b/packages/backend/lib/emailTemplate.ts
@@ -0,0 +1,153 @@
+/**
+ * Shared email template wrapper for all transactional emails.
+ *
+ * Matches the March Fitness brand: dark, bold, minimal with
+ * indigo-to-fuchsia gradient accents and uppercase typography.
+ *
+ * Used by: invite emails, email sequences, signup emails, etc.
+ */
+
+export const DEFAULT_FROM_EMAIL = "March Fitness <noreply@march.fit>";
+
+export interface EmailTemplateOptions {
+  /** The inner HTML content of the email */
+  content: string;
+  /** Optional large title shown in the header area */
+  headerTitle?: string;
+  /** Optional subtitle below the header title */
+  headerSubtitle?: string;
+  /** Footer text. Defaults to generic March Fitness copy */
+  footerText?: string;
+}
+
+/**
+ * Wraps email content in the March Fitness branded template.
+ */
+export function wrapEmailTemplate(options: EmailTemplateOptions): string {
+  const {
+    content,
+    headerTitle,
+    headerSubtitle,
+    footerText = "You\u2019re receiving this because you\u2019re part of a challenge on March Fitness.",
+  } = options;
+
+  const headerBlock = headerTitle
+    ? `
+      <!-- Header -->
+      <td style="padding: 40px 32px 32px; text-align: center;">
+        <h1 style="margin: 0; font-size: 28px; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; line-height: 1.2;">${headerTitle}</h1>
+        ${headerSubtitle ? `<p style="margin: 12px 0 0; font-size: 15px; color: #a1a1aa; line-height: 1.5;">${headerSubtitle}</p>` : ""}
+      </td>`
+    : `
+      <!-- Spacer -->
+      <td style="padding: 32px 32px 0;"></td>`;
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="color-scheme" content="dark" />
+  <meta name="supported-color-schemes" content="dark" />
+  <title>March Fitness</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #09090b; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; color: #e4e4e7;">
+  <!-- Wrapper -->
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #09090b;">
+    <tr>
+      <td align="center" style="padding: 32px 16px;">
+        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width: 520px;">
+
+          <!-- Logo -->
+          <tr>
+            <td style="padding: 0 0 24px; text-align: center;">
+              <span style="font-size: 11px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: #71717a;">march fitness</span>
+            </td>
+          </tr>
+
+          <!-- Gradient Divider -->
+          <tr>
+            <td style="padding: 0 0 0; height: 2px; background: linear-gradient(90deg, #6366f1, #d946ef); border-radius: 2px; font-size: 0; line-height: 0;">&nbsp;</td>
+          </tr>
+
+          <!-- Main Card -->
+          <tr>
+            <td>
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #18181b; border-radius: 0 0 12px 12px;">
+                <tr>
+                  ${headerBlock}
+                </tr>
+                <tr>
+                  <!-- Content -->
+                  <td style="padding: 0 32px 36px; font-size: 15px; line-height: 1.7; color: #d4d4d8;">
+                    ${content}
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+
+          <!-- Footer -->
+          <tr>
+            <td style="padding: 24px 8px; text-align: center;">
+              <p style="margin: 0; font-size: 12px; color: #52525b; line-height: 1.5;">${footerText}</p>
+              <p style="margin: 10px 0 0;">
+                <a href="https://march.fit" style="font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #6366f1; text-decoration: none;">march.fit</a>
+              </p>
+            </td>
+          </tr>
+
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}
+
+/**
+ * Creates a styled CTA button for use inside email content.
+ * Defaults to the brand indigo-purple.
+ */
+export function emailButton(options: {
+  href: string;
+  label: string;
+  color?: string;
+}): string {
+  const { href, label, color = "#6366f1" } = options;
+  return `<table role="presentation" cellpadding="0" cellspacing="0" style="margin: 0 auto;"><tr><td style="background: ${color}; border-radius: 8px;"><a href="${href}" style="display: inline-block; padding: 13px 32px; color: #ffffff; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 0.02em;">${label}</a></td></tr></table>`;
+}
+
+/**
+ * Creates a highlighted callout/tip box for use inside email content.
+ */
+export function emailCallout(options: {
+  content: string;
+  borderColor?: string;
+}): string {
+  const { content, borderColor = "#6366f1" } = options;
+  return `<div style="background: #27272a; padding: 16px 18px; border-radius: 8px; margin: 20px 0; border-left: 3px solid ${borderColor}; color: #d4d4d8; font-size: 14px; line-height: 1.6;">${content}</div>`;
+}
+
+/**
+ * Returns a preview-friendly sample of the email template (for admin UI).
+ */
+export function getEmailTemplatePreviewHtml(): string {
+  return wrapEmailTemplate({
+    headerTitle: "Welcome to the Challenge",
+    headerSubtitle: "Here\u2019s everything you need to get started",
+    content: `
+      <p style="margin: 0 0 16px;">Hey there \u2014 you\u2019re officially in. We\u2019re excited to have you join us for the next 30 days.</p>
+
+      ${emailCallout({ content: "<strong style='color: #e4e4e7;'>Quick tip:</strong> Log your first activity today to start building your streak. Even a short walk counts." })}
+
+      <p style="margin: 20px 0;">Every activity you log earns points and keeps your streak alive. Consistency beats intensity \u2014 show up every day and you\u2019ll be surprised where you end up.</p>
+
+      <div style="text-align: center; margin: 28px 0;">
+        ${emailButton({ href: "#", label: "Log Your First Activity" })}
+      </div>
+
+      <p style="margin: 20px 0 0; color: #71717a; font-size: 13px;">Check the leaderboard to see where you stand against the competition.</p>
+    `,
+  });
+}
diff --git a/packages/backend/mutations/challengeInvites.ts b/packages/backend/mutations/challengeInvites.ts
new file mode 100644
index 00000000..f43a3475
--- /dev/null
+++ b/packages/backend/mutations/challengeInvites.ts
@@ -0,0 +1,179 @@
+import { mutation } from "../_generated/server";
+import { v } from "convex/values";
+import { getCurrentUser } from "../lib/ids";
+import { resend } from "../lib/resend";
+import {
+  DEFAULT_FROM_EMAIL,
+  wrapEmailTemplate,
+  emailButton,
+} from "../lib/emailTemplate";
+
+function generateInviteCode(): string {
+  const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789";
+  let code = "";
+  for (let i = 0; i < 8; i++) {
+    code += chars[Math.floor(Math.random() * chars.length)];
+  }
+  return code;
+}
+
+/**
+ * Get or create an invite code for the current user in a challenge.
+ * Returns the existing code if one already exists.
+ */
+export const getOrCreateInviteCode = mutation({
+  args: {
+    challengeId: v.id("challenges"),
+  },
+  handler: async (ctx, args) => {
+    const user = await getCurrentUser(ctx);
+    if (!user) {
+      throw new Error("Not authenticated");
+    }
+
+    // Check user is a participant
+    const participation = await ctx.db
+      .query("userChallenges")
+      .withIndex("userChallengeUnique", (q) =>
+        q.eq("userId", user._id).eq("challengeId", args.challengeId)
+      )
+      .first();
+
+    if (!participation) {
+      throw new Error("Not participating in this challenge");
+    }
+
+    // Check if invite code already exists
+    const existing = await ctx.db
+      .query("challengeInvites")
+      .withIndex("userChallengeUnique", (q) =>
+        q.eq("userId", user._id).eq("challengeId", args.challengeId)
+      )
+      .first();
+
+    if (existing) {
+      return existing.code;
+    }
+
+    // Generate a unique code
+    let code = generateInviteCode();
+    // Check for collision (very unlikely with 8 chars from 55-char alphabet)
+    let existingCode = await ctx.db
+      .query("challengeInvites")
+      .withIndex("code", (q) => q.eq("code", code))
+      .first();
+    while (existingCode) {
+      code = generateInviteCode();
+      existingCode = await ctx.db
+        .query("challengeInvites")
+        .withIndex("code", (q) => q.eq("code", code))
+        .first();
+    }
+
+    await ctx.db.insert("challengeInvites", {
+      challengeId: args.challengeId,
+      userId: user._id,
+      code,
+      createdAt: Date.now(),
+    });
+
+    return code;
+  },
+});
+
+/**
+ * Send invite emails to a list of email addresses.
+ * Gets or creates the user's invite code and sends a branded email via Resend.
+ */
+export const sendInviteEmails = mutation({
+  args: {
+    challengeId: v.id("challenges"),
+    emails: v.array(v.string()),
+    origin: v.string(),
+  },
+  handler: async (ctx, args) => {
+    const user = await getCurrentUser(ctx);
+    if (!user) {
+      throw new Error("Not authenticated");
+    }
+
+    // Cap at 10 emails per call
+    const emails = args.emails.slice(0, 10);
+
+    if (emails.length === 0) {
+      return { sentCount: 0, failedCount: 0 };
+    }
+
+    const challenge = await ctx.db.get(args.challengeId);
+    if (!challenge) {
+      throw new Error("Challenge not found");
+    }
+
+    // Get or create invite code (inline pattern from getOrCreateInviteCode)
+    let invite = await ctx.db
+      .query("challengeInvites")
+      .withIndex("userChallengeUnique", (q) =>
+        q.eq("userId", user._id).eq("challengeId", args.challengeId)
+      )
+      .first();
+
+    if (!invite) {
+      let code = generateInviteCode();
+      let existingCode = await ctx.db
+        .query("challengeInvites")
+        .withIndex("code", (q) => q.eq("code", code))
+        .first();
+      while (existingCode) {
+        code = generateInviteCode();
+        existingCode = await ctx.db
+          .query("challengeInvites")
+          .withIndex("code", (q) => q.eq("code", code))
+          .first();
+      }
+      const inviteId = await ctx.db.insert("challengeInvites", {
+        challengeId: args.challengeId,
+        userId: user._id,
+        code,
+        createdAt: Date.now(),
+      });
+      invite = await ctx.db.get(inviteId);
+    }
+
+    const inviteUrl = `${args.origin}/challenges/${args.challengeId}/invite/${invite!.code}`;
+    const inviterName = user.name || user.username;
+
+    let sentCount = 0;
+    let failedCount = 0;
+
+    for (const email of emails) {
+      try {
+        const html = wrapEmailTemplate({
+          headerTitle: "You\u2019re Invited",
+          headerSubtitle: `${inviterName} wants you to join ${challenge.name}`,
+          content: `
+            <p style="margin: 0 0 20px;">You\u2019ve been invited to a fitness challenge on March Fitness. Join the competition and see where you stack up.</p>
+
+            <div style="text-align: center; margin: 28px 0;">
+              ${emailButton({ href: inviteUrl, label: "Join the Challenge" })}
+            </div>
+
+            <p style="color: #52525b; font-size: 12px; margin: 20px 0 0;">Or copy this link: ${inviteUrl}</p>
+          `,
+          footerText: "You were invited to join a challenge on March Fitness.",
+        });
+
+        await resend.sendEmail(ctx, {
+          from: DEFAULT_FROM_EMAIL,
+          to: email.trim(),
+          subject: `${inviterName} invited you to ${challenge.name}`,
+          html,
+        });
+        sentCount++;
+      } catch {
+        failedCount++;
+      }
+    }
+
+    return { sentCount, failedCount };
+  },
+});
diff --git a/packages/backend/mutations/emailSequences.ts b/packages/backend/mutations/emailSequences.ts
index a523bfd4..88c491b0 100644
--- a/packages/backend/mutations/emailSequences.ts
+++ b/packages/backend/mutations/emailSequences.ts
@@ -3,11 +3,9 @@ import { v } from "convex/values";
 import type { Id } from "../_generated/dataModel";
 import { resend } from "../lib/resend";
 import { DEFAULT_EMAIL_PLAN } from "../lib/defaultEmailPlan";
+import { DEFAULT_FROM_EMAIL } from "../lib/emailTemplate";
 import { getCurrentUser } from "../lib/ids";
 
-// Default from address - should be configured per deployment
-const DEFAULT_FROM_EMAIL = "March Fitness <noreply@march.fit>";
-
 // Helper to check if user is challenge admin
 async function requireChallengeAdmin(
   ctx: { db: any; auth: any },
diff --git a/packages/backend/mutations/participations.ts b/packages/backend/mutations/participations.ts
index 301f1713..e1313857 100644
--- a/packages/backend/mutations/participations.ts
+++ b/packages/backend/mutations/participations.ts
@@ -37,6 +37,7 @@ export const join = mutation({
   args: {
     challengeId: v.id("challenges"),
     invitedByUserId: v.optional(v.id("users")),
+    inviteCode: v.optional(v.string()),
   },
   handler: async (ctx, args) => {
     // Get the current user from auth
@@ -79,12 +80,12 @@ export const join = mutation({
       });
 
       user = await ctx.db.get(userId);
-      
+
       if (!user) {
         console.error("Failed to retrieve created user");
         throw new Error("Failed to create user record. Please try again.");
       }
-      
+
       console.log("Successfully created user via fallback in join mutation:", userId);
     }
 
@@ -100,12 +101,25 @@ export const join = mutation({
       throw new Error("Already joined this challenge");
     }
 
+    // Resolve inviter from invite code if provided
+    let invitedByUserId = args.invitedByUserId;
+    const inviteCode = args.inviteCode;
+    if (inviteCode && !invitedByUserId) {
+      const invite = await ctx.db
+        .query("challengeInvites")
+        .withIndex("code", (q) => q.eq("code", inviteCode))
+        .first();
+      if (invite && invite.challengeId === args.challengeId) {
+        invitedByUserId = invite.userId;
+      }
+    }
+
     // Block self-join for private challenges (requires admin invitation)
     const challenge = await ctx.db.get(args.challengeId);
     if (!challenge) {
       throw new Error("Challenge not found");
     }
-    if (challenge.visibility === "private") {
+    if (challenge.visibility === "private" && !invitedByUserId) {
       throw new Error("This is a private challenge. You need an invitation to join.");
     }
 
@@ -121,7 +135,7 @@ export const join = mutation({
     const participationId = await ctx.db.insert("userChallenges", {
       challengeId: args.challengeId,
       userId: user._id,
-      invitedByUserId: args.invitedByUserId,
+      invitedByUserId: invitedByUserId,
       joinedAt: now,
       totalPoints: 0,
       currentStreak: 0,
@@ -130,6 +144,39 @@ export const join = mutation({
       updatedAt: now,
     });
 
+    // Auto-create mutual follow relationships if joined via invite
+    if (invitedByUserId && invitedByUserId !== user._id) {
+      // Invitee follows inviter
+      const existingFollow1 = await ctx.db
+        .query("follows")
+        .withIndex("followerFollowing", (q) =>
+          q.eq("followerId", user._id).eq("followingId", invitedByUserId)
+        )
+        .first();
+      if (!existingFollow1) {
+        await ctx.db.insert("follows", {
+          followerId: user._id,
+          followingId: invitedByUserId,
+          createdAt: now,
+        });
+      }
+
+      // Inviter follows invitee
+      const existingFollow2 = await ctx.db
+        .query("follows")
+        .withIndex("followerFollowing", (q) =>
+          q.eq("followerId", invitedByUserId).eq("followingId", user._id)
+        )
+        .first();
+      if (!existingFollow2) {
+        await ctx.db.insert("follows", {
+          followerId: invitedByUserId,
+          followingId: user._id,
+          createdAt: now,
+        });
+      }
+    }
+
     // Trigger on_signup emails
     const emailSequences = await ctx.db
       .query("emailSequences")
diff --git a/packages/backend/mutations/users.ts b/packages/backend/mutations/users.ts
index c7f2679a..63adbfc4 100644
--- a/packages/backend/mutations/users.ts
+++ b/packages/backend/mutations/users.ts
@@ -214,6 +214,8 @@ export const updateUser = mutation({
     email: v.optional(v.string()),
     name: v.optional(v.string()),
     avatarUrl: v.optional(v.string()),
+    gender: v.optional(v.union(v.literal("male"), v.literal("female"))),
+    age: v.optional(v.number()),
   },
   handler: async (ctx, args) => {
     const { userId, ...updates } = args;
diff --git a/packages/backend/queries/challengeInvites.ts b/packages/backend/queries/challengeInvites.ts
new file mode 100644
index 00000000..d3d2578f
--- /dev/null
+++ b/packages/backend/queries/challengeInvites.ts
@@ -0,0 +1,81 @@
+import { query } from "../_generated/server";
+import { v } from "convex/values";
+import { getCurrentUser } from "../lib/ids";
+import { coerceDateOnlyToString } from "../lib/dateOnly";
+
+/**
+ * Resolve an invite code to get challenge and inviter info.
+ * Public query - no auth required (so unauthenticated users can see the invite page).
+ */
+export const resolveInviteCode = query({
+  args: {
+    code: v.string(),
+  },
+  handler: async (ctx, args) => {
+    const invite = await ctx.db
+      .query("challengeInvites")
+      .withIndex("code", (q) => q.eq("code", args.code))
+      .first();
+
+    if (!invite) {
+      return null;
+    }
+
+    const [challenge, inviter] = await Promise.all([
+      ctx.db.get(invite.challengeId),
+      ctx.db.get(invite.userId),
+    ]);
+
+    if (!challenge || !inviter) {
+      return null;
+    }
+
+    // Get participant count
+    const participations = await ctx.db
+      .query("userChallenges")
+      .withIndex("challengeId", (q) => q.eq("challengeId", challenge._id))
+      .collect();
+
+    return {
+      challengeId: challenge._id,
+      challengeName: challenge.name,
+      challengeDescription: challenge.description,
+      startDate: coerceDateOnlyToString(challenge.startDate),
+      endDate: coerceDateOnlyToString(challenge.endDate),
+      durationDays: challenge.durationDays,
+      streakMinPoints: challenge.streakMinPoints,
+      participantCount: participations.length,
+      inviter: {
+        id: inviter._id,
+        name: inviter.name,
+        username: inviter.username,
+        avatarUrl: inviter.avatarUrl,
+      },
+    };
+  },
+});
+
+/**
+ * Get the current user's invite code for a challenge (read-only).
+ * Returns null if no code has been generated yet.
+ */
+export const getMyInviteCode = query({
+  args: {
+    challengeId: v.id("challenges"),
+  },
+  handler: async (ctx, args) => {
+    const user = await getCurrentUser(ctx);
+    if (!user) {
+      return null;
+    }
+
+    const invite = await ctx.db
+      .query("challengeInvites")
+      .withIndex("userChallengeUnique", (q) =>
+        q.eq("userId", user._id).eq("challengeId", args.challengeId)
+      )
+      .first();
+
+    return invite?.code ?? null;
+  },
+});
diff --git a/packages/backend/queries/emailSequences.ts b/packages/backend/queries/emailSequences.ts
index f33e6e02..d88e1a6c 100644
--- a/packages/backend/queries/emailSequences.ts
+++ b/packages/backend/queries/emailSequences.ts
@@ -1,6 +1,7 @@
 import { query } from "../_generated/server";
 import { v } from "convex/values";
 import { DEFAULT_EMAIL_PLAN } from "../lib/defaultEmailPlan";
+import { getEmailTemplatePreviewHtml } from "../lib/emailTemplate";
 
 /**
  * List all email sequences for a challenge
@@ -154,6 +155,16 @@ export const getUnsentParticipants = query({
   },
 });
 
+/**
+ * Get the base email template preview HTML (for admin UI)
+ */
+export const getEmailTemplatePreview = query({
+  args: {},
+  handler: async () => {
+    return { html: getEmailTemplatePreviewHtml() };
+  },
+});
+
 /**
  * Get the default email templates with info about which are already added
  */
diff --git a/packages/backend/schema.ts b/packages/backend/schema.ts
index c5f029a5..711b97b7 100644
--- a/packages/backend/schema.ts
+++ b/packages/backend/schema.ts
@@ -8,6 +8,8 @@ export default defineSchema({
     email: v.string(),
     name: v.optional(v.string()),
     avatarUrl: v.optional(v.string()),
+    gender: v.optional(v.union(v.literal("male"), v.literal("female"))),
+    age: v.optional(v.number()),
     role: v.union(v.literal("user"), v.literal("admin")),
     createdAt: v.number(),
     updatedAt: v.number(),
@@ -438,6 +440,16 @@ export default defineSchema({
     .index("invitedById", ["invitedById"])
     .index("invitedUserId", ["invitedUserId"]),
 
+  // Challenge Invites - personal invite codes per user per challenge
+  challengeInvites: defineTable({
+    challengeId: v.id("challenges"),
+    userId: v.id("users"),
+    code: v.string(), // Short alphanumeric invite code
+    createdAt: v.number(),
+  })
+    .index("code", ["code"])
+    .index("userChallengeUnique", ["userId", "challengeId"]),
+
   // Email Sequences - email templates per challenge
   emailSequences: defineTable({
     challengeId: v.id("challenges"),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index afaaef08..ea7306cf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ importers:
     devDependencies:
       '@convex-dev/better-auth':
         specifier: ^0.10.6
-        version: 0.10.6(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@standard-schema/spec@1.1.0)(better-auth@1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(better-call@1.1.5(zod@4.2.1))(convex@1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4))(nanostores@1.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.2)
+        version: 0.10.6(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@standard-schema/spec@1.1.0)(better-auth@1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11))(better-call@1.1.5(zod@4.2.1))(convex@1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4))(nanostores@1.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.2)
       '@manypkg/cli':
         specifier: ^0.25.1
         version: 0.25.1
@@ -41,7 +41,7 @@ importers:
     dependencies:
       '@convex-dev/better-auth':
         specifier: ^0.10.6
-        version: 0.10.6(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@standard-schema/spec@1.1.0)(better-auth@1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vitest@1.6.1))(better-call@1.1.5(zod@4.1.5))(convex@1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4))(nanostores@1.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.2)
+        version: 0.10.6(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@standard-schema/spec@1.1.0)(better-auth@1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11)(vitest@1.6.1))(better-call@1.1.5(zod@4.1.5))(convex@1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4))(nanostores@1.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.2)
       '@radix-ui/react-alert-dialog':
         specifier: ^1.1.15
         version: 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -89,7 +89,7 @@ importers:
         version: 2.26.1
       better-auth:
         specifier: ^1.4.7
-        version: 1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vitest@1.6.1)
+        version: 1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11)(vitest@1.6.1)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -234,7 +234,7 @@ importers:
     dependencies:
       '@convex-dev/better-auth':
         specifier: ^0.10.6
-        version: 0.10.6(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@standard-schema/spec@1.1.0)(better-auth@1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(better-call@1.1.5(zod@4.2.1))(convex@1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4))(nanostores@1.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.2)
+        version: 0.10.6(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@standard-schema/spec@1.1.0)(better-auth@1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11))(better-call@1.1.5(zod@4.2.1))(convex@1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4))(nanostores@1.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.2)
       '@convex-dev/migrations':
         specifier: ^0.3.1
         version: 0.3.1(convex@1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4))
@@ -5356,6 +5356,16 @@ packages:
   sentence-case@2.1.1:
     resolution: {integrity: sha512-ENl7cYHaK/Ktwk5OTD+aDbQ3uC8IByu/6Bkg+HDv8Mm+XnBnppVNalcfJTNsp1ibstKh030/JKQQWglDvtKwEQ==}
 
+  seroval-plugins@1.5.0:
+    resolution: {integrity: sha512-EAHqADIQondwRZIdeW2I636zgsODzoBDwb3PT/+7TLDWyw1Dy/Xv7iGUIEXXav7usHDE9HVhOU61irI3EnyyHA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      seroval: ^1.0
+
+  seroval@1.5.0:
+    resolution: {integrity: sha512-OE4cvmJ1uSPrKorFIH9/w/Qwuvi/IMcGbv5RKgcJ/zjA/IohDLU6SVaxFN9FwajbP7nsX0dQqMDes1whk3y+yw==}
+    engines: {node: '>=10'}
+
   set-cookie-parser@2.7.2:
     resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
 
@@ -5432,6 +5442,9 @@ packages:
     resolution: {integrity: sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==}
     engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
 
+  solid-js@1.9.11:
+    resolution: {integrity: sha512-WEJtcc5mkh/BnHA6Yrg4whlF8g6QwpmXXRg4P2ztPmcKeHHlH4+djYecBLhSpecZY2RRECXYUwIc/C2r3yzQ4Q==}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -6355,32 +6368,32 @@ snapshots:
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
       '@standard-schema/spec': 1.1.0
-      better-call: 1.1.5(zod@4.1.5)
+      better-call: 1.1.5(zod@4.2.1)
       jose: 6.1.3
       kysely: 0.28.9
       nanostores: 1.1.0
       zod: 4.2.1
 
-  '@better-auth/passkey@1.4.7(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-auth@1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vitest@1.6.1))(better-call@1.1.5(zod@4.1.5))(nanostores@1.1.0)':
+  '@better-auth/passkey@1.4.7(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-auth@1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11)(vitest@1.6.1))(better-call@1.1.5(zod@4.1.5))(nanostores@1.1.0)':
     dependencies:
       '@better-auth/core': 1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0)
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
       '@simplewebauthn/browser': 13.2.2
       '@simplewebauthn/server': 13.2.2
-      better-auth: 1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vitest@1.6.1)
+      better-auth: 1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11)(vitest@1.6.1)
       better-call: 1.1.5(zod@4.1.5)
       nanostores: 1.1.0
       zod: 4.2.1
 
-  '@better-auth/passkey@1.4.7(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-auth@1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(better-call@1.1.5(zod@4.2.1))(nanostores@1.1.0)':
+  '@better-auth/passkey@1.4.7(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-auth@1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11))(better-call@1.1.5(zod@4.2.1))(nanostores@1.1.0)':
     dependencies:
       '@better-auth/core': 1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0)
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
       '@simplewebauthn/browser': 13.2.2
       '@simplewebauthn/server': 13.2.2
-      better-auth: 1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      better-auth: 1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11)
       better-call: 1.1.5(zod@4.2.1)
       nanostores: 1.1.0
       zod: 4.2.1
@@ -6442,11 +6455,11 @@ snapshots:
       csstype: 3.1.3
     optional: true
 
-  '@convex-dev/better-auth@0.10.6(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@standard-schema/spec@1.1.0)(better-auth@1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vitest@1.6.1))(better-call@1.1.5(zod@4.1.5))(convex@1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4))(nanostores@1.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.2)':
+  '@convex-dev/better-auth@0.10.6(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@standard-schema/spec@1.1.0)(better-auth@1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11)(vitest@1.6.1))(better-call@1.1.5(zod@4.1.5))(convex@1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4))(nanostores@1.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.2)':
     dependencies:
-      '@better-auth/passkey': 1.4.7(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-auth@1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vitest@1.6.1))(better-call@1.1.5(zod@4.1.5))(nanostores@1.1.0)
+      '@better-auth/passkey': 1.4.7(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-auth@1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11)(vitest@1.6.1))(better-call@1.1.5(zod@4.1.5))(nanostores@1.1.0)
       '@better-fetch/fetch': 1.1.21
-      better-auth: 1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vitest@1.6.1)
+      better-auth: 1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11)(vitest@1.6.1)
       common-tags: 1.8.2
       convex: 1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
       convex-helpers: 0.1.106(@standard-schema/spec@1.1.0)(convex@1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4))(react@19.2.4)(typescript@5.9.2)(zod@4.2.1)
@@ -6466,11 +6479,11 @@ snapshots:
       - nanostores
       - typescript
 
-  '@convex-dev/better-auth@0.10.6(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@standard-schema/spec@1.1.0)(better-auth@1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(better-call@1.1.5(zod@4.2.1))(convex@1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4))(nanostores@1.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.2)':
+  '@convex-dev/better-auth@0.10.6(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@standard-schema/spec@1.1.0)(better-auth@1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11))(better-call@1.1.5(zod@4.2.1))(convex@1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4))(nanostores@1.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.2)':
     dependencies:
-      '@better-auth/passkey': 1.4.7(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-auth@1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(better-call@1.1.5(zod@4.2.1))(nanostores@1.1.0)
+      '@better-auth/passkey': 1.4.7(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-auth@1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11))(better-call@1.1.5(zod@4.2.1))(nanostores@1.1.0)
       '@better-fetch/fetch': 1.1.21
-      better-auth: 1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      better-auth: 1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11)
       common-tags: 1.8.2
       convex: 1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
       convex-helpers: 0.1.106(@standard-schema/spec@1.1.0)(convex@1.28.0(@clerk/clerk-react@5.45.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4))(react@19.2.4)(typescript@5.9.2)(zod@4.2.1)
@@ -8835,7 +8848,7 @@ snapshots:
 
   basic-ftp@5.0.5: {}
 
-  better-auth@1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vitest@1.6.1):
+  better-auth@1.4.7(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11)(vitest@1.6.1):
     dependencies:
       '@better-auth/core': 1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0)
       '@better-auth/telemetry': 1.4.7(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))
@@ -8853,9 +8866,10 @@ snapshots:
       next: 16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
+      solid-js: 1.9.11
       vitest: 1.6.1(@types/node@20.19.11)(@vitest/browser@1.6.1)(lightningcss@1.30.1)
 
-  better-auth@1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  better-auth@1.4.7(next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11):
     dependencies:
       '@better-auth/core': 1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0)
       '@better-auth/telemetry': 1.4.7(@better-auth/core@1.4.7(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.5(zod@4.2.1))(jose@6.1.3)(kysely@0.28.9)(nanostores@1.1.0))
@@ -8873,6 +8887,7 @@ snapshots:
       next: 16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
+      solid-js: 1.9.11
 
   better-call@1.1.5(zod@4.1.5):
     dependencies:
@@ -11711,6 +11726,14 @@ snapshots:
       no-case: 2.3.2
       upper-case-first: 1.1.2
 
+  seroval-plugins@1.5.0(seroval@1.5.0):
+    dependencies:
+      seroval: 1.5.0
+    optional: true
+
+  seroval@1.5.0:
+    optional: true
+
   set-cookie-parser@2.7.2: {}
 
   set-function-length@1.2.2:
@@ -11834,6 +11857,13 @@ snapshots:
       ip-address: 10.0.1
       smart-buffer: 4.2.0
 
+  solid-js@1.9.11:
+    dependencies:
+      csstype: 3.1.3
+      seroval: 1.5.0
+      seroval-plugins: 1.5.0(seroval@1.5.0)
+    optional: true
+
   source-map-js@1.2.1: {}
 
   source-map@0.6.1: {}
diff --git a/tasks/2026-02-09-challenge-invite-links.md b/tasks/2026-02-09-challenge-invite-links.md
new file mode 100644
index 00000000..50fe0af2
--- /dev/null
+++ b/tasks/2026-02-09-challenge-invite-links.md
@@ -0,0 +1,33 @@
+# Challenge Invite Links
+
+**Date:** 2026-02-09
+**Description:** Users get a personal invite link after joining a challenge that they can share with friends. Track who invited whom, auto-create follow relationships, and pin an invite card to the feed until the challenge starts.
+
+## Requirements
+
+- [x] Add `challengeInvites` table to persist invite codes per user per challenge
+- [x] Backend mutation to generate/get an invite code when user is a participant
+- [x] Backend query to resolve an invite code to the inviter and challenge
+- [x] Update `join` mutation to accept `inviteCode`, record `invitedByUserId`, and auto-follow (both directions)
+- [x] Frontend invite accept page at `/challenges/[id]/invite/[code]`
+- [x] `InviteCard` component shown above the feed until challenge starts
+- [x] Share via Web Share API or clipboard copy
+
+## Implementation Notes
+
+### Schema
+- New `challengeInvites` table: `{ challengeId, userId, code }` with index on `code` and composite `(userId, challengeId)`.
+
+### Invite Code Generation
+- Short random alphanumeric code (8 chars) generated on first request per user per challenge.
+- Idempotent: returns existing code if one exists.
+
+### Join Flow with Invite
+- `/challenges/[id]/invite/[code]` page resolves the invite and shows challenge info + join button.
+- On join: `invitedByUserId` is set from the invite code's owner.
+- Auto-create mutual follow (inviter follows invitee and invitee follows inviter).
+
+### Invite Card in Feed
+- Pinned above the activity feed when `now < challenge.startDate`.
+- Shows the user's invite link with copy/share buttons.
+- Dismissed once challenge starts (no dismiss button needed - it auto-hides).
diff --git a/tasks/2026-02-09-onboarding-checklist.md b/tasks/2026-02-09-onboarding-checklist.md
new file mode 100644
index 00000000..99c3fa59
--- /dev/null
+++ b/tasks/2026-02-09-onboarding-checklist.md
@@ -0,0 +1,30 @@
+# Onboarding Checklist Card
+
+**Date:** 2026-02-09
+**Description:** Replace the simple InviteCard on the dashboard with a 4-step onboarding checklist that guides users through setup before a challenge starts.
+
+## Checklist Steps
+
+- [x] **Fill out your bio** — Gender (male/female) + age. Optional/skippable.
+- [x] **Complete payment** — Only shown if challenge requires payment. Reuses Stripe checkout pattern.
+- [x] **Link Strava** — Optional. Reuses existing StravaConnectButton. Shows "Connected" when done.
+- [x] **Invite friends** — Share invite link (copy/share) + enter emails to send invites via Resend.
+
+## Implementation
+
+- [x] Schema: Added `gender` and `age` optional fields to `users` table
+- [x] Extended `updateUser` mutation with `gender` and `age` args
+- [x] Added `sendInviteEmails` mutation to `challengeInvites.ts`
+- [x] Created `OnboardingCard` component at `apps/web/components/dashboard/onboarding-card.tsx`
+- [x] Replaced `InviteCard` with `OnboardingCard` in dashboard page
+- [x] OnboardingCard auto-hides when all completable steps are done and user dismisses
+
+## Files Changed
+
+| File | Action |
+|------|--------|
+| `packages/backend/schema.ts` | Modified — added `gender`, `age` to users |
+| `packages/backend/mutations/users.ts` | Modified — extended `updateUser` args |
+| `packages/backend/mutations/challengeInvites.ts` | Modified — added `sendInviteEmails` |
+| `apps/web/components/dashboard/onboarding-card.tsx` | Created — OnboardingCard component |
+| `apps/web/app/challenges/[id]/dashboard/page.tsx` | Modified — swapped InviteCard for OnboardingCard |
diff --git a/tasks/2026-02-09-shared-email-template.md b/tasks/2026-02-09-shared-email-template.md
new file mode 100644
index 00000000..4c230ab2
--- /dev/null
+++ b/tasks/2026-02-09-shared-email-template.md
@@ -0,0 +1,38 @@
+# 2026-02-09 - Shared Email Template
+
+Create a unified email template wrapper used by all transactional emails in the app, and add an admin UI section to preview it.
+
+## Tasks
+
+- [x] Create shared email template wrapper (`packages/backend/lib/emailTemplate.ts`)
+  - `wrapEmailTemplate()` - wraps content in branded March Fitness layout
+  - `emailButton()` - styled CTA button helper
+  - `emailCallout()` - highlighted callout box helper
+  - `getEmailTemplatePreviewHtml()` - returns preview HTML for admin UI
+  - Exports `DEFAULT_FROM_EMAIL` constant used across all email senders
+
+- [x] Update default email plan to use shared template
+  - All 5 default templates (Welcome, Week 1-3 Recaps, Challenge Complete) now use `wrapEmailTemplate()`
+  - Consistent branding, spacing, and footer across all emails
+
+- [x] Update invite email to use shared template
+  - `challengeInvites.ts` now imports from `emailTemplate.ts`
+  - Invite emails use indigo gradient header with branded layout
+  - Removed duplicate `DEFAULT_FROM_EMAIL` constant
+
+- [x] Update email sequences mutation to use shared `DEFAULT_FROM_EMAIL`
+  - Removed local constant, imports from `emailTemplate.ts`
+
+- [x] Add email template preview in admin emails page
+  - Toggle between "Email Sequences" and "Email Template" views
+  - Template view shows info panel with component breakdown and usage list
+  - Full iframe preview of the base template
+  - New query `getEmailTemplatePreview` returns preview HTML
+
+## Implementation Notes
+
+- The template uses inline styles for maximum email client compatibility
+- Gray background (`#f4f4f5`) with white content card and rounded corners
+- Header banner supports customizable gradients per email type
+- "March Fitness" branding in header and footer link to march.fit
+- Template is pure HTML generation (no React) since it runs on the Convex backend