diff --git a/src/app/apps/[slug]/page.tsx b/src/app/apps/[slug]/page.tsx
index 6f17bbb1..521bcccf 100644
--- a/src/app/apps/[slug]/page.tsx
+++ b/src/app/apps/[slug]/page.tsx
@@ -2,6 +2,7 @@ import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { AppCard, CaseStudyCard, MechanismCard, ResearchCard, CampaignCard } from '@/components/cards'
 import ContentDetailPage from '@/components/templates/ContentDetailPage'
+import { AppSidebar } from '@/components/layouts/AppSidebar'
 import { getAppBySlug, apps } from '@/content/apps'
 import { getCaseStudiesByPlatform, getCaseStudyBySlug } from '@/content/case-studies'
 import { getMechanismBySlug } from '@/content/mechanisms'
@@ -80,9 +81,13 @@ export default async function AppDetailPage({ params }: PageProps) {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumb) }} />
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }} />
       <ContentDetailPage
+        sidebar={<AppSidebar />}
         item={app}
-        breadcrumbHref="/apps"
-        breadcrumbLabel="Back to Apps"
+        breadcrumbItems={[
+          { href: '/', label: 'Home' },
+          { href: '/apps', label: 'Apps' },
+          { label: app.name },
+        ]}
         showDate={false}
         relatedSections={[
           {
diff --git a/src/app/apps/page.tsx b/src/app/apps/page.tsx
index 9c935c20..e7654e81 100644
--- a/src/app/apps/page.tsx
+++ b/src/app/apps/page.tsx
@@ -5,6 +5,7 @@ import {
   SensemakingSection,
   CategoryContent,
 } from "@/components/layouts";
+import { AppSidebar } from "@/components/layouts/AppSidebar";
 import { AppCard } from "@/components/cards";
 import { apps, getFeaturedApps } from "@/content/apps";
 import { getSensemakingFor } from "@/content/research";
@@ -16,7 +17,7 @@ export const metadata: Metadata = pageSeo.apps;
 export default function AppsPage() {
   const featuredApps = getFeaturedApps(3);
   return (
-    <ListPageLayout>
+    <ListPageLayout sidebar={<AppSidebar />}>
       <ListPageHeader title="Apps" description="Funding platforms, DAOs, grant programs"/>
 
       <SensemakingSection article={getSensemakingFor("apps")} />
@@ -26,7 +27,7 @@ export default function AppsPage() {
           title="Featured Apps"
           subtitle="Essential platforms shaping Ethereum funding"
         />
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid gap-6 [grid-template-columns:repeat(auto-fit,minmax(300px,1fr))]">
           {featuredApps.map((app) => (
             <AppCard key={app.slug} app={app} variant="home" />
           ))}
diff --git a/src/app/campaigns/[slug]/page.tsx b/src/app/campaigns/[slug]/page.tsx
index 53f648ff..a1700b3a 100644
--- a/src/app/campaigns/[slug]/page.tsx
+++ b/src/app/campaigns/[slug]/page.tsx
@@ -2,6 +2,7 @@ import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { AppCard, MechanismCard, CaseStudyCard, ResearchCard, CampaignCard } from '@/components/cards'
 import ContentDetailPage from '@/components/templates/ContentDetailPage'
+import { AppSidebar } from '@/components/layouts/AppSidebar'
 import { getCampaignBySlug, campaigns } from '@/content/campaigns'
 import { getAppBySlug } from '@/content/apps'
 import { getMechanismBySlug } from '@/content/mechanisms'
@@ -103,9 +104,13 @@ export default async function CampaignDetailPage({ params }: PageProps) {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumb) }} />
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }} />
       <ContentDetailPage
+        sidebar={<AppSidebar />}
         item={campaign}
-        breadcrumbHref="/campaigns"
-        breadcrumbLabel="Back to Campaigns"
+        breadcrumbItems={[
+          { href: '/', label: 'Home' },
+          { href: '/campaigns', label: 'Campaigns' },
+          { label: campaign.name },
+        ]}
         ctaUrl={campaign.ctaUrl}
         ctaLabel="Visit Campaign"
         contentBefore={campaignStats}
diff --git a/src/app/campaigns/page.tsx b/src/app/campaigns/page.tsx
index c287af0e..eb8cb3b1 100644
--- a/src/app/campaigns/page.tsx
+++ b/src/app/campaigns/page.tsx
@@ -7,6 +7,7 @@ import {
   SensemakingSection,
   CategoryContent,
 } from "@/components/layouts";
+import { AppSidebar } from "@/components/layouts/AppSidebar";
 import { CampaignCard } from "@/components/cards";
 import { campaigns, getFeaturedCampaigns } from "@/content/campaigns";
 import { getSensemakingFor } from "@/content/research";
@@ -18,7 +19,7 @@ export const metadata: Metadata = pageSeo.campaigns;
 export default function CampaignsPage() {
   const featuredCampaigns = getFeaturedCampaigns(2);
   return (
-    <ListPageLayout>
+    <ListPageLayout sidebar={<AppSidebar />}>
       <ListPageHeader
         title="Funding Campaigns"
         description="Active or upcoming funding rounds"
diff --git a/src/app/case-studies/[slug]/page.tsx b/src/app/case-studies/[slug]/page.tsx
index d66b2c10..62586577 100644
--- a/src/app/case-studies/[slug]/page.tsx
+++ b/src/app/case-studies/[slug]/page.tsx
@@ -2,6 +2,7 @@ import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { AppCard, MechanismCard, CaseStudyCard, ResearchCard, CampaignCard } from '@/components/cards'
 import ContentDetailPage from '@/components/templates/ContentDetailPage'
+import { AppSidebar } from '@/components/layouts/AppSidebar'
 import { getCaseStudyBySlug, caseStudies } from '@/content/case-studies'
 import { getAppBySlug } from '@/content/apps'
 import { getMechanismBySlug } from '@/content/mechanisms'
@@ -74,9 +75,13 @@ export default async function CaseStudyDetailPage({ params }: PageProps) {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumb) }} />
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }} />
       <ContentDetailPage
+        sidebar={<AppSidebar />}
         item={caseStudy}
-        breadcrumbHref="/case-studies"
-        breadcrumbLabel="Back to Case Studies"
+        breadcrumbItems={[
+          { href: '/', label: 'Home' },
+          { href: '/case-studies', label: 'Case Studies' },
+          { label: caseStudy.name },
+        ]}
         relatedSections={[
           {
             title: 'Related Apps',
diff --git a/src/app/case-studies/page.tsx b/src/app/case-studies/page.tsx
index 626f5d07..c5516e85 100644
--- a/src/app/case-studies/page.tsx
+++ b/src/app/case-studies/page.tsx
@@ -7,6 +7,7 @@ import {
   SensemakingSection,
   CategoryContent,
 } from "@/components/layouts";
+import { AppSidebar } from "@/components/layouts/AppSidebar";
 import { caseStudies } from "@/content/case-studies";
 import { getSensemakingFor } from "@/content/research";
 import SectionHeader from "@/components/ui/SectionHeader";
@@ -15,7 +16,7 @@ export const metadata: Metadata = pageSeo.caseStudies;
 
 export default function CaseStudiesPage() {
   return (
-    <ListPageLayout>
+    <ListPageLayout sidebar={<AppSidebar />}>
       <ListPageHeader
         title="Case Studies"
         description="Analysis of a funding experiment"
diff --git a/src/app/globals.css b/src/app/globals.css
index 67c44597..c62251d5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -204,7 +204,15 @@
 
   /* Container */
   .container-page {
-    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-24;
+    @apply max-w-[74rem] mx-auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .detail-page-container {
+    @apply max-w-[800px] mx-auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
   }
 
   /* Star decorative element */
@@ -237,6 +245,24 @@
   }
 }
 
+@media (min-width: 640px) {
+  .container-page, .detail-page-container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container-page {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+  .detail-page-container {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+}
+
 @layer utilities {
   /* Woodcut-style texture overlay (optional) */
   .texture-woodcut {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index cbeb6b82..cefde616 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,9 +6,11 @@ import "./globals.css";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
-import SearchProvider from "@/components/search/SearchProvider";
+import { SearchProvider } from "@/context/SearchContext";
 import SearchModal from "@/components/search/SearchModal";
 import AIChatSidebar from "@/components/search/AIChatSidebar";
+import { ScrollToTop } from "@/components/layout/ScrollToTop";
+import { SidebarProvider } from "@/context/SidebarContext";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -109,13 +111,16 @@ export default function RootLayout({
       className={`${inter.variable} ${bdoGrotesk.variable} ${source_serif.variable} ${ibm_plex_mono.variable}`}
     >
       <body className="min-h-screen flex flex-col">
+        <SidebarProvider>
         <SearchProvider>
+          <ScrollToTop />
           <Header />
-          <main className="flex-grow pt-[72px]">{children}</main>
+          <main className="flex-grow pt-[70px]">{children}</main>
           <Footer />
           <SearchModal />
           <AIChatSidebar />
         </SearchProvider>
+        </SidebarProvider>
       </body>
       <GoogleAnalytics gaId="G-MYMQNTYY27" />
     </html>
diff --git a/src/app/mechanisms/[slug]/page.tsx b/src/app/mechanisms/[slug]/page.tsx
index 3dc666e0..85e44557 100644
--- a/src/app/mechanisms/[slug]/page.tsx
+++ b/src/app/mechanisms/[slug]/page.tsx
@@ -2,6 +2,7 @@ import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { AppCard, MechanismCard, CaseStudyCard, ResearchCard, CampaignCard } from '@/components/cards'
 import ContentDetailPage from '@/components/templates/ContentDetailPage'
+import { AppSidebar } from '@/components/layouts/AppSidebar'
 import { getMechanismBySlug, mechanisms } from '@/content/mechanisms'
 import { getAppBySlug } from '@/content/apps'
 import { getCaseStudyBySlug } from '@/content/case-studies'
@@ -74,9 +75,13 @@ export default async function MechanismDetailPage({ params }: PageProps) {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumb) }} />
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }} />
       <ContentDetailPage
+        sidebar={<AppSidebar />}
         item={mechanism}
-        breadcrumbHref="/mechanisms"
-        breadcrumbLabel="Back to Mechanisms"
+        breadcrumbItems={[
+          { href: '/', label: 'Home' },
+          { href: '/mechanisms', label: 'Mechanisms' },
+          { label: mechanism.name },
+        ]}
         relatedSections={[
           {
             title: 'Related Apps',
diff --git a/src/app/mechanisms/page.tsx b/src/app/mechanisms/page.tsx
index 5157c37d..1b40a12e 100644
--- a/src/app/mechanisms/page.tsx
+++ b/src/app/mechanisms/page.tsx
@@ -6,6 +6,7 @@ import {
   SensemakingSection,
   CategoryContent,
 } from "@/components/layouts";
+import { AppSidebar } from "@/components/layouts/AppSidebar";
 import { mechanisms } from "@/content/mechanisms";
 import { getSensemakingFor } from "@/content/research";
 import SectionHeader from "@/components/ui/SectionHeader";
@@ -15,7 +16,7 @@ export const metadata: Metadata = pageSeo.mechanisms;
 
 export default function MechanismsPage() {
   return (
-    <ListPageLayout>
+    <ListPageLayout sidebar={<AppSidebar />}>
       <ListPageHeader
         title="Funding Mechanisms"
         description="Funding mechanisms and approaches"
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f4a6456f..7a98f02c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,7 @@
 import { Metadata } from "next";
 import { pageSeo, siteDescription } from "@/lib/page-seo";
+import { ListPageLayout } from "@/components/layouts";
+import { AppSidebar } from "@/components/layouts/AppSidebar";
 import Link from "next/link";
 import {
   AppCard,
@@ -84,190 +86,198 @@ export default function HomePage() {
   const featuredResearch = getFeaturedResearch(4);
 
   return (
-    <div className="bg-gray-900 text-gray-25" data-node-id="551:2185">
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteJsonLd) }}
-      />
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationJsonLd) }}
-      />
-      <section className="relative overflow-hidden -mt-[72px] pt-[72px]">
-        <ChladniBackground variant="1" opacity={0.8} />
-        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-gray-900 to-transparent z-[1]" />
+    <ListPageLayout sidebar={<AppSidebar defaultCollapsed={true} />}>
+      <div className="bg-gray-900 text-gray-25" data-node-id="551:2185">
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteJsonLd) }}
+        />
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(organizationJsonLd),
+          }}
+        />
+        <section className="relative overflow-hidden -mt-[70px] pt-[70px]">
+          <ChladniBackground variant="1" opacity={0.8} />
+          <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-gray-900 to-transparent z-[1]" />
 
-        <div className="relative z-10 mx-auto w-full max-w-[1216px] px-4 sm:px-6 lg:px-0">
-          <div className="pb-20 pt-16 md:pb-28 md:pt-24">
-            <div className="flex flex-col mx-auto w-fit">
-              <p className="mb-8 w-fit rounded-lg bg-gray-900 px-5 py-[10px] text-sm text-teal-500 font-mono">
-                Your Map of the Funding Trends in the Next Internet
-              </p>
-              <h1 className="max-w-180 text-4xl sm:text-5xl/14 md:text-7xl/20 font-extrabold text-gray-25 font-heading">
-                Fund What Matters
-              </h1>
-              <p className="mt-6 max-w-[732px] text-xl text-gray-100 font-serif">
-                Your trusted directory and reference library for funding
-                mechanisms, platforms, case studies, and research in the new internet - informed by contemporary trends like crowdfunding, AI, Ethereum, open source software, stablecoins, decentralized networks, participatory budgeting, and collective action in the 21st century.
-              </p>
+          <div className="relative z-10 mx-auto w-full max-w-[1276px] px-4 sm:px-6 lg:px-8">
+            <div className="pb-20 pt-16 md:pb-28 md:pt-24">
+              <div className="flex flex-col mx-auto w-fit">
+                <p className="mb-8 w-fit rounded-lg bg-gray-900 px-5 py-[10px] text-sm text-teal-500 font-mono">
+                  Your Map of the Funding Trends in the Next Internet
+                </p>
+                <h1 className="max-w-180 text-4xl sm:text-5xl/14 md:text-7xl/20 font-extrabold text-gray-25 font-heading">
+                  Fund What Matters
+                </h1>
+                <p className="mt-6 max-w-[732px] text-xl text-gray-100 font-serif">
+                  Your trusted directory and reference library for funding
+                  mechanisms, platforms, case studies, and research in the new
+                  internet - informed by contemporary trends like crowdfunding,
+                  AI, Ethereum, open source software, stablecoins, decentralized
+                  networks, participatory budgeting, and collective action in
+                  the 21st century.
+                </p>
 
-              <div className="mt-8 w-full max-w-[732px]">
-                <SearchBar
-                  placeholder="Search or ask anything..."
-                  className="w-full"
-                />
+                <div className="mt-8 w-full max-w-[732px]">
+                  <SearchBar
+                    placeholder="Search or ask anything..."
+                    className="w-full"
+                  />
+                </div>
               </div>
-            </div>
-            <div className="mt-30 flex flex-wrap items-center justify-center gap-4">
-              <Link href="/partner">
-                <Button variant="primary">Partner with us</Button>
-              </Link>
+              <div className="mt-30 flex flex-wrap items-center justify-center gap-4">
+                <Link href="/partner">
+                  <Button variant="primary">Partner with us</Button>
+                </Link>
 
-              <Link href="/contribute">
-                <Button variant="secondary">Submit content</Button>
-              </Link>
+                <Link href="/contribute">
+                  <Button variant="secondary">Submit content</Button>
+                </Link>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
+
+        <main>
+          {featuredCampaigns.length > 0 && (
+            <section
+              className="mx-auto w-full max-w-[1276px] px-4 py-16 sm:px-6 lg:px-8"
+              data-node-id="551:2292"
+            >
+              <SectionHeader
+                title="Featured Campaigns"
+                subtitle="What's happening now in AI/Ethereum funding"
+                href="/campaigns"
+              />
+              <div className="grid gap-5 w-full [grid-template-columns:repeat(auto-fit,minmax(390px,1fr))]">
+                {featuredCampaigns.map((campaign) => (
+                  <CampaignCard
+                    key={campaign.slug}
+                    campaign={campaign}
+                    variant="home"
+                  />
+                ))}
+              </div>
+            </section>
+          )}
 
-      <main>
-        {featuredCampaigns.length > 0 && (
           <section
-            className="mx-auto w-full max-w-[1216px] px-4 py-16 sm:px-6 lg:px-0"
-            data-node-id="551:2292"
+            className="border-y border-gray-950 py-20"
+            data-node-id="551:2300"
           >
-            <SectionHeader
-              title="Featured Campaigns"
-              subtitle="What's happening now in AI/Ethereum funding"
-              href="/campaigns"
-            />
-            <div className="grid gap-5 lg:grid-cols-2">
-              {featuredCampaigns.map((campaign) => (
-                <CampaignCard
-                  key={campaign.slug}
-                  campaign={campaign}
-                  variant="home"
-                />
-              ))}
-            </div>
-          </section>
-        )}
+            <div className="mx-auto w-full max-w-[1276px] px-4 sm:px-6 lg:px-8">
+              <div className="mx-auto max-w-[980px] text-center">
+                <h2 className="text-balance text-[32px] font-extrabold text-gray-25 font-heading sm:text-[48px] lg:text-[64px]">
+                  What We Curate
+                </h2>
+                <p className="mx-auto mt-3 max-w-[700px] text-sm text-gray-400 font-serif">
+                  The comprehensive reference library for understanding
+                  Ethereum&apos;s funding landscape
+                </p>
+              </div>
 
-        <section
-          className="border-y border-gray-950 py-20"
-          data-node-id="551:2300"
-        >
-          <div className="mx-auto w-full max-w-[1216px] px-4 sm:px-6 lg:px-0">
-            <div className="mx-auto max-w-[980px] text-center">
-              <h2 className="text-balance text-[32px] font-extrabold text-gray-25 font-heading sm:text-[48px] lg:text-[64px]">
-                What We Curate
-              </h2>
-              <p className="mx-auto mt-3 max-w-[700px] text-sm text-gray-400 font-serif">
-                The comprehensive reference library for understanding
-                Ethereum&apos;s funding landscape
-              </p>
+              <div className="mt-12 grid gap-8 [grid-template-columns:repeat(auto-fill,minmax(340px,1fr))]">
+                {curateCards.map((card) => (
+                  <CategoriesCard key={card.title} card={card} />
+                ))}
+              </div>
             </div>
+          </section>
 
-            <div className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-              {curateCards.map((card) => (
-                <CategoriesCard key={card.title} card={card} />
-              ))}
-            </div>
-          </div>
-        </section>
+          {featuredApps.length > 0 && (
+            <section className="py-16 bg-gray-800">
+              <div className="mx-auto w-full max-w-[1276px] px-4 sm:px-6 lg:px-8">
+                <SectionHeader
+                  title="Featured Apps"
+                  subtitle="Essential platforms shaping Ethereum funding"
+                  href="/apps"
+                />
+                <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(320px,1fr))]">
+                  {featuredApps.map((app) => (
+                    <AppCard key={app.slug} app={app} variant="home" />
+                  ))}
+                </div>
+              </div>
+            </section>
+          )}
 
-        {featuredApps.length > 0 && (
-          <section className="py-16 bg-gray-800">
-            <div className="mx-auto w-full max-w-[1216px] px-4 sm:px-6 lg:px-0">
+          {featuredResearch.length > 0 && (
+            <section className="mx-auto w-full max-w-[1276px] px-4 py-16 sm:px-6 lg:px-8">
               <SectionHeader
-                title="Featured Apps"
-                subtitle="Essential platforms shaping Ethereum funding"
-                href="/apps"
+                title="Latest Research"
+                subtitle="Deep dives into funding mechanisms and trends"
+                href="/research"
               />
-              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                {featuredApps.map((app) => (
-                  <AppCard key={app.slug} app={app} variant="home" />
+              <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(290px,1fr))]">
+                {featuredResearch.map((research) => (
+                  <ResearchCard
+                    key={research.slug}
+                    research={research}
+                    variant="home"
+                  />
                 ))}
               </div>
-            </div>
-          </section>
-        )}
-
-        {featuredResearch.length > 0 && (
-          <section className="mx-auto w-full max-w-[1216px] px-4 py-16 sm:px-6 lg:px-0">
-            <SectionHeader
-              title="Latest Research"
-              subtitle="Deep dives into funding mechanisms and trends"
-              href="/research"
-            />
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-              {featuredResearch.map((research) => (
-                <ResearchCard
-                  key={research.slug}
-                  research={research}
-                  variant="home"
-                />
-              ))}
-            </div>
-          </section>
-        )}
+            </section>
+          )}
 
-        <section
-          className="relative border-y border-teal-500 py-16 bg-gray-950"
-          data-node-id="551:2341"
-        >
-          <div className="pointer-events-none absolute inset-x-0 -top-4 h-4 bg-gradient-to-b from-transparent to-teal-500/30" />
-          <div className="pointer-events-none absolute inset-x-0 -bottom-4 h-4 bg-gradient-to-t from-transparent to-teal-500/30" />
-          <div className="mx-auto w-full max-w-[1216px] px-4 sm:px-6 lg:px-0">
-            <div className="text-center">
-              <h2 className="text-[36px] leading-10 text-gray-25">
-                Built by the Community
-              </h2>
-              <p className="mx-auto mt-4 max-w-[730px] leading-7 text-gray-200">
-                This is a living knowledge base. Everyone can contribute, edit,
-                and help document what works in Ethereum/AI funding. Join 500+
-                funding mechanism experts building the definitive reference for
-                Ethereum/AI enabled public goods funding
-              </p>
-            </div>
+          <section
+            className="relative border-y border-teal-500 py-16 bg-gray-950"
+            data-node-id="551:2341"
+          >
+            <div className="pointer-events-none absolute inset-x-0 -top-4 h-4 bg-gradient-to-b from-transparent to-teal-500/30" />
+            <div className="pointer-events-none absolute inset-x-0 -bottom-4 h-4 bg-gradient-to-t from-transparent to-teal-500/30" />
+            <div className="mx-auto w-full max-w-[1276px] px-4 sm:px-6 lg:px-8">
+              <div className="text-center">
+                <h2 className="text-[36px] leading-10 text-gray-25">
+                  Built by the Community
+                </h2>
+                <p className="mx-auto mt-4 max-w-[730px] leading-7 text-gray-200">
+                  This is a living knowledge base. Everyone can contribute,
+                  edit, and help document what works in Ethereum/AI funding.
+                  Join 500+ funding mechanism experts building the definitive
+                  reference for Ethereum/AI enabled public goods funding
+                </p>
+              </div>
 
-            <div className="mt-14 grid gap-8 md:grid-cols-3">
-              {[
-                {
-                  icon: PencilLine,
-                  title: "Submit Content",
-                  copy: "Add apps, mechanisms, case studies, or research to the directory",
-                },
-                {
-                  icon: Users,
-                  title: "Edit & Improve",
-                  copy: "Help refine existing entries and keep information up to date",
-                },
-                {
-                  icon: Zap,
-                  title: "Quality First",
-                  copy: "Only well-researched, original submissions that meet our high standards are accepted",
-                },
-              ].map((item) => (
-                <article key={item.title} className="text-center">
-                  <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full border-2 border-teal-500">
-                    <item.icon className="h-8 w-8 text-teal-100" />
-                  </div>
-                  <h3 className="mt-3 text-[20px] leading-7">{item.title}</h3>
-                  <p className="mx-auto mt-2 max-w-[295px] text-base leading-6 text-gray-200">
-                    {item.copy}
-                  </p>
-                </article>
-              ))}
-            </div>
+              <div className="mt-14 grid gap-8 md:grid-cols-3">
+                {[
+                  {
+                    icon: PencilLine,
+                    title: "Submit Content",
+                    copy: "Add apps, mechanisms, case studies, or research to the directory",
+                  },
+                  {
+                    icon: Users,
+                    title: "Edit & Improve",
+                    copy: "Help refine existing entries and keep information up to date",
+                  },
+                  {
+                    icon: Zap,
+                    title: "Quality First",
+                    copy: "Only well-researched, original submissions that meet our high standards are accepted",
+                  },
+                ].map((item) => (
+                  <article key={item.title} className="text-center">
+                    <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full border-2 border-teal-500">
+                      <item.icon className="h-8 w-8 text-teal-100" />
+                    </div>
+                    <h3 className="mt-3 text-[20px] leading-7">{item.title}</h3>
+                    <p className="mx-auto mt-2 max-w-[295px] text-base leading-6 text-gray-200">
+                      {item.copy}
+                    </p>
+                  </article>
+                ))}
+              </div>
 
-            <div className="mt-24 max-w-[796px] mx-auto">
-              <ContributeCard />
+              <div className="mt-24 max-w-[796px] mx-auto">
+                <ContributeCard />
+              </div>
             </div>
-          </div>
-        </section>
-      </main>
-    </div>
+          </section>
+        </main>
+      </div>
+    </ListPageLayout>
   );
 }
diff --git a/src/app/preview/PreviewForm.tsx b/src/app/preview/PreviewForm.tsx
index 1cf0fd30..d75ea430 100644
--- a/src/app/preview/PreviewForm.tsx
+++ b/src/app/preview/PreviewForm.tsx
@@ -250,8 +250,11 @@ export default function PreviewForm() {
 
           <ContentDetailPage
             item={content}
-            breadcrumbHref="/preview"
-            breadcrumbLabel="Back to Preview"
+            breadcrumbItems={[
+              { href: '/', label: 'Home' },
+              { href: '/preview', label: 'Preview' },
+              { label: content.name },
+            ]}
             ctaUrl={content.ctaUrl}
             ctaLabel={
               content.researchType
diff --git a/src/app/research/[slug]/page.tsx b/src/app/research/[slug]/page.tsx
index bdb0da23..2c657b9e 100644
--- a/src/app/research/[slug]/page.tsx
+++ b/src/app/research/[slug]/page.tsx
@@ -2,6 +2,7 @@ import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { AppCard, MechanismCard, CaseStudyCard, ResearchCard, CampaignCard } from '@/components/cards'
 import ContentDetailPage from '@/components/templates/ContentDetailPage'
+import { AppSidebar } from '@/components/layouts/AppSidebar'
 import { getResearchBySlug, research } from '@/content/research'
 import { getAppBySlug } from '@/content/apps'
 import { getMechanismBySlug } from '@/content/mechanisms'
@@ -77,9 +78,14 @@ export default async function ResearchDetailPage({ params }: PageProps) {
         dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }}
       />
       <ContentDetailPage
+        sidebar={<AppSidebar />}
         item={r}
-        breadcrumbHref="/research"
-        breadcrumbLabel="Back to Research"
+        breadcrumbItems={[
+          { href: '/', label: 'Home' },
+          { href: '/research', label: 'Research' },
+          ...(r.researchType ? [{ href: `/research?type=${r.researchType}`, label: r.researchType }] : []),
+          { label: r.name },
+        ]}
         ctaUrl={r.ctaUrl}
         ctaLabel={r.researchType ? `Read ${r.researchType}` : 'Read'}
       relatedSections={[
diff --git a/src/app/research/page.tsx b/src/app/research/page.tsx
index a73416b0..46ad2739 100644
--- a/src/app/research/page.tsx
+++ b/src/app/research/page.tsx
@@ -6,20 +6,38 @@ import {
   SensemakingSection,
   CategoryContent,
 } from "@/components/layouts";
+import { AppSidebar } from "@/components/layouts/AppSidebar";
 import { research, getSensemakingFor } from "@/content/research";
 import SectionHeader from "@/components/ui/SectionHeader";
 import { pageSeo } from "@/lib/page-seo";
 import { RESEARCH_TYPES } from "@/lib/types";
+import type { SortOption } from "@/components/layouts/CategoryContent";
 
 export const metadata: Metadata = pageSeo.research;
 
-export default function ResearchPage() {
+const VALID_SORTS = ["newest", "oldest", "alpha", "read-time", "read-time-desc", "author"] as const;
+
+interface PageProps {
+  searchParams: Promise<{ type?: string; sort?: string; author?: string }>;
+}
+
+export default async function ResearchPage({ searchParams }: PageProps) {
+  const params = await searchParams;
+
   const filterOptions = RESEARCH_TYPES
     .filter((type) => research.some((r) => r.researchType === type))
     .map((type) => ({ value: type, label: type }));
 
+  const initialFilter = filterOptions.some((o) => o.value === params.type)
+    ? params.type!
+    : "all";
+  const initialSort: SortOption = VALID_SORTS.includes(params.sort as SortOption)
+    ? (params.sort as SortOption)
+    : "newest";
+  const initialAuthor = params.author ?? "all";
+
   return (
-    <ListPageLayout>
+    <ListPageLayout sidebar={<AppSidebar />}>
       <ListPageHeader
         title="Research & Trends"
         description="Analysis, reports, or trend pieces"
@@ -34,7 +52,10 @@ export default function ResearchPage() {
             items={research}
             type="research"
             itemLabel="articles"
-            filters={filterOptions.length > 0 ? { key: 'researchType', options: filterOptions } : undefined}
+            filters={filterOptions.length > 0 ? { key: "researchType", options: filterOptions } : undefined}
+            initialFilter={initialFilter}
+            initialSort={initialSort}
+            initialAuthor={initialAuthor}
           />
         </div>
       </section>
diff --git a/src/app/search/SearchBridge.tsx b/src/app/search/SearchBridge.tsx
index 14ef5267..8d6eabb1 100644
--- a/src/app/search/SearchBridge.tsx
+++ b/src/app/search/SearchBridge.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from "react";
 import { useSearchParams } from "next/navigation";
-import { useSearch } from "@/components/search/SearchProvider";
+import { useSearch } from "@/context/SearchContext";
 
 export default function SearchBridge() {
   const searchParams = useSearchParams();
diff --git a/src/components/ChladniBackground.jsx b/src/components/ChladniBackground.jsx
index 7d719ac3..83d4bcdd 100644
--- a/src/components/ChladniBackground.jsx
+++ b/src/components/ChladniBackground.jsx
@@ -132,10 +132,14 @@ const ChladniCanvas = ({ variant, opacity: opacityProp }) => {
     const getCanvasSize = () => {
       const el = mountRef.current;
       if (!el) return { width: window.innerWidth, height: window.innerHeight };
-      return { width: el.clientWidth, height: el.clientHeight };
+      // Always use full viewport width — sidebar just visually covers the left portion
+      return { width: window.innerWidth, height: el.clientHeight };
     };
 
-    const getAspect = () => window.innerWidth / window.innerHeight;
+    const getAspect = () => {
+      const { width, height } = getCanvasSize();
+      return height > 0 ? width / height : window.innerWidth / window.innerHeight;
+    };
 
     const allocateField = () => {
       const size = CONFIG.gridSize * CONFIG.gridSize;
@@ -502,8 +506,13 @@ const ChladniCanvas = ({ variant, opacity: opacityProp }) => {
   return (
     <div
       ref={mountRef}
-      className="absolute inset-0 pointer-events-none"
-      style={{ opacity: ready ? (opacityProp ?? 1) : 0, transition: "opacity 1s ease-in" }}
+      className="absolute top-0 bottom-0 pointer-events-none"
+      style={{
+        left: "calc(100% - 100vw)",
+        width: "100vw",
+        opacity: ready ? (opacityProp ?? 1) : 0,
+        transition: "opacity 1s ease-in",
+      }}
       aria-hidden="true"
     />
   );
diff --git a/src/components/cards/ContentCard.tsx b/src/components/cards/ContentCard.tsx
index 4215d137..6bca420b 100644
--- a/src/components/cards/ContentCard.tsx
+++ b/src/components/cards/ContentCard.tsx
@@ -92,11 +92,15 @@ export default function ContentCard({
           {(authors?.length || date) && (
             <div className="flex items-center justify-between mt-2 gap-2">
               {authors && authors.length > 0 && (
-                <p className="text-xs text-gray-300 truncate">
+                <p className="text-xs text-gray-300 truncate font-mono">
                   By {authors.join(", ")}
                 </p>
               )}
-              {date && <p className="text-xs text-gray-300 shrink-0 ml-auto">{formatRelativeDate(date)}</p>}
+              {date && (
+                <p className="text-xs text-gray-300 shrink-0 ml-auto font-mono">
+                  {formatRelativeDate(date)}
+                </p>
+              )}
             </div>
           )}
         </>
diff --git a/src/components/cards/ResearchCard.tsx b/src/components/cards/ResearchCard.tsx
index 87171663..42e2f1df 100644
--- a/src/components/cards/ResearchCard.tsx
+++ b/src/components/cards/ResearchCard.tsx
@@ -50,7 +50,7 @@ export default function ResearchCard({
             <p className="sm:max-w-[60%] mt-2 text-sm text-gray-300 font-serif">
               {research.shortDescription}
             </p>
-            <p className="mt-2 text-xs text-gray-300 text-right">{formatRelativeDate(research.lastUpdated)}</p>
+            <p className="mt-2 text-xs text-gray-300 text-right font-mono">{formatRelativeDate(research.lastUpdated)}</p>
             <div className="mt-4 flex justify-end">
               <Button
                 variant="ghost"
@@ -96,8 +96,8 @@ export default function ResearchCard({
             {research.shortDescription}
           </p>
           <div className="flex items-center justify-between mb-2 gap-2">
-            <p className="text-xs text-gray-300 truncate">By {authors.join(", ")}</p>
-            <p className="text-xs text-gray-300 shrink-0">{formatRelativeDate(research.lastUpdated)}</p>
+            <p className="text-xs text-gray-300 truncate font-mono">By {authors.join(", ")}</p>
+            <p className="text-xs text-gray-300 shrink-0 font-mono">{formatRelativeDate(research.lastUpdated)}</p>
           </div>
           <Button
             variant="ghost"
diff --git a/src/components/layout/ScrollToTop.tsx b/src/components/layout/ScrollToTop.tsx
new file mode 100644
index 00000000..531167ea
--- /dev/null
+++ b/src/components/layout/ScrollToTop.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { usePathname } from "next/navigation";
+
+export function ScrollToTop() {
+  const pathname = usePathname();
+  const isMount = useRef(true);
+
+  useEffect(() => {
+    if (isMount.current) {
+      isMount.current = false;
+      return;
+    }
+    window.scrollTo({ top: 0, behavior: "instant" });
+  }, [pathname]);
+
+  return null;
+}
diff --git a/src/components/layouts/AppSidebar.tsx b/src/components/layouts/AppSidebar.tsx
new file mode 100644
index 00000000..3fef160f
--- /dev/null
+++ b/src/components/layouts/AppSidebar.tsx
@@ -0,0 +1,75 @@
+import { research } from "@/content/research";
+import { apps } from "@/content/apps";
+import { mechanisms } from "@/content/mechanisms";
+import { caseStudies } from "@/content/case-studies";
+import { campaigns } from "@/content/campaigns";
+import { RESEARCH_TYPES } from "@/lib/types";
+import type { Campaign } from "@/lib/types";
+import { AppSidebarClient } from "./AppSidebarClient";
+
+// Active = no endDate (ongoing) or endDate in the future
+function isCampaignActive(c: Campaign): boolean {
+  return !c.endDate || new Date(c.endDate) > new Date();
+}
+
+// Sort campaigns: active first, then by startDate desc
+function sortCampaigns(items: Campaign[]): Campaign[] {
+  return [...items].sort((a, b) => {
+    const aActive = isCampaignActive(a);
+    const bActive = isCampaignActive(b);
+    if (aActive !== bActive) return aActive ? -1 : 1;
+    return (b.startDate ?? b.lastUpdated).localeCompare(a.startDate ?? a.lastUpdated);
+  });
+}
+
+// Sort by lastUpdated descending
+function sortNewest<T extends { lastUpdated: string }>(items: T[]): T[] {
+  return [...items].sort((a, b) => b.lastUpdated.localeCompare(a.lastUpdated));
+}
+
+// Sort alphabetically by name
+function sortAlpha<T extends { name: string }>(items: T[]): T[] {
+  return [...items].sort((a, b) => a.name.localeCompare(b.name));
+}
+
+export function AppSidebar({ defaultCollapsed }: { defaultCollapsed?: boolean } = {}) {
+  const sections = [
+    {
+      label: "Campaigns",
+      href: "/campaigns",
+      items: sortCampaigns(campaigns).map((c) => ({ label: c.name, href: `/campaigns/${c.slug}` })),
+    },
+    {
+      label: "Research",
+      href: "/research",
+      groups: RESEARCH_TYPES
+        .filter((type) => research.some((r) => r.researchType === type))
+        .map((type) => ({
+          label: type,
+          href: `/research?type=${type}`,
+          type,
+          items: sortNewest(research.filter((r) => r.researchType === type))
+            .map((r) => ({ label: r.name, href: `/research/${r.slug}` })),
+        })),
+      items: sortNewest(research.filter((r) => !r.researchType))
+        .map((r) => ({ label: r.name, href: `/research/${r.slug}` })),
+    },
+    {
+      label: "Apps",
+      href: "/apps",
+      items: sortAlpha(apps).map((a) => ({ label: a.name, href: `/apps/${a.slug}` })),
+    },
+    {
+      label: "Mechanisms",
+      href: "/mechanisms",
+      items: sortAlpha(mechanisms).map((m) => ({ label: m.name, href: `/mechanisms/${m.slug}` })),
+    },
+    {
+      label: "Case Studies",
+      href: "/case-studies",
+      items: sortNewest(caseStudies).map((cs) => ({ label: cs.name, href: `/case-studies/${cs.slug}` })),
+    },
+  ];
+
+  return <AppSidebarClient sections={sections} defaultCollapsed={defaultCollapsed} />;
+}
diff --git a/src/components/layouts/AppSidebarClient.tsx b/src/components/layouts/AppSidebarClient.tsx
new file mode 100644
index 00000000..d926adfe
--- /dev/null
+++ b/src/components/layouts/AppSidebarClient.tsx
@@ -0,0 +1,378 @@
+"use client";
+
+import { useState, useEffect, useLayoutEffect, useRef, useCallback, Suspense, memo } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { ChevronRight, ChevronDown, ChevronLeft, Folder, FolderOpen } from "lucide-react";
+import { useSidebar } from "@/context/SidebarContext";
+
+export interface SidebarItem {
+  label: string;
+  href: string;
+}
+
+export interface SidebarGroup {
+  label: string;
+  href: string;
+  type?: string;
+  items: SidebarItem[];
+}
+
+export interface SidebarSection {
+  label: string;
+  href: string;
+  groups?: SidebarGroup[];
+  items?: SidebarItem[];
+}
+
+interface AppSidebarClientProps {
+  sections: SidebarSection[];
+  defaultCollapsed?: boolean;
+}
+
+// Needs suspense
+function SearchParamsReader({ onType }: { onType: (t: string | null) => void }) {
+  const searchParams = useSearchParams();
+  const type = searchParams.get("type");
+  useEffect(() => { onType(type); }, [type, onType]);
+  return null;
+}
+
+// Module-level pure function
+function renderItems(
+  items: SidebarItem[],
+  attachRef: boolean,
+  onItemClick: (() => void) | undefined,
+  pathname: string,
+  activeItemRef: React.RefObject<HTMLAnchorElement>,
+) {
+  return items.map((item) => {
+    const isActive = pathname === item.href;
+    return (
+      <li key={item.href}>
+        <Link
+          href={item.href}
+          title={item.label}
+          onClick={onItemClick}
+          ref={attachRef && isActive ? activeItemRef : undefined}
+          className={`block text-sm py-1 px-1.5 rounded leading-snug truncate transition-colors ${
+            isActive ? "text-teal-400 font-medium" : "text-gray-300 hover:text-gray-25"
+          }`}
+        >
+          {item.label}
+        </Link>
+      </li>
+    );
+  });
+}
+
+interface SectionRowProps {
+  section: SidebarSection;
+  isExpanded: boolean;
+  pathname: string;
+  activeType: string | null;
+  attachRef: boolean;
+  onItemClick?: () => void;
+  onToggle: (label: string) => void;
+  activeItemRef: React.RefObject<HTMLAnchorElement>;
+  activeGroupRef: React.RefObject<HTMLAnchorElement>;
+  activeSectionRef: React.RefObject<HTMLAnchorElement>;
+}
+
+const SectionRow = memo(function SectionRow({
+  section, isExpanded, pathname, activeType, attachRef, onItemClick, onToggle,
+  activeItemRef, activeGroupRef, activeSectionRef,
+}: SectionRowProps) {
+  const isActiveSection = pathname === section.href || pathname.startsWith(section.href + "/");
+  const isExactSection = pathname === section.href;
+
+  return (
+    <div>
+      <div className="sticky top-0 z-10 relative">
+        <Link
+          href={section.href}
+          onClick={onItemClick}
+          ref={attachRef && isExactSection ? activeSectionRef : undefined}
+          className={`group flex items-center justify-between gap-1 py-1.5 w-full cursor-pointer transition-colors ${
+            isExactSection
+              ? "text-teal-400"
+              : isActiveSection
+              ? "text-gray-200 hover:text-gray-25"
+              : "text-gray-300 hover:text-gray-200"
+          }`}
+        >
+          <span className="flex items-center gap-1.5 text-sm font-mono uppercase tracking-widest whitespace-nowrap">
+            {isExpanded ? <FolderOpen className="size-3.5 shrink-0" /> : <Folder className="size-3.5 shrink-0" />}
+            {section.label}
+          </span>
+          <span className="shrink-0 p-0.5 text-gray-600 group-hover:text-gray-400 transition-colors">
+            {isExpanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
+          </span>
+        </Link>
+        <button
+          onClick={(e) => { e.preventDefault(); e.stopPropagation(); onToggle(section.label); }}
+          className="absolute right-0 top-0 bottom-0 w-6 cursor-pointer"
+          aria-label={isExpanded ? `Collapse ${section.label}` : `Expand ${section.label}`}
+        />
+      </div>
+
+      <div className={`grid transition-[grid-template-rows] duration-300 ease-in-out ${isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`}>
+        <div className="overflow-hidden">
+          <div className="border-l border-gray-800 ml-0.5 pl-2 pt-1 pb-3">
+            {section.groups && section.groups.length > 0 && (
+              <div className="space-y-2">
+                {section.groups.map((group) => {
+                  const isActiveGroup =
+                    pathname === section.href &&
+                    activeType === (group.type ?? null);
+                  return (
+                    <div
+                      key={group.href}
+                      className={`border-l-2 transition-colors pl-2 ${isActiveGroup ? "border-teal-500" : "border-transparent"}`}
+                    >
+                      <Link
+                        href={group.href}
+                        onClick={onItemClick}
+                        ref={attachRef && isActiveGroup ? activeGroupRef : undefined}
+                        className={`block text-sm font-mono py-1 px-1 rounded leading-snug transition-colors uppercase tracking-widest ${
+                          isActiveGroup ? "text-teal-400" : "text-gray-400 hover:text-gray-200"
+                        }`}
+                      >
+                        {group.label}
+                      </Link>
+                      <ul className="space-y-0.5 border-l border-gray-800 ml-1 pl-2 mt-0.5">
+                        {renderItems(group.items, attachRef, onItemClick, pathname, activeItemRef)}
+                      </ul>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+            {section.items && section.items.length > 0 && (
+              <ul className={`space-y-0.5 pl-2 ${section.groups?.length ? "mt-1" : ""}`}>
+                {renderItems(section.items, attachRef, onItemClick, pathname, activeItemRef)}
+              </ul>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+function AppSidebarInner({
+  sections,
+  activeType,
+}: {
+  sections: SidebarSection[];
+  activeType: string | null;
+}) {
+  const pathname = usePathname();
+  const { collapsed, toggleCollapsed, sidebarWidth, setSidebarWidth, saveSidebarWidth, isResizing, setIsResizing } = useSidebar();
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const activeItemRef = useRef<HTMLAnchorElement>(null);
+  const activeGroupRef = useRef<HTMLAnchorElement>(null);
+  const activeSectionRef = useRef<HTMLAnchorElement>(null);
+  const isFirstScroll = useRef(true);
+  const isDragging = useRef(false);
+
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [expanded, setExpanded] = useState<Set<string>>(() => {
+    const initial = new Set<string>();
+    for (const s of sections) {
+      if (pathname.startsWith(s.href + "/")) {
+        initial.add(s.label);
+      }
+    }
+    return initial;
+  });
+
+  const widthTransition = isResizing ? "" : "transition-[width] duration-300 ease-in-out";
+  const visibleWidth = collapsed ? 0 : sidebarWidth;
+
+  const toggleSection = useCallback((label: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(label)) next.delete(label);
+      else next.add(label);
+      return next;
+    });
+  }, []);
+
+  const closeMobile = useCallback(() => setMobileOpen(false), []);
+
+  const startResize = (e: React.MouseEvent) => {
+    e.preventDefault();
+    isDragging.current = true;
+    setIsResizing(true);
+    const onMouseMove = (e: MouseEvent) => {
+      if (!isDragging.current) return;
+      setSidebarWidth(Math.min(520, Math.max(180, e.clientX)));
+    };
+    const onMouseUp = (e: MouseEvent) => {
+      isDragging.current = false;
+      setIsResizing(false);
+      const w = Math.min(520, Math.max(180, e.clientX));
+      saveSidebarWidth(w);
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  };
+
+  // Lock body scroll when mobile menu is open
+  useEffect(() => {
+    document.body.style.overflow = mobileOpen ? "hidden" : "";
+    return () => { document.body.style.overflow = ""; };
+  }, [mobileOpen]);
+
+  // Scroll active item into view on navigation
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    const target = activeItemRef.current ?? activeGroupRef.current ?? activeSectionRef.current;
+    if (!container || !target) return;
+    container.scrollTo({
+      top: target.offsetTop - container.clientHeight / 2 + target.offsetHeight / 2,
+      behavior: isFirstScroll.current ? "instant" : "smooth",
+    });
+    isFirstScroll.current = false;
+  }, [pathname, activeType]);
+
+  const homeClass = `block text-sm font-mono uppercase tracking-widest transition-colors whitespace-nowrap py-1.5 ${
+    pathname === "/" ? "text-teal-400" : "text-gray-300 hover:text-gray-200"
+  }`;
+
+  const sharedSectionProps = {
+    pathname,
+    activeType,
+    onToggle: toggleSection,
+    activeItemRef: activeItemRef as React.RefObject<HTMLAnchorElement>,
+    activeGroupRef: activeGroupRef as React.RefObject<HTMLAnchorElement>,
+    activeSectionRef: activeSectionRef as React.RefObject<HTMLAnchorElement>,
+  };
+
+  return (
+    <>
+      {/* ── Mobile nav ─────────────────────────────────────────── */}
+      <div className={`md:hidden sticky top-[70px] z-40 bg-gray-950/80 backdrop-blur-sm ${pathname === "/" ? "hidden" : ""}`}>
+        <button
+          className="flex items-center gap-1.5 px-4 py-3 text-gray-400 hover:text-gray-200 transition-colors cursor-pointer"
+          onClick={() => setMobileOpen((o) => !o)}
+          aria-expanded={mobileOpen}
+          aria-label="Toggle navigation"
+        >
+          {mobileOpen ? <ChevronDown className="w-3.5 h-3.5 shrink-0" /> : <ChevronRight className="w-3.5 h-3.5 shrink-0" />}
+          <span className="font-mono text-xs uppercase tracking-widest">Menu</span>
+        </button>
+
+        <div className={`grid transition-[grid-template-rows] duration-300 ease-in-out ${mobileOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`}>
+          <div className="overflow-hidden">
+            <div className="overflow-y-auto h-[calc(100dvh-8rem)] border-t border-gray-800">
+              <nav className="px-4 py-4 space-y-4">
+                <Link href="/" onClick={closeMobile} className={homeClass}>Home</Link>
+                <div className="space-y-4">
+                  {sections.map((section) => (
+                    <SectionRow
+                      key={section.label}
+                      section={section}
+                      isExpanded={expanded.has(section.label)}
+                      attachRef={false}
+                      onItemClick={closeMobile}
+                      {...sharedSectionProps}
+                    />
+                  ))}
+                </div>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {mobileOpen && (
+        <div
+          className="md:hidden fixed inset-0 z-30 bg-gray-950/80 backdrop-blur-sm"
+          onClick={closeMobile}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* ── Desktop sidebar ────────────────────────────────────── */}
+      <aside
+        className={`hidden md:block md:relative md:shrink-0 md:overflow-visible ${widthTransition}`}
+        style={{ width: visibleWidth }}
+      >
+        {/* Extend bg behind the fixed header (0 → 70px), z-40 to paint above Chladni canvas (z-auto) but below header (z-50) */}
+        <div
+          className={`absolute left-0 z-40 bg-gray-900 pointer-events-none ${widthTransition}`}
+          style={{ top: -70, height: 70, width: visibleWidth }}
+          aria-hidden="true"
+        />
+        <div className="sticky top-[70px] h-[calc(100vh-72px)] z-30 isolate">
+          <div
+            className={`h-full border-r border-gray-800 overflow-hidden bg-gray-900 ${widthTransition}`}
+            style={{ width: visibleWidth }}
+          >
+            <div ref={scrollContainerRef} className="h-full overflow-y-scroll" style={{ width: sidebarWidth }}>
+              <div className="py-6 px-4 space-y-4">
+                <Link href="/" className={homeClass}>Home</Link>
+                <nav className="space-y-4">
+                  {sections.map((section) => (
+                    <SectionRow
+                      key={section.label}
+                      section={section}
+                      isExpanded={expanded.has(section.label)}
+                      attachRef={true}
+                      {...sharedSectionProps}
+                    />
+                  ))}
+                </nav>
+              </div>
+            </div>
+          </div>
+
+          {!collapsed && (
+            <div
+              onMouseDown={startResize}
+              className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-teal-500/40 transition-colors z-10"
+              aria-hidden="true"
+            />
+          )}
+
+          <button
+            onClick={toggleCollapsed}
+            className="absolute left-full top-8 z-20 flex items-center justify-center w-4 h-8 bg-gray-800 border border-l-0 border-gray-700 rounded-r-md text-gray-300 hover:text-gray-25 hover:bg-gray-700 transition-colors cursor-pointer"
+            aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+          >
+            {collapsed ? <ChevronRight className="w-3 h-3" /> : <ChevronLeft className="w-3 h-3" />}
+          </button>
+        </div>
+      </aside>
+    </>
+  );
+}
+
+export function AppSidebarClient({ sections, defaultCollapsed = false }: AppSidebarClientProps) {
+  const [activeType, setActiveType] = useState<string | null>(null);
+  const { applyDefault } = useSidebar();
+
+  // Apply page-level default only for first-time visitors (no saved preference)
+  useLayoutEffect(() => {
+    applyDefault(defaultCollapsed);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <>
+      {/* Only this tiny piece needs Suspense — everything else SSRs normally */}
+      <Suspense>
+        <SearchParamsReader onType={setActiveType} />
+      </Suspense>
+      <AppSidebarInner sections={sections} activeType={activeType} />
+    </>
+  );
+}
diff --git a/src/components/layouts/Breadcrumb.tsx b/src/components/layouts/Breadcrumb.tsx
new file mode 100644
index 00000000..b6d36643
--- /dev/null
+++ b/src/components/layouts/Breadcrumb.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+
+export interface BreadcrumbItem {
+  href?: string;
+  label: string;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+}
+
+export function Breadcrumb({ items }: BreadcrumbProps) {
+  return (
+    <nav
+      className="flex items-center gap-1 text-sm text-gray-500 min-w-0"
+      aria-label="Breadcrumb"
+    >
+      {items.map((item, i) => {
+        const isLast = i === items.length - 1;
+        return (
+          <span
+            key={i}
+            className={`flex items-center gap-1 font-mono ${isLast ? "min-w-0" : "shrink-0"}`}
+          >
+            {i > 0 && (
+              <ChevronRight className="w-3.5 h-3.5 text-gray-600 shrink-0" />
+            )}
+            {item.href ? (
+              <Link
+                href={item.href}
+                className="hover:text-gray-25 transition-colors whitespace-nowrap text-gray-400"
+              >
+                {item.label}
+              </Link>
+            ) : (
+              <span className="text-gray-400 max-w-[40ch] truncate">
+                {item.label}
+              </span>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}
diff --git a/src/components/layouts/CategoryContent.tsx b/src/components/layouts/CategoryContent.tsx
index ea1eeb4b..366f5270 100644
--- a/src/components/layouts/CategoryContent.tsx
+++ b/src/components/layouts/CategoryContent.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useMemo } from "react";
+import { useRouter, usePathname } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
 import { LayoutGrid, List, ChevronDown, Check } from "lucide-react";
@@ -13,7 +14,6 @@ import type {
   CaseStudy,
   Campaign,
 } from "@/lib/types";
-import TagsList from "@/components/ui/TagsList";
 import InitialAvatar from "@/components/ui/InitialAvatar";
 import { formatRelativeDate, calcReadTime } from "@/lib/utils";
 import AppCard from "@/components/cards/AppCard";
@@ -30,7 +30,13 @@ export type ContentType =
   | "research"
   | "case-study"
   | "campaign";
-type SortOption = "newest" | "oldest" | "alpha" | "read-time" | "read-time-desc" | "author";
+export type SortOption =
+  | "newest"
+  | "oldest"
+  | "alpha"
+  | "read-time"
+  | "read-time-desc"
+  | "author";
 type ViewOption = "grid" | "list";
 
 export interface FilterOption {
@@ -49,6 +55,9 @@ interface CategoryContentProps {
   columns?: 2 | 3;
   itemLabel?: string;
   filters?: FilterConfig;
+  initialFilter?: string;
+  initialSort?: SortOption;
+  initialAuthor?: string;
 }
 
 // ─── Constants ────────────────────────────────────────────────────────────────
@@ -59,7 +68,7 @@ const SORT_LABELS: Record<SortOption, string> = {
   alpha: "Title (A–Z)",
   "read-time": "Read time (asc)",
   "read-time-desc": "Read time (desc)",
-  "author": "Author (A–Z)",
+  author: "Author (A–Z)",
 };
 
 // Which sort options apply to each content type
@@ -67,8 +76,22 @@ const AVAILABLE_SORTS: Record<ContentType, SortOption[]> = {
   app: ["newest", "oldest", "alpha"],
   campaign: ["newest", "oldest", "alpha"],
   mechanism: ["newest", "oldest", "alpha", "read-time", "read-time-desc"],
-  research: ["newest", "oldest", "alpha", "read-time", "read-time-desc", "author"],
-  "case-study": ["newest", "oldest", "alpha", "read-time", "read-time-desc", "author"],
+  research: [
+    "newest",
+    "oldest",
+    "alpha",
+    "read-time",
+    "read-time-desc",
+    "author",
+  ],
+  "case-study": [
+    "newest",
+    "oldest",
+    "alpha",
+    "read-time",
+    "read-time-desc",
+    "author",
+  ],
 };
 
 const BASE_HREFS: Record<ContentType, string> = {
@@ -108,8 +131,11 @@ function sortItems(items: BaseContent[], sort: SortOption): BaseContent[] {
   if (sort === "oldest")
     return sorted.sort((a, b) => sortKey(a).localeCompare(sortKey(b)));
   if (sort === "read-time" || sort === "read-time-desc") {
-    const withTime = sorted.map((item) => ({ item, t: calcReadTime(item.description) }));
-    withTime.sort((a, b) => sort === "read-time" ? a.t - b.t : b.t - a.t);
+    const withTime = sorted.map((item) => ({
+      item,
+      t: calcReadTime(item.description),
+    }));
+    withTime.sort((a, b) => (sort === "read-time" ? a.t - b.t : b.t - a.t));
     return withTime.map(({ item }) => item);
   }
   if (sort === "author")
@@ -206,7 +232,9 @@ function ListRow({
             </h3>
             {showDate && (
               <span className="text-xs text-gray-500 shrink-0 tabular-nums">
-                {formatRelativeDate((item as Campaign).startDate ?? item.lastUpdated)}
+                {formatRelativeDate(
+                  (item as Campaign).startDate ?? item.lastUpdated,
+                )}
               </span>
             )}
           </div>
@@ -320,14 +348,14 @@ function ViewToggle({
     <div className="flex rounded-lg border border-gray-600 overflow-hidden">
       <button
         onClick={() => onChange("grid")}
-        className={`p-1.5 transition-colors ${view === "grid" ? activeClass : inactiveClass}`}
+        className={`cursor-pointer p-1.5 transition-colors ${view === "grid" ? activeClass : inactiveClass}`}
         aria-label="Grid view"
       >
         <LayoutGrid className="w-4 h-4" />
       </button>
       <button
         onClick={() => onChange("list")}
-        className={`p-1.5 transition-colors ${view === "list" ? activeClass : inactiveClass}`}
+        className={`cursor-pointer p-1.5 transition-colors ${view === "list" ? activeClass : inactiveClass}`}
         aria-label="List view"
       >
         <List className="w-4 h-4" />
@@ -353,7 +381,7 @@ function FilterTabs({
         <button
           key={value}
           onClick={() => onChange(value)}
-          className={`px-3 py-1.5 rounded-full text-sm transition-colors ${
+          className={`px-3 py-1.5 rounded-full text-sm transition-colors cursor-pointer ${
             active === value
               ? "bg-gray-25 text-gray-900 font-medium"
               : "bg-gray-800 text-gray-400 hover:text-gray-25"
@@ -376,11 +404,48 @@ export function CategoryContent({
   columns = 3,
   itemLabel = "items",
   filters,
+  initialFilter = "all",
+  initialSort = "newest",
+  initialAuthor = "all",
 }: CategoryContentProps) {
-  const [sort, setSort] = useState<SortOption>("newest");
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [sort, setSort] = useState<SortOption>(initialSort);
   const [view, setView] = useState<ViewOption>("grid");
-  const [activeFilter, setActiveFilter] = useState<string>("all");
-  const [activeAuthor, setActiveAuthor] = useState<string>("all");
+  const [activeFilter, setActiveFilter] = useState<string>(initialFilter);
+  const [activeAuthor, setActiveAuthor] = useState<string>(initialAuthor);
+
+  function buildUrl(overrides: {
+    filter?: string;
+    sort?: SortOption;
+    author?: string;
+  }) {
+    const f = overrides.filter ?? activeFilter;
+    const s = overrides.sort ?? sort;
+    const a = overrides.author ?? activeAuthor;
+    const params = new URLSearchParams();
+    if (f && f !== "all") params.set("type", f);
+    if (s && s !== "newest") params.set("sort", s);
+    if (a && a !== "all") params.set("author", a);
+    const qs = params.toString();
+    return `${pathname}${qs ? `?${qs}` : ""}`;
+  }
+
+  function handleFilterChange(value: string) {
+    setActiveFilter(value);
+    router.replace(buildUrl({ filter: value }), { scroll: false });
+  }
+
+  function handleSortChange(value: SortOption) {
+    setSort(value);
+    router.replace(buildUrl({ sort: value }), { scroll: false });
+  }
+
+  function handleAuthorChange(value: string) {
+    setActiveAuthor(value);
+    router.replace(buildUrl({ author: value }), { scroll: false });
+  }
 
   const showAuthorFilter = AUTHOR_FILTER_TYPES.includes(type);
   const availableSorts = AVAILABLE_SORTS[type];
@@ -404,7 +469,9 @@ export function CategoryContent({
     () =>
       !filters || activeFilter === "all"
         ? authorFiltered
-        : authorFiltered.filter((item) => (item as any)[filters.key] === activeFilter),
+        : authorFiltered.filter(
+            (item) => (item as any)[filters.key] === activeFilter,
+          ),
     [authorFiltered, filters, activeFilter],
   );
 
@@ -412,8 +479,12 @@ export function CategoryContent({
   const baseHref = BASE_HREFS[type];
   const preferLogo = type === "app";
   const showDate = type !== "app";
-  const showReadTime = (["mechanism", "research", "case-study"] as ContentType[]).includes(type);
-  const showAuthor = (["research", "case-study"] as ContentType[]).includes(type);
+  const showReadTime = (
+    ["mechanism", "research", "case-study"] as ContentType[]
+  ).includes(type);
+  const showAuthor = (["research", "case-study"] as ContentType[]).includes(
+    type,
+  );
 
   return (
     <div>
@@ -423,7 +494,7 @@ export function CategoryContent({
           <FilterTabs
             options={filters.options}
             active={activeFilter}
-            onChange={setActiveFilter}
+            onChange={handleFilterChange}
           />
         ) : (
           <p className="text-sm text-gray-500">
@@ -436,10 +507,14 @@ export function CategoryContent({
             <AuthorFilter
               authors={uniqueAuthors}
               active={activeAuthor}
-              onChange={setActiveAuthor}
+              onChange={handleAuthorChange}
             />
           )}
-          <SortDropdown sort={sort} onChange={setSort} available={availableSorts} />
+          <SortDropdown
+            sort={sort}
+            onChange={handleSortChange}
+            available={availableSorts}
+          />
           <ViewToggle view={view} onChange={setView} />
         </div>
       </div>
@@ -453,7 +528,10 @@ export function CategoryContent({
       {/* Grid view */}
       {view === "grid" && (
         <div
-          className={`grid md:grid-cols-2 ${columns === 3 ? "lg:grid-cols-3" : ""} gap-6`}
+          className="grid gap-6"
+          style={{
+            gridTemplateColumns: `repeat(auto-fill, minmax(${columns === 2 ? "380px" : "300px"}, 1fr))`,
+          }}
         >
           {sorted.map((item) => (
             <GridCard key={item.slug} item={item} type={type} />
diff --git a/src/components/layouts/DetailPageLayout.tsx b/src/components/layouts/DetailPageLayout.tsx
index 075437cf..f97ae02d 100644
--- a/src/components/layouts/DetailPageLayout.tsx
+++ b/src/components/layouts/DetailPageLayout.tsx
@@ -1,7 +1,5 @@
-import Link from "next/link";
 import Image from "next/image";
 import {
-  ArrowLeft,
   Edit,
   ExternalLink,
   Twitter,
@@ -12,27 +10,8 @@ import { ReactNode, ComponentType } from "react";
 import { Button, Badge, SearchBar } from "@/components/ui";
 import CategoryIcon from "@/components/ui/CategoryIcon";
 import ChladniBackground from "@/components/ChladniBackground";
-
-interface BreadcrumbProps {
-  href: string;
-  label: string;
-}
-
-export function Breadcrumb({ href, label }: BreadcrumbProps) {
-  return (
-    <div className="bg-gray-950 border-b border-gray-600">
-      <div className="container-page py-4">
-        <Link
-          href={href}
-          className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-25 transition-colors"
-        >
-          <ArrowLeft className="w-4 h-4" />
-          {label}
-        </Link>
-      </div>
-    </div>
-  );
-}
+export type { BreadcrumbItem, BreadcrumbProps } from "./Breadcrumb";
+export { Breadcrumb } from "./Breadcrumb";
 
 interface HeroImageProps {
   src: string;
@@ -41,19 +20,24 @@ interface HeroImageProps {
 
 export function HeroImage({ src, alt }: HeroImageProps) {
   return (
-    <div className="h-64 md:h-80 bg-gray-950 relative overflow-hidden">
-      <Image src={src} alt={alt} fill sizes="100vw" className="object-cover" />
-      <div className="absolute inset-0 bg-linear-to-t from-gray-950 to-transparent" />
+    <div className="h-64 md:h-80 bg-gray-950 relative overflow-hidden rounded-3xl">
+      <Image src={src} alt={alt} fill sizes="100vw" className="object-cover " />
     </div>
   );
 }
 
 interface DetailPageLayoutProps {
   children: ReactNode;
+  sidebar?: ReactNode;
 }
 
-export function DetailPageLayout({ children }: DetailPageLayoutProps) {
-  return <div className="min-h-screen bg-gray-900">{children}</div>;
+export function DetailPageLayout({ children, sidebar }: DetailPageLayoutProps) {
+  return (
+    <div className="min-h-screen bg-gray-900 md:flex">
+      {sidebar}
+      <div className="flex-1 min-w-0">{children}</div>
+    </div>
+  );
 }
 
 interface PageHeaderProps {
@@ -257,10 +241,16 @@ export function SocialLinksSection({ links }: SocialLinksSectionProps) {
 
 interface ListPageLayoutProps {
   children: ReactNode;
+  sidebar?: ReactNode;
 }
 
-export function ListPageLayout({ children }: ListPageLayoutProps) {
-  return <div className="min-h-screen bg-gray-900">{children}</div>;
+export function ListPageLayout({ children, sidebar }: ListPageLayoutProps) {
+  return (
+    <div className="min-h-screen bg-gray-900 md:flex">
+      {sidebar}
+      <div className="flex-1 min-w-0">{children}</div>
+    </div>
+  );
 }
 
 interface ListPageHeaderProps {
@@ -270,15 +260,17 @@ interface ListPageHeaderProps {
 
 export function ListPageHeader({ title, description }: ListPageHeaderProps) {
   return (
-    <section className="relative overflow-hidden -mt-[72px] pt-[72px] w-full">
+    <section className="relative -mt-[111px] pt-[111px] md:-mt-[70px] md:pt-[70px] w-full">
       <ChladniBackground variant="3" opacity={0.5} />
       <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-900 to-transparent z-[1]" />
       <div className="relative z-10 pt-16 pb-28 w-full">
         <h1 className="text-3xl md:text-5xl font-heading text-gray-25 text-center font-light">
           {title}
         </h1>
-    
-        <p className="mt-4 text-center text-gray-200 max-w-2xl mx-auto sm:text-2xl font-serif">{description}</p>
+
+        <p className="mt-4 text-center text-gray-200 max-w-2xl mx-auto sm:text-2xl font-serif">
+          {description}
+        </p>
       </div>
     </section>
   );
@@ -355,7 +347,10 @@ interface ItemsGridProps {
 export function ItemsGrid({ children, columns = 3 }: ItemsGridProps) {
   return (
     <div
-      className={`grid md:grid-cols-2 ${columns === 3 ? "lg:grid-cols-3" : ""} gap-6`}
+      className="grid gap-6"
+      style={{
+        gridTemplateColumns: `repeat(auto-fill, minmax(${columns === 2 ? "380px" : "320px"}, 1fr))`,
+      }}
     >
       {children}
     </div>
diff --git a/src/components/search/AIChatSidebar.tsx b/src/components/search/AIChatSidebar.tsx
index c184c9e5..04027991 100644
--- a/src/components/search/AIChatSidebar.tsx
+++ b/src/components/search/AIChatSidebar.tsx
@@ -20,7 +20,7 @@ import {
   HelpCircle,
   BarChart3,
 } from "lucide-react";
-import { useSearch } from "./SearchProvider";
+import { useSearch } from "@/context/SearchContext";
 
 const SUGGESTED_QUESTIONS = [
   { icon: Zap, text: "What is quadratic funding?" },
diff --git a/src/components/search/SearchModal.tsx b/src/components/search/SearchModal.tsx
index f6183755..666b1dbc 100644
--- a/src/components/search/SearchModal.tsx
+++ b/src/components/search/SearchModal.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import * as Dialog from "@radix-ui/react-dialog";
 import { Search, Hash, BookOpen, Sparkles } from "lucide-react";
-import { useSearch } from "./SearchProvider";
+import { useSearch } from "@/context/SearchContext";
 import type { SearchResultItem } from "@/app/api/search/route";
 import { Button } from "../ui";
 
diff --git a/src/components/templates/ContentDetailPage.tsx b/src/components/templates/ContentDetailPage.tsx
index e79d38aa..5073febc 100644
--- a/src/components/templates/ContentDetailPage.tsx
+++ b/src/components/templates/ContentDetailPage.tsx
@@ -1,12 +1,11 @@
 import { ReactNode } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { ExternalLink } from "lucide-react";
 import {
   DetailPageLayout,
   Breadcrumb,
   HeroImage,
-  PageHeader,
-  TwoColumnLayout,
   TagsSection,
   SuggestEditButton,
 } from "@/components/layouts";
@@ -21,12 +20,17 @@ interface RelatedSection {
   items: ReactNode[];
 }
 
+interface BreadcrumbItem {
+  href?: string;
+  label: string;
+}
+
 interface ContentDetailPageProps {
   item: BaseContent & {
     description: string;
   };
-  breadcrumbHref: string;
-  breadcrumbLabel: string;
+  breadcrumbItems: BreadcrumbItem[];
+  sidebar?: ReactNode;
   relatedSections?: RelatedSection[];
   ctaUrl?: string;
   ctaLabel?: string;
@@ -37,8 +41,8 @@ interface ContentDetailPageProps {
 
 export default function ContentDetailPage({
   item,
-  breadcrumbHref,
-  breadcrumbLabel,
+  breadcrumbItems,
+  sidebar,
   relatedSections = [],
   ctaUrl,
   ctaLabel = "Visit",
@@ -50,107 +54,112 @@ export default function ContentDetailPage({
   const readTime = calcReadTime(item.description);
   const authors = item.authors ?? [];
   const authorSocials = Object.fromEntries(
-    authorsData.map((a) => [a.name, (a as { name: string; social?: string }).social]),
+    authorsData.map((a) => [
+      a.name,
+      (a as { name: string; social?: string }).social,
+    ]),
   );
+  const categoryHref =
+    breadcrumbItems.find((b) => b.href && b.href !== "/")?.href ?? "";
   return (
-    <DetailPageLayout>
-      <Breadcrumb href={breadcrumbHref} label={breadcrumbLabel} />
+    <DetailPageLayout sidebar={sidebar}>
+      <section className="mb-16">
+        {/* Header */}
+        <div>
+          <div className="border-y border-gray-700 py-2">
+            <div className="detail-page-container">
+              <Breadcrumb items={breadcrumbItems} />
+            </div>
+          </div>
 
-      {banner && <HeroImage src={banner} alt={item.name} />}
+          <div className="pb-6 pt-8">
+            <div className="flex flex-col md:flex-row gap-6 md:gap-8 md:items-center detail-page-container">
+              {/* Logo */}
+              {item.logo && (
+                <div className="shrink-0">
+                  <Image
+                    src={item.logo}
+                    alt={`${item.name} logo`}
+                    width={80}
+                    height={80}
+                    className="rounded-2xl object-cover bg-gray-800"
+                  />
+                </div>
+              )}
 
-      <PageHeader>
-        <div className="flex flex-col md:flex-row gap-6 md:gap-8 md:items-center">
-          {/* Logo (for apps) */}
-          {item.logo && !item.banner && (
-            <div className="shrink-0">
-              <Image
-                src={item.logo}
-                alt={`${item.name} logo`}
-                width={80}
-                height={80}
-                className="rounded-2xl object-cover bg-gray-900"
-              />
-            </div>
-          )}
+              <div className="flex-1">
+                {showDate && item.lastUpdated && (
+                  <p className="text-sm text-gray-400 mb-3 font-mono">
+                    {new Date(item.lastUpdated).toLocaleDateString("en-US", {
+                      year: "numeric",
+                      month: "short",
+                      day: "numeric",
+                    })}
+                  </p>
+                )}
+                <h1 className="text-3xl md:text-4xl font-bold text-gray-25 mb-2 md:mb-4 max-w-3xl">
+                  {item.name}
+                </h1>
+                <div className="w-full flex flex-wrap gap-8 items-center justify-between">
+                  <div className="w-full">
+                    <p className="text-gray-300 max-w-2xl font-serif">
+                      {item.shortDescription}
+                    </p>
 
-          {/* Title and Description */}
-          <div className="flex-1">
-            <h1 className="text-3xl md:text-4xl font-bold text-gray-25 mb-2 md:mb-4">
-              {item.name}
-            </h1>
-            <div className="w-full flex flex-wrap gap-6 items-center justify-between">
-              <div>
-                <p className="text-lg text-gray-300 max-w-2xl">
-                  {item.shortDescription}
-                </p>
-              
-                <p className="mt-3 text-sm text-gray-300">
-                  {authors.length > 0 && (
-                    <>
-                      By{" "}
-                      {authors.map((name, i) => {
-                        const social = authorSocials[name];
-                        return (
-                          <span key={name}>
-                            {i > 0 && ", "}
-                            {social ? (
-                              <Link
-                                href={social}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="hover:text-teal-400 transition-colors underline underline-offset-3"
-                              >
-                                {name}
-                              </Link>
-                            ) : (
-                              name
-                            )}
-                          </span>
-                        );
-                      })}{" "}
-                      {"· "}
-                    </>
+                    <div className="mt-3 text-sm text-gray-300 font-mono flex items-center gap-2 justify-between w-full">
+                      {authors.length > 0 && (
+                        <p>
+                          by{" "}
+                          {authors.map((name, i) => {
+                            const social = authorSocials[name];
+                            return (
+                              <span key={name}>
+                                {i > 0 && ", "}
+                                {social ? (
+                                  <Link
+                                    href={social}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="hover:text-teal-400 transition-colors underline underline-offset-3"
+                                  >
+                                    {name}
+                                  </Link>
+                                ) : (
+                                  name
+                                )}
+                              </span>
+                            );
+                          })}
+                        </p>
+                      )}
+                      <p>{readTime} min read</p>
+                    </div>
+                  </div>
+                  {ctaUrl && ctaLabel && (
+                    <Button
+                      href={ctaUrl}
+                      size="sm"
+                      variant="secondary"
+                      external={ctaUrl.startsWith("http")}
+                      className="ml-auto"
+                    >
+                      <span className="flex items-center gap-2">
+                        {ctaLabel}
+                        <ExternalLink className="w-3.5 h-3.5" />
+                      </span>
+                    </Button>
                   )}
-                  {readTime} min read
-                  {showDate &&
-                    ` · ${new Date(item.lastUpdated).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}`}
-                </p>
+                </div>
               </div>
-              {ctaUrl && ctaLabel && (
-                <Button
-                  href={ctaUrl}
-                  variant="secondary"
-                  external={ctaUrl.startsWith("http")}
-                >
-                  <span className="flex items-center gap-2">
-                    {ctaLabel}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    >
-                      <path d="M15 3h6v6" />
-                      <path d="M10 14 21 3" />
-                      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-                    </svg>
-                  </span>
-                </Button>
-              )}
             </div>
           </div>
         </div>
-      </PageHeader>
 
-      <section className="max-w-[850px] mx-auto container-page section">
-        <div className="space-y-8">
+        <div className="detail-page-container">{banner && <HeroImage src={banner} alt={item.name}  />}</div>
+        {/* Content */}
+        <div className="space-y-8 detail-page-container pt-10 md:pt-16">
           {contentBefore}
-          <article className="">
+          <article>
             <Markdown content={item.description} />
           </article>
 
@@ -164,20 +173,20 @@ export default function ContentDetailPage({
                   <h2 className="text-2xl font-bold text-gray-25 mb-4">
                     {section.title}
                   </h2>
-                  <div className="grid md:grid-cols-2 gap-4">
+                  <div className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))" }}>
                     {section.items}
                   </div>
                 </div>
               ),
           )}
-        </div>
 
-        <div className="space-y-6 my-10">
-          {showSuggestEdit && (
-            <SuggestEditButton
-              contentPath={`${breadcrumbHref.slice(1)}/${item.slug}.md`}
-            />
-          )}
+          <div className="space-y-6 my-10">
+            {showSuggestEdit && (
+              <SuggestEditButton
+                contentPath={`${categoryHref.slice(1)}/${item.slug}.md`}
+              />
+            )}
+          </div>
         </div>
       </section>
     </DetailPageLayout>
diff --git a/src/components/ui/ReadTimeBadge.tsx b/src/components/ui/ReadTimeBadge.tsx
index d7419d02..5e980fc0 100644
--- a/src/components/ui/ReadTimeBadge.tsx
+++ b/src/components/ui/ReadTimeBadge.tsx
@@ -4,7 +4,7 @@ interface ReadTimeBadgeProps {
 
 export default function ReadTimeBadge({ minutes }: ReadTimeBadgeProps) {
   return (
-    <div className="absolute top-3 right-3 bg-gray-900/80 backdrop-blur-sm text-gray-200 text-xs px-2.5 py-1 rounded-md">
+    <div className="absolute top-3 right-3 bg-gray-900/80 backdrop-blur-sm text-gray-200 text-xs px-2.5 py-1 rounded-md font-mono">
       {minutes} min read
     </div>
   );
diff --git a/src/components/ui/SearchBar.tsx b/src/components/ui/SearchBar.tsx
index 74f11451..67fd6d4d 100644
--- a/src/components/ui/SearchBar.tsx
+++ b/src/components/ui/SearchBar.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { Command, Search } from "lucide-react";
-import { useSearch } from "@/components/search/SearchProvider";
+import { useSearch } from "@/context/SearchContext";
 
 interface SearchBarProps {
   placeholder?: string;
diff --git a/src/content/research/biofi-bioregional-finance-web3.md b/src/content/research/biofi-bioregional-finance-web3.md
index 047973e9..448d31dd 100644
--- a/src/content/research/biofi-bioregional-finance-web3.md
+++ b/src/content/research/biofi-bioregional-finance-web3.md
@@ -17,6 +17,7 @@ relatedMechanisms:
   - token-streaming
 relatedApps: []
 sensemakingFor: "mechanisms"
+researchType: Report
 banner: /content-images/research/biofi-bioregional-finance-web3/banner.png
 authors:
   - "Kevin Owocki"
diff --git a/src/content/research/d-acc-market-map.md b/src/content/research/d-acc-market-map.md
index 41cd2c27..341e1267 100644
--- a/src/content/research/d-acc-market-map.md
+++ b/src/content/research/d-acc-market-map.md
@@ -10,6 +10,9 @@ tags:
   - infrastructure
   - privacy
 lastUpdated: '2026-02-26'
+researchType: Analysis
+authors:
+  - Kevin Owocki
 relatedMechanisms:
 
 relatedApps:
diff --git a/src/content/research/fair-fees-dynamic-formula-value-creation-capture.md b/src/content/research/fair-fees-dynamic-formula-value-creation-capture.md
index 832f9e59..04eb22d8 100644
--- a/src/content/research/fair-fees-dynamic-formula-value-creation-capture.md
+++ b/src/content/research/fair-fees-dynamic-formula-value-creation-capture.md
@@ -13,6 +13,7 @@ relatedMechanisms:
   - quadratic-funding
   - direct-grants
 relatedApps: []
+researchType: Analysis
 sensemakingFor: "mechanisms"
 banner: /content-images/research/fair-fees-dynamic-formula-value-creation-capture/banner.png
 authors:
diff --git a/src/components/search/SearchProvider.tsx b/src/context/SearchContext.tsx
similarity index 96%
rename from src/components/search/SearchProvider.tsx
rename to src/context/SearchContext.tsx
index 7edd0f9f..cd560852 100644
--- a/src/components/search/SearchProvider.tsx
+++ b/src/context/SearchContext.tsx
@@ -24,7 +24,7 @@ export function useSearch() {
   return ctx;
 }
 
-export default function SearchProvider({ children }: { children: React.ReactNode }) {
+export function SearchProvider({ children }: { children: React.ReactNode }) {
   const [modalOpen, setModalOpen] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [initialQuery, setInitialQuery] = useState("");
diff --git a/src/context/SidebarContext.tsx b/src/context/SidebarContext.tsx
new file mode 100644
index 00000000..a1bbbcbc
--- /dev/null
+++ b/src/context/SidebarContext.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useLayoutEffect,
+  useCallback,
+  useRef,
+  ReactNode,
+} from "react";
+
+interface SidebarContextValue {
+  collapsed: boolean;
+  toggleCollapsed: () => void;
+  applyDefault: (defaultCollapsed: boolean) => void;
+  sidebarWidth: number;
+  setSidebarWidth: (w: number) => void;
+  saveSidebarWidth: (w: number) => void;
+  isResizing: boolean;
+  setIsResizing: (v: boolean) => void;
+}
+
+const SidebarContext = createContext<SidebarContextValue | null>(null);
+
+export function SidebarProvider({ children }: { children: ReactNode }) {
+  const [collapsed, setCollapsed] = useState(false);
+  const [sidebarWidth, setSidebarWidthState] = useState(320);
+  const [isResizing, setIsResizing] = useState(false);
+  const defaultApplied = useRef(false);
+
+  // Read persisted preferences synchronously before paint
+  useLayoutEffect(() => {
+    const c = localStorage.getItem("sidebarCollapsed");
+    if (c !== null) setCollapsed(c === "true");
+    const w = localStorage.getItem("sidebarWidth");
+    if (w) {
+      const n = parseInt(w, 10);
+      if (n >= 180 && n <= 840) setSidebarWidthState(n);
+    }
+  }, []);
+
+  // Only applies once per session, and only when no saved preference exists
+  const applyDefault = useCallback((defaultCollapsed: boolean) => {
+    if (defaultApplied.current) return;
+    defaultApplied.current = true;
+    if (localStorage.getItem("sidebarCollapsed") === null) {
+      setCollapsed(defaultCollapsed);
+    }
+  }, []);
+
+  const toggleCollapsed = useCallback(() => {
+    setCollapsed((prev) => {
+      const next = !prev;
+      localStorage.setItem("sidebarCollapsed", String(next));
+      return next;
+    });
+  }, []);
+
+  // Called during drag — no localStorage write (too frequent)
+  const setSidebarWidth = useCallback((w: number) => {
+    setSidebarWidthState(w);
+  }, []);
+
+  // Called on drag end — persists to localStorage
+  const saveSidebarWidth = useCallback((w: number) => {
+    setSidebarWidthState(w);
+    localStorage.setItem("sidebarWidth", String(w));
+  }, []);
+
+  return (
+    <SidebarContext.Provider
+      value={{
+        collapsed,
+        toggleCollapsed,
+        applyDefault,
+        sidebarWidth,
+        setSidebarWidth,
+        saveSidebarWidth,
+        isResizing,
+        setIsResizing,
+      }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+export function useSidebar() {
+  const ctx = useContext(SidebarContext);
+  if (!ctx) throw new Error("useSidebar must be used within SidebarProvider");
+  return ctx;
+}