refactor: clean up unused imports and component exports

- Removed unused component imports across multiple pages (AgentHeroAlt, ComputeHero, CloudPage, GpuPage, StoragePage)
- Changed ComputeDesign export from default to named export for consistency
- Removed CloudDesign section from CloudPage layout

src/components/AnimatedSection.tsx

@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion'
+import { forwardRef } from 'react'
 
 type AnimatedSectionProps = {
   children: React.ReactNode
@@ -6,9 +7,11 @@ type AnimatedSectionProps = {
   className?: string
 }
 
-export function AnimatedSection({ children, id, className }: AnimatedSectionProps) {
+export const AnimatedSection = forwardRef<HTMLElement, AnimatedSectionProps>(
+  ({ children, id, className }, ref) => {
   return (
         <motion.section
+      ref={ref}
       id={id}
       className={className}
       initial={{ opacity: 0, y: 40 }}
@@ -19,4 +22,5 @@ export function AnimatedSection({ children, id, className }: AnimatedSectionProp
       {children}
     </motion.section>
   )
-}
+  },
+)

src/components/Header.tsx

@@ -1,11 +1,30 @@
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 import { Dropdown } from './ui/Dropdown'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { Container } from './Container'
 import { Button } from './Button'
 import pmyceliumLogo from '../images/logos/logo_1.png'
 
+
+const cloudNavItems = [
+  { name: 'Cloud', href: '/cloud' },
+  { name: 'Compute', href: '/compute' },
+  { name: 'Storage', href: '/storage' },
+  { name: 'GPU', href: '/gpu' },
+]
+
 export function Header() {
+  const location = useLocation()
+
+  const getCurrentPageName = () => {
+    const currentPath = location.pathname;
+    if (currentPath.startsWith('/compute')) return 'Compute';
+    if (currentPath.startsWith('/storage')) return 'Storage';
+    if (currentPath.startsWith('/gpu')) return 'GPU';
+    if (currentPath.startsWith('/cloud')) return 'Cloud';
+    return 'Cloud'; 
+  };
+
   return (
     <header>
       <nav>
@@ -18,16 +37,11 @@ export function Header() {
               <Dropdown
                 buttonContent={
                   <>
-                    Cloud
+                    {getCurrentPageName()}
                     <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
                   </>
                 }
-                items={[
-                  { name: 'Cloud', href: '/cloud' },
-                  { name: 'Compute', href: '/compute' },
-                  { name: 'Storage', href: '/storage' },
-                  { name: 'GPU', href: '/gpu' },
-                ]}
+                items={cloudNavItems}
               />
               <Link
                 to="/network"

src/components/Texts.tsx

@@ -13,6 +13,7 @@ const colorVariants = {
   secondary: 'text-gray-600',
   light: 'text-gray-50',
   accent: 'text-cyan-500',
+  cyan: 'text-cyan-50',
   white: 'text-white',
   dark: 'text-gray-950',
   tertiary: 'text-gray-700',
@@ -33,7 +34,8 @@ type PolymorphicProps<E extends React.ElementType, P> = P & {
 
 const createTextComponent = <DefaultElement extends React.ElementType>(
   defaultElement: DefaultElement,
-  defaultClassName: string
+  defaultClassName: string,
+  defaultProps: Omit<TextOwnProps, 'className' | 'children'> = {}
 ) => {
   type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
     E,
@@ -41,9 +43,9 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
   >
 
   function Text<E extends React.ElementType = DefaultElement>({
-    font = 'sans',
+    font = defaultProps.font || 'sans',
     as,
-    color = 'primary',
+    color = defaultProps.color || 'primary',
     className,
     children,
     ...props
@@ -104,7 +106,8 @@ export const H5 = createTextComponent(
 )
 export const Eyebrow = createTextComponent(
   'h2',
-  'text-base/7 font-semibold tracking-wider uppercase'
+  'text-base/7 font-semibold tracking-[0.18em] uppercase',
+  { color: 'accent' }
 )
 export const SectionHeader = createTextComponent(
   'p',
@@ -128,7 +131,7 @@ export const FeatureTitle = createTextComponent(
 )
 export const FeatureDescription = createTextComponent(
   'p',
-  'text-sm leading-normal tracking-normal'
+  'lg:text-base text-sm leading-normal tracking-normal'
 )
 export const MobileFeatureTitle = createTextComponent(
   'h3',
@@ -160,4 +163,4 @@ export const DownloadCardDescription = createTextComponent(
 )
 
 export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
-export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-relaxed font-light')
+export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-tight font-light')

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

@@ -11,6 +11,7 @@ import {
 import { cn } from "@/lib/utils";
 import { Link } from "react-router-dom";
 import { motion } from "motion/react";
+import { DarkCard } from "./cards";
 
 interface CarouselProps {
   items: JSX.Element[];
@@ -73,7 +74,7 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
 
           <div
             className={cn(
-              "flex flex-row justify-start gap-4 pl-4",
+              "flex flex-row justify-start gap-6 pl-4",
               "mx-auto max-w-7xl", // remove max-w-4xl if you want the carousel to span the full width of its container
             )}
           >
@@ -127,42 +128,44 @@ export const Card = ({
   card: Card;
   layout?: boolean;
 }) => {
-  
   return (
     <Link to={card.link}>
+      <DarkCard className="p-0 rounded-3xl">
         <motion.div
           layoutId={layout ? `card-${card.title}` : undefined}
-        className="relative z-10 flex h-60 w-56 flex-col items-start justify-start overflow-hidden rounded-3xl border border-gray-500/30 md:h-120 md:w-96 hover:scale-105 transition-transform duration-200"
-        style={{
-          backgroundImage: `url(${card.bg})`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }}
+          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="pointer-events-none absolute inset-x-0 top-0 z-30 h-full bg-gradient-to-b from-black/50 via-transparent to-transparent" />
-        <div className="relative z-40 p-8 w-full">
+        <div className="flex h-2/5 flex-col justify-center py-6 px-4">
           <motion.p
             layoutId={layout ? `category-${card.category}` : undefined}
-            className="text-left font-sans text-sm font-medium text-white md:text-base"
+            className="text-left font-sans font-semibold text-cyan-500 uppercase tracking-wider text-xs   md:text-sm"
           >
             {card.category}
           </motion.p>
           <motion.p
             layoutId={layout ? `title-${card.title}` : undefined}
-            className="mt-2 max-w-xs text-left font-sans text-xl font-semibold [text-wrap:balance] text-white md:text-3xl"
+            className="mt-1 max-w-xs text-left font-sans text-xl font-semibold text-white [text-wrap:balance] lg:text-2xl"
           >
             {card.title}
           </motion.p>
-          <div className="flex flex-row justify-between items-center w-full mt-4">
-            <motion.p className="max-w-xs text-left font-sans lg:text-lg text-base  text-neutral-300">
+          <div className="mt-2 flex w-full flex-row items-center justify-between md:mt-4">
+            <motion.p className="max-w-xs text-left font-sans lg:text-xl text-lg text-neutral-300 lg:leading-normal leading-tight">
               {card.description}
             </motion.p>
-            <div className="h-8 w-8 bg-[#212121] rounded-full flex items-center justify-center text-[#858585] shrink-0 hover:bg-[#262626] hover:text-white active:bg-[#262626] active:text-white transition-colors duration-200">
-              <IconChevronRight className="h-6 w-6" />
+            <div className="flex h-6 w-6 ml-2 shrink-0 items-center justify-center rounded-full bg-[#212121] text-[#858585] transition-colors duration-200 hover:bg-[#262626] hover:text-white md:h-8 md:w-8">
+              <IconChevronRight className="h-4 w-4 md:h-6 md:w-6 " />
             </div>
           </div>
         </div>
+        <div className="relative flex h-3/5 w-full items-end justify-end bg-transparent">
+          <img
+            src={card.src}
+            alt={card.title}
+            className="h-full w-full origin-bottom-right scale-75 object-contain mb-10"
+          />
+        </div>
         </motion.div>
+      </DarkCard>
     </Link>
   );
 };

src/components/ui/cards.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const DarkCard = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <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",
+      className
+    )}
+    {...props}
+  />
+));
+DarkCard.displayName = "DarkCard";
+
+export { DarkCard };

src/pages/agents/AgentHeroAlt.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { Button } from '../../components/Button'
+import { Eyebrow, P, H3 } from '../../components/Texts'
+
+export function AgentHeroAlt() {
+  return (
+    <div className="relative bg-white lg:mt-10 mt-0">
+      <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-2/3">
+        <img
+          alt=""
+          src="/images/agents.png"
+          className="size-full object-cover"
+        />
+       
+      </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>
+          <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.
+          </P>
+          <div className="mt-8">
+            <Button href="#" variant="solid" color="cyan">
+              Join the Waitlist
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/agents/AgentsPage.tsx

@@ -3,13 +3,13 @@ import { DeploySection } from './DeploySection'
 import { GallerySection } from './GallerySection'
 import { Companies } from './Companies'
 import { BentoSection } from './BentoSection'
-import { AgentsHeroAlt } from './AgentsHeroAlt'
+import { AgentHeroAlt } from './AgentHeroAlt'
 
 export default function AgentsPage() {
   return (
     <div>
       <AnimatedSection>
-        <AgentsHeroAlt />
+      <AgentHeroAlt />
       </AnimatedSection>
 
       <AnimatedSection>

src/pages/cloud/CloudArchitecture.tsx

@@ -1,5 +1,5 @@
 import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, H3, P } from '../../components/Texts'
 
 const architectureSections = [
   {
@@ -39,15 +39,15 @@ const architectureSections = [
 
 export function CloudArchitecture() {
   return (
-    <section className="bg-white py-24 sm:py-32">
+    <section className="bg-white py-24 lg:py-32">
       <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+        <div className="mx-auto max-w-5xl text-center">
+          <Eyebrow>
             Technical Architecture
           </Eyebrow>
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Built on a sovereign, encrypted delivery mesh.
-          </SectionHeader>
+          <H3 className="mt-6 text-gray-900">
+            Built on a Sovereign, Encrypted Delivery Mesh.
+          </H3>
           <P className="mt-6 text-gray-600">
             Mycelium Cloud rides on the ThreeFold Grid, pairing encrypted mesh
             networking with deterministic K3s orchestration. Every layer is
@@ -59,7 +59,7 @@ export function CloudArchitecture() {
           {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"
+              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 "
             >
               <div className="flex items-center gap-3">
                 <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">

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">Cloud 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

@@ -1,125 +1,430 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+'use client'
 
-const featureSections = [
+import { Fragment, useEffect, useId, useRef, useState } from 'react'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import clsx from 'clsx'
+import {
+  type MotionProps,
+  type Variant,
+  AnimatePresence,
+  motion,
+} from 'framer-motion'
+import { useDebouncedCallback } from 'use-debounce'
+
+import {
+  Eyebrow,
+  FeatureDescription,
+  FeatureTitle,
+  MobileFeatureTitle,
+  P,
+  SectionHeader,
+} from '@/components/Texts'
+import { Container } from '@/components/Container'
+
+import reservenodeimg from '/images/cloud/reserve.png'
+import billingImg from '/images/cloud/billing.png'
+import kubeconfigImg from '/images/cloud/kubeconfig.png'
+
+
+interface CustomAnimationProps {
+  isForwards: boolean
+  changeCount: number
+}
+
+const features = [
   {
-    title: 'Mycelium Networking',
+    name: 'Decentralized Kubernetes',
     description:
-      'Ultra-fast, decentralized networking inspired by nature to keep services reachable without exposing surfaces.',
-    bullets: [
-      'End-to-end encrypted mesh connectivity between every node.',
-      'Direct node communication without centralized intermediaries.',
-      'Self-optimizing routes that heal around failures automatically.',
-      'Secure peer-to-peer communication across the entire grid.',
-    ],
+      "Reserve a node and deploy sovereign Kubernetes clusters on decentralized infrastructure.",
+    icon: DeviceUserIcon,
+    screen: ReserveNodeScreen,
   },
   {
-    title: 'Zero-Image Technology',
+    name: 'Manage Your Cluster',
     description:
-      'Metadata-first zero-images shrink artifacts up to 100x, reducing deployment time and bandwidth.',
-    bullets: [
-      'Deterministic deployments verified cryptographically.',
-      'Run containers, VMs, and Linux workloads with secure boot.',
-      'Smart contract orchestration manages every workload lifecycle.',
-      'Minimal artifact footprint accelerates delivery everywhere.',
-    ],
+      'Manage your cluster with ease, with a simple and intuitive interface.',
+    icon: DeviceNotificationIcon,
+    screen: ManageClusterScreen,
   },
   {
-    title: 'Quantum-Safe Storage (QSS)',
+    name: 'Personalised Billings & Accounts',
     description:
-      'Quantum-resistant encryption secures data beyond the application layer for complete ownership.',
-    bullets: [
-      'Self-healing storage recovers instantly from corruption or failure.',
-      'Serve the same data via IPFS, S3, WebDAV, HTTP, and native FS.',
-      'Geo-aware placement enforces residency and redundancy policies.',
-      'Autonomous replication keeps data resilient across the globe.',
-    ],
-  },
-  {
-    title: 'Multi-Master Clusters',
-    description:
-      'High-availability Kubernetes with automatic failover and leadership orchestration.',
-    bullets: [
-      'Multi-master topologies orchestrated with zero downtime.',
-      'Automatic failover keeps control planes healthy and responsive.',
-      'HA operations managed without manual intervention or scripts.',
-      'Upgrades roll out seamlessly with continuous verification.',
-    ],
-  },
-  {
-    title: 'Effortless Load Balancing & Scaling',
-    description:
-      'Adaptive automation balances traffic and scales workloads based on demand.',
-    bullets: [
-      'Built-in autoscaling that responds to real-time usage.',
-      'Native load balancing distributes traffic globally.',
-      'High availability delivered without custom controllers.',
-      'Elastic scaling keeps costs aligned with workload demand.',
-    ],
-  },
-  {
-    title: 'Simple Web Gateway Access',
-    description:
-      'Expose services to the public web with declarative Kubernetes resources.',
-    bullets: [
-      'One resource publishes services without complex ingress rules.',
-      'Domain and prefix-based routing built into the platform.',
-      'No need to manage dedicated ingress controllers.',
-      'Consistent configuration across every cluster and region.',
-    ],
+      'Easily manage your cluster billing and accounts with personalised configurations.',
+    icon: DeviceTouchIcon,
+    screen: PersonalisedBillingsScreen,
   },
 ]
 
+function DeviceUserIcon(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
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 23a3 3 0 100-6 3 3 0 000 6zm-1 2a4 4 0 00-4 4v1a2 2 0 002 2h6a2 2 0 002-2v-1a4 4 0 00-4-4h-2z"
+        fill="#737373"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v24a4.002 4.002 0 01-3.01 3.877c-.535.136-.99-.325-.99-.877s.474-.98.959-1.244A2 2 0 0025 28V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 001.041 1.756C8.525 30.02 9 30.448 9 31s-.455 1.013-.99.877A4.002 4.002 0 015 28V4z"
+        fill="#A3A3A3"
+      />
+    </svg>
+  )
+}
+
+function DeviceNotificationIcon(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
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
+        fill="#A3A3A3"
+      />
+      <path
+        d="M9 8a2 2 0 012-2h10a2 2 0 012 2v2a2 2 0 01-2 2H11a2 2 0 01-2-2V8z"
+        fill="#737373"
+      />
+    </svg>
+  )
+}
+
+function DeviceTouchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  let id = useId()
+
+  return (
+    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
+      <defs>
+        <linearGradient
+          id={`${id}-gradient`}
+          x1={14}
+          y1={14.5}
+          x2={7}
+          y2={17}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#737373" />
+          <stop offset={1} stopColor="#D4D4D4" stopOpacity={0} />
+        </linearGradient>
+      </defs>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v13h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h4v2H9a4 4 0 01-4-4V4z"
+        fill="#A3A3A3"
+      />
+      <path
+        d="M7 22c0-4.694 3.5-8 8-8"
+        stroke={`url(#${id}-gradient)`}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21 20l.217-5.513a1.431 1.431 0 00-2.85-.226L17.5 21.5l-1.51-1.51a2.107 2.107 0 00-2.98 0 .024.024 0 00-.005.024l3.083 9.25A4 4 0 0019.883 32H25a4 4 0 004-4v-5a3 3 0 00-3-3h-5z"
+        fill="#A3A3A3"
+      />
+    </svg>
+  )
+}
+
+const maxZIndex = 2147483647
+
+const bodyVariantBackwards: Variant = {
+  opacity: 0.4,
+  scale: 0.8,
+  zIndex: 0,
+  filter: 'blur(4px)',
+  transition: { duration: 0.4 },
+}
+
+
+const bodyAnimation: MotionProps = {
+  initial: 'initial',
+  animate: 'animate',
+  exit: 'exit',
+  variants: {
+    initial: (custom: CustomAnimationProps) => (
+      custom.isForwards
+        ? {
+            y: '100%',
+            zIndex: maxZIndex - custom.changeCount,
+            transition: { duration: 0.4 },
+          }
+        : bodyVariantBackwards
+    ),
+    animate: (custom: CustomAnimationProps) => ({
+      y: '0%',
+      opacity: 1,
+      scale: 1,
+      zIndex: maxZIndex / 2 - custom.changeCount,
+      filter: 'blur(0px)',
+      transition: { duration: 0.4 },
+    }),
+    exit: (custom: CustomAnimationProps) => (
+      custom.isForwards
+        ? bodyVariantBackwards
+        : {
+            y: '100%',
+            zIndex: maxZIndex - custom.changeCount,
+            transition: { duration: 0.4 },
+          }
+    ),
+  },
+}
+
+
+function ReserveNodeScreen() {
+  return (
+    <img
+      src={reservenodeimg}
+      alt="Mycelium Reserve Node"
+      width={2432}
+      height={1442}
+      className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
+    />
+  );
+}
+
+function ManageClusterScreen() {
+  return (
+    <img
+      src={kubeconfigImg}
+      alt="Mycelium Kubeconfig"
+      width={2432}
+      height={1442}
+      className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
+    />
+  );
+}
+
+function PersonalisedBillingsScreen() {
+  return (
+    <img
+      src={billingImg}
+      alt="Mycelium Billing"
+      width={2432}
+      height={1442}
+      className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
+    />
+  );
+}
+
+function usePrevious<T>(value: T) {
+  const ref = useRef<T>()
+
+  useEffect(() => {
+    ref.current = value
+  }, [value])
+
+  return ref.current
+}
+
+function CloudFeaturesDesktop() {
+  let [changeCount, setChangeCount] = useState(0)
+  let [selectedIndex, setSelectedIndex] = useState(0)
+  let prevIndex = usePrevious(selectedIndex)
+  let isForwards = prevIndex === undefined ? true : selectedIndex > prevIndex
+
+  let onChange = useDebouncedCallback(
+    (selectedIndex: number) => {
+      setSelectedIndex(selectedIndex)
+      setChangeCount((changeCount) => changeCount + 1)
+    },
+    100,
+    { leading: true },
+  )
+
+  return (
+    <TabGroup
+      className="grid grid-cols-12 items-center gap-8 lg:gap-16"
+      selectedIndex={selectedIndex}
+      onChange={onChange}
+      vertical
+    >
+      <TabList className="z-10 col-span-6 space-y-6 pl-4 sm:pl-6 lg:pl-8">
+        {features.map((feature, featureIndex) => (
+          <div
+            key={feature.name}
+            className={clsx(
+              'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30 ml-16',
+              selectedIndex === featureIndex
+                ? 'outline-cyan-500'
+                : 'outline-transparent hover:outline-cyan-500',
+            )}
+          >
+            {featureIndex === selectedIndex && (
+              <motion.div
+                layoutId="activeBackground"
+                className="absolute inset-0 bg-gray-800 "
+                initial={{ borderRadius: 16 }}
+              />
+            )}
+            <div className="relative z-10 p-8">
+              <feature.icon className="h-8 w-8" />
+              <FeatureTitle as="h3" color="white" className="mt-6">
+                <Tab className="text-left data-selected:not-data-focus:outline-hidden">
+                  <span className="absolute inset-0 rounded-2xl" />
+                  {feature.name}
+                </Tab>
+              </FeatureTitle>
+              <FeatureDescription color="secondary" className="mt-2">
+                {feature.description}
+              </FeatureDescription>
+            </div>
+          </div>
+        ))}
+      </TabList>
+      <div className="relative col-span-6 overflow-hidden">
+        <div className="z-10 mx-auto w-full max-w-[366px]">
+          <TabPanels as={Fragment}>
+            <AnimatePresence
+              initial={false}
+              custom={{ isForwards, changeCount }}
+            >
+              {features.map((feature, featureIndex) =>
+                selectedIndex === featureIndex ? (
+                  <TabPanel
+                    static
+                    key={feature.name + changeCount}
+                    className="col-start-1 row-start-1 flex focus:outline-offset-32 data-selected:not-data-focus:outline-hidden"
+                  >
+                    <motion.div {...bodyAnimation} custom={{ isForwards, changeCount }}>
+                      <feature.screen />
+                    </motion.div>
+                  </TabPanel>
+                ) : null,
+              )}
+            </AnimatePresence>
+          </TabPanels>
+        </div>
+      </div>
+    </TabGroup>
+  )
+}
+
+function CloudFeaturesMobile() {
+  let [activeIndex, setActiveIndex] = useState(0)
+  let slideContainerRef = useRef<React.ElementRef<'div'>>(null)
+  let slideRefs = useRef<Array<React.ElementRef<'div'>>>([])
+
+  useEffect(() => {
+    let observer = new window.IntersectionObserver(
+      (entries) => {
+        for (let entry of entries) {
+          if (entry.isIntersecting && entry.target instanceof HTMLDivElement) {
+            setActiveIndex(slideRefs.current.indexOf(entry.target))
+            break
+          }
+        }
+      },
+      {
+        root: slideContainerRef.current,
+        threshold: 0.6,
+      },
+    )
+
+    for (let slide of slideRefs.current) {
+      if (slide) {
+        observer.observe(slide)
+      }
+    }
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [slideContainerRef, slideRefs])
+
+  return (
+    <>
+      <div
+        ref={slideContainerRef}
+        className="-mb-4 flex snap-x snap-mandatory -space-x-4 overflow-x-auto overscroll-x-contain scroll-smooth pb-4 [scrollbar-width:none] sm:-space-x-6 [&::-webkit-scrollbar]:hidden"
+      >
+        {features.map((feature, featureIndex) => (
+          <div
+            key={featureIndex}
+            ref={(ref) => ref && (slideRefs.current[featureIndex] = ref)}
+            className="w-full flex-none snap-center px-4 sm:px-6 transition-all duration-300 ease-in-out hover:scale-105"
+          >
+                        <div
+              className={clsx(
+                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
+                activeIndex === featureIndex
+                  ? 'outline-transparent' // Remove outline for active mobile slide
+                  : 'outline-transparent hover:outline-cyan-500',
+              )}
+            >
+              <div className="relative mx-auto w-full max-w-[366px]">
+                <feature.screen />
+              </div>
+              <div className="absolute inset-x-0 bottom-0 bg-gray-800 p-6 backdrop-blur-sm sm:p-10">
+                <feature.icon className="h-8 w-8" />
+                <MobileFeatureTitle color="white" className="mt-6">
+                  {feature.name}
+                </MobileFeatureTitle>
+                <FeatureDescription color="secondary" className="mt-2">
+                  {feature.description}
+                </FeatureDescription>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="mt-6 flex justify-center gap-3">
+        {features.map((_, featureIndex) => (
+          <button
+            type="button"
+            key={featureIndex}
+            className={clsx(
+              'relative h-0.5 w-4 rounded-full',
+              featureIndex === activeIndex ? 'bg-gray-600' : 'bg-gray-700',
+            )}
+            aria-label={`Go to slide ${featureIndex + 1}`}
+            onClick={() => {
+              slideRefs.current[featureIndex].scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest',
+              })
+            }}
+          >
+            <span className="absolute -inset-x-1.5 -inset-y-3" />
+          </button>
+        ))}
+      </div>
+    </>
+  )
+}
+
 export function CloudFeatures() {
   return (
-    <section className="bg-gray-50 py-24 sm:py-32">
+    <section
+      id="overview"
+      aria-label="Features for investing all your money"
+      className="bg-gray-900 py-20 sm:py-32"
+    >
       <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
-            Core Features
-          </Eyebrow>
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Infrastructure that verifies, heals, and scales itself.
+        <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
+          <Eyebrow color="accent">Platform Overview</Eyebrow>
+          <SectionHeader color="white" className="mt-2">
+            A Decentralized Cloud that Operates Itself
           </SectionHeader>
-          <P className="mt-6 text-gray-600">
-            From mesh networking to quantum-safe storage, every capability in
-            Mycelium Cloud is designed for sovereign control and autonomous
-            operations—so your teams focus on shipping workloads instead of
-            wiring infrastructure.
+          <P color="light" className="mt-6">
+           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>
-        <div className="mt-16 grid gap-8 md:grid-cols-2 xl:grid-cols-3">
-          {featureSections.map((feature) => (
-            <div
-              key={feature.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"
-            >
-              <div>
-                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
-                  Capability
-                </Small>
-                <h3 className="mt-4 text-xl font-semibold text-gray-900">
-                  {feature.title}
-                </h3>
-                <p className="mt-4 text-sm leading-relaxed text-gray-600">
-                  {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 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>
+      <div className="hidden md:mt-20 md:block">
+          <CloudFeaturesDesktop />
+        </div>
+      <div className="mt-16 md:hidden">
+        <CloudFeaturesMobile />
+      </div>
     </section>
   )
 }

src/pages/cloud/CloudHero.tsx

@@ -2,7 +2,7 @@ import { useId } from 'react'
 
 import { Button } from '../../components/Button'
 import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, H2, P, H5 } from '../../components/Texts'
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   const id = useId()
@@ -82,16 +82,16 @@ export function CloudHero() {
             <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
               Mycelium Cloud
             </Eyebrow>
-            <SectionHeader as="h1" className="mt-6 text-gray-900">
+            <H2 as="h1" className="mt-6 text-gray-900">
               Deploy sovereign Kubernetes clusters on decentralized
               infrastructure.
-            </SectionHeader>
-            <P className="mt-6 text-gray-600">
+            </H2>
+            <H5  className="mt-6 text-gray-600">
               Mycelium Cloud turns the ThreeFold Grid into a programmable
               substrate for K3s. Launch verifiable clusters with nature-inspired
               networking, quantum-safe storage, and zero-image delivery that
               keeps every workload deterministic.
-            </P>
+            </H5>
             <P className="mt-6 text-gray-500">
               Developer guide to decentralized cloud computing.
             </P>

src/pages/cloud/CloudHeroNew.tsx

@@ -0,0 +1,50 @@
+import { H3, H5, Eyebrow } from "../../components/Texts"
+import { Button } from "../../components/Button"
+
+
+export function CloudHeroNew() {
+  return (
+    <div
+      className="relative bg-cover lg:bg-contain bg-right bg-no-repeat"
+      style={{ backgroundImage: "url('/images/cloudhero4.webp')" }}
+    >
+      <div className="mx-auto max-w-7xl lg:px-8">
+        <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">
+            <Eyebrow>
+             Mycelium Cloud
+            </Eyebrow>
+            <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.
+            </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="#"
+                variant="solid"
+                className=""
+                color="cyan"
+              >
+                Get started
+              </Button>
+              <Button to="#" variant="outline">
+                Documentation <span aria-hidden="true"> →</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/cloud/CloudHosting.tsx

@@ -0,0 +1,70 @@
+import {
+  ArrowPathIcon,
+  CloudArrowUpIcon,
+  ServerIcon,
+  ShieldCheckIcon,
+} from '@heroicons/react/24/outline'
+import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+
+const features = [
+  {
+    Eyebrow: 'DevOps / Cloud teams',
+    name: 'Kubernetes Clusters',
+    description: 'Deterministic K3s workloads across sovereign hardware.',
+    icon: ServerIcon,
+  },
+  {
+    Eyebrow: 'Security & infrastructure',
+    name: 'Encrypted Mesh Networking',
+    description: 'No public ingress, no exposed attack surface, zero-trust routing.',
+    icon: ShieldCheckIcon,
+  },
+  {
+    Eyebrow: 'Data-driven teams',
+    name: 'S3-Compatible Storage',
+    description: 'Distributed storage with erasure coding and residency control.',
+    icon: CloudArrowUpIcon,
+  },
+  {
+    Eyebrow: 'AI / ML workloads',
+    name: 'GPU-Ready',
+    description: 'Scale inference & training on demand.',
+    icon: ArrowPathIcon,
+  },
+]
+
+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>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) => (
+              <div key={feature.name} className="relative">
+                <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">
+                  <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>
+                  <CP color="secondary" className="mt-4">
+                    {feature.description}
+                  </CP>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/cloud/CloudOverview.tsx

@@ -39,7 +39,7 @@ export function CloudOverview() {
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-400">
+          <Eyebrow>
             Platform Overview
           </Eyebrow>
           <SectionHeader as="h2" color="light" className="mt-6 font-medium">

src/pages/cloud/CloudPage.tsx

@@ -1,37 +1,40 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
-import { CloudHero } from './CloudHero'
-import { CloudOverview } from './CloudOverview'
 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'
 
 export default function CloudPage() {
   return (
     <>
+
       <AnimatedSection>
-        <CloudHero />
+        <CloudHeroNew />
       </AnimatedSection>
+
       <AnimatedSection>
-        <CloudOverview />
-      </AnimatedSection>
-      <AnimatedSection>
-        <CloudArchitecture />
+        <CloudHosting />
       </AnimatedSection>
+
       <AnimatedSection>
         <CloudFeatures />
       </AnimatedSection>
+
       <AnimatedSection>
-        <CloudGettingStarted />
+        <CloudArchitecture />
       </AnimatedSection>
+
       <AnimatedSection>
         <CloudUseCases />
       </AnimatedSection>
+
       <AnimatedSection>
-        <SecurityPillars />
+        <CloudBluePrint />
       </AnimatedSection>
+
       <AnimatedSection>
         <CloudCTA />
       </AnimatedSection>

src/pages/cloud/CloudUseCases.tsx

@@ -3,35 +3,33 @@ 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.',
-    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.',
+      'Production-grade K3s clusters with full workload ownership and residency control. Deploy apps and internal services without vendor lock-in or exposed surfaces.',
     bullets: [
-      'Cryptpad • Encrypted collaboration',
-      'Elements • Matrix chat',
-      'Stallwart • Mail, calendar, contacts',
-      'Gitea • Git hosting',
-      'Nextcloud • File storage and sync',
-      'LiveKit / Jitsi • Real-time video',
-      'Single Sign-On backed by Gitea',
+      'High availability + failover',
+      'Encrypted, mesh-native networking',
+      'Compliance-ready governance & policy control',
+    ],
+  },
+  {
+    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',
     ],
   },
 ]
@@ -41,7 +39,7 @@ export function CloudUseCases() {
     <section className="bg-white py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+          <Eyebrow>
             Use Cases
           </Eyebrow>
           <SectionHeader as="h2" className="mt-6 text-gray-900">

src/pages/compute/CallToAction.tsx

@@ -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 Compute Node
             </Button>
           </div>
         </div>

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

@@ -3,52 +3,24 @@ 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.',
-    listTitle: 'Benefits',
-    bullets: [
-      'Cryptographic verification of every workload component',
-      'Zero configuration drift across environments',
-      'Immediate detection of unauthorized changes',
-      'Complete reproducibility for every deployment',
-    ],
+      'Scaling, healing, and failover happen automatically, no manual intervention.',
   },
   {
-    title: 'Self-Managing & Stateless Infrastructure',
+    title: 'Secure, Stateless Execution',
     description:
-      'Infrastructure that scales and heals autonomously across the ThreeFold Grid with no manual intervention.',
-    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',
-    ],
+      'Workloads remain isolated, reproducible, and portable, no environment drift or configuration decay.',
   },
   {
-    title: 'Smart Contract-Based Deployment',
+    title: 'Zero-Image Delivery',
     description:
-      'Cryptographically signed contracts orchestrate every workload lifecycle with transparent, tamper-proof execution.',
-    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',
-    ],
+      'Deploy workloads using metadata instead of large container images for instant launches.',
   },
   {
-    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.',
-    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',
-    ],
+      'Choose where workloads run, on your hardware or across the decentralized grid.',
   },
 ]
 
@@ -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,6 +1,7 @@
 'use client'
 
 import { Button } from '../../components/Button'
+import { Eyebrow, P, H3 } from '../../components/Texts'
 
 export function ComputeHero() {
   return (
@@ -8,25 +9,24 @@ export function ComputeHero() {
       <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
         <img
           alt=""
-          src="/images/hero.webp"
-          className="size-full object-cover"
+          src="/images/computehero.webp"
+          className="size-full object-contain"
         />
        
       </div>
-      <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
-        <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">
-          <h2 className="text-base/7 font-semibold text-cyan-500">COMPUTE</h2>
-          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The pulse of intelligence runs here.</p>
-          <p className="mt-6 text-base/7 text-gray-600">
-            Mycelium Compute brings predictable, sovereign performance — free from lock-in, free from drift.
-            Deploy any workload, anywhere, with cryptographic precision and zero compromise.
-            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-8">
+      <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">Deterministic Compute You Control</H3>
+          <P className="mt-6  text-gray-600">
+            Run workloads on sovereign, self-verifying infrastructure.
+            Mycelium Compute delivers predictable execution, zero drift, and automatic healing, whether you’re running containers, VMs, agents, or full Kubernetes clusters.
+          </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/ComputePage.tsx

@@ -8,6 +8,8 @@ import { ComputeDeveloperExperience } from './ComputeDeveloperExperience'
 import { ComputeUseCases } from './ComputeUseCases'
 import { ComputeDifferentiators } from './ComputeDifferentiators'
 import { CallToAction } from './CallToAction'
+import { ComputeCapabilities } from './ComputeCapabilities'
+import { ComputeDesign } from './ComputeDesign'
 
 export default function ComputePage() {
   return (
@@ -15,12 +17,24 @@ export default function ComputePage() {
       <AnimatedSection>
         <ComputeHero />
       </AnimatedSection>
+
       <AnimatedSection>
-        <ComputeOverview />
+        <ComputeCapabilities />
       </AnimatedSection>
+
+      <AnimatedSection>
+        <ComputeDesign />
+      </AnimatedSection>
+
       <AnimatedSection>
         <ComputeFeatures />
       </AnimatedSection>
+
+      <AnimatedSection>
+        <ComputeOverview />
+      </AnimatedSection>
+
+    
       <AnimatedSection>
         <ComputeZeroImage />
       </AnimatedSection>

src/pages/compute/ComputeUseCases.tsx

@@ -1,72 +1,21 @@
 import { Container } from '../../components/Container'
 import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
-const primaryUseCases = [
+const useCases = [
   {
     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.',
-    ],
+    description:
+      'Reproducible pipelines, private model execution, scalable GPU orchestration.',
   },
   {
     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.',
-    ],
+    description:
+      'Private, reliable, self-healing services – without cloud vendor lock-in.',
   },
   {
-    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.',
-    ],
+    title: 'Distributed & Edge Compute',
+    description:
+      'Run workloads where data lives, in homes, offices, datacenters, or remote regions.',
   },
 ]
 
@@ -87,9 +36,9 @@ export function ComputeUseCases() {
             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 className="mx-auto mt-16 max-w-4xl space-y-6">
+          {useCases.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"
@@ -97,38 +46,12 @@ export function ComputeUseCases() {
               <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>
+              <p className="mt-3 text-sm leading-relaxed text-gray-200">
+                {useCase.description}
+              </p>
             </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/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-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/gpu/CallToAction.tsx

@@ -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
-            verifiable, performant, and cost-transparent from edge to core.
+            Use GPUs through Mycelium Cloud,
+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

@@ -31,7 +31,7 @@ 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 className="tracking-[0.32em] uppercase text-cyan-500">
+          <Eyebrow>
             Technical Architecture
           </Eyebrow>
           <SectionHeader as="h2" className="mt-6 text-gray-900">

src/pages/gpu/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/GpuCapabilities.tsx

@@ -0,0 +1,62 @@
+import {
+  SparklesIcon,
+  Cog6ToothIcon,
+  CubeTransparentIcon,
+  CpuChipIcon,
+} from '@heroicons/react/24/solid'
+import { Eyebrow, H3, P, 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>
+          <P className="mt-6 text-gray-600">
+            GPU workloads can run anywhere on the mesh — on cloud capacity, your own machines,
+            or edge nodes — with full sovereignty.
+          </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-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,62 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, H3, P, 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>
+          <P className="mt-6 text-gray-600">
+            Mycelium GPU gives you access to real hardware, not gated queues or
+            proprietary runtimes.
+          </P>
+        </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

@@ -9,34 +9,30 @@ export function GpuHero() {
       <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
         <img
           alt="Mycelium GPU nebula illustration"
-          src="/images/gpuhero.png"
-          className="size-full object-cover"
+          src="/images/gpuhero2.png"
+          className="size-full object-contain"
         />
       </div>
-      <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
-        <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">
+      <div className="relative mx-auto max-w-7xl py-24 lg: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 ">
           <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
             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
-            Grid into one adaptive intelligence layer. Run AI, ML, rendering,
-            and high-performance workloads anywhere—from edge devices to
-            planetary clusters—with deterministic performance and transparent
-            cost.
-          </P>
-          <P className="mt-4 text-gray-500">
-            The energy behind intelligence, orchestrated entirely through code.
+            Access GPUs across the Mycelium mesh without waitlists, 
+inflated pricing, or centralized control.
+Run inference, training, and compute workloads where they make sense: 
+cloud, edge, or on your own hardware. 
           </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,
-  CubeTransparentIcon,
-  LockClosedIcon,
-  Squares2X2Icon,
+  AdjustmentsHorizontalIcon,
+  GlobeAltIcon,
+  BanknotesIcon,
 } from '@heroicons/react/24/outline'
 
 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',
-    title: 'Unified GPU acceleration across the ThreeFold Grid',
+    name: 'Deterministic GPU Allocation',
     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',
-    title: 'Sovereign intelligence layer',
+    name: 'Multi-Topology Deployment',
     description:
-      'No silos, no intermediaries—just raw, verifiable GPU power orchestrated through smart contracts and APIs you control.',
-  },
-]
-
-const principles = [
-  {
-    name: 'No Silos',
-    description: 'Every GPU resource is accessible through a single interface.',
-    icon: Squares2X2Icon,
+      'Run workloads in data centers, at the edge, or on self-hosted nodes.',
+    icon: GlobeAltIcon,
   },
   {
-    name: 'No Intermediaries',
-    description: 'Direct access to hardware without centralized brokers.',
-    icon: CubeTransparentIcon,
-  },
-  {
-    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,
+    name: 'Transparent Cost Structure',
+    description:
+      'No inflated pricing, no hidden fees, no marketplace brokerage.',
+    icon: BanknotesIcon,
   },
 ]
 
@@ -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.
-            Harness global GPUs with deterministic performance, transparent
-            costs, and end-to-end verification.
+            The Mycelium GPU layer provides predictable, sovereign acceleration
+            — without arbitrary limits or hidden economics.
           </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}
-              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]"
-            >
-              <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]"
+              key={feature.name}
+              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="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">
-                {principle.name}
+              <h3 className="text-lg font-semibold text-white">
+                {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>
         <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 { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
-const useCases = [
+const gpuUseCases = [
   {
-    title: 'AI / ML Training',
-    description:
-      'Scale training, fine-tuning, and inference workloads anywhere on the grid.',
-    bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
+    title: 'AI / ML Training & Inference',
+    description: 'Scale model execution across sovereign GPU nodes.',
   },
   {
     title: 'Rendering & Visualization',
-    description:
-      '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',
-    ],
+    description: 'Run 3D, scientific, simulation, or generative rendering pipelines.',
   },
   {
-    title: 'General GPU Computing',
-    description:
-      'Harness sovereign acceleration for simulations, finance, blockchain, and research.',
-    bullets: [
-      'Scientific simulations',
-      'Financial modeling',
-      'Blockchain processing',
-      'Protein folding and discovery',
-    ],
+    title: 'Distributed & Edge Compute',
+    description: 'Place GPU power close to where data is generated.',
   },
 ]
 
@@ -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 className="tracking-[0.32em] uppercase text-cyan-500">
-            Use Cases
-          </Eyebrow>
+          <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
-            deterministic access to the power you need without the waitlists or
-            markups of centralized clouds.
+            From sovereign AI execution to real-time rendering and edge inference,
+            Mycelium GPU ensures predictable acceleration with full ownership and no centralized control.
           </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/home/CallToAction.tsx

@@ -14,14 +14,17 @@ export function CallToAction() {
       <Container className="relative">
         <div className="mx-auto max-w-xl text-center">
           <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
-            Activate Your Sovereign <br />Mycelium Stack
+            Use the Mycelium Stack Your Way
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Mesh cloud workloads through the encrypted Mycelium Network and unlock AI experiences without ever surrendering control of your infrastructure, performance, or data.
+            Run workloads, connect environments, host nodes, and build agentic systems, all on one sovereign, self-healing network. 
+          </p>
+          <p className="mt-4 text-lg text-gray-300">
+            Start wherever you are. Scale however you choose.
           </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/"

src/pages/home/HomeAurora.tsx

@@ -2,41 +2,42 @@ import { H1, H5 } from "@/components/Texts"
 import { Button } from "@/components/Button"
 
 
-export  function HomeAurora() {
+export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
   return (
     <div
       className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
       style={{ backgroundImage: "url('/images/hero11.webp')" }}
     >
-      <div className="mx-auto max-w-7xl lg:px-8">
+      <div className="mx-auto max-w-7xl lg:px-4">
         <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-3xl lg:mx-0">
+          <div className="mx-auto max-w-2xl lg:mx-0">
             <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">
-                Anim aute id magna aliqua ad ad non deserunt sunt.{' '}
+                Deploying at scale?{' '}
                 <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
                   <span aria-hidden="true" className="absolute inset-0" />
-                  Read more <span aria-hidden="true">&rarr;</span>
+                  Book a call  <span>&rarr;</span>
                 </a>
               </div>
             </div>
             <H1 className="mt-8">
-              Full Sovereignty for Cloud, Network & AI.
+              The Sovereign Agentic Cloud
             </H1>
             <H5 className="mt-8 text-lg text-gray-600">
-              Build and run mission-critical workloads on distributed compute, encrypted networking, and sovereign AI orchestration without centralized gatekeepers.
+              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
-                to="#"
                 variant="solid"
                 className=""
                 color="cyan"
+                onClick={onGetStartedClick}
               >
-                Get started
+                 Start Hosting 
               </Button>
               <Button to="#" variant="outline">
-                Explore Docs <span aria-hidden="true"> →</span>
+                Deploy in Cloud <span aria-hidden="true"> →</span>
               </Button>
             </div>
           </div>

src/pages/home/HomeBenefits.tsx

@@ -8,27 +8,28 @@ import { H2, P, CP, Eyebrow } from '@/components/Texts'
 export function HomeBenefits() {
   const features = [
     {
-      title: "Sovereign",
+      title: "Unbreakable by Design",
       description:
-        "Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
-      image: "/images/benefits/sovereign.webp",
-    },
-    {
-      title: "Autonomous",
-      description:
-        "The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything.",
-      image: "/images/benefits/autonomous.webp",
-    },
-    {
-      title: "Energy Efficient",
-      description:
-        "Built on distributed nodes designed for minimal energy use, it redefines sustainability without compromising performance.",
+        "No central cloud to censor or fail. The network heals itself.",
       image: "/images/benefits/energy.webp",
     },
     {
-      title: "Cost Efficient",
+      title: "Sovereign by Default",
       description:
-        "No middlemen. No inflated bills. Just pure compute power at a fraction of traditional cloud costs — optimized, transparent, and fair.",
+        "Identity, compute, and data belong to you – cryptographically.",
+      image: "/images/benefits/sovereign.webp",
+    },
+    {
+      title: "Hackable & Open",
+      description:
+        "Learn, build, and experiment without permission.",
+      image: "/images/benefits/autonomous.webp",
+    },
+ 
+    {
+      title: "Cost & Energy Efficient",
+      description:
+        "Distributed hardware eliminates hyperscale overhead.",
       image: "/images/benefits/cost.webp",
     },
   ];
@@ -39,7 +40,7 @@ export function HomeBenefits() {
          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">

src/pages/home/HomeComparisonTable.tsx

@@ -0,0 +1,60 @@
+import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline'
+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" /> },
+  { name: 'Data Stays Local & Encrypted', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Private AI & LLMs on Your Own Hardware', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Self-Healing, No Single Point of Failure', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Zero-Trust, Cryptographic Identity', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Censorship-Resistant', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Standard Tooling (Kube, S3, Agents)', cloud: <CheckIcon className="h-6 w-6 text-green-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Vendor Lock-In', cloud: <CheckIcon className="h-6 w-6 text-red-500" />, mycelium: <XMarkIcon className="h-6 w-6 text-red-500" /> },
+  { name: 'One-Time Hardware Cost (No Rent Forever)', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+]
+
+export function HomeComparisonTable() {
+  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-6xl lg:px-8">
+        <Eyebrow>COMPARISON</Eyebrow>
+        <H3 className="mt-2">Why People Choose Mycelium</H3>
+        <P className="mx-auto mt-5 max-w-prose">
+          Mycelium brings cloud-grade automation to infrastructure you control — without surrendering data, identity,
+          or uptime to centralized platforms.
+        </P>
+
+        <div className="mt-16 overflow-x-auto">
+          <table className="mx-auto w-full max-w-5xl table-auto border-collapse text-left">
+            <thead className="bg-cyan-50/60">
+              <tr className="text-base font-semibold text-slate-700">
+                <th className="py-4 pl-3 text-left">Capability</th>
+                <th className="py-4 pl-3 text-left">Traditional Cloud</th>
+                <th className="py-4 pl-3 text-left">Mycelium</th>
+              </tr>
+            </thead>
+
+            <tbody className="divide-y divide-slate-200">
+              {features.map((feature) => (
+                <tr key={feature.name}>
+                  <td className="py-3 pl-3">
+                    <CT>{feature.name}</CT>
+                  </td>
+
+                  <td className="py-3 pl-3">
+                    {feature.cloud}
+                  </td>
+
+                  <td className="py-3 pl-3">
+                    {feature.mycelium}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+      </div>
+    </div>
+  )
+}

src/pages/home/HomeGlobe.tsx

@@ -4,7 +4,7 @@ import { Globe } from "@/components/ui/Globe"
 import { motion } from "framer-motion"
 import { P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
 import { CountUpNumber } from '@/components/CountUpNumber'
-import { MagicCard } from '@/components/magicui/magic-card'
+import { DarkCard } from "@/components/ui/cards";
 
 export function WorldMap() {
   return (
@@ -65,16 +65,13 @@ export function WorldMap() {
               transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
               className="lg:absolute lg:top-12 lg:-left-12 w-80"
             >
-              <MagicCard
-                gradientColor="#334155"
-                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
-              >
+              <DarkCard>
                 <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">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>
                 <CP color="light" className="mt-2 text-sm">
                   Total Central Processing Unit Cores available on the grid.
                 </CP>
-              </MagicCard>
+              </DarkCard>
             </motion.div>
 
             <motion.div
@@ -84,16 +81,13 @@ export function WorldMap() {
               transition={{ duration: 0.5, delay: 0.5, ease: "easeOut" }}
               className="lg:absolute lg:-top-10 lg:right-0 w-80"
             >
-              <MagicCard
-                gradientColor="#334155"
-                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
-              >
+              <DarkCard>
                 <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">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>
                 <CP color="light" className="mt-2 text-sm">
                   Total number of nodes on the grid.
                 </CP>
-              </MagicCard>
+              </DarkCard>
             </motion.div>
 
             <motion.div
@@ -103,16 +97,13 @@ export function WorldMap() {
               transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
               className="lg:absolute lg:bottom-28 lg:-left-12 w-80"
             >
-              <MagicCard
-                gradientColor="#334155"
-                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
-              >
+              <DarkCard>
                 <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">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>
                 <CP color="light" className="mt-2 text-sm">
                   Total GB amount of storage (SSD, HDD, & RAM) on the grid.
                 </CP>
-              </MagicCard>
+              </DarkCard>
             </motion.div>
 
             <motion.div
@@ -122,16 +113,13 @@ export function WorldMap() {
               transition={{ duration: 0.5, delay: 0.7, ease: "easeOut" }}
               className="lg:absolute lg:top-47 lg:right-0 w-80"
             >
-              <MagicCard
-                gradientColor="#334155"
-                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
-              >
+              <DarkCard>
                 <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">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>
                 <CP color="light" className="mt-2 text-sm">
                   Total number of countries with active nodes.
                 </CP>
-              </MagicCard>
+              </DarkCard>
             </motion.div>
           </div>
         </div>

src/pages/home/HomeHosting.tsx

@@ -0,0 +1,65 @@
+import {
+  ArrowPathIcon,
+  CloudArrowUpIcon,
+  ServerIcon,
+  ShieldCheckIcon,
+} from '@heroicons/react/24/outline'
+import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+
+const features = [
+  {
+    name: 'Kubernetes Clusters',
+    description: 'Deploy and scale containerized apps across your own hardware.',
+    icon: ServerIcon,
+  },
+  {
+    name: 'AI Agents & LLM Runtimes',
+    description: 'Run open-source models locally, securely, and offline.',
+    icon: ArrowPathIcon,
+  },
+  {
+    name: 'S3-Compatible Storage',
+    description: 'Your own personal over-the-network drive, encrypted end-to-end.',
+    icon: CloudArrowUpIcon,
+  },
+  {
+    name: 'Mesh VPN & Zero-Trust Networking',
+    description: 'Securely connect all your devices and remote locations.',
+    icon: ShieldCheckIcon,
+  },
+]
+
+export function HomeHosting() {
+  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>
+        <H3 className="mt-2">Run Real Infrastructure on Your Own Hardware</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) => (
+              <div key={feature.name} className="relative">
+                <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">
+                  <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-indigo-500 p-3 shadow-lg">
+                    <feature.icon aria-hidden="true" className="size-8 text-white" />
+                  </span>
+                  <CT as="h3" className="mt-4">
+                    {feature.name}
+                  </CT>
+                  <CP color="secondary" className="mt-4">
+                    {feature.description}
+                  </CP>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/home/HomeHostingDark.tsx

@@ -0,0 +1,64 @@
+import {
+  CpuChipIcon,
+  CubeIcon,
+  CircleStackIcon,
+  LockClosedIcon,
+} from '@heroicons/react/24/outline'
+import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+import { DarkCard } from '../../components/ui/cards'
+
+const features = [
+  {
+    name: 'Kubernetes Clusters',
+    description: 'Deploy and scale containerized apps across your own hardware. enabling a world of possibilities..',
+    icon: CubeIcon,
+  },
+  {
+    name: 'AI Agents & LLM Runtimes',
+    description: 'Run open-source models locally, securely, and offline.',
+    icon: CpuChipIcon,
+  },
+  {
+    name: 'S3-Compatible Storage',
+    description: 'Your own personal over-the-network drive, encrypted end-to-end.',
+    icon: CircleStackIcon,
+  },
+  {
+    name: 'Mesh VPN & Zero-Trust Networking',
+    description: 'Securely connect all your devices and remote locations.',
+    icon: LockClosedIcon,
+  },
+]
+
+export function HomeHostingDark() {
+  return (
+    <div className="relative py-24 bg-[#111111] 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>
+        <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">
+          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>
+        <div className="mt-16">
+          <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
+            {features.map((feature) => (
+              <div key={feature.name} className="relative">
+                <DarkCard className="flex h-full flex-col pt-16">
+                  <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-600 hover:bg-cyan-500 p-3 shadow-lg">
+                    <feature.icon aria-hidden="true" className="size-8 text-white" />
+                  </span>
+                  <CT as="h3" className="mt-4 text-gray-200">
+                    {feature.name}
+                  </CT>
+                  <CP color="secondary" className="mt-4 text-gray-400">
+                    {feature.description}
+                  </CP>
+                </DarkCard>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/home/HomePage.tsx

@@ -1,3 +1,4 @@
+import { useRef } from 'react'
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { HomeAurora } from './HomeAurora'
 import { StackSectionLight } from './StackSection'
@@ -5,25 +6,35 @@ import { WorldMap } from './HomeGlobe'
 import { HomeBenefits } from './HomeBenefits'
 import { CallToAction } from './CallToAction'
 import { HomeSlider } from './HomeSlider'
+import { HomeHostingDark } from './HomeHostingDark'
+import { HomeComparisonTable } from './HomeComparisonTable'
 
 
 export default function HomePage() {
+  const sliderRef = useRef<HTMLDivElement>(null)
+
+  const handleScrollToSlider = () => {
+    sliderRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
   return (
     <div>
       <AnimatedSection>
-        <HomeAurora />
+        <HomeAurora onGetStartedClick={handleScrollToSlider} />
       </AnimatedSection>
 
       <AnimatedSection id="next-section">
         <WorldMap />
       </AnimatedSection>
 
+      <AnimatedSection>
+        <HomeHostingDark   />
+      </AnimatedSection>
+
       <AnimatedSection>
         <StackSectionLight />
       </AnimatedSection>
 
-
-      <AnimatedSection>
+      <AnimatedSection ref={sliderRef}>
         <HomeSlider />
       </AnimatedSection>
 
@@ -31,6 +42,10 @@ export default function HomePage() {
        <HomeBenefits />
       </AnimatedSection>
       
+      <AnimatedSection>
+        <HomeComparisonTable />
+      </AnimatedSection>
+
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/home/HomeSlider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Carousel, Card } from "@/components/ui/apple-cards-carousel";
-import { H3, P } from "@/components/Texts";
+import { H3, P , Eyebrow} from "@/components/Texts";
 
 export function HomeSlider() {
   const cards = data.map((card) => (
@@ -9,14 +9,17 @@ export function HomeSlider() {
   ));
 
   return (
-    <div className="w-full h-full py-20 bg-[#0b0b0b]">
+    <div className="w-full h-full py-20 bg-[#111111]">
       <div className="max-w-7xl mx-auto pl-4">
+        <Eyebrow className="text-left">
+          Ecosystem
+        </Eyebrow>
         <H3 className="text-left text-white">
-          Discover the Mycelium Ecosystem
+          Discover 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 work together to empower users, developers, and organizations to build freely, without intermediaries.
+            From compute and networking to Agents, these components  can be used on its own or combined into a fully sovereign cloud.
           </P>
         </div>
       </div>
@@ -29,58 +32,39 @@ export function HomeSlider() {
 import networkImage from "/images/pages/network.webp";
 import agentImage from "/images/pages/agent.webp";
 import cloudImage from "/images/pages/cloud.webp";
-import gpuImage from "/images/pages/gpu.webp";
 import computeImage from "/images/pages/compute.webp";
-import storageImage from "/images/pages/storage.webp";
 
 const data = [
+    {
+    category: "Resources",
+    title: "Compute / Storage / GPU",
+    description: "The resource layers powering the stack.",
+    src: "/images/pages/compute.png",
+    bg: computeImage,
+    link: "/compute",
+  },
+  {
+    category: "Cloud",
+    title: "Mycelium Cloud",
+    description: "Deploy Kubernetes clusters on sovereign infrastructure.",
+    src: "/images/pages/cloud.png",
+    bg: cloudImage,
+    link: "/cloud",
+  },
   {
     category: "DePIN",
     title: "Mycelium Network",
-    description: "A decentralized network for distributed computing.",
-    src: "/images/gallery/9.webp",
+    description: "Encrypted peer-to-peer mesh networking across the globe.",
+    src: "/images/pages/network.png",
     bg: networkImage,
     link: "/network",
   },
   {
     category: "AI Agent",
-    title: "Mycelium Agent",
-    description: "An intelligent agent for task automation.",
-    src: "/images/gallery/2.webp",
+    title: "Mycelium Agents",
+    description: "Private, programmable AI systems that run on your hardware.",
+    src: "/images/pages/agent.png",
     bg: agentImage,
     link: "/agent",
   },
-  {
-    category: "Cloud",
-    title: "Mycelium Cloud",
-    description: "Decentralized cloud storage and services.",
-    src: "/images/gallery/3.webp",
-    bg: cloudImage,
-    link: "/cloud",
-  },
-
-  {
-    category: "GPU",
-    title: "Mycelium GPU",
-    description: "Access to a global network of GPUs.",
-    src: "/images/gallery/4.webp",
-    bg: gpuImage,
-    link: "/gpu",
-  },
-  {
-    category: "Compute",
-    title: "Mycelium Compute",
-    description: "Run computations on a distributed network.",
-    src: "/images/gallery/5.webp",
-    bg: computeImage,
-    link: "/compute",
-  },
-  {
-    category: "Storage",
-    title: "Mycelium Storage",
-    description: "Secure and decentralized data storage.",
-    src: "/images/gallery/6.webp",
-    bg: storageImage,
-    link: "/storage",
-  },
 ];

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
-              ecosystem that preserves data sovereignty, powers seamless collaboration,
-              and keeps every layer of your infrastructure secure end to end on decentralized infrastructure.
+              Mycelium unifies compute, storage, networking, and AI into a self-governing comprehensive decentralized infrastructure fabric.
             </P>
           </FadeIn>
         </div>

src/pages/storage/CallToAction.tsx

@@ -14,12 +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 storage into your stack.
+            Choose How You Want to Start
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Partner with the Mycelium team to design quantum-safe, compliant
-            storage that meets your residency, redundancy, and performance
-            requirements across the globe.
+            Store data in your Mycelium Cloud environment 
+or host your own node for full sovereignty.
+
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <Button
@@ -30,7 +30,7 @@ export function CallToAction() {
               target="_blank"
               rel="noreferrer"
             >
-              Talk to our team
+              Use Storage in Cloud
             </Button>
             <Button
               to="#storage-developer-experience"
@@ -38,7 +38,7 @@ export function CallToAction() {
               variant="outline"
               color="white"
             >
-              Explore developer workflow
+              Host a Node
             </Button>
           </div>
         </div>

src/pages/storage/StorageArchitecture.tsx

@@ -3,48 +3,17 @@ import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
 const architecture = [
   {
-    title: 'Quantum-Safe Data Protection',
-    description:
-      'Post-quantum encryption and cryptographic verification protect every storage operation end-to-end.',
-    bullets: [
-      'Algorithms selected to resist quantum computing attacks.',
-      'Protection applied beneath the application layer.',
-      'All writes and reads verified cryptographically.',
-      'Future-proof design for long-lived data sets.',
-    ],
+    title: 'Encrypted Storage Substrate',
+    description: 'Keeps data private and verifiable.',
   },
   {
-    title: 'Autonomous Self-Healing',
-    description:
-      'Storage monitors itself, heals corruption, and restores replicas without human intervention.',
-    bullets: [
-      'Continuous detection of failures or anomalies.',
-      'Instant recovery without service interruption.',
-      'Integrity checks keep replicas in lockstep.',
-      '24/7 autonomy removes the pager from the loop.',
-    ],
+    title: 'Mesh Routing Layer',
+    description: 'Connects clients and workloads securely, anywhere.',
   },
   {
-    title: 'Multi-Protocol Fabric',
+    title: 'Protocol Gateway Layer',
     description:
-      'A single data plane serves every protocol so workloads can mix and migrate freely.',
-    bullets: [
-      'Protocol adapters sit in front of the same storage core.',
-      'Applications choose the protocol that fits their workflow.',
-      'No data duplication needed to support multiple interfaces.',
-      'Consistent governance across all access patterns.',
-    ],
-  },
-  {
-    title: 'Geo-Aware Data Governance',
-    description:
-      'Data placement policies enforce sovereignty, redundancy, and compliance requirements.',
-    bullets: [
-      'Pin workloads to specific jurisdictions or providers.',
-      'Define redundancy at the dataset or workload level.',
-      'Automatic zone-to-zone replication hardens resilience.',
-      'Global distribution optimized across the ThreeFold Grid.',
-    ],
+      'Serve the same dataset over S3, IPFS, WebDAV, or HTTP.',
   },
 ]
 
@@ -53,41 +22,29 @@ export function StorageArchitecture() {
     <section className="bg-gray-50 py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
-            Technical Architecture
-          </Eyebrow>
+          <Eyebrow>ARCHITECTURE</Eyebrow>
           <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Autonomous governance for planetary-scale storage.
+            HOW IT WORKS
           </SectionHeader>
           <P className="mt-6 text-gray-600">
-            The Mycelium Storage data plane is designed to protect data at the
-            cryptographic layer, operate without manual intervention, and meet
-            jurisdictional requirements anywhere in the world.
+            A layered design that encrypts, routes, and exposes storage through
+            multiple protocols — without duplicating data or compromising
+            sovereignty.
           </P>
         </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+
+        <div className="mx-auto mt-16 max-w-4xl space-y-6">
           {architecture.map((item) => (
             <div
               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">
                 {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">
                 {item.description}
               </p>
-              <ul className="mt-6 space-y-3 text-sm text-gray-600">
-                {item.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/storage/StorageCapabilities.tsx

@@ -0,0 +1,64 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
+import {
+  ServerStackIcon,
+  GlobeAltIcon,
+  FolderOpenIcon,
+  LockClosedIcon,
+} from '@heroicons/react/24/solid'
+
+const capabilities = [
+  {
+    name: 'S3-Compatible Object Storage',
+    description: 'Works with existing SDKs & tooling.',
+    icon: ServerStackIcon,
+  },
+  {
+    name: 'IPFS & Content-Addressed Access',
+    description: 'Ideal for distributed and decentralized workloads.',
+    icon: GlobeAltIcon,
+  },
+  {
+    name: 'Filesystem Mounts (WebDAV / POSIX)',
+    description: 'Mount storage directly into workflows and apps.',
+    icon: FolderOpenIcon,
+  },
+  {
+    name: 'Encrypted Replication & Placement Control',
+    description: 'Choose where data physically lives – and who controls it.',
+    icon: LockClosedIcon,
+  },
+]
+
+export  function StorageCapabilities() {
+  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 Use Mycelium Storage For
+          </H3>
+          <P className="mt-6 text-gray-600">
+            A decentralized storage layer built for sovereign workloads — secure,
+            flexible, and globally addressable.
+          </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-4">
+            {capabilities.map((item) => (
+              <div key={item.name} className="text-center">
+                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
+                  <item.icon className="size-6 text-cyan-600" aria-hidden="true" />
+                </div>
+                <CT className="mt-6 text-gray-900">{item.name}</CT>
+                <CP className="mt-2 text-gray-600">{item.description}</CP>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/storage/StorageDesign.tsx

@@ -0,0 +1,60 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, H3, P, CT } from '../../components/Texts'
+import {
+  LockClosedIcon,
+  ArrowPathIcon,
+  GlobeAsiaAustraliaIcon,
+} from '@heroicons/react/24/solid'
+
+const benefits = [
+  {
+    name: 'Encrypted and verifiable at rest and in motion',
+    icon: LockClosedIcon,
+  },
+  {
+    name: 'Self-healing replication and integrity checks',
+    icon: ArrowPathIcon,
+  },
+  {
+    name: 'Residency + governance policies you actually control',
+    icon: GlobeAsiaAustraliaIcon,
+  },
+]
+
+export function StorageDesign() {
+  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">
+            Sovereign Storage That Heals Itself
+          </H3>
+          <P className="mt-6 text-gray-600">
+            Mycelium Storage continuously verifies integrity and restores
+            replicas automatically, so data stays available without operational
+            overhead.
+          </P>
+        </div>
+
+        {/* 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-3">
+            {benefits.map((benefit) => (
+              <div key={benefit.name} className="relative pl-12">
+                <benefit.icon
+                  aria-hidden="true"
+                  className="absolute left-0 top-1 size-6 text-cyan-600"
+                />
+                <CT className="font-semibold text-gray-900">
+                  {benefit.name}
+                </CT>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/storage/StorageFeatures.tsx

@@ -64,7 +64,7 @@ export function StorageFeatures() {
     <section id="storage-features" className="bg-white py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+          <Eyebrow>
             Core Features
           </Eyebrow>
           <SectionHeader as="h2" className="mt-6 text-gray-900">

src/pages/storage/StorageHero.tsx

@@ -9,30 +9,25 @@ export function StorageHero() {
       <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
         <img
           alt="Mycelium Storage visual"
-          src="/images/storage4.png"
-          className="size-full object-cover"
+          src="/images/computehero11.webp"
+          className="size-full object-contain"
         />
       </div>
-      <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
+      <div className="relative mx-auto max-w-7xl py-24 lg: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="tracking-[0.35em] uppercase text-cyan-500">
             Mycelium Storage
           </Eyebrow>
           <SectionHeader as="h1" className="mt-4 text-gray-900">
-            Quantum-safe, sovereign data plane for every workload.
+            Sovereign Storage With Self-Healing and Multi-Protocol Access
           </SectionHeader>
           <P className="mt-6 text-gray-600">
-            Mycelium Storage delivers quantum-resistant protection, autonomous
-            recovery, and multi-protocol access across the ThreeFold Grid. Place
-            data exactly where you need it while keeping ownership entirely in
-            your hands.
-          </P>
-          <P className="mt-4 text-gray-500">
-            Quantum-safe. Self-healing. Universally accessible.
+            Store, replicate, and serve data across the global mesh
+with encrypted, quantum safe, verifiable storage you control at the infrastructure layer.
           </P>
           <div className="mt-10 flex flex-wrap gap-4">
             <Button to="#storage-features" as="a" variant="solid" color="cyan">
-              Explore Features
+             How It Works 
             </Button>
             <Button
               to="#storage-developer-experience"
@@ -40,7 +35,7 @@ export function StorageHero() {
               variant="outline"
               color="cyan"
             >
-              View Developer Flow
+              Explore Docs
             </Button>
           </div>
         </div>

src/pages/storage/StorageOverview.tsx

@@ -4,21 +4,21 @@ import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 const highlights = [
   {
     label: 'Overview',
-    title: 'Quantum-safe, sovereign data management',
+    title: 'Encrypted & Verifiable Storage',
     description:
-      'Mycelium Storage protects data beyond the application layer with autonomous recovery and geo-aware placement across the ThreeFold Grid.',
+      'Data is secured with cryptographic identity, not cloud trust.',
   },
   {
     label: 'Core Concept',
-    title: 'Unified data plane across every protocol',
+    title: 'Self-Healing Replication',
     description:
-      'Serve the same dataset via IPFS, S3, WebDAV, HTTP, or native file systems while maintaining complete control over residency and redundancy.',
+      'The system repairs corruption and restores replicas automatically.',
   },
   {
     label: 'Outcome',
-    title: 'Ownership without compromise',
+    title: 'Multi-Protocol Access',
     description:
-      'Quantum-resistant encryption, self-healing recovery, and programmable governance ensure data remains verifiable, available, and compliant.',
+      'Serve the same dataset over S3, IPFS, or filesystem mounts, without duplicating data.',
   },
 ]
 
@@ -31,7 +31,7 @@ export function StorageOverview() {
             Platform Overview
           </Eyebrow>
           <SectionHeader as="h2" color="light" className="mt-6 font-medium">
-            A quantum-safe data plane that heals itself.
+            Core Features
           </SectionHeader>
           <P color="lightSecondary" className="mt-6">
             Built on sovereign infrastructure, Mycelium Storage keeps data
@@ -43,11 +43,11 @@ export function StorageOverview() {
           {highlights.map((item) => (
             <div
               key={item.title}
-              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="group relative overflow-hidden 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"
             >
-              <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="absolute inset-0 bg-linear-to-br from-cyan-500/0 via-white/5 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">
+                <Small className="text-xs uppercase tracking-[0.16em] text-cyan-200">
                   {item.label}
                 </Small>
                 <h3 className="mt-4 text-lg font-semibold text-white">

src/pages/storage/StoragePage.tsx

@@ -1,12 +1,11 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { StorageHero } from './StorageHero'
 import { StorageOverview } from './StorageOverview'
-import { StorageFeatures } from './StorageFeatures'
 import { StorageArchitecture } from './StorageArchitecture'
-import { StorageDeveloperExperience } from './StorageDeveloperExperience'
 import { StorageUseCases } from './StorageUseCases'
-import { StorageDifferentiators } from './StorageDifferentiators'
 import { CallToAction } from './CallToAction'
+import { StorageCapabilities } from './StorageCapabilities'
+import { StorageDesign } from './StorageDesign'
 
 export default function StoragePage() {
   return (
@@ -14,24 +13,27 @@ export default function StoragePage() {
       <AnimatedSection>
         <StorageHero />
       </AnimatedSection>
+
       <AnimatedSection>
-        <StorageOverview />
+        <StorageCapabilities />
       </AnimatedSection>
+
       <AnimatedSection>
-        <StorageFeatures />
+        <StorageDesign />
       </AnimatedSection>
+
       <AnimatedSection>
         <StorageArchitecture />
       </AnimatedSection>
+      
       <AnimatedSection>
-        <StorageDeveloperExperience />
+        <StorageOverview />
       </AnimatedSection>
+
       <AnimatedSection>
         <StorageUseCases />
       </AnimatedSection>
-      <AnimatedSection>
-        <StorageDifferentiators />
-      </AnimatedSection>
+
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/storage/StorageUseCases.tsx

@@ -1,81 +1,19 @@
 import { Container } from '../../components/Container'
 import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
-const primaryUseCases = [
+const storageUseCases = [
   {
-    title: 'Data Sovereignty Applications',
-    bullets: [
-      'Privacy-first products with full control over data location.',
-      'Regulatory compliance for regional or industry mandates.',
-      'Enterprise workloads that demand audit-ready governance.',
-      'DigitalMe applications hosted with complete data ownership.',
-    ],
+    title: 'Data Sovereignty & Compliance',
+    description: 'Keep data under your control, choose residency per dataset.',
   },
   {
-    title: 'Multi-Protocol Applications',
-    bullets: [
-      'Support legacy S3, WebDAV, and HTTP workloads simultaneously.',
-      'Enable hybrid architectures that mix centralized and decentralized access.',
-      'Give developers freedom to choose best-fit protocols per service.',
-      'Simplify migrations by keeping data accessible through multiple APIs.',
-    ],
-  },
-  {
-    title: 'Backup and Recovery',
-    bullets: [
-      'Autonomous backups with continuous verification.',
-      'Cross-zone replication that survives regional outages.',
-      'Integrity monitoring that spots corruption immediately.',
-      'Instant recovery from failures without manual restore steps.',
-    ],
+    title: 'Distributed Application Storage',
+    description: 'Serve data to services, agents, clusters, or edge workloads.',
   },
   {
     title: 'Content Distribution',
-    bullets: [
-      'Global CDN leveraging the breadth of the ThreeFold Grid.',
-      'IPFS integration for decentralized content addressing.',
-      'Serve the same assets over HTTP, S3, or WebDAV.',
-      'Geo-optimized placement keeps content close to users.',
-    ],
-  },
-]
-
-const storageSpecificUseCases = [
-  {
-    title: 'Data Sovereignty & Compliance',
-    bullets: [
-      'Guarantee residency in specific jurisdictions.',
-      'Protect personal or regulated data with audit trails.',
-      'Empower enterprises with region-specific governance.',
-      'Handle cross-border rules without duplicating datasets.',
-    ],
-  },
-  {
-    title: 'Multi-Protocol Data Solutions',
-    bullets: [
-      'Bridge legacy S3 tooling with decentralized IPFS access.',
-      'Offer WebDAV and HTTP endpoints for collaboration suites.',
-      'Blend centralized and decentralized patterns as needed.',
-      'Let developers change protocols without rewriting storage.',
-    ],
-  },
-  {
-    title: 'Autonomous Backup & Recovery',
-    bullets: [
-      'Self-healing backups that maintain integrity automatically.',
-      'Zone-aware replication delivers geographic redundancy.',
-      'Instant recovery with continuous verification.',
-      'Keeps backups up-to-date without operator intervention.',
-    ],
-  },
-  {
-    title: 'Content Distribution & CDN',
-    bullets: [
-      'Distribute media and assets across a planetary mesh.',
-      'Use IPFS for decentralized caching and retrieval.',
-      'Serve identical content across multiple access protocols.',
-      'Geo-optimize placement for latency-sensitive workloads.',
-    ],
+    description:
+      'Serve public or private assets globally, without centralized hosting.',
   },
 ]
 
@@ -84,71 +22,32 @@ export function StorageUseCases() {
     <section className="bg-white py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
-            Use Cases
-          </Eyebrow>
+          <Eyebrow>USE CASES</Eyebrow>
           <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Sovereign storage for every data-intensive workload.
+            Built for Real Data Workloads
           </SectionHeader>
           <P className="mt-6 text-gray-600">
             Mycelium Storage adapts to compliance-driven enterprise data,
-            decentralized content distribution, and everything in between.
-            Choose the pattern that fits your strategy without sacrificing
-            ownership.
+            distributed application workloads, and global asset delivery
+            — without giving up sovereignty.
           </P>
         </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
-          {primaryUseCases.map((useCase) => (
+
+        <div className="mx-auto mt-16 max-w-4xl space-y-6">
+          {storageUseCases.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>
-              <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>
-        <div className="mt-16 rounded-3xl border border-slate-200 bg-slate-50 p-10 shadow-sm">
-          <h3 className="text-2xl font-semibold text-gray-900">
-            Storage-Specific Scenarios
-          </h3>
-          <p className="mt-4 text-sm leading-relaxed text-gray-600">
-            These patterns highlight how Mycelium Storage keeps sovereignty,
-            protocol flexibility, and resilience at the center of data strategy.
+              <p className="mt-3 text-sm leading-relaxed text-gray-600">
+                {useCase.description}
               </p>
-          <div className="mt-10 grid gap-8 lg:grid-cols-2">
-            {storageSpecificUseCases.map((useCase) => (
-              <div
-                key={useCase.title}
-                className="rounded-3xl border border-cyan-100 bg-white p-6 leading-relaxed text-gray-600"
-              >
-                <h4 className="text-lg font-semibold text-gray-900">
-                  {useCase.title}
-                </h4>
-                <ul className="mt-4 space-y-3 text-sm">
-                  {useCase.bullets.map((bullet) => (
-                    <li key={bullet} className="flex gap-3">
-                      <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
-                      <span>{bullet}</span>
-                    </li>
-                  ))}
-                </ul>
             </div>
           ))}
         </div>
-        </div>
       </Container>
     </section>
   )