diff --git a/web/app/groups/page.tsx b/web/app/groups/page.tsx
new file mode 100644
index 0000000..8bf5c28
--- /dev/null
+++ b/web/app/groups/page.tsx
@@ -0,0 +1,36 @@
+'use client'
+import Link from 'next/link'
+export default function GroupsPage() {
+  return (
+    <main className="min-h-screen bg-white">
+      <header className="sticky top-0 z-50 bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="text-2xl font-bold text-gray-900">MoreThanADiagnosis</Link>
+            <nav className="hidden md:flex gap-8">
+              <Link href="/" className="text-gray-600 hover:text-blue-600">Home</Link>
+              <Link href="/groups" className="text-gray-600 hover:text-blue-600 font-semibold text-blue-600">Support Circle</Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+      <section className="bg-gradient-to-br from-purple-50 to-pink-50 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h1 className="text-5xl font-bold text-gray-900 mb-6">Support Circle</h1>
+          <p className="text-2xl text-gray-700">The Living Room - Our Private Community</p>
+        </div>
+      </section>
+      <section className="py-20 bg-white border-t border-gray-200">
+        <div className="max-w-3xl mx-auto px-4">
+          <p className="text-xl text-gray-700 mb-8">Join The Living Room, our exclusive support circle for members. A safe space to share your journey, connect with others, and find support.</p>
+          <a href="https://www.morethanadiagnosis.org/group/the-living-room/discussion" className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">Enter The Living Room</a>
+        </div>
+      </section>
+      <footer className="bg-gray-900 text-white py-12 border-t border-gray-800">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
+        </div>
+      </footer>
+    </main>
+  )
+}
diff --git a/web/app/happymail/page.tsx b/web/app/happymail/page.tsx
new file mode 100644
index 0000000..9dcd938
--- /dev/null
+++ b/web/app/happymail/page.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import Link from 'next/link'
+
+export default function HappyMailPage() {
+  return (
+    <main className="min-h-screen bg-white">
+      <header className="sticky top-0 z-50 bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="text-2xl font-bold text-gray-900">MoreThanADiagnosis</Link>
+            <nav className="hidden md:flex gap-8">
+              <Link href="/" className="text-gray-600 hover:text-blue-600">Home</Link>
+              <Link href="/happymail" className="text-gray-600 hover:text-blue-600 font-semibold text-blue-600">Happy Mail</Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      <section className="bg-gradient-to-br from-pink-50 to-red-50 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div className="text-7xl mb-6">💌</div>
+          <h1 className="text-5xl font-bold text-gray-900 mb-6">Happy Mail</h1>
+          <p className="text-2xl text-gray-700">You're seen, supported, and not alone</p>
+        </div>
+      </section>
+
+      <section className="py-20 bg-white border-t border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="max-w-3xl mx-auto">
+            <h2 className="text-4xl font-bold text-gray-900 mb-6">About Happy Mail</h2>
+            <p className="text-xl text-gray-700 mb-8">
+              Happy Mail is a small way to remind you: you're seen, supported, and not alone. Nerisa sends free, joy-filled snail mail to folks navigating the hard stuff - just because.
+            </p>
+
+            <h3 className="text-2xl font-bold text-gray-900 mb-4">Who Can Receive?</h3>
+            <ul className="space-y-3 text-lg text-gray-700 mb-12">
+              <li>✓ Cancer diagnosis or treatment</li>
+              <li>✓ Chronic illness or rare disease</li>
+              <li>✓ Medical limbo or recovery</li>
+            </ul>
+
+            <div className="text-center">
+              <a href="https://www.morethanadiagnosis.org/happymail" className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">
+                Order Happy Mail
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <footer className="bg-gray-900 text-white py-12 border-t border-gray-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
+        </div>
+      </footer>
+    </main>
+  )
+}
diff --git a/web/app/inlovingmemory/page.tsx b/web/app/inlovingmemory/page.tsx
new file mode 100644
index 0000000..c7eaf57
--- /dev/null
+++ b/web/app/inlovingmemory/page.tsx
@@ -0,0 +1,37 @@
+'use client'
+import Link from 'next/link'
+export default function MemoryPage() {
+  return (
+    <main className="min-h-screen bg-white">
+      <header className="sticky top-0 z-50 bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="text-2xl font-bold text-gray-900">MoreThanADiagnosis</Link>
+            <nav className="hidden md:flex gap-8">
+              <Link href="/" className="text-gray-600 hover:text-blue-600">Home</Link>
+              <Link href="/inlovingmemory" className="text-gray-600 hover:text-blue-600 font-semibold text-blue-600">In Loving Memory</Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+      <section className="bg-gradient-to-br from-gray-100 to-blue-100 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div className="text-6xl mb-6">🕊️</div>
+          <h1 className="text-5xl font-bold text-gray-900 mb-6">Wings of Remembrance</h1>
+          <p className="text-2xl text-gray-700">Honor those who shaped our journey</p>
+        </div>
+      </section>
+      <section className="py-20 bg-white border-t border-gray-200">
+        <div className="max-w-3xl mx-auto px-4">
+          <p className="text-xl text-gray-700 mb-8">We invite you to share a tribute—a memory, message, or reflection—to honor those who shaped our journey. Together, we create a tapestry of wings that celebrates their legacy.</p>
+          <a href="https://www.morethanadiagnosis.org/inlovingmemory" className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">Share Your Tribute</a>
+        </div>
+      </section>
+      <footer className="bg-gray-900 text-white py-12 border-t border-gray-800">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
+        </div>
+      </footer>
+    </main>
+  )
+}
diff --git a/web/app/meetus/page.tsx b/web/app/meetus/page.tsx
new file mode 100644
index 0000000..53e1f46
--- /dev/null
+++ b/web/app/meetus/page.tsx
@@ -0,0 +1,37 @@
+'use client'
+import Link from 'next/link'
+export default function MeetUsPage() {
+  return (
+    <main className="min-h-screen bg-white">
+      <header className="sticky top-0 z-50 bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="text-2xl font-bold text-gray-900">MoreThanADiagnosis</Link>
+            <nav className="hidden md:flex gap-8">
+              <Link href="/" className="text-gray-600 hover:text-blue-600">Home</Link>
+              <Link href="/meetus" className="text-gray-600 hover:text-blue-600 font-semibold text-blue-600">Connect</Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+      <section className="bg-gradient-to-br from-teal-50 to-cyan-50 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div className="text-6xl mb-6">🤝</div>
+          <h1 className="text-5xl font-bold text-gray-900 mb-6">Connect With Us</h1>
+          <p className="text-2xl text-gray-700">Let's build community together</p>
+        </div>
+      </section>
+      <section className="py-20 bg-white border-t border-gray-200">
+        <div className="max-w-3xl mx-auto px-4">
+          <p className="text-xl text-gray-700 mb-8">Follow us on social media, attend events, or reach out directly. We'd love to hear from you and welcome your participation in our growing community.</p>
+          <a href="https://www.morethanadiagnosis.org" className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">Visit Our Original Site</a>
+        </div>
+      </section>
+      <footer className="bg-gray-900 text-white py-12 border-t border-gray-800">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
+        </div>
+      </footer>
+    </main>
+  )
+}
diff --git a/web/app/page.tsx b/web/app/page.tsx
index a49f26f..001376d 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -1,172 +1,234 @@
+'use client'
+
+import Link from 'next/link'
+
 export default function Home() {
   return (
-    <main className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+    <main className="min-h-screen bg-white">
       {/* Header */}
-      <header className="bg-white shadow-sm border-b border-gray-200">
+      <header className="sticky top-0 z-50 bg-white shadow-sm border-b border-gray-200">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
           <div className="flex items-center justify-between">
-            <h1 className="text-2xl font-bold text-gray-900">MoreThanADiagnosis</h1>
-            <nav className="flex gap-6">
-              <a href="/docs" className="text-gray-600 hover:text-blue-600 transition-colors">API Docs</a>
-              <a href="/redoc" className="text-gray-600 hover:text-blue-600 transition-colors">ReDoc</a>
-              <a href="/health" className="text-gray-600 hover:text-blue-600 transition-colors">Health</a>
+            <Link href="/" className="text-2xl font-bold text-gray-900">
+              MoreThanADiagnosis
+            </Link>
+            <nav className="hidden md:flex gap-8">
+              <Link href="/" className="text-gray-600 hover:text-blue-600 transition-colors">Home</Link>
+              <Link href="/podcast" className="text-gray-600 hover:text-blue-600 transition-colors">Podcast</Link>
+              <Link href="/resources" className="text-gray-600 hover:text-blue-600 transition-colors">Resources</Link>
+              <Link href="/happymail" className="text-gray-600 hover:text-blue-600 transition-colors">Happy Mail</Link>
+              <Link href="/supportgroup" className="text-gray-600 hover:text-blue-600 transition-colors">Support Group</Link>
+              <Link href="/shop" className="text-gray-600 hover:text-blue-600 transition-colors">Shop</Link>
             </nav>
           </div>
         </div>
       </header>
 
       {/* Hero Section */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
-        <div className="text-center mb-16">
-          <h2 className="text-5xl font-extrabold text-gray-900 mb-6">
-            Welcome to MoreThanADiagnosis
-          </h2>
-          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
-            A community platform for health advocacy and support. Connect, share, and find resources for your health journey.
+      <section className="bg-gradient-to-br from-blue-50 via-white to-purple-50 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center">
+            <h1 className="text-6xl md:text-7xl font-bold text-gray-900 mb-6">
+              You are more than a diagnosis.
+            </h1>
+            <h2 className="text-2xl md:text-3xl text-gray-700 mb-8">
+              Connecting Through Stories, Thriving Through Community
+            </h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-12">
+              More Than A Diagnosis is a place for connection, encouragement, support, and resources by and for folks living with chronic illness and those touched by cancer. Join us on a journey where we explore the human experience beyond medical labels. Discover inspiring stories, insightful conversations, and valuable resources that redefine what it means to live with a diagnosis.
+            </p>
+            <Link
+              href="/supportgroup"
+              className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors shadow-lg"
+            >
+              Join Our Community
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Happy Mail Section */}
+      <section className="py-20 bg-white border-t border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid md:grid-cols-2 gap-12 items-center">
+            <div>
+              <h3 className="text-4xl font-bold text-gray-900 mb-6">Happy Mail</h3>
+              <p className="text-xl text-gray-600 mb-4">
+                Happy Mail is a small way to remind you: you're seen, supported, and not alone.
+              </p>
+              <p className="text-lg text-gray-600 mb-6">
+                Nerisa sends free, joy-filled snail mail to folks navigating the hard stuff - just because.
+              </p>
+
+              <div className="mb-8">
+                <h4 className="text-lg font-semibold text-gray-900 mb-4">Who Can Receive Happy Mail?</h4>
+                <ul className="space-y-2 text-gray-700">
+                  <li>✓ Cancer diagnosis or treatment</li>
+                  <li>✓ Chronic illness or rare disease</li>
+                  <li>✓ Medical limbo or recovery</li>
+                </ul>
+              </div>
+
+              <Link
+                href="/happymail"
+                className="inline-block px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
+              >
+                Order Happy Mail
+              </Link>
+            </div>
+            <div className="bg-gradient-to-br from-pink-100 to-purple-100 rounded-lg p-8 text-center">
+              <div className="text-6xl mb-4">💌</div>
+              <p className="text-gray-700 font-semibold">From the Worst Club's Best Members</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Connect Section */}
+      <section className="py-20 bg-gradient-to-br from-blue-600 to-purple-600 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h3 className="text-4xl font-bold mb-8">Connect</h3>
+          <blockquote className="text-2xl mb-8 italic">
+            "We're here to create a safe, supportive space where you can connect with others, share your story, and find hope. Cancer and chronic illness can feel so isolating, but together, we're stronger."
+          </blockquote>
+          <Link
+            href="/supportgroup"
+            className="inline-block px-8 py-4 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors"
+          >
+            Learn More
+          </Link>
+        </div>
+      </section>
+
+      {/* Podcast Section */}
+      <section className="py-20 bg-white border-t border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h3 className="text-4xl font-bold text-gray-900 mb-12 text-center">Podcast</h3>
+          <div className="grid md:grid-cols-2 gap-12 items-center">
+            <div className="bg-gradient-to-br from-orange-100 to-pink-100 rounded-lg p-8 text-center">
+              <div className="text-6xl mb-4">🎙️</div>
+              <p className="text-gray-700 font-semibold">More Than A Diagnosis Podcast</p>
+            </div>
+            <div>
+              <p className="text-lg text-gray-600 mb-6">
+                Listen to More Than A Diagnosis where we get real about life beyond the medical chart.
+              </p>
+              <p className="text-gray-700 mb-8">
+                Hosts Jes and Den are lifelong friends who found their way back to each other thanks to the wild ride of cancer and chronic illness. Jes went through triple-negative breast cancer and now navigates the long-term side effects of treatment. Den lives with FAP, a rare genetic condition, alongside other chronic illnesses. Through it all, they've found the magic of community, connection, and telling the real, messy stories.
+              </p>
+              <Link
+                href="/podcast"
+                className="inline-block px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
+              >
+                Listen Here
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Resources Section */}
+      <section className="py-20 bg-gray-50 border-t border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h3 className="text-4xl font-bold text-gray-900 mb-8 text-center">Resources</h3>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-12 text-center">
+            We know how scary and overwhelming it can be to receive a diagnosis, not to mention the financial burden it can bring. That's why we've put together a list of helpful resources to attempt to make this journey even just a little bit easier for you. Be sure to check back often or sign up to receive updates as we are adding new resources all the time!
           </p>
-          <div className="flex gap-4 justify-center">
-            <a
-              href="/docs"
-              className="px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors shadow-lg hover:shadow-xl"
+          <div className="text-center">
+            <Link
+              href="/resources"
+              className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
             >
-              Explore API
-            </a>
-            <a
-              href="/api/v1"
-              className="px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg border-2 border-blue-600 hover:bg-blue-50 transition-colors"
+              View Resources
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Wings of Remembrance Section */}
+      <section className="py-20 bg-white border-t border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h3 className="text-4xl font-bold text-gray-900 mb-8 text-center">Wings of Remembrance</h3>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-12 text-center">
+            We invite you to share a tribute—a memory, message, or reflection—to honor those who shaped our journey. Together, we create a tapestry of wings that celebrates their legacy.
+          </p>
+          <div className="text-center">
+            <Link
+              href="/inlovingmemory"
+              className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
             >
-              API Endpoints
-            </a>
+              Share Your Tribute
+            </Link>
           </div>
         </div>
+      </section>
 
-        {/* Features Grid */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
-          {/* API Status */}
-          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100">
-            <div className="flex items-center mb-4">
-              <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
-                <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                </svg>
+      {/* Shop Section */}
+      <section className="py-20 bg-gray-50 border-t border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h3 className="text-4xl font-bold text-gray-900 mb-12 text-center">Shop Our Collections</h3>
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
+            {[
+              { name: 'Worst Club Best Members', icon: '🦆' },
+              { name: 'More Than A Diagnosis', icon: '💪' },
+              { name: 'I Don\'t Want To I Get To', icon: '✨' },
+              { name: 'Ribbon Collection', icon: '🎗️' }
+            ].map((collection) => (
+              <div key={collection.name} className="bg-white rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
+                <div className="text-4xl mb-4">{collection.icon}</div>
+                <h4 className="text-lg font-semibold text-gray-900">{collection.name}</h4>
               </div>
-              <h3 className="ml-4 text-lg font-semibold text-gray-900">API Status</h3>
-            </div>
-            <p className="text-gray-600 mb-4">Backend API is live and operational</p>
-            <a href="/health" className="text-blue-600 hover:text-blue-700 font-medium">
-              Check Health →
-            </a>
+            ))}
           </div>
-
-          {/* Interactive Docs */}
-          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100">
-            <div className="flex items-center mb-4">
-              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
-                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-              </div>
-              <h3 className="ml-4 text-lg font-semibold text-gray-900">Documentation</h3>
-            </div>
-            <p className="text-gray-600 mb-4">Interactive API documentation with Swagger UI</p>
-            <a href="/docs" className="text-blue-600 hover:text-blue-700 font-medium">
-              View Docs →
-            </a>
-          </div>
-
-          {/* ReDoc */}
-          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100">
-            <div className="flex items-center mb-4">
-              <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
-                <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-                </svg>
-              </div>
-              <h3 className="ml-4 text-lg font-semibold text-gray-900">ReDoc</h3>
-            </div>
-            <p className="text-gray-600 mb-4">Beautiful API reference documentation</p>
-            <a href="/redoc" className="text-blue-600 hover:text-blue-700 font-medium">
-              View ReDoc →
-            </a>
-          </div>
-
-          {/* Authentication */}
-          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100">
-            <div className="flex items-center mb-4">
-              <div className="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
-                <svg className="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                </svg>
-              </div>
-              <h3 className="ml-4 text-lg font-semibold text-gray-900">Authentication</h3>
-            </div>
-            <p className="text-gray-600 mb-4">Secure JWT-based authentication (HS256)</p>
-            <span className="text-gray-500">Access & Refresh tokens</span>
-          </div>
-
-          {/* Rate Limiting */}
-          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100">
-            <div className="flex items-center mb-4">
-              <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
-                <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              </div>
-              <h3 className="ml-4 text-lg font-semibold text-gray-900">Rate Limiting</h3>
-            </div>
-            <p className="text-gray-600 mb-4">Protected endpoints with intelligent rate limiting</p>
-            <span className="text-gray-500">10 req/sec for API</span>
-          </div>
-
-          {/* HTTPS Secure */}
-          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100">
-            <div className="flex items-center mb-4">
-              <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
-                <svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-                </svg>
-              </div>
-              <h3 className="ml-4 text-lg font-semibold text-gray-900">HTTPS Enabled</h3>
-            </div>
-            <p className="text-gray-600 mb-4">Cloudflare SSL with full security headers</p>
-            <span className="text-gray-500">Production ready</span>
+          <div className="text-center">
+            <Link
+              href="/shop"
+              className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              Shop Now
+            </Link>
           </div>
         </div>
-
-        {/* API Info */}
-        <div className="mt-16 bg-white rounded-xl shadow-md p-8 border border-gray-100">
-          <h3 className="text-2xl font-bold text-gray-900 mb-4">API Information</h3>
-          <div className="grid md:grid-cols-2 gap-6">
-            <div>
-              <h4 className="font-semibold text-gray-900 mb-2">Base URL</h4>
-              <code className="bg-gray-100 px-3 py-1 rounded text-sm text-gray-800">
-                https://mtd.runfoo.run/api/v1
-              </code>
-            </div>
-            <div>
-              <h4 className="font-semibold text-gray-900 mb-2">Authentication</h4>
-              <code className="bg-gray-100 px-3 py-1 rounded text-sm text-gray-800">
-                Bearer {'{'}token{'}'}
-              </code>
-            </div>
-            <div>
-              <h4 className="font-semibold text-gray-900 mb-2">Protocol</h4>
-              <span className="text-gray-600">HTTPS (Cloudflare Flexible SSL)</span>
-            </div>
-            <div>
-              <h4 className="font-semibold text-gray-900 mb-2">Database</h4>
-              <span className="text-gray-600">PostgreSQL 15 + Redis 7</span>
-            </div>
-          </div>
-        </div>
-      </div>
+      </section>
 
       {/* Footer */}
-      <footer className="bg-white border-t border-gray-200 mt-20">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-          <div className="text-center text-gray-600">
-            <p className="mb-2">MoreThanADiagnosis Platform</p>
-            <p className="text-sm text-gray-500">Backend API v1.0 • Deployed on nexus-vector</p>
+      <footer className="bg-gray-900 text-white py-12 border-t border-gray-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid md:grid-cols-4 gap-8 mb-8">
+            <div>
+              <h4 className="font-bold mb-4">Navigation</h4>
+              <ul className="space-y-2">
+                <li><Link href="/" className="hover:text-blue-400">Home</Link></li>
+                <li><Link href="/podcast" className="hover:text-blue-400">Podcast</Link></li>
+                <li><Link href="/resources" className="hover:text-blue-400">Resources</Link></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="font-bold mb-4">Community</h4>
+              <ul className="space-y-2">
+                <li><Link href="/supportgroup" className="hover:text-blue-400">Support Group</Link></li>
+                <li><Link href="/groups" className="hover:text-blue-400">Support Circle</Link></li>
+                <li><Link href="/thejournal" className="hover:text-blue-400">The Journal</Link></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="font-bold mb-4">More</h4>
+              <ul className="space-y-2">
+                <li><Link href="/happymail" className="hover:text-blue-400">Happy Mail</Link></li>
+                <li><Link href="/inlovingmemory" className="hover:text-blue-400">In Loving Memory</Link></li>
+                <li><Link href="/shop" className="hover:text-blue-400">Shop</Link></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="font-bold mb-4">Connect</h4>
+              <ul className="space-y-2">
+                <li><Link href="/meetus" className="hover:text-blue-400">Meet Us</Link></li>
+                <li><a href="https://www.morethanadiagnosis.org" className="hover:text-blue-400">Original Site</a></li>
+              </ul>
+            </div>
+          </div>
+          <div className="border-t border-gray-800 pt-8 text-center text-gray-400">
+            <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
           </div>
         </div>
       </footer>
diff --git a/web/app/podcast/page.tsx b/web/app/podcast/page.tsx
new file mode 100644
index 0000000..5bf982f
--- /dev/null
+++ b/web/app/podcast/page.tsx
@@ -0,0 +1,96 @@
+'use client'
+
+import Link from 'next/link'
+
+export default function PodcastPage() {
+  return (
+    <main className="min-h-screen bg-white">
+      {/* Header */}
+      <header className="sticky top-0 z-50 bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="text-2xl font-bold text-gray-900">
+              MoreThanADiagnosis
+            </Link>
+            <nav className="hidden md:flex gap-8">
+              <Link href="/" className="text-gray-600 hover:text-blue-600 transition-colors">Home</Link>
+              <Link href="/podcast" className="text-gray-600 hover:text-blue-600 transition-colors font-semibold text-blue-600">Podcast</Link>
+              <Link href="/resources" className="text-gray-600 hover:text-blue-600 transition-colors">Resources</Link>
+              <Link href="/happymail" className="text-gray-600 hover:text-blue-600 transition-colors">Happy Mail</Link>
+              <Link href="/supportgroup" className="text-gray-600 hover:text-blue-600 transition-colors">Support Group</Link>
+              <Link href="/shop" className="text-gray-600 hover:text-blue-600 transition-colors">Shop</Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      {/* Hero */}
+      <section className="bg-gradient-to-br from-orange-50 to-pink-50 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div className="text-6xl mb-6">🎙️</div>
+          <h1 className="text-5xl font-bold text-gray-900 mb-6">More Than A Diagnosis Podcast</h1>
+          <p className="text-2xl text-gray-700">
+            Getting real about life beyond the medical chart
+          </p>
+        </div>
+      </section>
+
+      {/* Hosts */}
+      <section className="py-20 bg-white border-t border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 className="text-4xl font-bold text-gray-900 mb-12 text-center">Meet Your Hosts</h2>
+          <div className="grid md:grid-cols-2 gap-12">
+            <div className="text-center">
+              <div className="bg-gradient-to-br from-blue-100 to-purple-100 rounded-lg p-12 mb-6">
+                <div className="text-6xl">👩</div>
+              </div>
+              <h3 className="text-2xl font-bold text-gray-900 mb-4">Jes</h3>
+              <p className="text-gray-700 text-lg">
+                Jes went through triple-negative breast cancer and now navigates the long-term side effects of treatment. She's passionate about sharing real, messy stories of survival and resilience.
+              </p>
+            </div>
+            <div className="text-center">
+              <div className="bg-gradient-to-br from-green-100 to-teal-100 rounded-lg p-12 mb-6">
+                <div className="text-6xl">👨</div>
+              </div>
+              <h3 className="text-2xl font-bold text-gray-900 mb-4">Den</h3>
+              <p className="text-gray-700 text-lg">
+                Den lives with FAP, a rare genetic condition, alongside other chronic illnesses. Together with Jes, he creates space for authentic conversations about community and connection.
+              </p>
+            </div>
+          </div>
+          <div className="mt-12 text-center">
+            <p className="text-xl text-gray-700 max-w-3xl mx-auto">
+              Jes and Den are lifelong friends who found their way back to each other thanks to the wild ride of cancer and chronic illness. Through it all, they've found the magic of community, connection, and telling the real, messy stories.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Episodes */}
+      <section className="py-20 bg-gray-50 border-t border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 className="text-4xl font-bold text-gray-900 mb-12 text-center">Listen Now</h2>
+          <p className="text-xl text-gray-700 text-center max-w-3xl mx-auto mb-12">
+            Available on all major podcast platforms. Subscribe to never miss an episode where we get real about life beyond the medical chart.
+          </p>
+          <div className="text-center">
+            <a
+              href="#"
+              className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              Find on Podcast Apps
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-gray-900 text-white py-12 border-t border-gray-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
+        </div>
+      </footer>
+    </main>
+  )
+}
diff --git a/web/app/resources/page.tsx b/web/app/resources/page.tsx
new file mode 100644
index 0000000..79cb2e5
--- /dev/null
+++ b/web/app/resources/page.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import Link from 'next/link'
+
+export default function ResourcesPage() {
+  return (
+    <main className="min-h-screen bg-white">
+      <header className="sticky top-0 z-50 bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="text-2xl font-bold text-gray-900">MoreThanADiagnosis</Link>
+            <nav className="hidden md:flex gap-8">
+              <Link href="/" className="text-gray-600 hover:text-blue-600">Home</Link>
+              <Link href="/podcast" className="text-gray-600 hover:text-blue-600">Podcast</Link>
+              <Link href="/resources" className="text-gray-600 hover:text-blue-600 font-semibold text-blue-600">Resources</Link>
+              <Link href="/happymail" className="text-gray-600 hover:text-blue-600">Happy Mail</Link>
+              <Link href="/supportgroup" className="text-gray-600 hover:text-blue-600">Support Group</Link>
+              <Link href="/shop" className="text-gray-600 hover:text-blue-600">Shop</Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      <section className="bg-gradient-to-br from-green-50 to-teal-50 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h1 className="text-5xl font-bold text-gray-900 mb-6">Resources</h1>
+          <p className="text-2xl text-gray-700">
+            Support and guidance for your journey
+          </p>
+        </div>
+      </section>
+
+      <section className="py-20 bg-white border-t border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-12">
+            We know how scary and overwhelming it can be to receive a diagnosis, not to mention the financial burden it can bring. That's why we've put together a list of helpful resources to attempt to make this journey even just a little bit easier for you. Be sure to check back often or sign up to receive updates as we are adding new resources all the time!
+          </p>
+          <div className="grid md:grid-cols-2 gap-8">
+            {[
+              { title: 'Financial Support', description: 'Resources for managing medical costs' },
+              { title: 'Mental Health', description: 'Mental health and counseling services' },
+              { title: 'Support Groups', description: 'Connect with others on similar journeys' },
+              { title: 'Medical Information', description: 'Reliable health and diagnosis information' }
+            ].map((resource) => (
+              <div key={resource.title} className="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition-shadow">
+                <h3 className="text-2xl font-bold text-gray-900 mb-2">{resource.title}</h3>
+                <p className="text-gray-700">{resource.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <footer className="bg-gray-900 text-white py-12 border-t border-gray-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
+        </div>
+      </footer>
+    </main>
+  )
+}
diff --git a/web/app/shop/page.tsx b/web/app/shop/page.tsx
new file mode 100644
index 0000000..532bf9a
--- /dev/null
+++ b/web/app/shop/page.tsx
@@ -0,0 +1,53 @@
+'use client'
+import Link from 'next/link'
+export default function ShopPage() {
+  const products = [
+    { title: 'Worst Club Best Members', emoji: '🦆', desc: 'Inspired by Nerisa\'s Happy Mail program' },
+    { title: 'More Than A Diagnosis', emoji: '💪', desc: 'Strength, resilience, and full life' },
+    { title: 'I Don\'t Want To I Get To', emoji: '✨', desc: 'Jes\'s empowering perspective shift' },
+    { title: 'Ribbon Collection', emoji: '🎗️', desc: 'Support all cancer types equally' }
+  ]
+  return (
+    <main className="min-h-screen bg-white">
+      <header className="sticky top-0 z-50 bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="text-2xl font-bold text-gray-900">MoreThanADiagnosis</Link>
+            <nav className="hidden md:flex gap-8">
+              <Link href="/" className="text-gray-600 hover:text-blue-600">Home</Link>
+              <Link href="/shop" className="text-gray-600 hover:text-blue-600 font-semibold text-blue-600">Shop</Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+      <section className="bg-gradient-to-br from-indigo-50 to-purple-50 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div className="text-6xl mb-6">🛍️</div>
+          <h1 className="text-5xl font-bold text-gray-900 mb-6">Shop Our Collections</h1>
+          <p className="text-2xl text-gray-700">Purpose-driven apparel for our community</p>
+        </div>
+      </section>
+      <section className="py-20 bg-white border-t border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
+            {products.map((product) => (
+              <div key={product.title} className="bg-gray-50 rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
+                <div className="text-5xl mb-4">{product.emoji}</div>
+                <h3 className="text-lg font-bold text-gray-900 mb-2">{product.title}</h3>
+                <p className="text-gray-700">{product.desc}</p>
+              </div>
+            ))}
+          </div>
+          <div className="text-center">
+            <a href="https://www.morethanadiagnosis.org/category/all-products" className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">Shop All Products</a>
+          </div>
+        </div>
+      </section>
+      <footer className="bg-gray-900 text-white py-12 border-t border-gray-800">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
+        </div>
+      </footer>
+    </main>
+  )
+}
diff --git a/web/app/supportgroup/page.tsx b/web/app/supportgroup/page.tsx
new file mode 100644
index 0000000..1af3709
--- /dev/null
+++ b/web/app/supportgroup/page.tsx
@@ -0,0 +1,36 @@
+'use client'
+import Link from 'next/link'
+export default function SupportGroupPage() {
+  return (
+    <main className="min-h-screen bg-white">
+      <header className="sticky top-0 z-50 bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="text-2xl font-bold text-gray-900">MoreThanADiagnosis</Link>
+            <nav className="hidden md:flex gap-8">
+              <Link href="/" className="text-gray-600 hover:text-blue-600">Home</Link>
+              <Link href="/supportgroup" className="text-gray-600 hover:text-blue-600 font-semibold text-blue-600">Support Group</Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+      <section className="bg-gradient-to-br from-blue-50 to-purple-50 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h1 className="text-5xl font-bold text-gray-900 mb-6">Support Group</h1>
+          <p className="text-2xl text-gray-700">Join our community</p>
+        </div>
+      </section>
+      <section className="py-20 bg-white border-t border-gray-200">
+        <div className="max-w-3xl mx-auto px-4">
+          <p className="text-xl text-gray-700 mb-8">Join our growing community of folks navigating chronic illness and cancer. Connect, share, and find strength together.</p>
+          <Link href="/groups" className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">Join Now</Link>
+        </div>
+      </section>
+      <footer className="bg-gray-900 text-white py-12 border-t border-gray-800">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
+        </div>
+      </footer>
+    </main>
+  )
+}
diff --git a/web/app/thejournal/page.tsx b/web/app/thejournal/page.tsx
new file mode 100644
index 0000000..626a035
--- /dev/null
+++ b/web/app/thejournal/page.tsx
@@ -0,0 +1,37 @@
+'use client'
+import Link from 'next/link'
+export default function JournalPage() {
+  return (
+    <main className="min-h-screen bg-white">
+      <header className="sticky top-0 z-50 bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="text-2xl font-bold text-gray-900">MoreThanADiagnosis</Link>
+            <nav className="hidden md:flex gap-8">
+              <Link href="/" className="text-gray-600 hover:text-blue-600">Home</Link>
+              <Link href="/thejournal" className="text-gray-600 hover:text-blue-600 font-semibold text-blue-600">The Journal</Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+      <section className="bg-gradient-to-br from-yellow-50 to-orange-50 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div className="text-6xl mb-6">📝</div>
+          <h1 className="text-5xl font-bold text-gray-900 mb-6">The Journal</h1>
+          <p className="text-2xl text-gray-700">Community Stories & Reflections</p>
+        </div>
+      </section>
+      <section className="py-20 bg-white border-t border-gray-200">
+        <div className="max-w-3xl mx-auto px-4">
+          <p className="text-xl text-gray-700 mb-8">Read inspiring stories from our community members as they navigate their journeys with chronic illness and cancer. Share your own story and inspire others.</p>
+          <a href="https://www.morethanadiagnosis.org/thejournal" className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">Read Stories</a>
+        </div>
+      </section>
+      <footer className="bg-gray-900 text-white py-12 border-t border-gray-800">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
+        </div>
+      </footer>
+    </main>
+  )
+}