diff --git a/app/globals.css b/app/globals.css
index 484be56..8dfe6d8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,11 +6,11 @@
 :root {
   /* Updated to vibrant green color palette inspired by mycelial networks, forest growth, and living ecosystems */
   --background: oklch(0.98 0.01 145);
-  --foreground: oklch(0.15 0.04 155);
+  --foreground: oklch(0.08 0.02 155);
   --card: oklch(0.99 0.005 145);
-  --card-foreground: oklch(0.15 0.04 155);
+  --card-foreground: oklch(0.08 0.02 155);
   --popover: oklch(0.99 0.005 145);
-  --popover-foreground: oklch(0.15 0.04 155);
+  --popover-foreground: oklch(0.08 0.02 155);
   /* Primary: Vibrant emerald green (living mycelium) */
   --primary: oklch(0.55 0.18 155);
   --primary-foreground: oklch(0.99 0.005 145);
@@ -21,7 +21,7 @@
   --muted-foreground: oklch(0.35 0.04 155);
   /* Accent: Bright lime green (new growth) */
   --accent: oklch(0.72 0.2 135);
-  --accent-foreground: oklch(0.15 0.04 155);
+  --accent-foreground: oklch(0.08 0.02 155);
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.99 0.005 145);
   --border: oklch(0.85 0.03 145);
@@ -34,11 +34,11 @@
   --chart-5: oklch(0.6 0.14 140);
   --radius: 0.625rem;
   --sidebar: oklch(0.98 0.01 145);
-  --sidebar-foreground: oklch(0.15 0.04 155);
+  --sidebar-foreground: oklch(0.08 0.02 155);
   --sidebar-primary: oklch(0.55 0.18 155);
   --sidebar-primary-foreground: oklch(0.99 0.005 145);
   --sidebar-accent: oklch(0.92 0.02 145);
-  --sidebar-accent-foreground: oklch(0.15 0.04 155);
+  --sidebar-accent-foreground: oklch(0.08 0.02 155);
   --sidebar-border: oklch(0.85 0.03 145);
   --sidebar-ring: oklch(0.55 0.18 155);
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 5002af6..36768bd 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -17,6 +17,9 @@ export const metadata: Metadata = {
   description:
     "Exploring regenerative economic systems inspired by mycelial networks and nature's resource allocation algorithms",
   generator: "v0.app",
+  icons: {
+    icon: "/mycofi-logo.jpg",
+  },
 }
 
 export default function RootLayout({
diff --git a/components/book-showcase.tsx b/components/book-showcase.tsx
index 1560b9a..3260ec2 100644
--- a/components/book-showcase.tsx
+++ b/components/book-showcase.tsx
@@ -16,7 +16,7 @@ export function BookShowcase() {
             <div className="relative aspect-[3/4] max-w-md mx-auto">
               <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-accent/20 rounded-lg blur-2xl transform scale-105" />
               <Image
-                src="/images/book-cover.png"
+                src="/images/exploring-mycofi-cover.png"
                 alt="Exploring MycoFi: Mycelial Design Patterns for Web3 and Beyond - Book Cover"
                 fill
                 className="object-contain relative z-10 drop-shadow-2xl"
diff --git a/components/content-section.tsx b/components/content-section.tsx
index dabbe05..605da7a 100644
--- a/components/content-section.tsx
+++ b/components/content-section.tsx
@@ -1,4 +1,5 @@
 import { Card, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
 import Image from "next/image"
 
 export function ContentSection() {
@@ -23,14 +24,18 @@ export function ContentSection() {
           </div>
 
           <div className="grid md:grid-cols-2 gap-8 mb-12">
-            <Card className="border-2 hover:border-primary/50 transition-colors">
-              <CardContent className="p-8">
-                <div className="mb-4">
-                  <div className="inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm font-medium text-primary mb-4">
+            <Card className="border-2 hover:border-primary/50 transition-colors relative overflow-hidden">
+              <div className="absolute inset-0 opacity-40 pointer-events-none">
+                <Image src="/images/fractal-mushroom.png" alt="" fill className="object-cover" />
+              </div>
+              <div className="absolute inset-0 bg-gradient-to-br from-background/85 to-background/70 pointer-events-none" />
+              <CardContent className="p-8 relative z-10">
+                <div className="mb-4 text-center">
+                  <div className="inline-block rounded-lg bg-red-600/20 px-4 py-2 text-base font-semibold text-red-600 mb-4">
                     The Problem
                   </div>
                 </div>
-                <h3 className="text-2xl font-bold mb-4" style={{ fontFamily: "var(--font-crimson)" }}>
+                <h3 className="text-lg font-semibold mb-4 text-center" style={{ fontFamily: "var(--font-crimson)" }}>
                   Currency Monocultures
                 </h3>
                 <p className="text-muted-foreground leading-relaxed mb-4">
@@ -38,40 +43,60 @@ export function ContentSection() {
                   currencies that undermine collective health and indigenous wisdom.
                 </p>
                 <p className="text-muted-foreground leading-relaxed">
-                  The myth of "homo economicus" and the rational actor prioritizes individual gain over collective
-                  wellbeing, threatening our continued existence on this planet.
+                  {
+                    "By collapsing all value into the singular unit of bank-issued money, capitalism erodes all other sources of value. The immeasurable wealth provided by social and environmental benefits is extracted into dollars by the unyielding logic of profit-maximization."
+                  }
                 </p>
               </CardContent>
             </Card>
 
-            <Card className="border-2 hover:border-secondary/50 transition-colors">
-              <CardContent className="p-8">
-                <div className="mb-4">
-                  <div className="inline-block rounded-lg bg-secondary/10 px-3 py-1 text-sm font-medium text-secondary mb-4">
-                    The Solution
+            <Card className="border-2 hover:border-secondary/50 transition-colors relative overflow-hidden">
+              <div className="absolute inset-0 opacity-40 pointer-events-none">
+                <Image src="/images/mycelial-network-green.png" alt="" fill className="object-cover" />
+              </div>
+              <div className="absolute inset-0 bg-gradient-to-br from-background/85 to-background/70 pointer-events-none" />
+              <CardContent className="p-8 relative z-10">
+                <div className="mb-4 text-center">
+                  <div className="inline-block rounded-lg bg-secondary/20 px-4 py-2 text-base font-semibold text-secondary mb-4">
+                    The Opportunity
                   </div>
                 </div>
-                <h3 className="text-2xl font-bold mb-4" style={{ fontFamily: "var(--font-crimson)" }}>
+                <h3 className="text-lg font-semibold mb-4 text-center" style={{ fontFamily: "var(--font-crimson)" }}>
                   Permaculture Currencies
                 </h3>
                 <p className="text-muted-foreground leading-relaxed mb-4">
-                  Like mycelial networks that redistribute resources through underground connections, we can design
-                  economic systems based on cooperation and mutual aid.
+                  Like mycelial networks that redistribute a plethora of resources through underground connections, we
+                  can design multi-dimensional economic systems capable of representing multiple localized forms of
+                  value.
                 </p>
+                <p className="text-muted-foreground leading-relaxed mb-4">{""}</p>
                 <p className="text-muted-foreground leading-relaxed">
-                  Indigenous peoples lived within egalitarian networks ensuring no one's basic needs went unfulfilled—a
-                  model we can learn from and adapt for our future.
+                  By enabling the localized production of alternative currencies, purpose-driven groups of people can
+                  recognize commitments of care and societal regeneration, participating in economies based on
+                  cooperation and mutual aid.
                 </p>
               </CardContent>
             </Card>
           </div>
 
+          <div className="flex justify-center mb-12">
+            <Button asChild size="lg" className="bg-emerald-700 text-white !opacity-100 hover:bg-emerald-600">
+              <a
+                href="https://mycofi.substack.com/p/from-monoculture-to-permaculture"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Read more about Permaculture Currencies →
+              </a>
+            </Button>
+          </div>
+
           <Card className="border-2 bg-card">
             <CardContent className="p-8 md:p-12">
               <div className="grid md:grid-cols-2 gap-8 items-center">
                 <div>
                   <div className="inline-block rounded-lg bg-accent/10 px-3 py-1 text-sm font-medium text-accent mb-4">
-                    Nature's Wisdom
+                    Listening to Nature's Wisdom
                   </div>
                   <h3 className="text-3xl font-bold mb-4" style={{ fontFamily: "var(--font-crimson)" }}>
                     Learning from Fungi
@@ -102,53 +127,63 @@ export function ContentSection() {
           </Card>
 
           <div className="mt-12 grid md:grid-cols-2 gap-8">
-            <Card className="border-2 hover:border-primary/50 transition-colors bg-gradient-to-br from-card to-muted/20">
-              <CardContent className="p-8">
-                <div className="mb-4">
-                  <div className="inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm font-medium text-primary mb-4">
+            <Card className="border-2 hover:border-primary/50 transition-colors relative overflow-hidden">
+              <div className="absolute inset-0 opacity-45 pointer-events-none">
+                <Image src="/images/mushroom-forest.png" alt="" fill className="object-cover" />
+              </div>
+              <div className="absolute inset-0 bg-gradient-to-br from-background/80 to-background/65 pointer-events-none" />
+              <CardContent className="p-8 relative z-10 flex flex-col">
+                <div className="mb-4 text-center">
+                  <div className="inline-block rounded-lg bg-red-600/20 px-4 py-2 text-base font-semibold text-red-600 mb-4">
                     The Current Reality
                   </div>
                 </div>
-                <h3 className="text-2xl font-bold mb-4" style={{ fontFamily: "var(--font-crimson)" }}>
+                <h3 className="text-lg font-semibold mb-4 text-center" style={{ fontFamily: "var(--font-crimson)" }}>
                   Society is Trippin Balls
                 </h3>
-                <p className="text-muted-foreground leading-relaxed mb-4">
+                <p className="text-muted-foreground leading-relaxed mb-6">
                   Our collective hallucination of infinite growth on a finite planet has us chasing extractive
-                  capitalism down a rabbit hole of ecological collapse.
+                  capitalism down a rabbit hole of ecological collapse. Envisioning the end of the world before the end
+                  of capitalism is a societal-scale bad trip.
                 </p>
-                <a
-                  href="https://trippinballs.lol"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center text-primary hover:text-primary/80 font-medium transition-colors"
-                >
-                  Explore the trip →
-                </a>
+                <div className="mt-auto flex justify-center">
+                  <Button asChild variant="secondary" className="bg-rose-500 text-white !opacity-100 hover:bg-rose-400">
+                    <a href="https://trippinballs.lol" target="_blank" rel="noopener noreferrer">
+                      Don't Be Trippin' →
+                    </a>
+                  </Button>
+                </div>
               </CardContent>
             </Card>
 
-            <Card className="border-2 hover:border-secondary/50 transition-colors bg-gradient-to-br from-card to-secondary/5">
-              <CardContent className="p-8">
-                <div className="mb-4">
-                  <div className="inline-block rounded-lg bg-secondary/10 px-3 py-1 text-sm font-medium text-secondary mb-4">
+            <Card className="border-2 hover:border-secondary/50 transition-colors relative overflow-hidden">
+              <div className="absolute inset-0 opacity-45 pointer-events-none">
+                <Image src="/images/dreamy-mushrooms.png" alt="" fill className="object-cover" />
+              </div>
+              <div className="absolute inset-0 bg-gradient-to-br from-background/80 to-background/65 pointer-events-none" />
+              <CardContent className="p-8 relative z-10 flex flex-col">
+                <div className="mb-4 text-center">
+                  <div className="inline-block rounded-lg bg-secondary/20 px-4 py-2 text-base font-semibold text-secondary mb-4">
                     The Emerging Future
                   </div>
                 </div>
-                <h3 className="text-2xl font-bold mb-4" style={{ fontFamily: "var(--font-crimson)" }}>
+                <h3 className="text-lg font-semibold mb-4 text-center" style={{ fontFamily: "var(--font-crimson)" }}>
                   Post-Appitalism Awaits
                 </h3>
-                <p className="text-muted-foreground leading-relaxed mb-4">
-                  Beyond post-capitalism lies post-appitalism—where decentralized applications enable regenerative
-                  economies, mutual aid networks, and collective flourishing.
+                <p className="text-muted-foreground leading-relaxed mb-6">
+                  A key part of post-capitalism is post-APPitalism—where decentralized applications dissolve the silos of traditional app models (premised on capitalist value extraction) to enable new technologies for collective flourishing.
                 </p>
-                <a
-                  href="https://post-appitalism.app"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center text-secondary hover:text-secondary/80 font-medium transition-colors"
-                >
-                  Enter the future →
-                </a>
+                <div className="mt-auto flex justify-center">
+                  <Button
+                    asChild
+                    variant="secondary"
+                    className="bg-emerald-700 text-white !opacity-100 hover:bg-emerald-600"
+                  >
+                    <a href="https://post-appitalism.app" target="_blank" rel="noopener noreferrer">
+                      Enter the future →
+                    </a>
+                  </Button>
+                </div>
               </CardContent>
             </Card>
           </div>
diff --git a/components/cta-section.tsx b/components/cta-section.tsx
index 38f108a..34f64b6 100644
--- a/components/cta-section.tsx
+++ b/components/cta-section.tsx
@@ -11,7 +11,7 @@ export function CTASection() {
               className="text-4xl md:text-5xl font-bold mb-4 text-balance"
               style={{ fontFamily: "var(--font-crimson)" }}
             >
-              Explore the Myco-Economic Future
+              Welcome to the Myco-Economic Future
             </h2>
             <p className="text-lg text-muted-foreground text-balance">
               Dive deeper into regenerative economics and permaculture currencies
diff --git a/components/footer.tsx b/components/footer.tsx
index 35f9b49..4e17755 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -3,31 +3,34 @@ import { Sprout } from "lucide-react"
 
 export function Footer() {
   return (
-    <footer className="border-t border-border bg-muted/30">
+    <footer className="border-t border-border bg-white">
       <div className="container py-12">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           <div className="md:col-span-2">
-            <div className="text-2xl font-bold mb-3 text-primary" style={{ fontFamily: "var(--font-crimson)" }}>
+            <div
+              className="text-2xl font-bold mb-3 text-primary !opacity-100"
+              style={{ fontFamily: "var(--font-crimson)" }}
+            >
               MycoFi
             </div>
-            <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-muted px-4 py-2 text-sm text-muted-foreground">
+            <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-emerald-50 px-4 py-2 text-sm text-black !opacity-100">
               <Sprout className="h-4 w-4 text-secondary" />
               <span>Regenerative Economics for a Living Future</span>
             </div>
-            <p className="text-sm text-muted-foreground max-w-md leading-relaxed">
+            <p className="text-sm text-black !opacity-100 max-w-md leading-relaxed">
               Exploring regenerative economic systems inspired by mycelial networks and nature's resource allocation
               algorithms.
             </p>
           </div>
 
           <div>
-            <h3 className="font-semibold mb-3">Resources</h3>
+            <h3 className="font-semibold mb-3 text-black !opacity-100">Resources</h3>
             <ul className="space-y-2 text-sm">
               <li>
                 <Link
                   href="https://book.mycofi.earth"
                   target="_blank"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
+                  className="text-black !opacity-100 hover:text-primary transition-colors"
                 >
                   The Book
                 </Link>
@@ -36,7 +39,7 @@ export function Footer() {
                 <Link
                   href="https://allthingsdecent.substack.com/p/mycoeconomics-and-permaculture-currencies"
                   target="_blank"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
+                  className="text-black !opacity-100 hover:text-primary transition-colors"
                 >
                   Substack Article
                 </Link>
@@ -45,7 +48,7 @@ export function Footer() {
                 <Link
                   href="https://shop.mycofi.earth"
                   target="_blank"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
+                  className="text-black !opacity-100 hover:text-primary transition-colors"
                 >
                   Shop
                 </Link>
@@ -54,13 +57,13 @@ export function Footer() {
           </div>
 
           <div>
-            <h3 className="font-semibold mb-3">Connect</h3>
+            <h3 className="font-semibold mb-3 text-black !opacity-100">Connect</h3>
             <ul className="space-y-2 text-sm">
               <li>
                 <Link
                   href="https://links.mycofi.earth"
                   target="_blank"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
+                  className="text-black !opacity-100 hover:text-primary transition-colors"
                 >
                   All Links
                 </Link>
@@ -69,7 +72,7 @@ export function Footer() {
           </div>
         </div>
 
-        <div className="mt-12 pt-8 border-t border-border text-center text-sm text-muted-foreground">
+        <div className="mt-12 pt-8 border-t border-border text-center text-sm text-black !opacity-100">
           <p>© {new Date().getFullYear()} MycoFi. Building regenerative futures together.</p>
         </div>
       </div>
diff --git a/components/header.tsx b/components/header.tsx
index ff83f37..36cd0a2 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,11 +1,19 @@
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
+import Image from "next/image"
 
 export function Header() {
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-16 items-center justify-between">
-        <Link href="/" className="flex items-center gap-2">
+      <div className="container flex h-16 items-center justify-between px-4">
+        <Link href="/" className="flex items-center gap-3">
+          <Image
+            src="/mycofi-logo.jpg"
+            alt="MycoFi Logo"
+            width={40}
+            height={40}
+            className="transition-transform hover:scale-110"
+          />
           <div className="text-2xl font-bold tracking-tight text-primary" style={{ fontFamily: "var(--font-crimson)" }}>
             MycoFi
           </div>
diff --git a/components/hero-section.tsx b/components/hero-section.tsx
index 9d3d443..e12999a 100644
--- a/components/hero-section.tsx
+++ b/components/hero-section.tsx
@@ -15,33 +15,36 @@ export function HeroSection() {
       </div>
 
       <div className="container">
-        <div className="mx-auto max-w-4xl text-center">
-          <h1
-            className="mb-6 text-5xl md:text-7xl font-bold tracking-tight text-balance"
-            style={{ fontFamily: "var(--font-crimson)" }}
-          >
-            Exploring <span className="text-primary">MycoFi</span>: Mycelial Design Patterns for Web3 & Beyond
-          </h1>
+        <div className="mx-auto max-w-6xl">
+          {/* Text content */}
+          <div className="text-center">
+            <h1
+              className="mb-6 text-4xl md:text-6xl font-bold tracking-tight text-balance"
+              style={{ fontFamily: "var(--font-crimson)" }}
+            >
+              Exploring <span className="text-primary">MycoFi</span>: Mycelial Design Patterns for Web3 & Beyond
+            </h1>
 
-          <p className="mb-8 text-lg md:text-xl text-muted-foreground text-balance leading-relaxed max-w-3xl mx-auto">
-            Exploring economic systems inspired by mycelial networks—where cooperation, redistribution, and mutual aid
-            create resilient, regenerative communities.
-          </p>
+            <p className="mb-8 text-lg md:text-xl text-muted-foreground text-balance leading-relaxed max-w-3xl mx-auto">
+              Exploring economic systems inspired by mycelial networks—where cooperation, redistribution, and mutual aid
+              create resilient, regenerative communities.
+            </p>
 
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <Button asChild size="lg" className="text-base">
-              <Link href="https://book.mycofi.earth" target="_blank">
-                Read the Book
-              </Link>
-            </Button>
-            <Button asChild size="lg" variant="outline" className="text-base bg-transparent">
-              <Link
-                href="https://allthingsdecent.substack.com/p/mycoeconomics-and-permaculture-currencies"
-                target="_blank"
-              >
-                Learn More
-              </Link>
-            </Button>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+              <Button asChild size="lg" className="text-base">
+                <Link href="https://book.mycofi.earth" target="_blank">
+                  Read the Book
+                </Link>
+              </Button>
+              <Button asChild size="lg" variant="outline" className="text-base bg-transparent">
+                <Link
+                  href="https://allthingsdecent.substack.com/p/mycoeconomics-and-permaculture-currencies"
+                  target="_blank"
+                >
+                  Learn More
+                </Link>
+              </Button>
+            </div>
           </div>
         </div>
 
diff --git a/components/hyphal-canvas.tsx b/components/hyphal-canvas.tsx
index 2a9b5e1..77d68f5 100644
--- a/components/hyphal-canvas.tsx
+++ b/components/hyphal-canvas.tsx
@@ -16,6 +16,8 @@ interface HyphalNode {
   connections: HyphalNode[]
   opacity: number
   isPersistent: boolean
+  createdAt: number
+  connectionDensity: number
 }
 
 export function HyphalCanvas() {
@@ -24,6 +26,17 @@ export function HyphalCanvas() {
   const mouseRef = useRef({ x: 0, y: 0, isMoving: false })
   const animationRef = useRef<number>()
 
+  const getDensityColor = (density: number, opacity: number): string => {
+    // Map density (0-10+) to hue (0-300 degrees)
+    // Low density = red/orange (0-60), high density = blue/violet (240-300)
+    const normalizedDensity = Math.min(density / 10, 1)
+    const hue = normalizedDensity * 300
+    // Muted colors: lower saturation (40-50%) and medium lightness (50-60%)
+    const saturation = 40 + normalizedDensity * 10
+    const lightness = 50 + normalizedDensity * 10
+    return `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`
+  }
+
   useEffect(() => {
     const canvas = canvasRef.current
     if (!canvas) return
@@ -65,6 +78,8 @@ export function HyphalCanvas() {
         connections: [],
         opacity: 1,
         isPersistent: false,
+        createdAt: Date.now(),
+        connectionDensity: 0,
       }
     }
 
@@ -81,10 +96,8 @@ export function HyphalCanvas() {
     const createMeshConnections = () => {
       nodesRef.current.forEach((node, i) => {
         const maturityFactor = node.age / node.maxAge
-        // Reduced max connections from 6/3 to 4/2
         const maxConnections = node.isPersistent ? 7 : maturityFactor > 0.6 ? 4 : 2
         const connectionDistance = maturityFactor > 0.6 ? 80 : 50
-        // Increased probability threshold to reduce connections
         const connectionProbability = maturityFactor > 0.6 ? 0.97 : 0.99
 
         if (node.age < 20 || node.connections.length >= maxConnections) return
@@ -119,12 +132,18 @@ export function HyphalCanvas() {
       x2: number,
       y2: number,
       opacity: number,
+      color: string,
+      fragmentationFactor: number,
     ) => {
       const dx = x2 - x1
       const dy = y2 - y1
       const distance = Math.sqrt(dx * dx + dy * dy)
 
-      // For short distances, draw straight line
+      if (fragmentationFactor > 0.5 && Math.random() > fragmentationFactor) {
+        // Skip drawing some connections to create fragmentation effect
+        return
+      }
+
       if (distance < 30) {
         ctx.beginPath()
         ctx.moveTo(x1, y1)
@@ -133,7 +152,6 @@ export function HyphalCanvas() {
         return
       }
 
-      // Create branching path with 1-2 intermediate points
       const numBranches = distance > 60 ? 2 : 1
       const points = [{ x: x1, y: y1 }]
 
@@ -141,7 +159,6 @@ export function HyphalCanvas() {
         const t = (i + 1) / (numBranches + 1)
         const midX = x1 + dx * t
         const midY = y1 + dy * t
-        // Add perpendicular offset for organic branching
         const perpX = -dy / distance
         const perpY = dx / distance
         const offset = (Math.random() - 0.5) * distance * 0.3
@@ -153,7 +170,6 @@ export function HyphalCanvas() {
 
       points.push({ x: x2, y: y2 })
 
-      // Draw smooth curve through points
       ctx.beginPath()
       ctx.moveTo(points[0].x, points[0].y)
 
@@ -171,6 +187,8 @@ export function HyphalCanvas() {
       ctx.fillStyle = "rgba(250, 248, 245, 0.08)"
       ctx.fillRect(0, 0, canvas.width, canvas.height)
 
+      const currentTime = Date.now()
+
       if (mouseRef.current.isMoving && Math.random() > 0.65) {
         const burstCount = Math.floor(Math.random() * 2) + 1
         const nearbyPersistent = findNearbyPersistentNodes(mouseRef.current.x, mouseRef.current.y, 100)
@@ -196,9 +214,17 @@ export function HyphalCanvas() {
         createMeshConnections()
       }
 
+      nodesRef.current.forEach((node) => {
+        node.connectionDensity = node.connections.length
+      })
+
       nodesRef.current = nodesRef.current.filter((node) => {
         node.age++
 
+        const timeSinceCreation = currentTime - node.createdAt
+        const fadeOutDuration = 30000 // 30 seconds
+        const fadeOutFactor = Math.min(timeSinceCreation / fadeOutDuration, 1)
+
         if (!node.isPersistent) {
           node.angle += node.angleChangeRate
           if (Math.random() > 0.92) {
@@ -221,14 +247,18 @@ export function HyphalCanvas() {
 
         const ageFactor = node.age / node.maxAge
         if (node.isPersistent) {
-          node.opacity = 0.15
+          node.opacity = Math.max(0, 0.15 * (1 - fadeOutFactor))
         } else if (ageFactor >= 1) {
           node.isPersistent = true
-          node.opacity = 0.15
+          node.opacity = 0.15 * (1 - fadeOutFactor)
           node.vx = 0
           node.vy = 0
         } else {
-          node.opacity = Math.max(0.15, 1 - ageFactor * 0.85)
+          node.opacity = Math.max(0, (1 - ageFactor * 0.85) * (1 - fadeOutFactor * 0.5))
+        }
+
+        if (fadeOutFactor >= 1) {
+          return false
         }
 
         if (
@@ -244,12 +274,14 @@ export function HyphalCanvas() {
         }
 
         if (node.parent) {
-          const gradient = ctx.createLinearGradient(node.parent.x, node.parent.y, node.x, node.y)
+          const avgDensity = (node.connectionDensity + node.parent.connectionDensity) / 2
           const parentOpacity = node.parent.opacity * 0.5
           const nodeOpacity = node.opacity * 0.5
-          gradient.addColorStop(0, `rgba(120, 120, 120, ${parentOpacity})`)
-          gradient.addColorStop(0.5, `rgba(120, 120, 120, ${(parentOpacity + nodeOpacity) / 2})`)
-          gradient.addColorStop(1, `rgba(120, 120, 120, ${nodeOpacity})`)
+
+          const gradient = ctx.createLinearGradient(node.parent.x, node.parent.y, node.x, node.y)
+          gradient.addColorStop(0, getDensityColor(node.parent.connectionDensity, parentOpacity))
+          gradient.addColorStop(0.5, getDensityColor(avgDensity, (parentOpacity + nodeOpacity) / 2))
+          gradient.addColorStop(1, getDensityColor(node.connectionDensity, nodeOpacity))
 
           ctx.strokeStyle = gradient
           ctx.lineWidth = 2.5 + Math.random() * 1.5
@@ -262,15 +294,31 @@ export function HyphalCanvas() {
 
         node.connections.forEach((connected) => {
           if (nodesRef.current.includes(connected)) {
+            const avgDensity = (node.connectionDensity + connected.connectionDensity) / 2
             const avgOpacity = ((node.opacity + connected.opacity) / 2) * 0.35
-            ctx.strokeStyle = `rgba(120, 120, 120, ${avgOpacity})`
+
+            // Calculate fragmentation based on time
+            const nodeFragmentation = Math.min((currentTime - node.createdAt) / fadeOutDuration, 1)
+            const connectedFragmentation = Math.min((currentTime - connected.createdAt) / fadeOutDuration, 1)
+            const avgFragmentation = (nodeFragmentation + connectedFragmentation) / 2
+
+            ctx.strokeStyle = getDensityColor(avgDensity, avgOpacity)
             ctx.lineWidth = 1.5
             ctx.lineCap = "round"
-            drawBranchingConnection(ctx, node.x, node.y, connected.x, connected.y, avgOpacity)
+            drawBranchingConnection(
+              ctx,
+              node.x,
+              node.y,
+              connected.x,
+              connected.y,
+              avgOpacity,
+              ctx.strokeStyle,
+              avgFragmentation,
+            )
           }
         })
 
-        ctx.fillStyle = `rgba(120, 120, 120, ${node.opacity * 0.7})`
+        ctx.fillStyle = getDensityColor(node.connectionDensity, node.opacity * 0.7)
         ctx.beginPath()
         ctx.arc(node.x, node.y, 2.5, 0, Math.PI * 2)
         ctx.fill()
diff --git a/components/image-gallery.tsx b/components/image-gallery.tsx
index c4337c4..6330e4c 100644
--- a/components/image-gallery.tsx
+++ b/components/image-gallery.tsx
@@ -1,59 +1,66 @@
-import Image from "next/image"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { ExternalLink } from "lucide-react"
 
 export function ImageGallery() {
   return (
     <section className="py-16 bg-muted/30">
       <div className="container mx-auto px-4">
-        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">The Mycelial Vision</h2>
-        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-6xl mx-auto">
-          <div className="relative aspect-square rounded-lg overflow-hidden">
-            <Image
-              src="/images/mushroom-gills.jpg"
-              alt="Macro view of mushroom gills showing natural hyphal patterns"
-              fill
-              className="object-cover hover:scale-105 transition-transform duration-300"
-            />
-          </div>
-          <div className="relative aspect-square rounded-lg overflow-hidden">
-            <Image
-              src="/images/dreamy-mushrooms.png"
-              alt="Ethereal mushrooms in golden light"
-              fill
-              className="object-cover hover:scale-105 transition-transform duration-300"
-            />
-          </div>
-          <div className="relative aspect-square rounded-lg overflow-hidden">
-            <Image
-              src="/images/mycelial-network-blue.png"
-              alt="Digital visualization of mycelial network connections"
-              fill
-              className="object-cover hover:scale-105 transition-transform duration-300"
-            />
-          </div>
-          <div className="relative aspect-square rounded-lg overflow-hidden">
-            <Image
-              src="/images/fractal-mushroom.png"
-              alt="Fractal art inspired by mushroom growth patterns"
-              fill
-              className="object-cover hover:scale-105 transition-transform duration-300"
-            />
-          </div>
-          <div className="relative aspect-square rounded-lg overflow-hidden">
-            <Image
-              src="/images/mushroom-forest.png"
-              alt="Psychedelic mushroom forest with interconnected mycelial roots"
-              fill
-              className="object-cover hover:scale-105 transition-transform duration-300"
-            />
-          </div>
-          <div className="relative aspect-square rounded-lg overflow-hidden">
-            <Image
-              src="/images/always-has-been.png"
-              alt="The revolution will be mycelial - always has been"
-              fill
-              className="object-cover hover:scale-105 transition-transform duration-300"
-            />
-          </div>
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">The Mycelial Vision</h2>
+        <p className="text-center text-lg mb-12 max-w-3xl mx-auto">
+          Exploring the intersection of natural systems, regenerative economics, and decentralized coordination
+        </p>
+
+        <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+          <Card className="overflow-hidden">
+            <CardHeader>
+              <CardTitle className="text-2xl text-secondary">Compost Capitalism</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <p className="leading-relaxed">
+                Just as mycelium breaks down dead matter to create fertile soil, we can transform dying economic structures into nourishment for new regenerative systems. Composting capitalism invokes the cycles of decay and renewal inherent in natural ecosystems, recognizing that institutional senescence and the end of extractive systems creates the conditions for regenerative abundance.
+              </p>
+              
+              <div className="pt-4">
+                <Button asChild variant="secondary" className="w-full">
+                  <a
+                    href="https://compostcapitalism.xyz"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center justify-center gap-2"
+                  >
+                    Compost Capitalism
+                    <ExternalLink className="h-4 w-4" />
+                  </a>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="overflow-hidden">
+            <CardHeader>
+              <CardTitle className="text-2xl text-secondary">Psilocybernetics</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <p className="leading-relaxed">
+                Psilocybernetics explores how mycelial wisdom and cybernetic systems thinking converge to create new models of collective coordination. Like mycelial networks that process distributed information, we can design systems that enhance collective intelligence and distributed decision-making with new forms of economy, democracy, and technology.          
+              </p>
+              
+              <div className="pt-4">
+                <Button asChild variant="secondary" className="w-full">
+                  <a
+                    href="https://jeffemmett.com/presentations#psilocybernetics"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center justify-center gap-2"
+                  >
+                    Explore Psilocybernetics
+                    <ExternalLink className="h-4 w-4" />
+                  </a>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
         </div>
       </div>
     </section>
diff --git a/components/mycofi-intro.tsx b/components/mycofi-intro.tsx
index 14f5ab4..2f2464f 100644
--- a/components/mycofi-intro.tsx
+++ b/components/mycofi-intro.tsx
@@ -23,7 +23,7 @@ export function MycoFiIntro() {
       </div>
 
       <div className="container relative z-10">
-        <div className="mx-auto max-w-4xl">
+        <div className="mx-auto max-w-5xl">
           <Card className="border-2 border-primary/20 bg-gradient-to-br from-background via-primary/5 to-secondary/5 shadow-lg">
             <CardContent className="p-8 md:p-12">
               <div className="flex items-start gap-4 mb-6">
@@ -37,20 +37,20 @@ export function MycoFiIntro() {
                   >
                     What is MycoFi?
                   </h2>
-                  <p className="text-lg text-muted-foreground leading-relaxed mb-4">
-                    <strong className="text-foreground">MycoFi</strong> (Mycelial Finance) is an exploration of{" "}
-                    <strong className="text-foreground">mycoeconomics</strong>—economic systems inspired by the
-                    intelligence of fungal networks. Just as mycelium redistributes nutrients through underground
-                    connections, MycoFi envisions decentralized financial systems built on cooperation, mutual aid, and
-                    regenerative principles.
-                  </p>
-                  <p className="text-lg text-muted-foreground leading-relaxed">
-                    By emulating nature's evolutionary resource allocation algorithms, we can design Web3 protocols and
-                    economic structures that prioritize collective wellbeing over extractive growth—moving from currency
-                    monocultures to diverse, resilient permaculture currencies.
-                  </p>
                 </div>
               </div>
+              <p className="text-lg text-muted-foreground leading-relaxed mb-4">
+                <strong className="text-foreground">MycoFi</strong> (Mycelial Finance) is an exploration of{" "}
+                <strong className="text-foreground">mycoeconomics</strong>—economic systems inspired by the intelligence
+                of fungal networks. Just as mycelium redistributes nutrients through underground connections, MycoFi
+                envisions decentralized financial systems built on cooperation, mutual aid, and regenerative principles.
+              </p>
+              <p className="text-lg text-muted-foreground leading-relaxed">
+                By emulating nature's evolutionary resource allocation algorithms, we can design Web3 protocols and
+                economic structures that prioritize collective wellbeing over extractive growth—moving from currency
+                monocultures to diverse, resilient permaculture currencies.
+              </p>
+              {/* </CHANGE> */}
             </CardContent>
           </Card>
         </div>
diff --git a/public/images/exploring-mycofi-cover.png b/public/images/exploring-mycofi-cover.png
new file mode 100644
index 0000000..4051e82
Binary files /dev/null and b/public/images/exploring-mycofi-cover.png differ
diff --git a/public/mycofi-logo.jpg b/public/mycofi-logo.jpg
new file mode 100644
index 0000000..21961b7
Binary files /dev/null and b/public/mycofi-logo.jpg differ