refactor: adjust network page styling and typography

- Changed heading levels from H3 to H4 in NetworkCapabilities for better hierarchy
- Updated PrimaryFeatures section with darker background and consistent border styling
- Removed text-lg class from paragraph for standard sizing

src/pages/compute/ComputeArchitecture.tsx

@@ -65,12 +65,12 @@ export function ComputeArchitecture() {
           {deterministicCards.map((card) => (
             <div
               key={card.id}
-              className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102`}
+              className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
             >
               {/* ✅ Disable wrapper on first card */}
               {!card.noBorder && (
                 <div
-                  className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111212] ${card.rounded}`}
+                  className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111212] ${card.rounded} group-hover:bg-linear-to-br from-gray-900 to-gray-800`}
                 />
               )}
 

src/pages/compute/ComputeCodeTabs.tsx

@@ -64,7 +64,7 @@ export function ComputeCodeTabs() {
 
   return (
     <div className="sm:px-6 lg:px-0">
-      <div className="relative isolate overflow-hidden bg-cyan-600 px-6 pt-8 sm:mx-auto sm:max-w-2xl sm:rounded-3xl sm:pt-16 sm:pr-0 sm:pl-16 lg:mx-0 lg:max-w-none">
+      <div className="relative isolate overflow-hidden bg-cyan-600 px-6 pt-8 sm:mx-auto sm:max-w-2xl sm:rounded-md sm:pt-16 sm:pr-0 sm:pl-16 lg:mx-0 lg:max-w-none">
 
         <div
           aria-hidden="true"

src/pages/compute/ComputeOverview.tsx

@@ -50,7 +50,7 @@ export function ComputeOverview() {
             Deterministic compute fabric for autonomous workloads.
           </SectionHeader>
 
-          <P color="secondary" className="mt-6 text-gray-600">
+          <P color="secondary" className="mt-4 text-gray-600">
             Mycelium Compute delivers predictable, sovereign performance—free
             from lock-in and drift. Deploy any workload with cryptographic
             precision, knowing the platform verifies, scales, and heals itself
@@ -63,7 +63,7 @@ export function ComputeOverview() {
         </div>
 
         {/* ✅ Light Mode Cards */}
-        <div className="mt-16 grid gap-6 lg:grid-cols-2">
+        <div className="mt-12 grid gap-6 lg:grid-cols-2">
           {overviewCards.map((card) => (
             <div
               key={card.title}

src/pages/compute/ComputeUseCases.tsx

@@ -67,9 +67,9 @@ export function ComputeUseCases() {
   const current = tabs.find((t) => t.id === active)!;
 
   return (
-    <section className="relative w-full bg-[#171717] overflow-hidden">
+    <section className="relative w-full bg-[#121212] overflow-hidden">
        {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
       <div className="w-full border-t border-l border-r border-gray-800" />
 
       <div className="max-w-7xl mx-auto px-6 lg:px-8 py-12 border border-t-0 border-b-0 border-gray-800 bg-[#111111] overflow-hidden">

src/pages/network/Features.tsx

@@ -3,27 +3,32 @@ import MessageBus from './animations/MessageBus'
 import ProxyDetection from './animations/ProxyDetection'
 import ProxyForwarding from './animations/ProxyForwarding'
 import ContentDistribution from './animations/ContentDistribution'
+import { H2, P, H3, CT, CP, Eyebrow } from '@/components/Texts'
 
 export function Features() {
   return (
-    <section id="features" className="py-24">
-      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-        <h2 className="text-base/7 font-semibold text-cyan-500">Core Components</h2>
-        <p className="mt-2 max-w-2xl text-3xl lg:text-4xl font-medium tracking-tight text-pretty text-gray-950">
-          Network Capabilities
-        </p>
-        <p className="mt-4 max-w-4xl text-lg text-gray-600">
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
+      
+
+      {/* ✅ Top spacer + full-width line */}
+      <div className="max-w-7xl mx-auto py-6 border-x border-gray-100 bg-white border-t-0 border-b-0" />
+      <div className="w-full border-t border-l border-r border-gray-100" />
+
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl bg-white py-12 lg:px-10 border border-t-0 border-b-0 border-gray-100">
+        <Eyebrow>Core Components</Eyebrow>
+        <H3>Network Capabilities</H3>
+        <P className="mt-4 max-w-4xl text-lg text-gray-600">
           Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery.
-        </p>
-        <p className="mt-2 max-w-4xl text-lg text-gray-600">
+        </P>
+        <P className="mt-4 max-w-4xl text-lg text-gray-600">
           Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh.
-        </p>
-        <div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
+        </P>
+        <div className="mt-8 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
           <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
               <Pathfinding />
-              <div className="p-10 pt-4">
+              <div className="p-6 pt-4">
                 <h3 className="text-sm/4 font-semibold text-cyan-500">Routing</h3>
                 <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
                   Automatic pathfinding
@@ -40,7 +45,7 @@ export function Features() {
             <div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" />
             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
               <MessageBus />
-              <div className="p-10 pt-4">
+              <div className="p-6 pt-4">
                 <h3 className="text-sm/4 font-semibold text-cyan-500">Communication</h3>
                 <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
                   Distributed message bus
@@ -57,7 +62,7 @@ export function Features() {
             <div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" />
             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
               <ProxyDetection className="h-80" />
-              <div className="p-10 pt-4">
+              <div className="p-6 pt-4">
                 <h3 className="text-sm/4 font-semibold text-cyan-500">Discovery</h3>
                 <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
                   Automatic proxy detection
@@ -74,7 +79,7 @@ export function Features() {
             <div className="absolute inset-0 rounded-lg bg-white" />
             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
               <ProxyForwarding className="h-80" />
-              <div className="p-10 pt-4">
+              <div className="p-6 pt-4">
                 <h3 className="text-sm/4 font-semibold text-cyan-500">Connectivity</h3>
                 <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
                   Seamless proxy forwarding
@@ -91,7 +96,7 @@ export function Features() {
             <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" />
             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
               <ContentDistribution className="h-80" />
-              <div className="p-10 pt-4">
+              <div className="p-6 pt-4">
                 <h3 className="text-sm/4 font-semibold text-cyan-500">Delivery</h3>
                 <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
                   Decentralized content distribution
@@ -106,6 +111,9 @@ export function Features() {
           </div>
         </div>
       </div>
+       {/* ✅ Bottom full-width line + spacer */}
+      <div className="w-full border-b border-gray-100" />
+      <div className="max-w-7xl mx-auto py-6 border-x border-gray-100 border-t-0 border-b-0" />
     </section>
   )
 }

src/pages/network/Hero.tsx

@@ -2,6 +2,7 @@ import { useId } from 'react'
 import { Container } from '@/components/Container'
 import { Button } from '@/components/Button'
 import phoneFrame from '../../images/phoneframe.png'
+import { H3, Eyebrow, P, CT, CP } from "@/components/Texts";
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   let id = useId()
@@ -74,24 +75,24 @@ function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
 
 export function Hero() {
   return (
-    <div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
+    <div className="overflow-hidden pb-24 lg:py-12 mt-10 lg:pb-0 border border-t-0 border-b border-gray-100">
       <Container>
-        <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
+        <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20 px-6 lg:px-8">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-            <h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
+            <H3 className="mb-4">
               Mycelium Network
-            </h1>
-            <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
+            </H3>
+            <CT className="mt-8  font-medium text-gray-600 ">
               Encrypted Peer-to-Peer Connectivity Across the Globe
-            </h2>
-            <p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
+            </CT>
+            <P className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
               Mycelium Network provides an unbreakable sovereign IPv6 mesh that connects people, nodes, and applications directly, with no central servers. 
-            </p>
-            <p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
+            </P>
+            <P className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
               Works Alone. Works Together.
               Mycelium Network can be used standalone, or together with Mycelium Cloud
               for full-stack sovereignty.
-            </p>
+            </P>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
               <Button to="/download" variant="solid" color="cyan">
                 Get Mycelium Connector

src/pages/network/NetworkCapabilities.tsx

@@ -4,62 +4,94 @@ import {
   ArrowPathRoundedSquareIcon,
   NoSymbolIcon,
 } from '@heroicons/react/24/solid'
-import { Container } from '@/components/Container'
-import { Eyebrow, H3, P, CT, CP } from '@/components/Texts'
 
-const capabilities = [
-  {
-    name: 'End-to-End Encrypted Mesh',
-    description: 'Every packet is encrypted and routed peer-to-peer.',
-    icon: LockClosedIcon,
-  },
-  {
-    name: 'Global IPv6 Address Space',
-    description: 'Every node, app, and service gets its own private address.',
-    icon: GlobeAltIcon,
-  },
-  {
-    name: 'Self-Healing Routing',
-    description: 'Traffic automatically finds the fastest, most resilient path.',
-    icon: ArrowPathRoundedSquareIcon,
-  },
-  {
-    name: 'No Central Control',
-    description: 'No servers to trust, no middlemen, no corporate choke-points.',
-    icon: NoSymbolIcon,
-  },
-]
+import { Eyebrow, H4, P } from '@/components/Texts'
 
 export function NetworkCapabilities() {
   return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
+    <section className="w-full max-w-8xl mx-auto bg-[#121212]">
+
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      {/* ✅ Main content */}
+      <div className="mx-auto max-w-7xl px-6 bg-[#111111] lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-gray-800">
+        
+        {/* ✅ LEFT SIDE — Title + Intro */}
+        <div className="max-w-xl ">
           <Eyebrow>WHAT IT ENABLES</Eyebrow>
-          <H3 className="mt-4 text-gray-900">
+
+          <H4  className="mt-6 text-white">
             A Private Networking Layer for Everything You Run
-          </H3>
-          <P className="mt-6 text-gray-600">
+          </H4>
+
+          <P className="mt-6 text-gray-200">
             Mycelium Network is the backbone for secure, autonomous connectivity
-            across devices, data centers, clusters, and self-hosted environments,
-            anywhere in the world.
+            across devices, data centers, clusters, and self-hosted environments — anywhere in the world.
+          </P>
+
+          <P className="mt-3 text-lg text-gray-200">
+            Every node gets its own encrypted identity and address space, forming a
+            zero-trust mesh without any centralized controller.
           </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="flex flex-col 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" />
+        {/* ✅ RIGHT SIDE — 4 stacked features */}
+        <div className="space-y-8">
+
+          {/* 1 — Encrypted Mesh */}
+          <div>
+            <h3 className="text-lg font-semibold text-white flex items-center">
+              <LockClosedIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              End-to-End Encrypted Mesh
+            </h3>
+            <p className="mt-2 text-gray-200 max-w-2xl">
+              Every packet is encrypted and routed peer-to-peer — no intermediaries, no sniffing, no compromise.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-500/50" />
           </div>
-                <CT className="mt-6 text-gray-900">{item.name}</CT>
-                <CP className="mt-2 text-gray-600">{item.description}</CP>
+
+          {/* 2 — IPv6 Space */}
+          <div>
+            <h3 className="text-lg font-semibold text-white flex items-center">
+              <GlobeAltIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              Global IPv6 Address Space
+            </h3>
+            <p className="mt-2 text-gray-200 max-w-2xl">
+              Every node, app, and microservice gets an address — solving discovery, routing, and NAT issues forever.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-500/50" />
           </div>
-            ))}
-          </dl>
+
+          {/* 3 — Self-Healing Routing */}
+          <div>
+            <h3 className="text-lg font-semibold text-white flex items-center">
+              <ArrowPathRoundedSquareIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              Self-Healing Routing
+            </h3>
+            <p className="mt-2 text-gray-200 max-w-2xl">
+              Traffic automatically finds the fastest path, dynamically re-routing around failures or congestion.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-500/50" />
           </div>
-      </Container>
+
+          {/* 4 — No Central Control */}
+          <div>
+            <h3 className="text-lg font-semibold text-white flex items-center">
+              <NoSymbolIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              No Central Control
+            </h3>
+            <p className="mt-2 text-gray-200 max-w-2xl">
+              No servers to trust, no corporate choke points, and no authority that can turn you off.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
     </section>
   )
 }

src/pages/network/PrimaryFeatures.tsx

@@ -407,9 +407,12 @@ export function PrimaryFeatures() {
     <section
       id="howitworks"
       aria-label="Features for investing all your money"
-      className="bg-gray-900 py-20 sm:py-32"
+      className="bg-[#121212]"
     >
-      <Container>
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="w-full border-t border-l border-r border-gray-800" />
+      <Container className="pt-12 border border-t-0 border-b-0 border-gray-800">
         <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl ">
           <Eyebrow color="accent">How It Works</Eyebrow>
           <SectionHeader color="white" className="mt-2">
@@ -425,9 +428,12 @@ export function PrimaryFeatures() {
       <div className="mt-16 md:hidden">
         <FeaturesMobile />
       </div>
-      <Container className="hidden md:mt-20 md:block">
+      <Container className="hidden pt-12 pb-12 md:block border border-t-0 border-b-0 border-gray-800">
         <FeaturesDesktop />
       </Container>
+       {/* ✅ bottom border + bottom spacer to match */}
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
     </section>
   )
 }

src/pages/storage/StoragePage.tsx

@@ -2,10 +2,10 @@ import { AnimatedSection } from '../../components/AnimatedSection'
 import { StorageHero } from './StorageHero'
 import { StorageOverview } from './StorageOverview'
 import { StorageArchitecture } from './StorageArchitecture'
-import { StorageUseCases } from './StorageUseCases'
 import { CallToAction } from './CallToAction'
 import { StorageCapabilitiesNew } from './StorageCapabilitiesNew'
 import { StorageCoreValue } from './StorageCoreValue'
+import { StorageUseCasesNew } from './StorageUseCasesNew'
 
 export default function StoragePage() {
   return (
@@ -31,9 +31,10 @@ export default function StoragePage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <StorageUseCases />
+        <StorageUseCasesNew />
       </AnimatedSection>
 
+
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/storage/StorageUseCasesNew.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import { Eyebrow, H3, P } from "@/components/Texts";
+
+const tabs = [
+  {
+    id: "distributed",
+    label: "Distributed Application Storage",
+    content: [
+      {
+        item: "Application-native storage",
+        desc: "Serve data to services, agents, clusters, or edge workloads.",
+      },
+    ],
+  },
+  {
+    id: "sovereignty",
+    label: "Data Sovereignty & Compliance",
+    content: [
+      {
+        item: "Residency-aware storage",
+        desc: "Keep data under your control, choose residency per dataset.",
+      },
+    ],
+  },
+  {
+    id: "distribution",
+    label: "Content Distribution",
+    content: [
+      {
+        item: "Decentralized delivery",
+        desc: "Serve public or private assets globally, without centralized hosting.",
+      },
+    ],
+  },
+];
+
+export function StorageUseCasesNew() {
+  const [active, setActive] = useState("distributed");
+  const current = tabs.find((t) => t.id === active)!;
+
+  return (
+    <section className="relative w-full overflow-hidden">
+      
+      {/* Top lines */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-t border-l border-r border-gray-200" />
+
+      <div className="max-w-7xl mx-auto px-6 lg:px-8 py-12 border border-t-0 border-b-0 border-gray-200 bg-white overflow-hidden">
+
+        {/* ✅ Two columns: ALL TEXT LEFT, IMAGE RIGHT */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
+
+          {/* LEFT COLUMN: Full tab + content */}
+          <div className="w-full text-gray-900">
+            <Eyebrow color="accent">Use Cases</Eyebrow>
+            <H3>Built for Real Data Workloads</H3>
+            <P className="max-w-3xl text-gray-600 mt-4">
+              Mycelium Storage adapts to compliance-driven enterprise data, distributed application workloads,
+              and global asset delivery — without giving up sovereignty.
+            </P>
+            
+            {/* Tabs */}
+            <div className="flex gap-6 border-b border-gray-200 pb-2 overflow-x-auto mt-12">
+              {tabs.map((tab) => (
+                <button
+                  key={tab.id}
+                  onClick={() => setActive(tab.id)}
+                  className={`text-sm font-medium tracking-wide pb-2 whitespace-nowrap ${
+                    active === tab.id
+                      ? "border-b-2 border-cyan-500 text-gray-900"
+                      : "text-gray-500 hover:text-gray-900"
+                  }`}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+
+            {/* Content always stacked in a single column */}
+            <div className="mt-6 space-y-6">
+              {current.content.map((c, i) => (
+                <div key={i}>
+                  <p className="text-base font-medium text-gray-900">{c.item}</p>
+                  <p className="text-sm text-gray-600 leading-relaxed">{c.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* RIGHT COLUMN: Image */}
+          <div className="w-full">
+            <img
+              src="/images/testpic.png"
+              alt="Storage Illustration"
+              className="w-full h-auto rounded-xl border border-gray-200 object-cover"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom lines */}
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
+      <div className="w-full border-b border-gray-200" />
+    </section>
+  );
+}