fix: adjust spacing in bento card grid layout

- Increased gap between cards from 4 to 6 for better visual separation
- Added bottom padding to card content area for improved spacing

src/components/Button.tsx

@@ -3,9 +3,9 @@ import clsx from 'clsx'
 
 const baseStyles = {
   solid:
-    'inline-flex justify-center rounded-full py-2 px-4 text-sm font-semibold transition-colors',
+    'inline-flex justify-center rounded-full py-2 px-5 text-base font-semibold transition-colors',
   outline:
-    'inline-flex justify-center rounded-full border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(4)-1px)] text-sm transition-colors',
+    'inline-flex justify-center bg-white/90 hover:bg-[#fafafa] rounded-full border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(5)-1px)] text-base transition-colors',
 }
 
 const variantStyles = {

src/components/Footer.tsx

@@ -3,7 +3,7 @@ import { Container } from './Container'
 
 export function Footer() {
   return (
-    <footer className="border-t border-gray-200">
+    <footer className="">
       <Container>
         <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-8">
           <div>

src/components/Header.tsx

@@ -26,9 +26,9 @@ export function Header() {
   };
 
   return (
-    <header>
+    <header className="bg-white">
-      <nav>
+      <nav className="border-b border-gray-200">
-                <Container className="relative z-50 flex justify-between py-4">
+        <Container className="flex bg-transparent justify-between py-4">
           <div className="relative z-10 flex items-center gap-16">
             <Link to="/" aria-label="Home">
               <img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />

src/components/Layout.tsx

@@ -5,12 +5,14 @@ import { Header } from './Header'
 export function Layout() {
 
   return (
-    <div className="bg-white antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
+    <div className="bg-[#fdfdfd] antialiased relative" style={{ fontFamily: 'var(--font-inter)' }}>
-      <Header />
+      <div className="relative z-10">
-            <main className="">
+        <Header />
-        <Outlet />
+        <main>
-      </main>
+          <Outlet />
-      <Footer />
+        </main>
+        <Footer />
+      </div>
     </div>
   )
 }

src/components/features-section-demo-2.tsx

@@ -59,7 +59,7 @@ export default function FeaturesSectionDemo() {
     },
   ];
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4  relative z-10 py-10 max-w-7xl mx-auto">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4  relative z-10 py-8 max-w-7xl mx-auto">
       {features.map((feature, index) => (
         <Feature key={feature.title} {...feature} index={index} />
       ))}
@@ -81,7 +81,7 @@ const Feature = ({
   return (
     <div
       className={cn(
-        "flex flex-col lg:border-r  py-10 relative group/feature dark:border-neutral-800",
+        "flex flex-col lg:border-r  py-8 relative group/feature dark:border-neutral-800",
         (index === 0 || index === 4) && "lg:border-l dark:border-neutral-800",
         index < 4 && "lg:border-b dark:border-neutral-800"
       )}

src/components/features-section-demo-3.tsx

@@ -40,7 +40,7 @@ export default function FeaturesSectionDemo() {
     },
   ];
   return (
-    <div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
+    <div className="relative z-20 py-8 lg:py-40 max-w-7xl mx-auto">
       <div className="px-8">
         <h4 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
           Packed with thousands of features

src/components/ui/apple-cards-carousel.tsx

@@ -62,7 +62,7 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
   return (
       <div className="relative w-full">
         <div
-          className="flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-10 [scrollbar-width:none] md:py-20"
+          className="flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-8 [scrollbar-width:none] md:py-20"
           ref={carouselRef}
           onScroll={checkScrollability}
         >
@@ -135,7 +135,7 @@ export const Card = ({
           layoutId={layout ? `card-${card.title}` : undefined}
           className="relative z-10 flex h-104 w-80 flex-col justify-between overflow-hidden rounded-3xl p-8 md:h-120 md:w-96"
         >
-        <div className="flex h-2/5 flex-col justify-center py-6 px-4">
+        <div className="flex h-2/5 flex-col justify-center py-4 px-4">
           <motion.p
             layoutId={layout ? `category-${card.category}` : undefined}
             className="text-left font-sans font-semibold text-cyan-500 uppercase tracking-wider text-xs   md:text-sm"

src/components/ui/cards.tsx

@@ -8,7 +8,7 @@ const DarkCard = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 rounded-3xl hover:bg-white/6 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/15",
+      "border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 rounded-xl hover:bg-white/6 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/15",
       className
     )}
     {...props}

src/index.css

@@ -6,9 +6,7 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -60,7 +58,6 @@ button:focus-visible {
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
-    background-color: #ffffff;
   }
   a:hover {
     color: #747bff;

src/pages/agents/AgentComponents.tsx

@@ -0,0 +1,75 @@
+
+import { Container } from '@/components/Container'
+import { Eyebrow, SectionHeader } from '@/components/Texts'
+
+const components = [
+  {
+    component: 'Long-Term Memory (FungiStor)',
+    purpose: 'Durable, distributed memory with erasure-coded resilience',
+    backedBy: 'Mycelium Storage',
+  },
+  {
+    component: 'Active Retrieval (HeroDB)',
+    purpose: 'Fast multimodal vector + keyword retrieval',
+    backedBy: 'Compute + Storage',
+  },
+  {
+    component: 'Secure Agent Workspaces (MOS Sandboxes)',
+    purpose: 'Ephemeral, isolated execution for agent actions',
+    backedBy: 'Mycelium Compute',
+  },
+  {
+    component: 'Private Communication (Mycelium Mesh)',
+    purpose: 'Peer-to-peer encrypted network',
+    backedBy: 'Mycelium Network',
+  },
+  {
+    component: 'Verifiable Execution (Deterministic Deploy)',
+    purpose: 'Ensure the code running is exactly what you signed',
+    backedBy: 'The Stack',
+  },
+  {
+    component: 'Agent Coordination Engine (coming online next)',
+    purpose: 'Orchestrate multi-step workflows and tool use',
+    backedBy: 'Hero Orchestrator',
+  },
+]
+
+export function AgentComponents() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow>AGENT COMPONENTS</Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            The Building Blocks of Sovereign Agents
+          </SectionHeader>
+        </div>
+
+        <div className="mx-auto mt-16 max-w-6xl overflow-x-auto">
+          <table className="w-full table-auto border-collapse text-left text-sm text-gray-700">
+            <thead>
+              <tr className="bg-cyan-50 border-b border-gray-200">
+                <th className="py-3 px-4 font-semibold text-gray-900">Component</th>
+                <th className="py-3 px-4 font-semibold text-gray-900">Purpose</th>
+                <th className="py-3 px-4 font-semibold text-gray-900">Backed By</th>
+              </tr>
+            </thead>
+            <tbody>
+              {components.map((item) => (
+                <tr
+                  key={item.component}
+                  className="border-b border-gray-100 hover:bg-cyan-50/40 transition"
+                >
+                  <td className="py-4 px-4 font-medium text-gray-900">{item.component}</td>
+                  <td className="py-4 px-4">{item.purpose}</td>
+                  <td className="py-4 px-4 text-cyan-700 font-medium">{item.backedBy}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/agents/AgentHeroAlt.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { Button } from '../../components/Button'
+import { Button } from '@/components/Button'
-import { Eyebrow, SectionHeader, P, H3 } from '../../components/Texts'
+import { Eyebrow, P, H3 } from '@/components/Texts'
 
 export function AgentHeroAlt() {
   return (
@@ -16,14 +16,21 @@ export function AgentHeroAlt() {
       </div>
       <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8">
         <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
-          <Eyebrow className="text-base/7 font-semibold text-cyan-500">AGENT</Eyebrow>
+          <Eyebrow className="text-base/7 font-semibold text-cyan-500">MYCELIUM AGENTS</Eyebrow>
           <H3 as="h1" className="mt-2 text-gray-900">Sovereign AI Agents, Coming Soon.</H3>
           <P className="mt-6  text-gray-600">
-            Hero is the autonomous agent layer for the Mycelium platform—trusted, policy-aware AI that runs on infrastructure you control and remembers what matters.
+            The Agent layer will allow you to run autonomous, policy-governed AI that operates on infrastructure you control, with private memory, verifiable execution, and coordination across your personal or organizational environment.
+          </P>
+          <P className="mt-6  text-gray-600">
+            Works Alone. Works Together.
+            Use Agents on top of any Mycelium Cloud deployment or pair them with the Mycelium Network for private, encrypted collaboration across users and systems.
           </P>
           <div className="mt-8">
             <Button href="#" variant="solid" color="cyan">
-              Join the Waitlist
+              Follow Deployment
+            </Button>
+            <Button href="#" variant="outline" color="white">
+              Explore Docs
             </Button>
           </div>
         </div>

src/pages/agents/AgentsPage.tsx

@@ -4,6 +4,8 @@ import { GallerySection } from './GallerySection'
 import { Companies } from './Companies'
 import { BentoSection } from './BentoSection'
 import { AgentHeroAlt } from './AgentHeroAlt'
+import { CallToAction } from './CallToAction'
+import { AgentComponents } from './AgentComponents'
 
 export default function AgentsPage() {
   return (
@@ -27,6 +29,14 @@ export default function AgentsPage() {
       <AnimatedSection>
         <BentoSection />
       </AnimatedSection>
+
+      <AnimatedSection>
+        <AgentComponents />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <CallToAction />
+      </AnimatedSection>
     </div>
   )
 }

src/pages/agents/BentoSection.tsx

@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P, CT, CP } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P, CT, CP } from '@/components/Texts'
 
 const items = [
   {
@@ -19,7 +19,7 @@ const items = [
     title: 'MOS Sandboxes',
     subtitle: 'Secure Agent Workspaces',
     description: 'Attested, signed workspaces spin up ≈5s worldwide—ready to execute. Hardware isolation and scoped egress: run hard, tear down clean, zero residue.',
-    video: '/videos/sandbox.mp4',
+    video: '/videos/herodb.mp4',
   },
   {
     title: 'Mycelium Mesh',

src/pages/agents/CallToAction.tsx

@@ -0,0 +1,59 @@
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '@/components/Container'
+import { Button } from '@/components/Button'
+
+export function CallToAction() {
+  return (
+    <section
+      id="get-started"
+      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
+    >
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
+      </div>
+
+      <Container className="relative">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+            Start Building the Future of Sovereign AI
+          </h2>
+          <p className="mt-6 text-lg text-gray-300">
+            Use today’s components — models, storage, compute, mesh — 
+            and step into agents as they arrive.
+          </p>
+
+          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
+            <Button
+              as="a"
+              to="/deploy"
+              variant="solid"
+              color="white"
+            >
+              Deploy a Model
+            </Button>
+
+            <Button
+              as="a"
+              to="/host"
+              variant="outline"
+              color="white"
+            >
+              Host a Node
+            </Button>
+
+            <Button
+              as="a"
+              to="https://threefold.info/mycelium_network/docs/"
+              target="_blank"
+              rel="noreferrer"
+              variant="outline"
+              color="white"
+            >
+              Follow Development
+            </Button>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/agents/DeploySection.tsx

@@ -55,12 +55,12 @@ export function DeploySection() {
           transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
           className="mx-auto max-w-5xl text-center"
         >
-          <Eyebrow color="accent">Get Started</Eyebrow>
+          <Eyebrow color="accent">Deployment</Eyebrow>
           <SectionHeader className="text-3xl font-medium tracking-tight" color="light">
-            Deploy Scalable LLMs and AI Agents
+            Run LLMs and Agent Workloads privately, today.
           </SectionHeader>
           <P className="mt-6" color="light">
-            Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
+            Even before the full Agent layer launches, you can deploy models and retrieval pipelines using Mycelium Cloud. 
           </P>
         </motion.div>
         <motion.ul

src/pages/agents/GallerySection.tsx

@@ -53,14 +53,13 @@ export function GallerySection() {
         <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
           <div className="mx-auto max-w-5xl lg:mt-12">
             <Eyebrow color="accent">Use Cases</Eyebrow>
-            <SectionHeader className="text-center" color="dark">Agents with Endless Possibilities.</SectionHeader>
+            <SectionHeader className="text-center" color="dark">What Agents Will Enable</SectionHeader>
           </div>
         </FadeIn>
         <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
           <div className="mx-auto max-w-4xl mt-6 lg:px-0 px-4">
             <P className="text-center" color="dark">
-            Your private agent coordinates a team of specialists that spin up on demand, collaborate across your world, and deliver end-to-end results.
+            The Agent layer is the coordination layer that sits on top of the Mycelium Stack, combining memory, execution, and secure communication into a single intelligence plane.
-            Many agents, one intelligence—yours.
             </P>
           </div>
         </FadeIn>

src/pages/agents/archive/AgentsHero.tsx

@@ -2,9 +2,9 @@
 
 import { useId, useState } from 'react'
 
-import { Button } from '../../components/Button'
+import { Button } from '@/components/Button'
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import ContactForm from '../../components/ContactForm'
+import ContactForm from '../../../components/ContactForm'
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   const id = useId()

src/pages/cloud/CalltoAction.tsx

@@ -0,0 +1,55 @@
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '@/components/Container'
+import { Button } from '@/components/Button'
+
+export function CallToAction() {
+  return (
+    <section
+      id="get-started"
+      className="relative overflow-hidden bg-gray-900 py-24 lg:py-32"
+    >
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
+      </div>
+
+      <Container className="relative">
+        <div className="mx-auto max-w-xl text-center">
+          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl lg:text-4xl">
+            Choose How You Want to Start
+          </h2>
+
+          <p className="mt-6 text-lg text-gray-300">
+            Host your own node to contribute capacity or deploy workloads using the Mycelium Cloud.
+          </p>
+
+          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
+            <div className="flex flex-col items-center text-center">
+              <h3 className="text-lg font-semibold text-white">Host a Node</h3>
+              <p className="mt-2 text-gray-300">
+                Add compute to the network and run your own environment.
+              </p>
+              <Button to="/host" variant="solid" color="cyan" className="mt-4">
+                Host a Node
+              </Button>
+            </div>
+
+            <div className="flex flex-col items-center text-center">
+              <h3 className="text-lg font-semibold text-white">Deploy Workloads</h3>
+              <p className="mt-2 text-gray-300">
+                Run Kubernetes clusters, agents, and services on the Mycelium Cloud.
+              </p>
+              <Button to="/cloud" variant="outline" color="white" className="mt-4">
+                Start Deploying
+              </Button>
+            </div>
+          </div>
+
+          <p className="mt-10 text-gray-300 text-lg max-w-md mx-auto">
+            You don’t need to host before deploying, and you don’t need to deploy before hosting.
+            Start wherever it makes sense for you.
+          </p>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/CloudArchitecture.tsx

@@ -1,39 +1,22 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, H3, P } from '../../components/Texts'
+import { Eyebrow, H3, P } from '@/components/Texts'
+import { Button } from '@/components/Button'
 
-const architectureSections = [
+const architecture = [
   {
-    title: 'Decentralized Infrastructure',
+    title: 'Mesh Networking Layer',
     description:
-      'Clusters launch across the ThreeFold Grid with direct node access and encrypted connectivity.',
+      'Every node receives a cryptographic network identity and secure routing path.',
-    bullets: [
-      'Unique Mycelium IP addresses assigned to every node.',
-      'Peer-to-peer mesh networking links services across nodes.',
-      'End-to-end encryption keeps traffic sealed inside the fabric.',
-      'No public IP exposure—everything is addressable via Mycelium IPs.',
-    ],
   },
   {
-    title: 'Network Flow',
+    title: 'Sovereign Compute Layer',
     description:
-      'Traffic moves through the Mycelium mesh, maintaining sovereignty without sacrificing reach.',
+      'Workloads run on hardware you authorize, no shared control, no exposed surfaces.',
-    bullets: [
-      'User requests enter through the encrypted Mycelium network.',
-      'Traffic routes directly to cluster nodes without intermediate hops.',
-      'Services answer over the same mesh—no ingress controller required.',
-      'Operational visibility without exposing public attack surface.',
-    ],
   },
   {
-    title: 'Kubernetes Management',
+    title: 'Deterministic Orchestration',
     description:
-      'Lightweight K3s orchestration delivers HA clusters with automated lifecycle management.',
+      'K3s clusters deploy predictably, verifiably, and remain drift-free.',
-    bullets: [
-      'Full K3s deployment and lifecycle management built-in.',
-      'IPv6-native networking ensures deterministic service discovery.',
-      'Multi-master topologies with automatic failover for resilience.',
-      'Drift-free upgrades orchestrated through smart contracts.',
-    ],
   },
 ]
 
@@ -41,51 +24,41 @@ export function CloudArchitecture() {
   return (
     <section className="bg-white py-24 lg:py-32">
       <Container>
-        <div className="mx-auto max-w-5xl text-center">
+        <div className="mx-auto max-w-4xl text-center">
-          <Eyebrow>
+          <Eyebrow>ARCHITECTURE</Eyebrow>
-            Technical Architecture
-          </Eyebrow>
           <H3 className="mt-6 text-gray-900">
-            Built on a Sovereign, Encrypted Delivery Mesh.
+            How Mycelium Cloud Works
           </H3>
           <P className="mt-6 text-gray-600">
-            Mycelium Cloud rides on the ThreeFold Grid, pairing encrypted mesh
+            Mycelium Cloud runs Kubernetes on a global encrypted mesh, with
-            networking with deterministic K3s orchestration. Every layer is
+            identity, routing, and state verified at the protocol level.
-            designed to keep workloads sovereign, observable, and effortless to
-            operate.
           </P>
         </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+
-          {architectureSections.map((section) => (
+        <div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
+          {architecture.map((layer) => (
             <div
-              key={section.title}
+              key={layer.title}
-              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg "
+              className="rounded-3xl border border-slate-200 bg-gray-50/40 p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
             >
-              <div className="flex items-center gap-3">
+              <h3 className="text-xl font-semibold text-gray-900">
-                <span className="inline-flex size-10 items-center justify-center rounded-full bg-cyan-500/10 text-base font-semibold uppercase tracking-[0.3em] text-cyan-600">
+                {layer.title}
-                  •
+              </h3>
-                </span>
+              <p className="mt-3 text-sm leading-relaxed text-gray-600">
-                <h3 className="text-xl font-semibold text-gray-900">
+                {layer.description}
-                  {section.title}
-                </h3>
-              </div>
-              <p className="mt-4 text-sm leading-relaxed text-gray-600">
-                {section.description}
               </p>
-              <ul className="mt-6 space-y-3 text-sm text-gray-600">
-                {section.bullets.map((bullet) => (
-                  <li
-                    key={bullet}
-                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
-                  >
-                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
-                    <span>{bullet}</span>
-                  </li>
-                ))}
-              </ul>
             </div>
           ))}
         </div>
+
+        <div className="mx-auto mt-16 flex justify-center gap-4">
+          <Button variant="solid" color="cyan" href="/start">
+            Get Started
+          </Button>
+          <Button variant="outline" color="gray" href="/docs">
+            Explore Docs
+          </Button>
+        </div>
       </Container>
     </section>
   )

src/pages/cloud/CloudBluePrint.tsx

@@ -0,0 +1,52 @@
+import { H3, P, Eyebrow } from '@/components/Texts'
+
+
+export function CloudBluePrint() {
+  return (
+    <div className="bg-white py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <Eyebrow color="accent">Featured Blueprint</Eyebrow>
+        <H3 color="primary">Your Personal Sovereign Cloud Workspace</H3>
+        <P color="primary">Digital Me is an example environment built to demonstrate what’s possible on top of the Mycelium Stack, a full personal cloud you can deploy, customize, or extend.
+            Your files, communication, apps, and optional AI agent, all running privately on infrastructure you choose.</P>
+        <div className="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
+          <img
+            alt="Transistor"
+            src="https://tailwindcss.com/plus-assets/img/logos/158x48/transistor-logo-gray-900.svg"
+            width={158}
+            height={48}
+            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
+          />
+          <img
+            alt="Reform"
+            src="https://tailwindcss.com/plus-assets/img/logos/158x48/reform-logo-gray-900.svg"
+            width={158}
+            height={48}
+            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
+          />
+          <img
+            alt="Tuple"
+            src="https://tailwindcss.com/plus-assets/img/logos/158x48/tuple-logo-gray-900.svg"
+            width={158}
+            height={48}
+            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
+          />
+          <img
+            alt="SavvyCal"
+            src="https://tailwindcss.com/plus-assets/img/logos/158x48/savvycal-logo-gray-900.svg"
+            width={158}
+            height={48}
+            className="col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1"
+          />
+          <img
+            alt="Statamic"
+            src="https://tailwindcss.com/plus-assets/img/logos/158x48/statamic-logo-gray-900.svg"
+            width={158}
+            height={48}
+            className="col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/cloud/CloudFeatures.tsx

@@ -354,7 +354,7 @@ function CloudFeaturesMobile() {
           >
                         <div
               className={clsx(
-                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
+                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-4 outline-2 transition-colors',
                 activeIndex === featureIndex
                   ? 'outline-transparent' // Remove outline for active mobile slide
                   : 'outline-transparent hover:outline-cyan-500',
@@ -415,7 +415,7 @@ export function CloudFeatures() {
             A Decentralized Cloud that Operates Itself
           </SectionHeader>
           <P color="light" className="mt-6">
-           Mycelium Cloud runs Kubernetes on a sovereign, self-healing network. Storage, networking, and compute are all integrated.
+           Mycelium Cloud runs Kubernetes on a sovereign, self-healing network with compute, storage, and networking built in, so you don’t need external cloud dependencies.
           </P>
         </div>
       </Container>

src/pages/cloud/CloudHeroNew.tsx

@@ -1,5 +1,5 @@
-import { H3, H5, Eyebrow } from "../../components/Texts"
+import { H3, H5, Eyebrow } from "@/components/Texts"
-import { Button } from "../../components/Button"
+import { Button } from "@/components/Button"
 
 
 export function CloudHeroNew() {
@@ -17,13 +17,15 @@ export function CloudHeroNew() {
             <H3 className="mt-4">
               Run Kubernetes on the Sovereign Agentic Cloud
             </H3>
-            <H5 className="mt-8 text-lg text-gray-600">
-              Mycelium Cloud turns the ThreeFold Grid into a programmable substrate for K3s. 
-            </H5>
             <H5 className="mt-4 text-lg text-gray-600">
               Deploy K3s clusters on a global, self-healing mesh network.
-Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control.
+              Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control.
- </H5>
+            </H5>
+            <H5 className="mt-4 text-sm text-gray-600">
+              Works Alone. Works Together.
+              Mycelium Cloud can run on any network fabric, or pair with Mycelium Network
+              for sovereign connectivity.
+            </H5>
             <div className="mt-10 flex items-center gap-x-6">
               <Button
                 to="#"
@@ -34,7 +36,7 @@ Your workloads run on sovereign, encrypted infrastructure, without centralized c
                 Get started
               </Button>
               <Button to="#" variant="outline">
-                Explore Docs <span aria-hidden="true"> →</span>
+                Documentation <span aria-hidden="true"> →</span>
               </Button>
             </div>
           </div>

src/pages/cloud/CloudHosting.tsx

@@ -4,28 +4,32 @@ import {
   ServerIcon,
   ShieldCheckIcon,
 } from '@heroicons/react/24/outline'
-import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+import { CP, CT, Eyebrow, H3 } from '@/components/Texts'
 
 const features = [
   {
+    Eyebrow: 'DevOps / Cloud teams',
     name: 'Kubernetes Clusters',
-    description: 'Deploy and scale containerized apps across your own hardware.',
+    description: 'Deterministic K3s workloads across sovereign hardware.',
     icon: ServerIcon,
   },
   {
-    name: 'AI Agents & LLM Runtimes',
+    Eyebrow: 'Security & infrastructure',
-    description: 'Run open-source models locally, securely, and offline.',
+    name: 'Encrypted Mesh Networking',
-    icon: ArrowPathIcon,
+    description: 'No public ingress, no exposed attack surface, zero-trust routing.',
+    icon: ShieldCheckIcon,
   },
   {
+    Eyebrow: 'Data-driven teams',
     name: 'S3-Compatible Storage',
-    description: 'Your own personal over-the-network drive, encrypted end-to-end.',
+    description: 'Distributed storage with erasure coding and residency control.',
     icon: CloudArrowUpIcon,
   },
   {
-    name: 'Mesh VPN & Zero-Trust Networking',
+    Eyebrow: 'AI / ML workloads',
-    description: 'Securely connect all your devices and remote locations.',
+    name: 'GPU-Ready',
-    icon: ShieldCheckIcon,
+    description: 'Scale inference & training on demand.',
+    icon: ArrowPathIcon,
   },
 ]
 
@@ -33,13 +37,8 @@ export function CloudHosting() {
   return (
     <div className="relative bg-white py-24 lg:py-32">
       <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
-        <Eyebrow>DEPLOY</Eyebrow>
+        <Eyebrow>CAPABILITIES</Eyebrow>
         <H3 className="mt-2">What You Can Run on Mycelium Cloud</H3>
-        <P className="mx-auto mt-5 max-w-prose">
-          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
-          orchestration, and security layers, so you can deploy services the same way you would on public cloud without
-          giving your data or control to anyone.
-        </P>
         <div className="mt-16">
           <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
             {features.map((feature) => (
@@ -48,6 +47,7 @@ export function CloudHosting() {
                   <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-500 hover:bg-cyan-400 p-3 shadow-lg">
                     <feature.icon aria-hidden="true" className="size-8 text-white" />
                   </span>
+                  <Eyebrow>{feature.Eyebrow}</Eyebrow>
                   <CT as="h3" className="mt-4">
                     {feature.name}
                   </CT>

src/pages/cloud/CloudPage.tsx

@@ -1,12 +1,11 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { CloudArchitecture } from './CloudArchitecture'
 import { CloudFeatures } from './CloudFeatures'
-import { CloudGettingStarted } from './CloudGettingStarted'
 import { CloudUseCases } from './CloudUseCases'
-import { SecurityPillars } from './SecurityPillars'
-import { CloudCTA } from './CloudCTA'
 import { CloudHeroNew } from './CloudHeroNew'
 import { CloudHosting } from './CloudHosting'
+import { CloudBluePrint } from './CloudBluePrint'
+import { CallToAction } from './CalltoAction'
 
 export default function CloudPage() {
   return (
@@ -28,17 +27,16 @@ export default function CloudPage() {
         <CloudArchitecture />
       </AnimatedSection>
 
-      <AnimatedSection>
-        <CloudGettingStarted />
-      </AnimatedSection>
       <AnimatedSection>
         <CloudUseCases />
       </AnimatedSection>
+
       <AnimatedSection>
-        <SecurityPillars />
+        <CloudBluePrint />
       </AnimatedSection>
+
       <AnimatedSection>
-        <CloudCTA />
+        <CallToAction />
       </AnimatedSection>
     </>
   )

src/pages/cloud/CloudUseCases.tsx

@@ -1,37 +1,35 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
 
 const useCases = [
   {
-    title: 'AI / ML Training',
+    title: 'Enterprise & Private Kubernetes',
     description:
-      'Run GPU-accelerated workloads for deep learning, data science, and inference on demand.',
+      'Production-grade K3s clusters with full workload ownership and residency control. Deploy apps and internal services without vendor lock-in or exposed surfaces.',
-    bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
-  },
-  {
-    title: 'Enterprise Kubernetes',
-    description:
-      'Operate production-grade clusters with complete control and no vendor lock-in.',
-    bullets: ['High availability', 'Security', 'Compliance'],
-  },
-  {
-    title: 'Edge & IoT',
-    description:
-      'Leverage global nodes for low-latency workloads and connected device deployments.',
-    bullets: ['Low latency', 'Global distribution', 'Real-time processing'],
-  },
-  {
-    title: 'DigitalMe Blueprint',
-    description:
-      'Launch a full digital workspace on Mycelium Cloud with pre-integrated services.',
     bullets: [
-      'Cryptpad • Encrypted collaboration',
+      'High availability + failover',
-      'Elements • Matrix chat',
+      'Encrypted, mesh-native networking',
-      'Stallwart • Mail, calendar, contacts',
+      'Compliance-ready governance & policy control',
-      'Gitea • Git hosting',
+    ],
-      'Nextcloud • File storage and sync',
+  },
-      'LiveKit / Jitsi • Real-time video',
+  {
-      'Single Sign-On backed by Gitea',
+    title: 'Edge & Distributed Deployments',
+    description:
+      'Place compute close to where data is created. Run clusters globally across home labs, offices, data centers, or edge locations.',
+    bullets: [
+      'Low-latency execution',
+      'Mesh-routed connectivity',
+      'Autonomous healing across region',
+    ],
+  },
+  {
+    title: 'AI / ML & Agent Workloads',
+    description:
+      'Run inference, training, and autonomous AI systems on sovereign compute. GPU orchestration, private vector storage, and model execution without handing data to hyperscalers.',
+    bullets: [
+      'Scales across nodes',
+      'Supports open-source & fine-tuned models',
+      'Built for agentic automation + RAG',
     ],
   },
 ]

src/pages/cloud/archive/CloudCTA.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'  
-import { Button } from '../../components/Button'
+import { Button } from '@/components/Button'
 
 export function CloudCTA() {
   return (

src/pages/cloud/archive/CloudGettingStarted.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
 
 type Step = {
   number: string

src/pages/cloud/archive/CloudHero.tsx

@@ -1,8 +1,8 @@
 import { useId } from 'react'
 
-import { Button } from '../../components/Button'
+import { Button } from '@/components/Button'
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, H2, P, H5 } from '../../components/Texts'
+import { Eyebrow, H2, P, H5 } from '@/components/Texts'
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   const id = useId()

src/pages/cloud/archive/CloudHeroAlt.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button } from '../../components/Button'
+import { Button } from '@/components/Button'
 
 export function CloudHeroAlt() {
   return (

src/pages/cloud/archive/CloudOverview.tsx

@@ -1,6 +1,6 @@
-import { CircleBackground } from '../../components/CircleBackground'
+import { CircleBackground } from '@/components/CircleBackground'
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
 
 const focusAreas = [
   {

src/pages/cloud/archive/ComputeStorageSplit.tsx

@@ -1,4 +1,4 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
 
 const computeFeatures = [
   {

src/pages/cloud/archive/SecurityPillars.tsx

@@ -1,6 +1,6 @@
-import { CircleBackground } from '../../components/CircleBackground'
+import { CircleBackground } from '@/components/CircleBackground'
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
 
 const differentiators = [
   {

src/pages/compute/CallToAction.tsx

@@ -1,6 +1,6 @@
 import { CircleBackground } from '../../components/CircleBackground'
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Button } from '../../components/Button'
+import { Button } from '@/components/Button'
 
 export function CallToAction() {
   return (
@@ -14,14 +14,16 @@ export function CallToAction() {
       <Container className="relative">
         <div className="mx-auto max-w-2xl text-center">
           <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
-            Get Started Today
+            Choose How You Want to Start
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
+            Run workloads using Mycelium Cloud, or host your own compute node.
+Both use the same deterministic execution fabric.
+
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <Button to="/download" variant="solid" color="white">
-              Get Mycelium Connector
+              Deploy Workloads
             </Button>
             <Button
               to="https://threefold.info/mycelium_network/docs/"
@@ -30,7 +32,7 @@ export function CallToAction() {
               variant="outline"
               color="white"
             >
-              Read Docs
+              Host A Node
             </Button>
           </div>
         </div>

src/pages/compute/ComputeArchitecture.tsx

@@ -1,92 +1,53 @@
-import { Container } from '../../components/Container'
+import {
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+  LockClosedIcon,
+  CpuChipIcon,
+  AdjustmentsHorizontalIcon,
+} from '@heroicons/react/24/solid'
+import { Container } from '@/components/Container'
+import { Eyebrow, H3, CT, CP } from '@/components/Texts'
 
-const architectureSections = [
+const architecture = [
   {
-    title: 'Deterministic Computing',
+    name: 'Mesh Networking',
-    description:
+    description: 'Secure connectivity across all nodes.',
-      'Every computational step is predictable and provable before it ever executes.',
+    icon: LockClosedIcon,
-    bullets: [
-      'Cryptographic verification precedes every operation.',
-      'State determinism ensures identical results from identical inputs.',
-      'Tamper resistance surfaces any modification instantly.',
-      'Comprehensive audit trails verify the full execution history.',
-    ],
   },
   {
-    title: 'Stateless Infrastructure',
+    name: 'Sovereign Compute',
-    description:
+    description: 'Execution only on hardware you control.',
-      'A global substrate that scales and recovers without hardware-bound state.',
+    icon: CpuChipIcon,
-    bullets: [
-      'No persistent state coupled to specific hardware or regions.',
-      'Global distribution makes compute available wherever it is needed.',
-      'Auto-scaling allocates the right resources at the right time.',
-      'Fault-tolerant orchestration provides automatic failover.',
-    ],
   },
   {
-    title: 'Zero-Image System',
+    name: 'Deterministic Orchestration',
-    description:
+    description: 'Workloads deploy and update predictably.',
-      'Metadata-first delivery keeps deployments lightweight and instantly repeatable.',
+    icon: AdjustmentsHorizontalIcon,
-    bullets: [
-      'Images represented as metadata instead of heavyweight artifacts.',
-      'Instant deployment for rapid workload startup.',
-      'Efficient storage with minimal footprint for artifacts.',
-      'Bandwidth-optimized transfers shrink delivery times.',
-    ],
   },
 ]
 
 export function ComputeArchitecture() {
   return (
-    <section className="bg-gray-50 py-24 sm:py-32">
+    <section className="bg-white py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
+          <Eyebrow>ARCHITECTURE</Eyebrow>
-            Technical Architecture
+          <H3 className="mt-4 text-gray-900">HOW IT WORKS</H3>
-          </Eyebrow>
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Infrastructure engineered for provable outcomes.
-          </SectionHeader>
-          <P className="mt-6 text-gray-600">
-            Deterministic computing, stateless orchestration, and metadata-first
-            delivery combine to create a compute fabric you can trust with your
-            most sensitive workloads.
-          </P>
         </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+
-          {architectureSections.map((section) => (
+        <div className="mx-auto mt-16 max-w-5xl">
-            <div
+          <dl className="grid grid-cols-1 gap-12 text-gray-600 sm:grid-cols-2 lg:grid-cols-3">
-              key={section.title}
+            {architecture.map((item) => (
-              className="flex h-full flex-col rounded-3xl border border-cyan-100 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+              <div key={item.name} className="relative pl-12">
-            >
+                <item.icon
-              <div className="flex items-center gap-3">
+                  aria-hidden="true"
-                <span className="inline-flex size-10 items-center justify-center rounded-full bg-cyan-500/10 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-600">
+                  className="absolute left-0 top-1 size-6 text-cyan-600"
-                  •
+                />
-                </span>
+                <CT className="font-semibold text-gray-900">{item.name}</CT>
-                <h3 className="text-xl font-semibold text-gray-900">
+                <CP className="mt-1 text-gray-600">{item.description}</CP>
-                  {section.title}
-                </h3>
               </div>
-              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+            ))}
-                {section.description}
+          </dl>
-              </p>
-              <ul className="mt-6 space-y-3 text-sm text-gray-600">
-                {section.bullets.map((bullet) => (
-                  <li
-                    key={bullet}
-                    className="flex items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50 p-3 leading-relaxed"
-                  >
-                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
-                    <span>{bullet}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
         </div>
       </Container>
     </section>
   )
 }
-

src/pages/compute/ComputeCapabilities.tsx

@@ -0,0 +1,58 @@
+import {
+  CpuChipIcon,
+  CubeIcon,
+  ServerIcon,
+} from '@heroicons/react/24/solid'
+import { Eyebrow, H3, P, CT, CP } from '@/components/Texts'
+import { Container } from '@/components/Container'
+
+const capabilities = [
+  {
+    name: 'Containers',
+    description: 'Services, web apps, APIs. Fully compatible with Kubernetes.',
+    icon: CubeIcon,
+  },
+  {
+    name: 'Virtual Machines',
+    description:
+      'Legacy apps and specialized runtime stacks. Secure boot + attestation included.',
+    icon: ServerIcon,
+  },
+  {
+    name: 'Native Linux Workloads',
+    description:
+      'Agents, batch jobs, tooling. Runs statelessly anywhere.',
+    icon: CpuChipIcon,
+  },
+]
+
+export function ComputeCapabilities() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow>CAPABILITIES</Eyebrow>
+          <H3 className="mt-4 text-gray-900">What You Can Run</H3>
+          <P className="mt-6 text-gray-600">
+            Mycelium Compute supports multiple workload types on a single
+            execution fabric.
+          </P>
+        </div>
+
+        <div className="mx-auto mt-16 max-w-5xl">
+          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
+            {capabilities.map((feature) => (
+              <div key={feature.name} className="flex flex-col text-center">
+                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
+                  <feature.icon aria-hidden="true" className="size-6 text-cyan-600" />
+                </div>
+                <CT className="mt-6 text-gray-900">{feature.name}</CT>
+                <CP className="mt-2 text-gray-600">{feature.description}</CP>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/compute/ComputeDesign.tsx

@@ -0,0 +1,56 @@
+import {
+  ShieldCheckIcon,
+  ArrowPathIcon,
+  RocketLaunchIcon,
+} from '@heroicons/react/24/solid'
+import { Container } from '@/components/Container'
+import { Eyebrow, H3, P, CT, CP } from '@/components/Texts'
+
+const features = [
+  {
+    name: 'Cryptographically verified deployments',
+    description: 'Every cluster state is signed and checksummed to guarantee truth.',
+    icon: ShieldCheckIcon,
+  },
+  {
+    name: 'Stateless execution that scales anywhere',
+    description: 'Run workloads on any node, region, or edge without manual orchestration.',
+    icon: RocketLaunchIcon,
+  },
+  {
+    name: 'Automatic healing and recovery',
+    description: 'Self-repairing processes ensure workloads stay available and consistent.',
+    icon: ArrowPathIcon,
+  },
+]
+
+export function ComputeDesign() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl sm:text-center">
+          <Eyebrow>CORE VALUE</Eyebrow>
+          <H3 className="mt-4 text-gray-900">Deterministic by Design</H3>
+          <P className="mt-6 text-gray-600">
+            Every workload runs exactly as declared: no drift, no hidden state, no surprises.
+          </P>
+        </div>
+
+        <div className="mx-auto mt-16 max-w-5xl">
+          <dl className="grid grid-cols-1 gap-12 text-gray-600 sm:grid-cols-2 lg:grid-cols-3">
+            {features.map((feature) => (
+              <div key={feature.name} className="relative pl-12">
+                <feature.icon
+                  aria-hidden="true"
+                  className="absolute left-0 top-1 size-6 text-cyan-600"
+                />
+                <CT className="font-semibold text-gray-900">{feature.name}</CT>
+                <CP className="mt-1 text-gray-600">{feature.description}</CP>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/compute/ComputeFeatures.tsx

@@ -1,54 +1,26 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
 
 const featureGroups = [
   {
-    title: 'Deterministic Deployments',
+    title: 'Self-Managing Infrastructure',
     description:
-      'Cryptographic verification ensures every workload deploys exactly as specified—no tampering, no drift.',
+      'Scaling, healing, and failover happen automatically, no manual intervention.',
-    listTitle: 'Benefits',
-    bullets: [
-      'Cryptographic verification of every workload component',
-      'Zero configuration drift across environments',
-      'Immediate detection of unauthorized changes',
-      'Complete reproducibility for every deployment',
-    ],
   },
   {
-    title: 'Self-Managing & Stateless Infrastructure',
+    title: 'Secure, Stateless Execution',
     description:
-      'Infrastructure that scales and heals autonomously across the ThreeFold Grid with no manual intervention.',
+      'Workloads remain isolated, reproducible, and portable, no environment drift or configuration decay.',
-    listTitle: 'Capabilities',
-    bullets: [
-      'Autonomous operations that self-orchestrate workloads',
-      'Global scaling sewn into the fabric of the platform',
-      'Stateless design removes hardware dependencies',
-      'Self-healing recovery from failures and anomalies',
-    ],
   },
   {
-    title: 'Smart Contract-Based Deployment',
+    title: 'Zero-Image Delivery',
     description:
-      'Cryptographically signed contracts orchestrate every workload lifecycle with transparent, tamper-proof execution.',
+      'Deploy workloads using metadata instead of large container images for instant launches.',
-    listTitle: 'Benefits',
-    bullets: [
-      'Every deployment contract cryptographically signed',
-      'Fully auditable, transparent execution of operations',
-      'Tamper-proof orchestration that cannot be rewritten',
-      'Smart contracts automate the entire workload lifecycle',
-    ],
   },
   {
-    title: 'Multi-Workload Compatibility with Secure Boot',
+    title: 'Global Placement Control',
     description:
-      'Run containers, VMs, and native Linux workloads anywhere with stateless secure boot and continuous verification.',
+      'Choose where workloads run, on your hardware or across the decentralized grid.',
-    listTitle: 'Capabilities',
-    bullets: [
-      'Full compatibility with Kubernetes and Docker workloads',
-      'Securely run virtual machines with attested boot paths',
-      'Native Linux applications verified end-to-end',
-      'Continuous verification maintains trusted execution',
-    ],
   },
 ]
 
@@ -69,6 +41,7 @@ export function ComputeFeatures() {
             the grid.
           </P>
         </div>
+
         <div className="mt-16 grid gap-8 md:grid-cols-2">
           {featureGroups.map((feature) => (
             <div
@@ -77,7 +50,7 @@ export function ComputeFeatures() {
             >
               <div>
                 <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
-                  {feature.listTitle}
+                  Feature
                 </Small>
                 <h3 className="mt-4 text-2xl font-semibold text-gray-900">
                   {feature.title}
@@ -86,17 +59,6 @@ export function ComputeFeatures() {
                   {feature.description}
                 </p>
               </div>
-              <ul className="mt-6 space-y-3 text-sm text-gray-600">
-                {feature.bullets.map((bullet) => (
-                  <li
-                    key={bullet}
-                    className="flex items-start gap-3 rounded-2xl border border-cyan-100/40 bg-cyan-50/40 p-3 text-left leading-relaxed"
-                  >
-                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
-                    <span>{bullet}</span>
-                  </li>
-                ))}
-              </ul>
             </div>
           ))}
         </div>

src/pages/compute/ComputeHero.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { Button } from '../../components/Button'
+import { Button } from '@/components/Button'
-import { Eyebrow, SectionHeader, P, H3 } from '../../components/Texts'
+import { Eyebrow, P, H3 } from '@/components/Texts'
 
 export function ComputeHero() {
   return (
@@ -17,19 +17,16 @@ export function ComputeHero() {
       <div className="relative mx-auto max-w-7xl py-12 lg:py-24 lg:px-8">
         <div className="max-w-2xl pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24">
           <Eyebrow className="text-base/7 font-semibold text-cyan-500">COMPUTE</Eyebrow>
-          <H3 className="mt-2 text-gray-900">The pulse of Intelligence Runs Here.</H3>
+          <H3 className="mt-2 text-gray-900">Deterministic Compute You Control</H3>
           <P className="mt-6  text-gray-600">
-            Mycelium Compute brings predictable, sovereign performance — free from lock-in, free from drift.
+            Run workloads on sovereign, self-verifying infrastructure.
-            Deploy any workload, anywhere, with cryptographic precision and zero compromise.
+            Mycelium Compute delivers predictable execution, zero drift, and automatic healing, whether you’re running containers, VMs, agents, or full Kubernetes clusters.
-          </P>
-          <P className="mt-6  text-gray-600">
-            From micro-VMs to full clusters, every operation is deterministic, self-managing, and stateless by design.
-            Compute that verifies itself. Expands itself. Heals itself.
           </P>
           <div className="mt-12">
             <Button href="#" variant="solid" color="cyan">
-              Experience Deterministic Compute
+              How it works
             </Button>
+            <Button href="#" variant="outline" color="cyan">Explore Docs</Button>
           </div>
         </div>
       </div>

src/pages/compute/ComputeOverview.tsx

@@ -1,6 +1,6 @@
 import { CircleBackground } from '../../components/CircleBackground'
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
 
 const overviewCards = [
   {

src/pages/compute/ComputePage.tsx

@@ -1,13 +1,13 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { ComputeHero } from './ComputeHero'
-import { ComputeOverview } from './ComputeOverview'
 import { ComputeFeatures } from './ComputeFeatures'
-import { ComputeZeroImage } from './ComputeZeroImage'
 import { ComputeArchitecture } from './ComputeArchitecture'
-import { ComputeDeveloperExperience } from './ComputeDeveloperExperience'
 import { ComputeUseCases } from './ComputeUseCases'
-import { ComputeDifferentiators } from './ComputeDifferentiators'
 import { CallToAction } from './CallToAction'
+import { ComputeCapabilities } from './ComputeCapabilities'
+import { ComputeDesign } from './ComputeDesign'
+import { ComputeOverview } from './ComputeOverview'
+
 
 export default function ComputePage() {
   return (
@@ -15,27 +15,31 @@ export default function ComputePage() {
       <AnimatedSection>
         <ComputeHero />
       </AnimatedSection>
+
       <AnimatedSection>
-        <ComputeOverview />
+        <ComputeCapabilities />
       </AnimatedSection>
+
       <AnimatedSection>
-        <ComputeFeatures />
+        <ComputeDesign />
-      </AnimatedSection>
-      <AnimatedSection>
-        <ComputeZeroImage />
       </AnimatedSection>
+
       <AnimatedSection>
         <ComputeArchitecture />
       </AnimatedSection>
+
       <AnimatedSection>
-        <ComputeDeveloperExperience />
+        <ComputeFeatures />
       </AnimatedSection>
+
       <AnimatedSection>
         <ComputeUseCases />
       </AnimatedSection>
+
       <AnimatedSection>
-        <ComputeDifferentiators />
+        <ComputeOverview />
       </AnimatedSection>
+
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/compute/ComputeUseCases.tsx

@@ -1,72 +1,21 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, SectionHeader } from '@/components/Texts'
 
-const primaryUseCases = [
+const useCases = [
   {
     title: 'AI / ML Training',
-    bullets: [
+    description:
-      'Deterministic training pipelines for reproducible experiments.',
+      'Reproducible pipelines, private model execution, scalable GPU orchestration.',
-      'Cryptographically verified model artifacts end-to-end.',
-      'Autonomous scaling for distributed training runs.',
-      'Zero-drift environments that remain consistent over time.',
-    ],
   },
   {
     title: 'Application Hosting',
-    bullets: [
+    description:
-      'Transparent deployments with verifiable execution.',
+      'Private, reliable, self-healing services – without cloud vendor lock-in.',
-      'Auto-scaling that allocates resources on demand.',
-      'Instant global distribution across the ThreeFold Grid.',
-      'Cryptographically secured runtime environments.',
-    ],
   },
   {
-    title: 'Data Processing',
+    title: 'Distributed & Edge Compute',
-    bullets: [
+    description:
-      'Deterministic pipelines that document every transformation.',
+      'Run workloads where data lives, in homes, offices, datacenters, or remote regions.',
-      'Secure computation with cryptographic verification.',
-      'Auto-scaling resources for fluctuating workloads.',
-      'Global processing placement to minimize latency.',
-    ],
-  },
-  {
-    title: 'Scientific Computing',
-    bullets: [
-      'Reproducible research environments for shared experiments.',
-      'Secure workloads with verifiable execution paths.',
-      'Dynamic scaling for compute-intensive tasks.',
-      'Global collaboration with sovereign resource control.',
-    ],
-  },
-]
-
-const computeSpecific = [
-  {
-    title: 'Deterministic Training Environments',
-    bullets: [
-      'Reproducible ML experiments with identical conditions every run.',
-      'Verifiable computational research for scientific collaboration.',
-      'Auditable financial modelling workflows with traceable outputs.',
-      'Consistent IoT edge processing with predictable performance.',
-    ],
-  },
-  {
-    title: 'Multi-Platform Application Hosting',
-    bullets: [
-      'Kubernetes orchestration with deterministic deployment pipelines.',
-      'Virtual machines launched with hardware-attested secure boot.',
-      'Native Linux workloads with cryptographic assurance.',
-      'Hybrid topologies mixing containers, VMs, and bare metal.',
-    ],
-  },
-  {
-    title: 'Auto-Scaling Workloads',
-    bullets: [
-      'Demand-based scaling that reacts instantly to load.',
-      'Global distribution across the ThreeFold Grid.',
-      'Automated failover that restores services without intervention.',
-      'Cost optimization through intelligent resource allocation.',
-    ],
   },
 ]
 
@@ -79,55 +28,24 @@ export function ComputeUseCases() {
             Use Cases
           </Eyebrow>
           <SectionHeader as="h2" color="light" className="mt-6">
-            Purpose-built for reproducibility, security, and scale.
+           Built for Serious Workloads
           </SectionHeader>
-          <P color="lightSecondary" className="mt-6">
-            From sovereign AI training loops to globally distributed
-            applications, Mycelium Compute keeps environments verifiable and
-            self-orchestrating so teams can focus on building.
-          </P>
         </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+
-          <div className="space-y-6">
+        <div className="mx-auto mt-16 max-w-4xl space-y-6">
-            {primaryUseCases.map((useCase) => (
+          {useCases.map((useCase) => (
-              <div
+            <div
-                key={useCase.title}
+              key={useCase.title}
-                className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10"
+              className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10"
-              >
+            >
-                <h3 className="text-xl font-semibold text-white">
+              <h3 className="text-xl font-semibold text-white">
-                  {useCase.title}
+                {useCase.title}
-                </h3>
+              </h3>
-                <ul className="mt-4 space-y-3 text-sm text-gray-200">
+              <p className="mt-3 text-sm leading-relaxed text-gray-200">
-                  {useCase.bullets.map((bullet) => (
+                {useCase.description}
-                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
+              </p>
-                      <span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" />
+            </div>
-                      <span>{bullet}</span>
+          ))}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-          <div className="space-y-6">
-            {computeSpecific.map((useCase) => (
-              <div
-                key={useCase.title}
-                className="rounded-3xl border border-cyan-400/20 bg-gradient-to-br from-cyan-500/10 via-cyan-500/5 to-transparent p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:from-cyan-400/20 hover:via-cyan-400/10"
-              >
-                <h3 className="text-xl font-semibold text-white">
-                  {useCase.title}
-                </h3>
-                <ul className="mt-4 space-y-3 text-sm text-cyan-100">
-                  {useCase.bullets.map((bullet) => (
-                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
-                      <span className="mt-1 inline-block size-2 rounded-full bg-white/80" />
-                      <span>{bullet}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
         </div>
       </Container>
     </section>

src/pages/compute/archive/ComputeDeveloperExperience.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
 
 const codeSamples = [
   {

src/pages/compute/archive/ComputeDifferentiators.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
 
 const differentiators = [
   {

src/pages/compute/archive/ComputeUseCasesArchived.tsx

@@ -0,0 +1,135 @@
+import { Container } from '@/components/Container'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
+
+const primaryUseCases = [
+  {
+    title: 'AI / ML Training',
+    bullets: [
+      'Deterministic training pipelines for reproducible experiments.',
+      'Cryptographically verified model artifacts end-to-end.',
+      'Autonomous scaling for distributed training runs.',
+      'Zero-drift environments that remain consistent over time.',
+    ],
+  },
+  {
+    title: 'Application Hosting',
+    bullets: [
+      'Transparent deployments with verifiable execution.',
+      'Auto-scaling that allocates resources on demand.',
+      'Instant global distribution across the ThreeFold Grid.',
+      'Cryptographically secured runtime environments.',
+    ],
+  },
+  {
+    title: 'Data Processing',
+    bullets: [
+      'Deterministic pipelines that document every transformation.',
+      'Secure computation with cryptographic verification.',
+      'Auto-scaling resources for fluctuating workloads.',
+      'Global processing placement to minimize latency.',
+    ],
+  },
+  {
+    title: 'Scientific Computing',
+    bullets: [
+      'Reproducible research environments for shared experiments.',
+      'Secure workloads with verifiable execution paths.',
+      'Dynamic scaling for compute-intensive tasks.',
+      'Global collaboration with sovereign resource control.',
+    ],
+  },
+]
+
+const computeSpecific = [
+  {
+    title: 'Deterministic Training Environments',
+    bullets: [
+      'Reproducible ML experiments with identical conditions every run.',
+      'Verifiable computational research for scientific collaboration.',
+      'Auditable financial modelling workflows with traceable outputs.',
+      'Consistent IoT edge processing with predictable performance.',
+    ],
+  },
+  {
+    title: 'Multi-Platform Application Hosting',
+    bullets: [
+      'Kubernetes orchestration with deterministic deployment pipelines.',
+      'Virtual machines launched with hardware-attested secure boot.',
+      'Native Linux workloads with cryptographic assurance.',
+      'Hybrid topologies mixing containers, VMs, and bare metal.',
+    ],
+  },
+  {
+    title: 'Auto-Scaling Workloads',
+    bullets: [
+      'Demand-based scaling that reacts instantly to load.',
+      'Global distribution across the ThreeFold Grid.',
+      'Automated failover that restores services without intervention.',
+      'Cost optimization through intelligent resource allocation.',
+    ],
+  },
+]
+
+export function ComputeUseCases() {
+  return (
+    <section className="bg-gray-950 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow color="accent" className="tracking-[0.32em] uppercase">
+            Use Cases
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Purpose-built for reproducibility, security, and scale.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            From sovereign AI training loops to globally distributed
+            applications, Mycelium Compute keeps environments verifiable and
+            self-orchestrating so teams can focus on building.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          <div className="space-y-6">
+            {primaryUseCases.map((useCase) => (
+              <div
+                key={useCase.title}
+                className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10"
+              >
+                <h3 className="text-xl font-semibold text-white">
+                  {useCase.title}
+                </h3>
+                <ul className="mt-4 space-y-3 text-sm text-gray-200">
+                  {useCase.bullets.map((bullet) => (
+                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
+                      <span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" />
+                      <span>{bullet}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+          <div className="space-y-6">
+            {computeSpecific.map((useCase) => (
+              <div
+                key={useCase.title}
+                className="rounded-3xl border border-cyan-400/20 bg-linear-to-br from-cyan-500/10 via-cyan-500/5 to-transparent p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:from-cyan-400/20 hover:via-cyan-400/10"
+              >
+                <h3 className="text-xl font-semibold text-white">
+                  {useCase.title}
+                </h3>
+                <ul className="mt-4 space-y-3 text-sm text-cyan-100">
+                  {useCase.bullets.map((bullet) => (
+                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
+                      <span className="mt-1 inline-block size-2 rounded-full bg-white/80" />
+                      <span>{bullet}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/compute/archive/ComputeZeroImage.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
 
 const zeroImageBenefits = [
   'Metadata-only artifacts replace heavy images for ultra-fast delivery.',
@@ -10,11 +10,11 @@ const zeroImageBenefits = [
 
 export function ComputeZeroImage() {
   return (
-    <section className="relative overflow-hidden bg-gradient-to-b from-cyan-950 via-gray-950 to-gray-950 py-24 sm:py-32">
+    <section className="relative overflow-hidden bg-linear-to-b from-cyan-950 via-gray-950 to-gray-950 py-24 sm:py-32">
       <div className="pointer-events-none absolute inset-0">
         <div className="absolute -top-32 right-1/4 h-72 w-72 rounded-full bg-cyan-500/30 blur-[120px]" />
         <div className="absolute bottom-0 left-1/3 h-96 w-96 rounded-full bg-cyan-400/10 blur-[140px]" />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_left,_rgba(8,145,178,0.18),_transparent_55%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_left,rgba(8,145,178,0.18),transparent_55%)]" />
       </div>
       <Container className="relative">
         <div className="grid items-center gap-12 lg:grid-cols-[0.85fr_1.15fr]">

src/pages/gpu/CallToAction.tsx

@@ -1,6 +1,6 @@
 import { CircleBackground } from '../../components/CircleBackground'
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Button } from '../../components/Button'
+import { Button } from '@/components/Button'
 
 export function CallToAction() {
   return (
@@ -14,11 +14,12 @@ export function CallToAction() {
       <Container className="relative">
         <div className="mx-auto max-w-2xl text-center">
           <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
-            Bring sovereign GPU acceleration to production.
+            Choose How You Want to Start
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Work with the Mycelium team to deploy GPU workloads that remain
+            Use GPUs through Mycelium Cloud,
-            verifiable, performant, and cost-transparent from edge to core.
+or contribute GPU nodes to the mesh and run your own workloads.
+
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <Button
@@ -29,7 +30,7 @@ export function CallToAction() {
               target="_blank"
               rel="noreferrer"
             >
-              Talk to our team
+              Deploy GPU Workloads
             </Button>
             <Button
               to="#gpu-architecture"
@@ -37,7 +38,7 @@ export function CallToAction() {
               variant="outline"
               color="white"
             >
-              Review architecture
+              Host A GPU Node
             </Button>
           </div>
         </div>

src/pages/gpu/GpuArchitecture.tsx

@@ -1,28 +1,18 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, SectionHeader } from '@/components/Texts'
 
-const architectureSections = [
+const architecture = [
   {
-    title: 'Distributed GPU Mesh',
+    title: 'Sovereign Compute Nodes',
-    description:
+    description: 'GPUs hosted on hardware you trust.',
-      'A peer-to-peer fabric connects GPU nodes across the ThreeFold Grid, exposing them through the Mycelium network.',
-    bullets: [
-      'GPU nodes distributed globally for on-demand acceleration.',
-      'Mycelium network provides encrypted peer-to-peer connectivity.',
-      'Smart contract orchestration allocates and governs resources.',
-      'Real-time monitoring tracks utilization and health.',
-    ],
   },
   {
-    title: 'Performance Characteristics',
+    title: 'Encrypted Mesh Networking',
-    description:
+    description: 'Secure, private connectivity to workloads.',
-      'Consistency and transparency are built into the fabric so workloads behave predictably anywhere on the planet.',
+  },
-    bullets: [
+  {
-      'Edge-to-core deployment flexibility for every workload profile.',
+    title: 'Reservation & Verification Layer',
-      'Adaptive intelligence optimizes allocation automatically.',
+    description: 'Guarantees GPU access and consistency.',
-      'Deterministic performance guarantees availability when booked.',
-      'Transparent cost tracking for every GPU cycle consumed.',
-    ],
   },
 ]
 
@@ -31,41 +21,24 @@ export function GpuArchitecture() {
     <section id="gpu-architecture" className="bg-white py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>
+          <Eyebrow>ARCHITECTURE</Eyebrow>
-            Technical Architecture
-          </Eyebrow>
           <SectionHeader as="h2" className="mt-6 text-gray-900">
-            A peer-to-peer mesh purpose-built for acceleration.
+            HOW IT WORKS
           </SectionHeader>
-          <P className="mt-6 text-gray-600">
-            Mycelium GPU treats every node as part of a sovereign mesh. Encrypted
-            networking, smart contract orchestration, and transparent monitoring
-            ensure your workloads receive precisely the power they request.
-          </P>
         </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+
-          {architectureSections.map((section) => (
+        <div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
+          {architecture.map((item) => (
             <div
-              key={section.title}
+              key={item.title}
-              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+              className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
             >
               <h3 className="text-xl font-semibold text-gray-900">
-                {section.title}
+                {item.title}
               </h3>
-              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+              <p className="mt-3 text-sm leading-relaxed text-gray-600">
-                {section.description}
+                {item.description}
               </p>
-              <ul className="mt-6 space-y-3 text-sm text-gray-600">
-                {section.bullets.map((bullet) => (
-                  <li
-                    key={bullet}
-                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
-                  >
-                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
-                    <span>{bullet}</span>
-                  </li>
-                ))}
-              </ul>
             </div>
           ))}
         </div>

src/pages/gpu/GpuCapabilities.tsx

@@ -0,0 +1,58 @@
+import {
+  SparklesIcon,
+  Cog6ToothIcon,
+  CubeTransparentIcon,
+  CpuChipIcon,
+} from '@heroicons/react/24/solid'
+import { Eyebrow, H3, CT, CP } from '@/components/Texts'
+import { Container } from '@/components/Container'
+
+const capabilities = [
+  {
+    name: 'AI / ML Inference & Training',
+    description: 'LLMs, embeddings, transformers, fine-tuning',
+    icon: SparklesIcon,
+  },
+  {
+    name: 'Acceleration in Kubernetes Workloads',
+    description: 'GPU-backed deployments on Mycelium Cloud',
+    icon: Cog6ToothIcon,
+  },
+  {
+    name: 'Rendering & Simulation',
+    description: 'Scientific visualization, VFX, real-time 3D',
+    icon: CubeTransparentIcon,
+  },
+  {
+    name: 'Agent Compute & RAG Pipelines',
+    description: 'Vector memory + model execution on sovereign hardware',
+    icon: CpuChipIcon,
+  },
+]
+
+export function GpuCapabilities() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow>CAPABILITIES</Eyebrow>
+          <H3 className="mt-4 text-gray-900">What You Can Run on Mycelium Cloud</H3>
+        </div>
+
+        <div className="mx-auto mt-16 max-w-5xl">
+          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
+            {capabilities.map((feature) => (
+              <div key={feature.name} className="flex flex-col text-center">
+                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
+                  <feature.icon className="size-6 text-cyan-600" aria-hidden="true" />
+                </div>
+                <CT className="mt-6 text-gray-900">{feature.name}</CT>
+                <CP className="mt-2 text-gray-600">{feature.description}</CP>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/gpu/GpuDesign.tsx

@@ -0,0 +1,59 @@
+import { Container } from '@/components/Container'
+import { Eyebrow, H3, CT } from '@/components/Texts'
+import {
+  BoltIcon,
+  BanknotesIcon,
+  GlobeAltIcon,
+  ShieldCheckIcon,
+} from '@heroicons/react/24/solid'
+
+const benefits = [
+  {
+    name: 'Consistent, reserved GPU performance (no noisy neighbor effects)',
+    icon: BoltIcon,
+  },
+  {
+    name: 'Transparent cost (no markup, no surprise billing)',
+    icon: BanknotesIcon,
+  },
+  {
+    name: 'Run anywhere – cloud, on-prem, edge, home lab',
+    icon: GlobeAltIcon,
+  },
+  {
+    name: 'Your data never leaves your control',
+    icon: ShieldCheckIcon,
+  },
+]
+
+export function GpuDesign() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        {/* Header */}
+        <div className="mx-auto max-w-3xl sm:text-center">
+          <Eyebrow>CORE VALUE</Eyebrow>
+          <H3 className="mt-4 text-gray-900">GPU Power You Actually Control</H3>
+
+        </div>
+
+        {/* Key Benefits */}
+        <div className="mx-auto mt-16 max-w-5xl">
+          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-2">
+            {benefits.map((benefit) => (
+              <div key={benefit.name} className="relative pl-12">
+                <benefit.icon
+                  className="absolute left-0 top-1 size-6 text-cyan-600"
+                  aria-hidden="true"
+                />
+                <CT className="font-semibold text-gray-900">
+                  {benefit.name}
+                </CT>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/gpu/GpuHero.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { Button } from '../../components/Button'
+import { Button } from '@/components/Button'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
 
 export function GpuHero() {
   return (
@@ -19,24 +19,20 @@ export function GpuHero() {
             Mycelium GPU
           </Eyebrow>
           <SectionHeader as="h1" className="mt-4 text-gray-900">
-            Unify distributed GPU power into a sovereign acceleration fabric.
+            Sovereign GPU Acceleration for AI and High-Performance Compute
           </SectionHeader>
           <P className="mt-6 text-gray-600">
-            Mycelium GPU transforms fragmented hardware across the ThreeFold
+            Access GPUs across the Mycelium mesh without waitlists, 
-            Grid into one adaptive intelligence layer. Run AI, ML, rendering,
+inflated pricing, or centralized control.
-            and high-performance workloads anywhere—from edge devices to
+Run inference, training, and compute workloads where they make sense: 
-            planetary clusters—with deterministic performance and transparent
+cloud, edge, or on your own hardware. 
-            cost.
-          </P>
-          <P className="mt-4 text-gray-500">
-            The energy behind intelligence, orchestrated entirely through code.
           </P>
           <div className="mt-10 flex flex-wrap gap-4">
             <Button to="#gpu-getting-started" as="a" variant="solid" color="cyan">
-              Start with GPU Access
+              How it works
             </Button>
             <Button to="#gpu-architecture" as="a" variant="outline" color="cyan">
-              Explore the Mesh
+              Explore Docs
             </Button>
           </div>
         </div>

src/pages/gpu/GpuOverview.tsx

@@ -1,48 +1,30 @@
 import {
-  CodeBracketSquareIcon,
+  AdjustmentsHorizontalIcon,
-  CubeTransparentIcon,
+  GlobeAltIcon,
-  LockClosedIcon,
+  BanknotesIcon,
-  Squares2X2Icon,
 } from '@heroicons/react/24/outline'
 
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
 
-const overviewCards = [
+const coreFeatures = [
   {
-    label: 'Overview',
+    name: 'Deterministic GPU Allocation',
-    title: 'Unified GPU acceleration across the ThreeFold Grid',
     description:
-      'Mycelium GPU aggregates distributed hardware into a single fabric, delivering sovereign acceleration for AI, ML, and rendering workloads.',
+      'Reserve the GPU type you need and get exactly that, every time.',
+    icon: AdjustmentsHorizontalIcon,
   },
   {
-    label: 'Core Concept',
+    name: 'Multi-Topology Deployment',
-    title: 'Sovereign intelligence layer',
     description:
-      'No silos, no intermediaries—just raw, verifiable GPU power orchestrated through smart contracts and APIs you control.',
+      'Run workloads in data centers, at the edge, or on self-hosted nodes.',
-  },
+    icon: GlobeAltIcon,
-]
-
-const principles = [
-  {
-    name: 'No Silos',
-    description: 'Every GPU resource is accessible through a single interface.',
-    icon: Squares2X2Icon,
   },
   {
-    name: 'No Intermediaries',
+    name: 'Transparent Cost Structure',
-    description: 'Direct access to hardware without centralized brokers.',
+    description:
-    icon: CubeTransparentIcon,
+      'No inflated pricing, no hidden fees, no marketplace brokerage.',
-  },
+    icon: BanknotesIcon,
-  {
-    name: 'Verifiable Power',
-    description: 'Every GPU cycle is attested and cryptographically verified.',
-    icon: LockClosedIcon,
-  },
-  {
-    name: 'Code-Orchestrated',
-    description: 'Smart contracts and APIs automate allocation and policy.',
-    icon: CodeBracketSquareIcon,
   },
 ]
 
@@ -52,52 +34,31 @@ export function GpuOverview() {
       <Container>
         <div className="mx-auto max-w-3xl text-center">
           <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
-            Platform Overview
+            PLATFORM OVERVIEW
           </Eyebrow>
           <SectionHeader as="h2" color="light" className="mt-6 font-medium">
-            The sovereign acceleration layer for intelligent workloads.
+            Core Features
           </SectionHeader>
           <P color="lightSecondary" className="mt-6">
-            Mycelium GPU makes distributed acceleration feel like one machine.
+            The Mycelium GPU layer provides predictable, sovereign acceleration
-            Harness global GPUs with deterministic performance, transparent
+            — without arbitrary limits or hidden economics.
-            costs, and end-to-end verification.
           </P>
         </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+
-          {overviewCards.map((card) => (
+        <div className="mx-auto mt-16 max-w-5xl grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {coreFeatures.map((feature) => (
             <div
-              key={card.title}
+              key={feature.name}
-              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
-            >
-              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.05] to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
-              <div className="relative">
-                <Small className="text-xs uppercase tracking-[0.35em] text-cyan-200">
-                  {card.label}
-                </Small>
-                <h3 className="mt-4 text-lg font-semibold text-white">
-                  {card.title}
-                </h3>
-                <p className="mt-4 text-sm leading-relaxed text-gray-300">
-                  {card.description}
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
-        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
-          {principles.map((principle) => (
-            <div
-              key={principle.name}
-              className="rounded-3xl border border-white/10 bg-white/[0.04] p-6 text-left transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
             >
               <div className="mb-6 flex size-12 items-center justify-center rounded-full bg-cyan-500/15">
-                <principle.icon aria-hidden="true" className="size-6 text-cyan-300" />
+                <feature.icon className="size-6 text-cyan-300" aria-hidden="true" />
               </div>
-              <h3 className="text-base font-semibold text-white">
+              <h3 className="text-lg font-semibold text-white">
-                {principle.name}
+                {feature.name}
               </h3>
               <p className="mt-3 text-sm leading-relaxed text-gray-300">
-                {principle.description}
+                {feature.description}
               </p>
             </div>
           ))}

src/pages/gpu/GpuPage.tsx

@@ -2,11 +2,10 @@ import { AnimatedSection } from '../../components/AnimatedSection'
 import { GpuHero } from './GpuHero'
 import { GpuOverview } from './GpuOverview'
 import { GpuArchitecture } from './GpuArchitecture'
-import { GpuIntegration } from './GpuIntegration'
 import { GpuUseCases } from './GpuUseCases'
-import { GpuGettingStarted } from './GpuGettingStarted'
-import { GpuDifferentiators } from './GpuDifferentiators'
 import { CallToAction } from './CallToAction'
+import { GpuCapabilities } from './GpuCapabilities'
+import { GpuDesign } from './GpuDesign'
 
 export default function GpuPage() {
   return (
@@ -14,24 +13,27 @@ export default function GpuPage() {
       <AnimatedSection>
         <GpuHero />
       </AnimatedSection>
+
       <AnimatedSection>
-        <GpuOverview />
+        <GpuCapabilities />
       </AnimatedSection>
+
+      <AnimatedSection>
+        <GpuDesign />
+      </AnimatedSection>
+
       <AnimatedSection>
         <GpuArchitecture />
       </AnimatedSection>
+
       <AnimatedSection>
-        <GpuIntegration />
+        <GpuOverview />
       </AnimatedSection>
-      <AnimatedSection>
+
+       <AnimatedSection>
         <GpuUseCases />
       </AnimatedSection>
-      <AnimatedSection>
+
-        <GpuGettingStarted />
-      </AnimatedSection>
-      <AnimatedSection>
-        <GpuDifferentiators />
-      </AnimatedSection>
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/gpu/GpuUseCases.tsx

@@ -1,34 +1,18 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
 
-const useCases = [
+const gpuUseCases = [
   {
-    title: 'AI / ML Training',
+    title: 'AI / ML Training & Inference',
-    description:
+    description: 'Scale model execution across sovereign GPU nodes.',
-      'Scale training, fine-tuning, and inference workloads anywhere on the grid.',
-    bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
   },
   {
     title: 'Rendering & Visualization',
-    description:
+    description: 'Run 3D, scientific, simulation, or generative rendering pipelines.',
-      'Drive high-performance graphics pipelines for media, science, and immersive experiences.',
-    bullets: [
-      'Distributed 3D rendering',
-      'Scientific visualization',
-      'Real-time VR / AR processing',
-      'Digital twin simulations',
-    ],
   },
   {
-    title: 'General GPU Computing',
+    title: 'Distributed & Edge Compute',
-    description:
+    description: 'Place GPU power close to where data is generated.',
-      'Harness sovereign acceleration for simulations, finance, blockchain, and research.',
-    bullets: [
-      'Scientific simulations',
-      'Financial modeling',
-      'Blockchain processing',
-      'Protein folding and discovery',
-    ],
   },
 ]
 
@@ -37,41 +21,28 @@ export function GpuUseCases() {
     <section className="bg-white py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>
+          <Eyebrow>USE CASES</Eyebrow>
-            Use Cases
-          </Eyebrow>
           <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Acceleration for every intelligent workload.
+            Built for Intelligent Workloads
           </SectionHeader>
           <P className="mt-6 text-gray-600">
-            From deep learning to immersive visualization, Mycelium GPU delivers
+            From sovereign AI execution to real-time rendering and edge inference,
-            deterministic access to the power you need without the waitlists or
+            Mycelium GPU ensures predictable acceleration with full ownership and no centralized control.
-            markups of centralized clouds.
           </P>
         </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+
-          {useCases.map((useCase) => (
+        <div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
+          {gpuUseCases.map((useCase) => (
             <div
               key={useCase.title}
-              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+              className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
             >
               <h3 className="text-xl font-semibold text-gray-900">
                 {useCase.title}
               </h3>
-              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+              <p className="mt-3 text-sm leading-relaxed text-gray-600">
                 {useCase.description}
               </p>
-              <ul className="mt-6 space-y-3 text-sm text-gray-600">
-                {useCase.bullets.map((bullet) => (
-                  <li
-                    key={bullet}
-                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
-                  >
-                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
-                    <span>{bullet}</span>
-                  </li>
-                ))}
-              </ul>
             </div>
           ))}
         </div>

src/pages/gpu/archive/GpuArchitectureArchive.tsx

@@ -0,0 +1,75 @@
+import { Container } from '@/components/Container'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
+
+const architectureSections = [
+  {
+    title: 'Distributed GPU Mesh',
+    description:
+      'A peer-to-peer fabric connects GPU nodes across the ThreeFold Grid, exposing them through the Mycelium network.',
+    bullets: [
+      'GPU nodes distributed globally for on-demand acceleration.',
+      'Mycelium network provides encrypted peer-to-peer connectivity.',
+      'Smart contract orchestration allocates and governs resources.',
+      'Real-time monitoring tracks utilization and health.',
+    ],
+  },
+  {
+    title: 'Performance Characteristics',
+    description:
+      'Consistency and transparency are built into the fabric so workloads behave predictably anywhere on the planet.',
+    bullets: [
+      'Edge-to-core deployment flexibility for every workload profile.',
+      'Adaptive intelligence optimizes allocation automatically.',
+      'Deterministic performance guarantees availability when booked.',
+      'Transparent cost tracking for every GPU cycle consumed.',
+    ],
+  },
+]
+
+export function GpuArchitectureArchive() {
+  return (
+    <section id="gpu-architecture" className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow>
+            Technical Architecture
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            A peer-to-peer mesh purpose-built for acceleration.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium GPU treats every node as part of a sovereign mesh. Encrypted
+            networking, smart contract orchestration, and transparent monitoring
+            ensure your workloads receive precisely the power they request.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          {architectureSections.map((section) => (
+            <div
+              key={section.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <h3 className="text-xl font-semibold text-gray-900">
+                {section.title}
+              </h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {section.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {section.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/gpu/archive/GpuDifferentiators.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
 
 const differentiators = [
   {
@@ -52,7 +52,7 @@ export function GpuDifferentiators() {
           {differentiators.map((item) => (
             <div
               key={item.title}
-              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+              className="rounded-3xl border border-white/10 bg-white/4 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8"
             >
               <h3 className="text-lg font-semibold text-white">{item.title}</h3>
               <p className="mt-4 text-sm leading-relaxed text-gray-300">
@@ -61,7 +61,7 @@ export function GpuDifferentiators() {
             </div>
           ))}
         </div>
-        <div className="mt-16 rounded-3xl border border-white/10 bg-white/[0.03] p-8 text-left backdrop-blur-sm">
+        <div className="mt-16 rounded-3xl border border-white/10 bg-white/3 p-8 text-left backdrop-blur-sm">
           <h3 className="text-xl font-semibold text-white">Cost Efficiency</h3>
           <p className="mt-4 text-sm leading-relaxed text-gray-300">
             Transparent economics makes capacity planning simple while keeping

src/pages/gpu/archive/GpuGettingStarted.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
 
 const steps = [
   {
@@ -44,7 +44,7 @@ export function GpuGettingStarted() {
       id="gpu-getting-started"
       className="relative overflow-hidden bg-gray-900 py-24 sm:py-32"
     >
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(34,211,238,0.12),_transparent_60%)]" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(34,211,238,0.12),transparent_60%)]" />
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
           <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
@@ -63,7 +63,7 @@ export function GpuGettingStarted() {
           {steps.map((step) => (
             <div
               key={step.title}
-              className="flex h-full flex-col rounded-3xl border border-white/10 bg-white/[0.03] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.06]"
+              className="flex h-full flex-col rounded-3xl border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/6"
             >
               <div className="flex items-center justify-between">
                 <Small className="text-xs uppercase tracking-[0.4em] text-cyan-300">
@@ -91,7 +91,7 @@ export function GpuGettingStarted() {
             </div>
           ))}
         </div>
-        <div className="mt-16 rounded-3xl border border-white/10 bg-white/[0.03] p-6 text-center backdrop-blur-sm">
+        <div className="mt-16 rounded-3xl border border-white/10 bg-white/3 p-6 text-center backdrop-blur-sm">
           <p className="text-sm font-medium uppercase tracking-[0.3em] text-cyan-200">
             Basic Workflow
           </p>

src/pages/gpu/archive/GpuIntegration.tsx

@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
 
 const integrationPoints = [
   'Unified Mycelium networking provides secure access to GPU nodes.',
@@ -50,7 +50,7 @@ export function GpuIntegration() {
           </P>
         </div>
         <div className="mt-16 grid gap-10 lg:grid-cols-2">
-          <div className="space-y-4 rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm">
+          <div className="space-y-4 rounded-3xl border border-white/10 bg-white/4 p-8 text-left backdrop-blur-sm">
             <h3 className="text-lg font-semibold text-white">
               Platform alignment
             </h3>
@@ -66,7 +66,7 @@ export function GpuIntegration() {
               ))}
             </ul>
           </div>
-          <div className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm">
+          <div className="rounded-3xl border border-white/10 bg-white/4 p-8 backdrop-blur-sm">
             <h3 className="text-lg font-semibold text-white">
               Kubernetes deployment example
             </h3>

src/pages/home/CallToAction.tsx

@@ -1,18 +1,18 @@
-import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '@/components/Container'
-import { Container } from '../../components/Container'
+import { Button } from '@/components/Button'
-import { Button } from '../../components/Button'
 
 export function CallToAction() {
   return (
-    <section
+    <section className='relative overflow-hidden bg-gray-900'>
+    {/* ✅ Top horizontal line with spacing */}
+    <div className="max-w-7xl  bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
+    {/* === Content === */}
+    <div className="w-full border-t border-l border-r border-gray-600 " />
+      <div  
       id="get-started"
-      className="relative overflow-hidden bg-gray-900 lg:py-32 py-24"
+      className="py-18 max-w-7xl mx-auto border-t-0 border-b-0 border bg-[#111111] border-gray-600">
-    >
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
-      </div>
       <Container className="relative">
-        <div className="mx-auto max-w-xl text-center">
+        <div className="mx-auto max-w-2xl text-center ">
           <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
             Use the Mycelium Stack Your Way
           </h2>
@@ -24,20 +24,25 @@ export function CallToAction() {
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <Button to="/cloud" variant="solid" color="cyan">
-              Start Deployment
+              Get Started
             </Button>
             <Button
               to="https://threefold.info/mycelium_network/docs/"
               as="a"
               target="_blank"
               variant="outline"
-              color="white"
+              color="gray"
             >
               Explore Docs
             </Button>
           </div>
         </div>
       </Container>
+      
+    </div>
+    {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b  border-gray-600" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
     </section>
   )
 }

src/pages/home/HomeAurora.tsx

@@ -1,16 +1,17 @@
 import { H1, H5 } from "@/components/Texts"
 import { Button } from "@/components/Button"
 
-
 export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
   return (
-    <div
+    <div className="px-4">
-      className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
+      {/* Boxed container */}
-      style={{ backgroundImage: "url('/images/hero11.webp')" }}
+      <div
-    >
+        className="relative mx-auto max-w-7xl border border-t-0 border-gray-200 bg-white  overflow-hidden bg-contain bg-right bg-no-repeat"
-      <div className="mx-auto max-w-7xl lg:px-4">
+        style={{ backgroundImage: "url('/images/hero11.webp')" }}
-        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
+      >
-          <div className="mx-auto max-w-2xl lg:mx-0">
+        {/* Inner padding */}
+        <div className="px-6 py-16 lg:py-24 ">
+          <div className="max-w-2xl lg:pl-6">
             <div className="hidden sm:flex">
               <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
                 Deploying at scale?{' '}
@@ -20,24 +21,26 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
                 </a>
               </div>
             </div>
+
             <H1 className="mt-8">
               The Sovereign Agentic Cloud
             </H1>
+
             <H5 className="mt-8 text-lg text-gray-600">
-              Host nodes, deploy workloads, or build private AI systems, 
+              Host nodes, deploy workloads, or build private AI systems,
-all on infrastructure you own and control.
+              all on infrastructure you own and control.
             </H5>
+
             <div className="mt-10 flex items-center gap-x-6">
               <Button
                 variant="solid"
-                className=""
                 color="cyan"
                 onClick={onGetStartedClick}
               >
-                 Start Hosting 
+                Start Hosting
               </Button>
               <Button to="#" variant="outline">
-                Deploy in Cloud <span aria-hidden="true"> →</span>
+                Deploy in Cloud →
               </Button>
             </div>
           </div>

src/pages/home/HomeBenefits.tsx

@@ -2,52 +2,49 @@ import createGlobe from "cobe";
 import { useEffect, useRef } from "react";
 import { motion } from "motion/react";
 import { IconBrandYoutubeFilled } from "@tabler/icons-react";
-import { H2, P, CP, Eyebrow } from '@/components/Texts'
+import { H2, CP, Eyebrow } from '@/components/Texts'
 
 
 export function HomeBenefits() {
   const features = [
+    {
+      title: "Unbreakable by Design",
+      description:
+        "No central cloud to censor or fail. The network heals itself.",
+      image: "/images/benefits/energy.webp",
+    },
     {
       title: "Sovereign by Default",
       description:
-        "Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
+        "Identity, compute, and data belong to you – cryptographically.",
       image: "/images/benefits/sovereign.webp",
     },
     {
       title: "Hackable & Open",
       description:
-        "Open source and hackable by design. Learn, build, and experiment without permission.",
+        "Learn, build, and experiment without permission.",
       image: "/images/benefits/autonomous.webp",
     },
-    {
+ 
-      title: "Unbreakable by Design",
-      description:
-        "Distributed nodes make it resilient to attacks and failures. The network heals itself.",
-      image: "/images/benefits/energy.webp",
-    },
     {
       title: "Cost & Energy Efficient",
       description:
-        "Distributed hardware eliminates hyperscale overhead. Pure compute power at a fraction of traditional cloud costs.",
+        "Distributed hardware eliminates hyperscale overhead.",
       image: "/images/benefits/cost.webp",
     },
   ];
   return (
-    <div className="relative z-20 py-10 lg:py-24 max-w-7xl mx-auto">
+    <div className="relative z-20 bg-blackpy-6 lg:py-24 max-w-7xl mx-auto border border-t-0 border-gray-200">
       <div className="px-12">
         <Eyebrow className="text-center text-cyan-500">
          Benefits
         </Eyebrow>
         <H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
-          Why It Changes Everything
+          Why It Matters
         </H2>
-
-        <P className=" max-w-3xl  my-4 mx-auto text-center text-gray-600">
-          Project Mycelium is a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
-        </P>
       </div>
 
-      <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-7 lg:grid-rows-2 lg:px-12 px-6">
+      <div className="mt-10 grid grid-cols-1 gap-4 lg:grid-cols-7 lg:grid-rows-2 lg:px-12 px-6">
           <div className="flex p-px lg:col-span-4">
             <div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 max-lg:rounded-t-4xl lg:rounded-tl-4xl">
                 <div className="flex items-center">
@@ -132,7 +129,7 @@ export function HomeBenefits() {
 
 export const SkeletonOne = () => {
   return (
-    <div className="relative flex py-8 px-2 gap-10 h-full">
+    <div className="relative flex py-6 px-2 gap-10 h-full">
       <div className="w-full  p-5  mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full">
         <div className="flex flex-1 w-full h-full flex-col space-y-2  ">
           {/* TODO */}
@@ -210,7 +207,7 @@ export const SkeletonTwo = () => {
             }}
             whileHover="whileHover"
             whileTap="whileTap"
-            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
+            className="rounded-xl -mr-4 mt-4 p-1 bg-black s border-neutral-100 shrink-0 overflow-hidden"
           >
             <img
               src={image}

src/pages/home/HomeGlobe.tsx

@@ -66,8 +66,8 @@ export function WorldMap() {
               className="lg:absolute lg:top-12 lg:-left-12 w-80"
             >
               <DarkCard>
-                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">CORES</CT></div>
+                <div><CT color="light" className="uppercase tracking-wide ">CORES</CT></div>
-                <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total Central Processing Unit Cores available on the grid.
                 </CP>
@@ -82,8 +82,8 @@ export function WorldMap() {
               className="lg:absolute lg:-top-10 lg:right-0 w-80"
             >
               <DarkCard>
-                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">NODES</CT></div>
+                <div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
-                <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total number of nodes on the grid.
                 </CP>
@@ -98,8 +98,8 @@ export function WorldMap() {
               className="lg:absolute lg:bottom-28 lg:-left-12 w-80"
             >
               <DarkCard>
-                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">SSD CAPACITY</CT></div>
+                <div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
-                <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total GB amount of storage (SSD, HDD, & RAM) on the grid.
                 </CP>
@@ -114,8 +114,8 @@ export function WorldMap() {
               className="lg:absolute lg:top-47 lg:right-0 w-80"
             >
               <DarkCard>
-                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">COUNTRIES</CT></div>
+                <div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>
-                <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total number of countries with active nodes.
                 </CP>

src/pages/home/HomeHosting.tsx

@@ -1,65 +1,158 @@
-import {
+"use client";
-  ArrowPathIcon,
+
-  CloudArrowUpIcon,
+import { Container } from '@/components/Container'
-  ServerIcon,
+import { Eyebrow, H3, P } from '@/components/Texts'
-  ShieldCheckIcon,
+
-} from '@heroicons/react/24/outline'
+/* ✅ Custom Icons (unchanged) */
-import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+
+function KubernetesIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path
+        d="M16 7
+           L23 11
+           L25 19
+           L19 25
+           L13 25
+           L7 19
+           L9 11
+           Z"
+        fill="#737373"
+      />
+      <circle cx={16} cy={16} r={2} fill="#171717" />
+      <line x1="16" y1="9"  x2="16" y2="14" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="22" y1="12" x2="17" y2="16" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="23" y1="19" x2="18" y2="17" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="16" y1="23" x2="16" y2="18" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="9"  y1="19" x2="15" y2="17" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="10" y1="12" x2="15" y2="16" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function AIAgentsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <rect x={10} y={12} width={12} height={10} rx={3} fill="#737373" />
+      <line x1={16} y1={9} x2={16} y2={12} stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <circle cx={16} cy={8} r={2} fill="#171717" />
+      <circle cx={13} cy={17} r={1.5} fill="#171717" />
+      <circle cx={19} cy={17} r={1.5} fill="#171717" />
+      <line x1={13} y1={21} x2={19} y2={21} stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function S3StorageIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path d="M10 12h12l-1 12H11L10 12z" fill="#737373" />
+      <rect x={10} y={10} width={12} height={3} rx={1} fill="#171717" />
+      <path d="M12 18c2 2 6 2 8 0" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function VPNIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path
+        d="
+          M16 8
+          l8 4
+          v6
+          c0 4 -3 7 -8 9
+          c-5 -2 -8 -5 -8 -9
+          v-6
+          l8 -4
+        "
+        fill="#737373"
+      />
+      <path
+        d="M13 18l2 2l4 -4"
+        stroke="#171717"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
 
 const features = [
   {
     name: 'Kubernetes Clusters',
     description: 'Deploy and scale containerized apps across your own hardware.',
-    icon: ServerIcon,
+    icon: KubernetesIcon,
   },
   {
     name: 'AI Agents & LLM Runtimes',
     description: 'Run open-source models locally, securely, and offline.',
-    icon: ArrowPathIcon,
+    icon: AIAgentsIcon,
   },
   {
     name: 'S3-Compatible Storage',
     description: 'Your own personal over-the-network drive, encrypted end-to-end.',
-    icon: CloudArrowUpIcon,
+    icon: S3StorageIcon,
   },
   {
     name: 'Mesh VPN & Zero-Trust Networking',
     description: 'Securely connect all your devices and remote locations.',
-    icon: ShieldCheckIcon,
+    icon: VPNIcon,
   },
 ]
 
 export function HomeHosting() {
   return (
-    <div className="relative bg-white py-24 lg:py-32">
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
-      <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
+
-        <Eyebrow>DEPLOY</Eyebrow>
+      {/* ✅ Top horizontal line with spacing */}
-        <H3 className="mt-2">Run Real Infrastructure on Your Own Hardware</H3>
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
-        <P className="mx-auto mt-5 max-w-prose">
+      <div className="w-full border-t border-l border-r border-gray-200" />
-          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
+      
-          orchestration, and security layers, so you can deploy services the same way you would on public cloud without
+
-          giving your data or control to anyone.
+      {/* ✅ Inner content container */}
-        </P>
+        <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-200">
-        <div className="mt-16">
+          <Container>
-          <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
+            <div className="mx-auto max-w-4xl sm:text-center">
-            {features.map((feature) => (
+              <Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow>
-              <div key={feature.name} className="relative">
+              <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-                <div className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 pt-16 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg">
+                Expanding the Network Layer
-                  <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-indigo-500 p-3 shadow-lg">
+              </H3>
-                    <feature.icon aria-hidden="true" className="size-8 text-white" />
+              <P className="mt-6 text-lg text-gray-600">
-                  </span>
+                The Mycelium Network is evolving to support richer data movement, identity, 
-                  <CT as="h3" className="mt-4">
+                and application connectivity across the mesh. These enhancements deepen autonomy 
-                    {feature.name}
+                and improve real-world usability.
-                  </CT>
+              </P>
-                  <CP color="secondary" className="mt-4">
+            </div>
-                    {feature.description}
+
-                  </CP>
+            <ul
-                </div>
+              role="list"
-              </div>
+              className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm
-            ))}
+                          sm:grid-cols-2 lg:max-w-none lg:grid-cols-4 md:gap-y-10"
-          </div>
+            >
+              {features.map((feature) => (
+                <li
+                  key={feature.name}
+                  className="rounded-md border border-gray-200 p-6 transition-all duration-300 ease-in-out
+                    hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
+                >
+                  <feature.icon className="h-14 w-14" />
+                  <h3 className="mt-4 font-semibold text-gray-900">{feature.name}</h3>
+                  <p className="mt-2 text-gray-700 leading-snug">{feature.description}</p>
+                </li>
+              ))}
+            </ul>
+          </Container>
+
         </div>
-      </div>
+      {/* ✅ Bottom horizontal line with spacing */}
-    </div>
+      <div className="w-full border-b  border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+    </section>
   )
 }

src/pages/home/HomePage.tsx

@@ -1,13 +1,12 @@
+
 import { useRef } from 'react'
 import { AnimatedSection } from '../../components/AnimatedSection'
-import { HomeAurora } from './HomeAurora'
+import { StackSectionDark } from './StackSectionDark'
-import { StackSectionLight } from './StackSection'
 import { WorldMap } from './HomeGlobe'
-import { HomeBenefits } from './HomeBenefits'
 import { CallToAction } from './CallToAction'
-import { HomeSlider } from './HomeSlider'
+import { HomeHosting } from './HomeHosting'
-import { HomeHostingDark } from './HomeHostingDark'
+import { HomeAurora } from './HomeAurora'
-import { HomeComparisonTable } from './HomeComparisonTable'
+import { HomeTab } from './HomeTab'
 
 
 export default function HomePage() {
@@ -27,22 +26,17 @@ export default function HomePage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <StackSectionLight />
+        <HomeHosting />
       </AnimatedSection>
 
       <AnimatedSection>
-        <HomeHostingDark   />
+        <StackSectionDark />
       </AnimatedSection>
 
       <AnimatedSection>
-       <HomeBenefits />
+        <HomeTab />
       </AnimatedSection>
 
-      <AnimatedSection ref={sliderRef}>
-        <HomeSlider />
-      </AnimatedSection>
-
-
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/home/HomeSlider.tsx

@@ -15,11 +15,11 @@ export function HomeSlider() {
           Ecosystem
         </Eyebrow>
         <H3 className="text-left text-white">
-          Discover the Mycelium Products
+        Mycelium Components
         </H3>
         <div className="mt-4 max-w-3xl">
           <P className="text-left text-neutral-400">
-            From compute and networking to intelligent automation, these components  can be used on its own or combined into a fully sovereign cloud.
+           Each component can be used on its own or combined into a fully sovereign cloud.
           </P>
         </div>
       </div>

src/pages/home/HomeTab.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { Link } from "react-router-dom";
+import { Eyebrow, H3, P } from "@/components/Texts";
+
+const bentoCards = [
+  {
+    id: 'network',
+    title: 'Mycelium Network',
+    eyebrow: 'Network',
+    description: 'Encrypted peer-to-peer mesh networking across the globe.',
+    image: '/images/bento-network.png',
+    link: '/network',
+    colSpan: 'lg:col-span-3',
+    rowSpan: 'lg:row-span-1',
+    rounded: 'lg:rounded-tl-4xl max-lg:rounded-t-4xl',
+    innerRounded: 'lg:rounded-tl-[calc(2rem+1px)] max-lg:rounded-t-[calc(2rem+1px)]'
+  },
+  {
+    id: 'agents',
+    title: 'Mycelium Agents',
+    eyebrow: 'Agents',
+    description: 'Private, programmable AI systems that run on your hardware.',
+    image: '/images/bento-agent.jpg',
+    link: '/agents',
+    colSpan: 'lg:col-span-3',
+    rowSpan: 'lg:row-span-1',
+    rounded: 'lg:rounded-tr-4xl',
+    innerRounded: 'lg:rounded-tr-[calc(2rem+1px)]'
+  },
+  {
+    id: 'cloud',
+    title: 'Mycelium Cloud',
+    eyebrow: 'Cloud',
+    description: 'Deploy Kubernetes clusters on sovereign infrastructure.',
+    image: '/images/bento-cloud.jpg',
+    link: '/cloud',
+    colSpan: 'lg:col-span-6',
+    rowSpan: 'lg:row-span-1',
+    rounded: 'rounded-lg',
+    innerRounded: 'rounded-[calc(var(--radius-lg)+1px)]'
+  },
+  {
+    id: 'compute',
+    title: 'Mycelium Compute',
+    eyebrow: 'Compute',
+    description: 'The Compute resource layers powering the stack.',
+    image: '/images/bento-compute.png',
+    link: '/compute',
+    colSpan: 'lg:col-span-2',
+    rowSpan: 'lg:row-span-1',
+    rounded: 'lg:rounded-bl-4xl',
+    innerRounded: 'lg:rounded-bl-[calc(2rem+1px)]'
+  },
+  {
+    id: 'storage',
+    title: 'Mycelium Storage',
+    eyebrow: 'Storage',
+    description: 'The Storage resource layers powering the stack.',
+    image: '/images/bento-storage.png',
+    link: '/storage',
+    colSpan: 'lg:col-span-2',
+    rowSpan: 'lg:row-span-1',
+    rounded: 'rounded-lg',
+    innerRounded: 'rounded-[calc(var(--radius-lg)+1px)]'
+  },
+  {
+    id: 'gpu',
+    title: 'Mycelium GPU',
+    eyebrow: 'GPU',
+    description: 'The GPU resource layers powering the stack.',
+    image: '/images/bento-gpu.jpg',
+    link: '/gpu',
+    colSpan: 'lg:col-span-2',
+    rowSpan: 'lg:row-span-1',
+    rounded: 'lg:rounded-br-4xl max-lg:rounded-b-4xl',
+    innerRounded: 'lg:rounded-br-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]'
+  },
+];
+
+export function HomeTab() {
+  return (
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
+
+      {/* ✅ Top spacer + full-width line */}
+      <div className="max-w-7xl mx-auto py-6 border-x border-gray-200 bg-white border-t-0 border-b-0" />
+      <div className="w-full border-t border-l border-r border-gray-200" />
+
+      
+      {/* ✅ Section with vertical borders */}
+      <div className="mx-auto bg-white  max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-200">
+        <Eyebrow className="pt-12 ">Deploy faster</Eyebrow>
+        <H3 className="mt-2">Mycelium Components</H3>
+        <P className="mt-6 max-w-lg">
+          Each component can be used on its own or combined into a fully sovereign cloud.
+        </P>
+
+        <div className="mt-8 grid grid-cols-1 gap-6 sm:mt-10 lg:grid-cols-6 lg:grid-rows-3 pb-12">
+          {bentoCards.map((card) => (
+            <Link to={card.link} key={card.id} className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 cursor-pointer`}>
+              <div className={`absolute inset-0 rounded-md bg-white ${card.rounded}`} />
+              <div className={`relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}>
+                <img
+                  alt={card.title}
+                  src={card.image}
+                  className="h-50 object-cover object-center"
+                />
+                <div className="px-8 pt-4 pb-6">
+                  <h3 className="text-sm/4 font-semibold text-cyan-500">{card.eyebrow}</h3>
+                  <p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">{card.title}</p>
+                  <p className="mt-1 max-w-lg text-sm/6 text-gray-600">
+                    {card.description}
+                  </p>
+                </div>
+              </div>
+              <div className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`} />
+            </Link>
+          ))}
+        </div>
+      </div>
+
+      {/* ✅ Bottom full-width line + spacer */}
+      <div className="w-full border-b border-gray-200" />
+      <div className="max-w-7xl mx-auto py-6 border-x border-gray-200 border-t-0 border-b-0" />
+    </section>
+  );
+}

src/pages/home/StackSection.tsx

@@ -63,9 +63,7 @@ export function StackSectionLight() {
 
           <FadeIn>
             <P color="dark" className="mt-6  text-gray-600">
-              Project Mycelium unifies compute, storage, networking, and AI into a resilient
+              Mycelium unifies compute, storage, networking, and AI into a self-governing comprehensive decentralized infrastructure fabric.
-              ecosystem that preserves data sovereignty, powers seamless collaboration,
-              and keeps every layer of your infrastructure secure end to end on decentralized infrastructure.
             </P>
           </FadeIn>
         </div>

src/pages/home/StackSectionDark.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { StackedCubes } from "@/components/ui/StackedCubes";
+import { P, Eyebrow, H3 } from "@/components/Texts";
+import { FadeIn } from "@/components/ui/FadeIn";
+
+export function StackSectionDark() {
+  return (
+    <section className="relative w-full bg-[#171717] overflow-hidden">
+       {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
+      <div className="w-full border-t border-l border-r border-gray-600" />
+      {/* === Background Layer === */}
+      <div className="absolute inset-0 z-0 bg-transparent border-t-0 border-b-0 border-gray-600">
+        {/* Central main aura */}
+        <motion.div
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] rounded-full pointer-events-none"
+          style={{
+            background:
+              "radial-gradient(circle, rgba(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 5%, rgba(255,255,255,0) 10%)",
+            filter: "blur(140px)",
+          }}
+          animate={{
+            opacity: [0.5, 0.8, 0.5],
+            scale: [1, 1.05, 1],
+          }}
+          transition={{
+            duration: 9,
+            repeat: Infinity,
+            ease: "easeInOut",
+          }}
+        />
+
+        {/* Faint cyan mist in the back for depth */}
+        <motion.div
+          className="absolute left-[70%] top-[30%] -translate-x-1/2 -translate-y-1/2 w-[1600px] h-[1600px] rounded-full pointer-events-none"
+          style={{
+            background:
+              "radial-gradient(circle, rgba(100,220,255,0.25) 0%, rgba(200,255,255,0.15) 20§§%, rgba(255,255,255,0) 30%)",
+            filter: "blur(200px)",
+          }}
+          animate={{
+            opacity: [0.2, 0.35, 0.2],
+            scale: [1, 1.1, 1],
+          }}
+          transition={{
+            duration: 12,
+            repeat: Infinity,
+            ease: "easeInOut",
+            delay: 3,
+          }}
+        />
+      </div>
+
+      {/* === Content === */}
+      <div className="relative mx-auto max-w-7xl px-6 lg:px-12 border border-t-0 border-b-0 border-gray-600 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center py-24 ">
+        {/* Left Column - Text */}
+        <div className="text-center lg:text-left z-10">
+          <FadeIn>
+            <Eyebrow color="accent">Technology Layers</Eyebrow>
+            <H3 color="white" className="">
+              Mycelium Stack
+            </H3>
+          </FadeIn>
+
+          <FadeIn>
+            <P color="dark" className="mt-6  text-gray-200">
+              Mycelium unifies compute, storage, networking, and AI into a self-governing comprehensive decentralized infrastructure fabric.
+            </P>
+          </FadeIn>
+        </div>
+
+        {/* Right Column - Animated Stack */}
+        <div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative z-10 pt-10">
+          <motion.div
+            initial={{ y: 30, opacity: 0 }}
+            whileInView={{ y: 0, opacity: 1 }}
+            transition={{ duration: 1.2, ease: "easeOut" }}
+            viewport={{ once: true }}
+          >
+            <motion.div
+              animate={{
+                y: [0, -10, 0],
+                rotateZ: [0, 0.5, -0.5, 0],
+              }}
+              transition={{
+                duration: 6,
+                repeat: Infinity,
+                ease: "easeInOut",
+              }}
+              className="relative"
+            >
+              <StackedCubes />
+            </motion.div>
+          </motion.div>
+        </div>
+      </div>
+       {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b  border-gray-600" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
+    </section>
+  );
+}

src/pages/home/archive/HomeAuroraedt.tsx

@@ -0,0 +1,43 @@
+export function HomeAurora() {
+  return (
+    <div
+      className="absolute inset-0 -z-10 h-full w-full"
+      style={{
+        backgroundImage: "url('/images/cloud.png')",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+      }}
+    >
+      <div className="relative isolate px-6 lg:px-8">
+        {/* Top cyan soft blob */}
+        <div
+          aria-hidden="true"
+          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+        >
+          <div
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+            className="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#00eaff] to-[#009dff] opacity-10 sm:left-[calc(50%-30rem)] sm:w-288.75"
+          />
+        </div>
+
+        {/* Bottom cyan soft blob */}
+        <div
+          aria-hidden="true"
+          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl lg:top-[calc(100%-30rem)]"
+        >
+          <div
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+            className="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#00eaff] to-[#009dff] opacity-10 lg:left-[calc(50%+36rem)] lg:w-288.75"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/home/archive/HomeCTA.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { ArrowRightIcon } from "@heroicons/react/24/solid";
+
+export function HomeCTA() {
+  return (
+    <section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-16">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center px-6">
+
+        {/* LEFT: Big CTA Button */}
+        <button className="w-full lg:col-span-2 flex items-center justify-between bg-white border items-left border-gray-300 rounded-full px-8 py-5 shadow-sm hover:border-cyan-500 transition">
+          <span className="text-2xl lg:text-3xl font-semibold text-gray-900">
+            Start Your Mycelium Journey 
+          </span>
+
+          <span className="flex h-12 w-12 items-center justify-center rounded-full bg-cyan-500">
+            <ArrowRightIcon className="h-6 w-6 text-white" />
+          </span>
+        </button>
+
+        {/* RIGHT: Two small CTAs */}
+        <div className="flex flex-col gap-4">
+
+          {/* Button 1 */}
+          <button className="inline-flex items-center justify-between bg-cyan-500 text-white rounded-full px-6 py-3 text-sm font-semibold shadow-sm hover:bg-cyan-600 transition">
+            Get Started
+            <ArrowRightIcon className="h-4 w-4 ml-2" />
+          </button>
+
+          {/* Button 2 */}
+          <button className="inline-flex items-center justify-between bg-white border border-gray-300 rounded-full px-6 py-3 text-sm font-semibold shadow-sm hover:border-cyan-500 transition">
+            Explore Docs
+            <ArrowRightIcon className="h-4 w-4 ml-2 text-gray-700" />
+          </button>
+
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/home/archive/HomeComparisonTable.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline'
-import { Eyebrow, H3, P, CT } from '../../components/Texts'
+import { Eyebrow, H3, P, CT } from '@/components/Texts'
 
 const features = [
   { name: 'Infrastructure Ownership', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },

src/pages/home/archive/HomeGlobeNew.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Globe } from "@/components/ui/Globe";
+
+export function HomeGlobeNew() {
+  return (
+    <section className="mx-4 pt-12 border-t lg:mx-auto max-w-5xl border border-gray-200">
+      <div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
+        
+        {/* Column 1 */}
+        <div className="px-6 lg:px-24 py-16 flex flex-col items-start text-left">
+          <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
+            Decentralized Network
+          </span>
+          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-gray-900 lg:text-4xl">
+            Project Mycelium is Live.
+          </h2>
+
+          <p className="mt-4 text-lg text-gray-500 max-w-lg leading-relaxed">
+            Project Mycelium enables anyone to deploy their own Internet infrastructure, anywhere.
+          </p>
+
+          <button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 text-sm font-semibold text-gray-600 bg-white/90 hover:bg-gray-50">
+            Explore Dashboard
+          </button>
+        </div>
+
+        {/* Column 2 */}
+        <div className="flex items-center justify-center relative">
+          <Globe className="relative w-full max-w-[320px] lg:max-w-[420px]" />
+        </div>
+
+      </div>
+    </section>
+  );
+}

src/pages/home/archive/HomeHero.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@/components/Button'
+
+export function HomeHero() {
+  return (
+    <section className="mt-12 bg-transparent border border-gray-200 border-b-0 mx-4 lg:mx-auto max-w-5xl shadow-[0_0_40px_-20px_rgba(0,0,0,0.06)]">
+      <div className="px-6 py-12 lg:px-8 lg:py-24">
+        <div className="max-w-2xl mx-auto text-center">
+          <h1 className="text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
+            The Sovereign Agentic Cloud
+          </h1>
+
+          <p className="mt-6 text-lg text-gray-500 sm:text-xl max-w-prose mx-auto tracking-normal leading-tight lg:leading-relaxed">
+            Host nodes, deploy workloads, or build private AI systems —
+            all on infrastructure you own and control.
+          </p>
+
+          <div className="mt-10 flex flex-col sm:flex-row sm:items-center sm:justify-center gap-4">
+            <Button variant="solid" color="cyan" href="#">
+              Start Hosting
+            </Button>
+
+            <Button href="#" variant="outline" color="gray">
+              Deploy in Cloud <span aria-hidden="true">→</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

src/pages/home/archive/HomeHostingDark.tsx

@@ -4,13 +4,13 @@ import {
   CircleStackIcon,
   LockClosedIcon,
 } from '@heroicons/react/24/outline'
-import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+import { CP, CT, Eyebrow, H3, P } from '@/components/Texts'
-import { DarkCard } from '../../components/ui/cards'
+import { DarkCard } from '@/components/ui/cards'
 
 const features = [
   {
     name: 'Kubernetes Clusters',
-    description: 'Deploy and scale containerized apps across your own hardware.',
+    description: 'Deploy and scale containerized apps across your own hardware. enabling a world of possibilities..',
     icon: CubeIcon,
   },
   {
@@ -37,9 +37,7 @@ export function HomeHostingDark() {
         <Eyebrow>DEPLOY</Eyebrow>
         <H3 className="mt-2 text-gray-200">Run Real Infrastructure on Your Own Hardware</H3>
         <P className="mx-auto mt-5 max-w-prose text-gray-400">
-          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
+          Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a public cloud, without giving your data or control to anyone.
-          orchestration, and security layers, so you can deploy services the same way you would on public cloud without
-          giving your data or control to anyone.
         </P>
         <div className="mt-16">
           <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">

src/pages/home/archive/HomeMap.tsx

@@ -23,7 +23,7 @@ export function HomeMapSection() {
             ))}
           </span>
         </H2>
-        <P className="text-sm md:text-lg text-neutral-500 max-w-2xl mx-auto py-4">
+        <P className="text-sm md:text-lg text-neutral-500 max-w-2xl mx-auto py-6">
           Mycelium Network's advancement technology enables anyone to deploy
             their own Internet infrastructure, anywhere.
         </P>

src/pages/home/archive/HomeNew.tsx

@@ -0,0 +1,51 @@
+import { H1, H5 } from "@/components/Texts"
+import { Button } from "@/components/Button"
+
+export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
+  return (
+    <div className="px-4">
+      {/* Boxed container */}
+      <div
+        className="relative mx-auto max-w-7xl border border-t-0 border-gray-200  overflow-hidden bg-cover bg-right bg-no-repeat"
+        style={{ backgroundImage: "url('/images/hero11.webp')" }}
+      >
+        {/* Inner padding */}
+        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:pt-40 lg:pb-48">
+          <div className="max-w-2xl">
+            <div className="hidden sm:flex">
+              <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+                Deploying at scale?{' '}
+                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
+                  <span aria-hidden="true" className="absolute inset-0" />
+                  Book a call  <span>&rarr;</span>
+                </a>
+              </div>
+            </div>
+
+            <H1 className="mt-8">
+              The Sovereign Agentic Cloud
+            </H1>
+
+            <H5 className="mt-8 text-lg text-gray-600">
+              Host nodes, deploy workloads, or build private AI systems,
+              all on infrastructure you own and control.
+            </H5>
+
+            <div className="mt-10 flex items-center gap-x-6">
+              <Button
+                variant="solid"
+                color="cyan"
+                onClick={onGetStartedClick}
+              >
+                Start Hosting
+              </Button>
+              <Button to="#" variant="outline">
+                Deploy in Cloud →
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/home/archive/HomeProductsA.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+export function HomeProductsA() {
+  return (
+    <section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
+      <div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
+
+        {/* Product 1 */}
+        <div className="px-6 lg:px-24 py-16 flex flex-col items-center text-center">
+          <h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
+            Mycelium Cloud
+          </h2>
+          <p className="mt-4 text-3xl font-semibold text-gray-900 max-w-lg leading-10">
+            Deploy K8s clusters on sovereign infrastructure.
+          </p>
+          <button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 bg-white/90bg-white/90 bg-white/90 text-sm font-semibold text-gray-600 hover:bg-gray-50">
+            Learn more
+          </button>
+        </div>
+
+        {/* Product 2 */}
+        <div className="px-6 lg:px-24 py-16 flex flex-col items-center text-center">
+          <h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
+            Mycelium Network
+          </h2>
+          <p className="mt-4 text-3xl font-semibold text-gray-900 max-w-lg leading-10">
+            Encrypted peer-to-peer mesh networking across the globe.
+          </p>
+          <button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 bg-white/90 text-sm font-semibold text-gray-600 hover:bg-gray-50">
+            Learn more
+          </button>
+        </div>
+
+        {/* Product 3 */}
+        <div className="px-6 lg:px-24 py-16 flex border-t border-gray-200 flex-col items-center text-center">
+          <h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
+            Mycelium Agents
+          </h2>
+          <p className="mt-4 text-3xl font-semibold text-gray-900 max-w-lg leading-10">
+            Programmable AI systems that run on your hardware.
+          </p>
+          <button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 bg-white/90 text-sm font-semibold text-gray-600 hover:bg-gray-50">
+            Learn more
+          </button>
+        </div>
+
+        {/* Product 4 */}
+        <div className="px-6 lg:px-24 py-16 flex border-t border-gray-200 flex-col items-center text-center">
+          <h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
+            Compute / Storage / GPU
+          </h2>
+          <p className="mt-4 text-3xl font-semibold text-gray-900 max-w-lg leading-10">
+            The 3 powerful resource layers powering the stack.
+          </p>
+          <button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 bg-white/90 text-sm font-semibold text-gray-600 hover:bg-gray-50">
+            Learn more
+          </button>
+        </div>
+
+      </div>
+    </section>
+  );
+}

src/pages/home/archive/HomeStack.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useState } from "react";
+
+const layers = [
+  {
+    id: "agent",
+    label: "Agent Layer",
+    description: `
+      Your sovereign agent with private memory and permissioned data access—always under your control. Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval. It coordinates across people, apps, and other agents to plan, create, and execute. It operates inside a compliant legal sandbox, ready for real-world transactions and operations.
+    `,
+  },
+  {
+    id: "network",
+    label: "Network Layer",
+    description: `
+      A global, end-to-end encrypted overlay that simply doesn’t break. Shortest-path routing moves your traffic the fastest way, every time. Instant discovery with integrated DNS, semantic search, and indexing. A distributed CDN and edge delivery keep content available and tamper-resistant worldwide. Built-in tools and secure coding sandboxes—seamless on phones, desktops, and edge.
+    `,
+  },
+  {
+    id: "cloud",
+    label: "Cloud Layer",
+    description: `
+      An autonomous, stateless OS that enforces pre-deterministic deployments you define. Workloads are cryptographically bound to your private key—location and access are yours. No cloud vendor or middleman in the path: end-to-end ownership and isolation by default. Geo-aware placement delivers locality, compliance, and ultra-low latency where it matters.
+    `,
+  },
+];
+
+export function HomeStack() {
+  const [active, setActive] = useState("agent");
+  const current = layers.find((l) => l.id === active)!;
+
+  return (
+    <section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
+      <div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-5 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
+
+        {/* LEFT COLUMN (2 COLS) */}
+        <div className="lg:col-span-1 px-6 lg:px-8 py-12 flex flex-col items-start text-left">
+          <h2 className="mt-4 text-3xl text-center leading-tight font-semibold tracking-tight text-gray-900">
+            The Mycelium Stack
+          </h2>
+        </div>
+
+        {/* MIDDLE COLUMN (1 COL) */}
+        <div className="lg:col-span-1 px-6 lg:px-12 py-12 flex flex-col space-y-6 text-left">
+          {layers.map((layer) => (
+            <button
+              key={layer.id}
+              onClick={() => setActive(layer.id)}
+              className={`transition-all ${
+                active === layer.id
+                  ? "text-gray-900 font-semibold"
+                  : "text-gray-400 hover:text-gray-600"
+              }`}
+            >
+              <span className="text-sm font-medium uppercase tracking-wide">
+                {layer.label}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        {/* RIGHT COLUMN (2 COLS) */}
+        <div className="lg:col-span-3 px-6 lg:px-12 py-12 flex flex-col text-left space-y-4">
+          <h3 className="text-lg font-semibold text-gray-900 uppercase tracking-wide">
+            {current.label}
+          </h3>
+          <p className="text-sm text-gray-500 leading-relaxed whitespace-pre-line">
+            {current.description.trim()}
+          </p>
+        </div>
+
+      </div>
+    </section>
+  );
+}

src/pages/home/archive/HomeStat.tsx

@@ -0,0 +1,61 @@
+export function HomeStat() {
+    return (
+        <section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
+        <div className="lg:-mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 divide-y sm:divide-y-0 lg:divide-y-0 lg:divide-x divide-gray-200">
+            
+            {/* CORES */}
+            <div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
+            <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
+                CORES
+            </span>
+            <h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
+                54,958
+            </h2>
+            <p className="mt-2 text-sm text-gray-500 leading-relaxed">
+                Total Central Processing Unit cores available on the grid.
+            </p>
+            </div>
+
+            {/* NODES */}
+            <div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
+            <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
+                NODES
+            </span>
+            <h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
+                1,493
+            </h2>
+            <p className="mt-2 text-sm text-gray-500 leading-relaxed">
+                Total number of nodes on the grid.
+            </p>
+            </div>
+
+            {/* SSD CAPACITY */}
+            <div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
+            <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
+                SSD CAPACITY
+            </span>
+            <h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
+                5,388,956
+            </h2>
+            <p className="mt-2 text-sm text-gray-500 leading-relaxed">
+                Total GB amount of storage (SSD, HDD, and RAM) on the grid.
+            </p>
+            </div>
+
+            {/* COUNTRIES */}
+            <div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
+            <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
+                COUNTRIES
+            </span>
+            <h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
+                44
+            </h2>
+            <p className="mt-2 text-sm text-gray-500 leading-relaxed">
+                Total number of countries with active nodes.
+            </p>
+            </div>
+
+        </div>
+        </section>
+    );
+}

src/pages/home/archive/HomeTabs.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useState } from "react";
+
+// ✅ IMPORT HEROICONS
+import {
+  CubeIcon,
+  SparklesIcon,
+  ServerStackIcon,
+  ShieldCheckIcon,
+} from "@heroicons/react/20/solid";
+
+const tabs = [
+  {
+    id: "ai",
+    label: "K8s Clusters",
+    title: "K8s Clusters",
+    description:
+      "Deploy and scale containerized apps across your own hardware — enabling a world of possibilities.",
+    link: "#",
+    icon: CubeIcon,
+  },
+  {
+    id: "web",
+    label: "AI Agents",
+    title: "AI Agents",
+    description: "Run open-source models locally, securely, and offline.",
+    link: "#",
+    icon: SparklesIcon,
+  },
+  {
+    id: "ecommerce",
+    label: "S3-Compatible Storage",
+    title: "S3-Compatible Storage",
+    description:
+      "Your own personal over-the-network drive, encrypted end-to-end.",
+    link: "#",
+    icon: ServerStackIcon,
+  },
+  {
+    id: "platforms",
+    label: "Mesh VPN & 0-Trust Networking",
+    title: "Mesh VPN & 0-Trust Networking",
+    description:
+      "Securely connect all your devices and remote locations.",
+    link: "#",
+    icon: ShieldCheckIcon,
+  },
+];
+
+export function HomeApplication() {
+  const [active, setActive] = useState("ai");
+  const current = tabs.find((t) => t.id === active)!;
+  const Icon = current.icon; // ✅ dynamic icon
+
+  return (
+    <section className="mx-4  border-t-0  lg:mx-auto max-w-5xl border border-gray-200">
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-12 relative">
+
+        {/* ✅ VERTICAL DIVIDER ON DESKTOP */}
+        <div className="hidden lg:block absolute left-3/4 top-0 bottom-0 border-l border-gray-200 pointer-events-none"></div>
+
+        {/* LEFT COLUMN */}
+        <div className="lg:col-span-3 space-y-6 lg:pl-6 py-12">
+          <h1 className="text-3xl lg:text-3xl font-semibold tracking-tight text-gray-900 leading-tight">
+            Run Real Infrastructure on Your Own Hardware
+          </h1>
+
+          <p className="text-sm text-gray-500 leading-relaxed max-w-2xl">
+            Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a public cloud, without giving your data or control to anyone.
+          </p>
+
+          {/* TABS */}
+          <div className="inline-flex flex-wrap gap-2 bg-gray-50 rounded-full p-1 border border-gray-200 w-auto">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActive(tab.id)}
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-all
+                  ${
+                    active === tab.id
+                      ? "bg-white border border-gray-300 shadow-sm"
+                      : "text-gray-500 hover:text-cyan-500"
+                  }`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* RIGHT COLUMN — ONLY 1 ROW CHANGES */}
+        <div className="space-y-3 lg:pr-6 py-12">
+
+          {/* ✅ ICON WITH BLACK BG */}
+          <div className="h-10 w-10 flex items-center justify-center rounded-full bg-black">
+            <Icon className="h-5 w-5 text-white" />
+          </div>
+
+          <h4 className="text-lg font-semibold text-gray-900 uppercase tracking-wide">
+            {current.title}
+          </h4>
+
+          <p className="text-sm text-gray-500 leading-tight">
+            {current.description}
+          </p>
+
+          <a
+            href={current.link}
+            className="text-gray-700 font-semibold hover:text-cyan-600 text-sm"
+          >
+            Learn more →
+          </a>
+        </div>
+
+      </div>
+    </section>
+  );
+}