diff --git a/public/videos/chip_vid.mp4 b/public/videos/chip_vid.mp4
deleted file mode 100644
index a5f4b13..0000000
Binary files a/public/videos/chip_vid.mp4 and /dev/null differ
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 895f37f..8518efd 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -22,10 +22,12 @@ export const Footer = () => {
       <div className="mx-auto flex w-full max-w-7xl flex-col gap-12 border-t border-white/10 pt-12 md:flex-row md:justify-between">
         <div className="space-y-3">
           <span className="text-xs font-bold uppercase tracking-[0.35em] text-white">
-            Geomind
+          Geomind
           </span>
-          <p className="max-w-sm text-xs font-medium uppercase tracking-[0.3em] text-white">
-            <span className="text-brand-400">Geomind.</span> The datacenter standard for the next era of cloud and AI.
+          <p className="max-w-m text-xs font-medium uppercase tracking-[0.3em] text-white">
+            The datacenter standard for 
+            <br />
+            the next era of cloud and AI.
           </p>
         </div>
         <nav className="grid grid-cols-2 gap-x-24 gap-y-4 text-xs font-medium uppercase tracking-[0.3em] text-white md:ml-auto self-start">
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 7d617bc..6fdf157 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -38,7 +38,12 @@ export const Header = () => {
           className="flex items-center"
           onClick={() => {
             if (location.pathname === '/') {
-              window.scrollTo({ top: 0, behavior: 'smooth' });
+              const mainElement = document.querySelector('main');
+              if (mainElement instanceof HTMLElement && typeof mainElement.scrollTo === 'function') {
+                mainElement.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+              } else {
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+              }
             }
           }}
         >
@@ -63,7 +68,6 @@ export const Header = () => {
                   return cn(
                     'text-sm font-semibold uppercase tracking-wide transition-colors duration-300 text-white hover:!text-brand-500 focus-visible:!text-brand-500',
                     (isActive || isHovered) && '!text-brand-500',
-                    isActive && hoveredNav && hoveredNav !== to && 'animate-blink !text-brand-500',
                   );
                 }}
               >
@@ -73,7 +77,7 @@ export const Header = () => {
           </nav>
           <button
             onClick={() => setIsContactFormOpen(true)}
-            className={cn(buttonBaseClass, 'px-4 py-2')}
+            className={cn(buttonBaseClass, 'hidden px-4 py-2 md:inline-flex')}
           >
             GET IN TOUCH
           </button>
@@ -87,21 +91,21 @@ export const Header = () => {
               <span
                 className={cn(
                   'absolute left-0 top-1 h-0.5 w-full transition-all duration-300',
-                  isHome ? 'bg-ink' : 'bg-white',
+                  'bg-white',
                   isMenuOpen && 'translate-y-2 rotate-45',
                 )}
               />
               <span
                 className={cn(
                   'absolute left-0 top-3 h-0.5 w-full transition-all duration-300',
-                  isHome ? 'bg-ink' : 'bg-white',
+                  'bg-white',
                   isMenuOpen && 'opacity-0',
                 )}
               />
               <span
                 className={cn(
                   'absolute left-0 top-5 h-0.5 w-4 transition-all duration-300',
-                  isHome ? 'bg-ink' : 'bg-white',
+                  'bg-white',
                   isMenuOpen && 'left-0 top-3 w-full -rotate-45',
                 )}
               />
@@ -116,10 +120,7 @@ export const Header = () => {
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -16 }}
             transition={{ duration: 0.25, ease: 'easeOut' }}
-            className={cn(
-              'px-6 py-4 shadow-lg md:hidden',
-              isHome ? 'border-t border-slate-100 bg-mist/95' : 'border-t border-white/10 bg-black',
-            )}
+            className={cn('px-6 py-4 shadow-lg border-t border-white/10 bg-black md:hidden')}
           >
             <div className="flex flex-col gap-4">
               {navItems.map(({ label, to }) => (
@@ -137,7 +138,10 @@ export const Header = () => {
                 </NavLink>
               ))}
               <button
-                onClick={() => setIsContactFormOpen(true)}
+                onClick={() => {
+                  setIsContactFormOpen(true);
+                  setIsMenuOpen(false);
+                }}
                 className={cn(buttonBaseClass, 'flex w-full justify-center px-4 py-2 text-center')}
               >
                 GET IN TOUCH
diff --git a/src/components/layout/ScrollToTop.tsx b/src/components/layout/ScrollToTop.tsx
index cd89b04..3d43837 100644
--- a/src/components/layout/ScrollToTop.tsx
+++ b/src/components/layout/ScrollToTop.tsx
@@ -7,6 +7,15 @@ export const ScrollToTop = () => {
   useEffect(() => {
     const animationFrame = window.requestAnimationFrame(() => {
       window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+      const mainElement = document.querySelector('main');
+      if (mainElement instanceof HTMLElement) {
+        if (typeof mainElement.scrollTo === 'function') {
+          mainElement.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+        } else {
+          mainElement.scrollTop = 0;
+          mainElement.scrollLeft = 0;
+        }
+      }
     });
 
     return () => window.cancelAnimationFrame(animationFrame);
diff --git a/src/pages/about/components/AboutCta.tsx b/src/pages/about/components/AboutCta.tsx
index 9b6b45e..40d7bee 100644
--- a/src/pages/about/components/AboutCta.tsx
+++ b/src/pages/about/components/AboutCta.tsx
@@ -5,8 +5,8 @@ import { buttonBaseClass } from '../../../lib/buttonStyles';
 
 export const AboutCta = () => {
   return (
-    <section className="snap-start bg-black pt-12 sm:pt-16 lg:pt-20">
-      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-10 px-6 pb-32 text-center sm:px-10 sm:pb-40">
+    <section className="snap-start bg-black pt-10 sm:pt-16 lg:pt-20">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-6 pb-20 text-center sm:gap-10 sm:px-10 sm:pb-32 lg:pb-40">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -50,12 +50,13 @@ export const AboutCta = () => {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: '-20%' }}
           transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
+          className="w-full sm:w-auto"
         >
           <Link
             to="/technology"
             className={cn(
               buttonBaseClass,
-              'px-10 py-4 font-bold uppercase tracking-[0.35em]',
+              'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:w-auto',
             )}
           >
             Explore Our Tech
diff --git a/src/pages/about/components/AboutHero.tsx b/src/pages/about/components/AboutHero.tsx
index 08731d4..e05bf4b 100644
--- a/src/pages/about/components/AboutHero.tsx
+++ b/src/pages/about/components/AboutHero.tsx
@@ -2,35 +2,41 @@ import { motion } from 'framer-motion';
 
 const records = [
   {
-    title: 'World Records for Web Hosting (1997-2002)',
+    period: '1997–2002',
+    title: 'World Records for Web Hosting',
     description: 'Kept UEFA, NASA, and World Cup traffic online with continent-scale uptime.',
     layout: 'lg:col-span-3 lg:row-span-2',
     showStream: true,
   },
   {
-    title: 'The First Backup Data Duplication System in the World (2005)',
+    period: '2005',
+    title: 'The First Backup Data Duplication System in the World',
     description: 'Cut enterprise backup footprints by up to 100× before dedupe was mainstream.',
     layout: 'lg:col-span-3',
   },
   {
-    title: 'One of the First Cloud Systems (2008)',
+    period: '2008',
+    title: 'One of the First Cloud Systems',
     description: 'Shipped the first Virtual Private Data Center and proved elastic compute trust.',
     layout: 'lg:col-span-3',
   },
   {
-    title: 'The First Multi-Site Consistent Database (2010)',
+    period: '2010',
+    title: 'The First Multi-Site Consistent Database',
     description: 'Delivered failover that preserved every transaction across sovereign sites.',
     layout: 'lg:col-span-3 lg:row-span-2',
     showStream: true,
   },
   {
-    title: 'The First Unbreakable and Distributed Storage System (2012)',
+    period: '2012',
+    title: 'The First Unbreakable and Distributed Storage System',
     description: 'Built tamper-proof storage that used 10× less energy and never went dark.',
     layout: 'lg:col-span-3',
   },
   {
-    title: 'Probably the First Proof of Block Stake Blockchain (2017)',
-    description: 'Merged staking and settlement in one move—years before the market caught up.',
+    period: '2017',
+    title: 'Probably the First Proof of Block Stake Blockchain',
+    description: 'Merged staking and settlement in one move, years before the market caught up.',
     layout: 'lg:col-span-3',
   },
 ] as const;
@@ -41,7 +47,7 @@ export const AboutHero = () => {
       <div className="mx-auto w-full max-w-7xl">
         <div className="grid gap-8 sm:gap-10 lg:grid-cols-[minmax(360px,420px)_minmax(0,1fr)] lg:items-stretch lg:gap-12 xl:grid-cols-[minmax(400px,500px)_minmax(0,1fr)]">
           <div className="relative h-full">
-            <div className="group relative overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#06091d] via-[#0e1540] to-[#1c1448] text-white shadow-[0_35px_90px_-45px_rgba(15,23,42,0.95)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/60 hover:shadow-[0_40px_120px_-45px_rgba(99,102,241,0.55)]">
+            <div className="group relative flex h-full flex-col overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#06091d] via-[#0e1540] to-[#1c1448] text-white shadow-[0_35px_90px_-45px_rgba(15,23,42,0.95)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/60 hover:shadow-[0_40px_120px_-45px_rgba(99,102,241,0.55)]">
               <img
                 src="/images/hometech2.jpg"
                 alt=""
@@ -54,20 +60,20 @@ export const AboutHero = () => {
               initial={{ opacity: 0, y: 32 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, ease: 'easeOut' }}
-              className="relative z-10 px-6 py-20 sm:px-12 lg:px-16 lg:py-24"
+              className="relative z-10 flex flex-1 flex-col items-center px-6 py-20 text-center sm:px-12 lg:px-16 lg:py-24"
             >
-              <span className="inline-flex items-center gap-3 text-[0.68rem] uppercase tracking-[0.42em] text-white/70">
-                <span className="h-px w-10 bg-white/40" />
-                About GeoMind
-                <span className="h-px w-10 bg-white/40" />
-              </span>
-              <h1 className="mt-8 max-w-3xl text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl lg:leading-[1.1]">
+              <div className="flex w-full items-center justify-center gap-4 text-[0.7rem] font-medium uppercase tracking-[0.32em] text-white/70">
+                <span className="h-px w-12 bg-white/25 transition-colors duration-500 group-hover:bg-white/50 sm:w-14 lg:w-16" />
+                <span className="text-white/80">About GeoMind</span>
+                <span className="h-px w-12 bg-white/25 transition-colors duration-500 group-hover:bg-white/50 sm:w-14 lg:w-16" />
+              </div>
+              <h1 className="mt-9 max-w-2xl text-4xl font-semibold tracking-tight text-white sm:text-[2.75rem] lg:text-[3.25rem] lg:leading-[1.05]">
                 We Know a Thing or Two About Datacenters
               </h1>
-              <p className="mt-6 max-w-3xl text-base text-white/80 sm:text-lg">
-                For decades, we've built the technologies that power the internet, from record-breaking
-                web hosting to unbreakable cloud systems. Now, we're redefining what datacenters stand
-                for: secure, sovereign, and profitable infrastructure designed for people, the planet. Here’s the short list of milestones that still guide our build.
+              <p className="mt-5 max-w-2xl text-base leading-relaxed text-white/75 sm:text-lg">
+                Decades of building the internet&apos;s backbone, from record-breaking hosting to
+                unbreakable cloud systems, now shape how we define the datacenter: secure, sovereign,
+                profitable infrastructure built for people and planet.
               </p>
             </motion.div>
           </div>
@@ -80,12 +86,17 @@ export const AboutHero = () => {
                 initial={{ opacity: 0, y: 24 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.5, delay: index * 0.05 }}
-                className={`group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-5 backdrop-blur transition-all duration-300 hover:-translate-y-1.5 hover:border-brand-400/60 hover:bg-white/[0.08] hover:shadow-[0_32px_80px_-50px_rgba(56,189,248,0.55)] ${record.layout}`}
+                className={`group relative flex h-full flex-col overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-5 ${
+                  record.showStream ? 'pb-16 sm:pb-5' : ''
+                } backdrop-blur transition-all duration-300 hover:-translate-y-1.5 hover:border-brand-400/60 hover:bg-white/[0.08] hover:shadow-[0_32px_80px_-50px_rgba(56,189,248,0.55)] ${record.layout}`}
               >
-                <h3 className="text-lg font-semibold leading-snug text-white">{record.title}</h3>
+                <span className="block text-[0.68rem] font-semibold uppercase tracking-[0.42em] text-brand-200/80">
+                  {record.period}
+                </span>
+                <h3 className="mt-2 text-lg font-semibold leading-snug text-white">{record.title}</h3>
                 <p className="mt-3 text-sm leading-6 text-slate-200">{record.description}</p>
                 {record.showStream && (
-                  <div className="pointer-events-none absolute inset-x-5 bottom-5 h-3 overflow-hidden rounded-full border border-white/10 bg-white/[0.06]">
+                  <div className="pointer-events-none absolute inset-x-5 bottom-6 sm:bottom-5 h-3 overflow-hidden rounded-full border border-white/10 bg-white/[0.06]">
                     <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.45),transparent_72%)] opacity-70" />
                     <div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(56,189,248,0)_0%,rgba(99,102,241,0.75)_50%,rgba(56,189,248,0)_100%)] opacity-90 [background-size:200%_100%] animate-data-stream" />
                     <div
diff --git a/src/pages/about/components/TrackRecord.tsx b/src/pages/about/components/TrackRecord.tsx
index 28191f7..779c66c 100644
--- a/src/pages/about/components/TrackRecord.tsx
+++ b/src/pages/about/components/TrackRecord.tsx
@@ -56,10 +56,7 @@ export const TrackRecord = () => {
           />
         </div>
         <p className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
-          Our team has been at the forefront of datacenter and cloud innovation for over two decades, building systems that were faster, safer, and more scalable than anything before.
-        </p>
-        <p className="mt-4 text-base text-slate-300 sm:text-lg">
-          We have built some of the world’s most advanced Internet and cloud technologies which were acquired by some of the biggest names in the space.
+          Our team has built some of the world’s most advanced cloud technologies which were acquired by some of the biggest names in the space. 
         </p>
       </div>
 
diff --git a/src/pages/home/components/CtaSection.tsx b/src/pages/home/components/CtaSection.tsx
index 6a53912..a34d689 100644
--- a/src/pages/home/components/CtaSection.tsx
+++ b/src/pages/home/components/CtaSection.tsx
@@ -6,7 +6,7 @@ import { buttonBaseClass } from '../../../lib/buttonStyles';
 export const CtaSection = () => {
   return (
     <section className="snap-start bg-black">
-      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-10 px-6 py-40 text-center sm:px-10">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-6 py-20 text-center sm:gap-10 sm:px-10 sm:py-32 lg:py-40">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -44,32 +44,43 @@ export const CtaSection = () => {
         >
           From record-breaking digital infrastructure to successful exits. The team behind GeoMind has built infrastructure at scale.
         </motion.p>
-        <div className="flex items-center justify-center gap-4">
+        <div className="flex w-full flex-col items-stretch gap-4 sm:w-auto sm:flex-row sm:items-center sm:justify-center">
           <motion.div
             initial={{ opacity: 0, y: 12 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, margin: '-20%' }}
             transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
+            className="w-full sm:w-auto"
           >
             <Link
               to="/about"
-              className={cn(buttonBaseClass, 'px-10 py-4 font-bold uppercase tracking-[0.35em]')}
+              className={cn(
+                buttonBaseClass,
+                'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:min-w-[12rem]',
+              )}
             >
               About us
             </Link>
           </motion.div>
-          <motion.a
-            href="https://calendly.com/sachao/30min"
-            target="_blank"
-            rel="noopener noreferrer"
+          <motion.div
             initial={{ opacity: 0, y: 12 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, margin: '-20%' }}
             transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
-            className={cn(buttonBaseClass, 'px-10 py-4 font-bold uppercase tracking-[0.35em]')}
+            className="w-full sm:w-auto"
           >
-            Book a Meeting
-          </motion.a>
+            <a
+              href="https://calendly.com/sachao/30min"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={cn(
+                buttonBaseClass,
+                'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:min-w-[12rem]',
+              )}
+            >
+              Book a Meeting
+            </a>
+          </motion.div>
         </div>
       </div>
     </section>
diff --git a/src/pages/home/components/ScrollLockedSection.tsx b/src/pages/home/components/ScrollLockedSection.tsx
index 6fa6732..a6f7452 100644
--- a/src/pages/home/components/ScrollLockedSection.tsx
+++ b/src/pages/home/components/ScrollLockedSection.tsx
@@ -1,6 +1,7 @@
-import { useRef } from 'react';
 import type { ReactNode } from 'react';
+import { useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { ChevronsDown } from 'lucide-react';
 import { cn } from '../../../lib/cn';
 import { buttonBaseClass } from '../../../lib/buttonStyles';
 
@@ -74,6 +75,10 @@ export const ScrollLockedSection = ({
               </div>
             )}
           </div>
+          <div className="mt-auto flex items-center gap-3 pb-12 text-xs uppercase tracking-[0.3em] text-white sm:pb-16">
+            <span>Keep scrolling</span>
+            <ChevronsDown className="h-4 w-4 text-white animate-bounce" aria-hidden="true" />
+          </div>
         </div>
       </div>
     </section>
diff --git a/src/pages/technology/components/MarketplaceCta.tsx b/src/pages/technology/components/MarketplaceCta.tsx
index 9f19ee8..9f22136 100644
--- a/src/pages/technology/components/MarketplaceCta.tsx
+++ b/src/pages/technology/components/MarketplaceCta.tsx
@@ -6,7 +6,7 @@ import { buttonBaseClass } from '../../../lib/buttonStyles';
 export const MarketplaceCta = () => {
   return (
     <section className="snap-start bg-black">
-      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-10 px-6 py-32 text-center sm:px-10 sm:py-40">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-6 py-20 text-center sm:gap-10 sm:px-10 sm:py-32 lg:py-40">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -50,10 +50,14 @@ export const MarketplaceCta = () => {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: '-20%' }}
           transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
+          className="w-full sm:w-auto"
         >
           <Link
             to="/usecases"
-            className={cn(buttonBaseClass, 'px-10 py-4 font-bold uppercase tracking-[0.35em]')}
+            className={cn(
+              buttonBaseClass,
+              'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:w-auto',
+            )}
           >
             See Use cases
           </Link>
diff --git a/src/pages/technology/components/TechnologyHero.tsx b/src/pages/technology/components/TechnologyHero.tsx
index b1f3a62..65edf43 100644
--- a/src/pages/technology/components/TechnologyHero.tsx
+++ b/src/pages/technology/components/TechnologyHero.tsx
@@ -1,37 +1,22 @@
-import { motion } from 'framer-motion';
-
 export const TechnologyHero = () => {
   return (
-    <section className="group relative overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#040b24] via-[#0a1842] to-[#211d61] text-white shadow-[0_35px_90px_-45px_rgba(17,24,39,0.95)] transition-all duration-500 hover:-translate-y-1.5 hover:border-teal-300/60 hover:shadow-[0_40px_120px_-45px_rgba(45,212,191,0.55)]">
-      <img
-        src="/images/hometech.jpg"
-        alt=""
-        className="absolute inset-0 h-full w-full object-cover opacity-40 mix-blend-screen transition-transform duration-700 group-hover:scale-105"
+    <section
+      aria-label="GeoMind technology showcase"
+      className="group relative min-h-[420px] overflow-hidden rounded-[32px] border border-white/10 bg-slate-950 text-white shadow-[0_35px_90px_-45px_rgba(17,24,39,0.85)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/70 hover:shadow-[0_45px_120px_-45px_rgba(122,141,249,0.55)] sm:min-h-[520px] lg:min-h-[600px]"
+    >
+      <video
+        className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
+        src="/videos/galaxy_vid.mp4"
+        autoPlay
+        loop
+        muted
+        playsInline
+        preload="auto"
       />
-      <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent mix-blend-overlay transition-opacity duration-500 group-hover:opacity-90" />
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(94,234,212,0.45),_transparent_60%)] opacity-90 transition-opacity duration-500 group-hover:opacity-100" />
-      <div className="absolute top-[-30%] left-[-10%] h-[360px] w-[360px] rounded-full bg-[#22d3ee]/25 blur-3xl transition-transform duration-700 group-hover:scale-110" />
-      <motion.div
-        initial={{ opacity: 0, y: 32 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.6, ease: 'easeOut' }}
-        className="relative z-10 px-6 py-24 sm:px-12 lg:px-20 lg:py-28"
-      >
-        <span className="inline-flex items-center gap-3 text-[0.68rem] uppercase tracking-[0.42em] text-white/70">
-          <span className="h-px w-10 bg-white/40" />
-          Technology
-          <span className="h-px w-10 bg-white/40" />
-        </span>
-        <h1 className="mt-8 max-w-3xl text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl lg:leading-[1.1]">
-          The Foundation of the Next-Generation Datacenter
-        </h1>
-        <p className="mt-6 max-w-3xl text-base text-white/80 sm:text-lg">
-          GeoMind combines hardware and revolutionary software to deliver secure, scalable, and
-          sovereign cloud and AI infrastructure. Built for efficiency, sustainability, and
-          profitability, it empowers organizations to run workloads, scale globally, and monetize
-          excess capacity.
-        </p>
-      </motion.div>
+      <div className="absolute bottom-[-20%] right-[-10%] h-[420px] w-[420px] rounded-full bg-[rgba(90,107,240,0.25)] blur-3xl transition-transform duration-700 group-hover:scale-110" />
+      <div className="relative z-10 h-full w-full px-6 py-24 sm:px-12 lg:px-20 lg:py-32">
+        <span className="sr-only">Immersive background video highlighting GeoMind technology.</span>
+      </div>
     </section>
   );
 };
diff --git a/src/pages/technology/components/TechnologyStack.tsx b/src/pages/technology/components/TechnologyStack.tsx
index 503da60..3fd8c37 100644
--- a/src/pages/technology/components/TechnologyStack.tsx
+++ b/src/pages/technology/components/TechnologyStack.tsx
@@ -49,14 +49,14 @@ export const TechnologyStack = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, amount: 0.3 }}
               transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="overflow-hidden rounded-3xl bg-black shadow-none backdrop-blur"
+              className="flex h-full flex-col overflow-hidden rounded-3xl bg-black text-center shadow-none backdrop-blur"
             >
               <div className="h-56 overflow-hidden">
                 <img src={item.image} alt={item.title} className="h-full w-full object-cover" />
               </div>
-              <div className="p-6">
+              <div className="flex flex-1 flex-col items-center gap-4 p-6">
                 <h3 className="text-xl font-semibold text-white">{item.title}</h3>
-                <p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p>
+                <p className="text-sm leading-6 text-slate-300">{item.description}</p>
               </div>
             </motion.div>
           ))}
diff --git a/src/pages/usecases/components/UseCasesGrid.tsx b/src/pages/usecases/components/UseCasesGrid.tsx
index ea8ecaf..19ed796 100644
--- a/src/pages/usecases/components/UseCasesGrid.tsx
+++ b/src/pages/usecases/components/UseCasesGrid.tsx
@@ -16,15 +16,17 @@ const useCases = [
     title: 'Digital Free Zone',
     highlight: 'Sovereign Innovation',
     description:
-      'An economic bridge for digital assets with dedicated governance, regulation, and dispute resolution so builders deploy compliant Web3, AI, and fintech products on GeoMind-powered infrastructure.',
+      'An economic bridge in Zanzibar for digital assets with dedicated governance, regulation, and dispute resolution so builders can deploy compliant Web3, AI, and fintech products on GeoMind-powered future-ready infrastructure.',
     image: '/images/freezone.jpeg',
+    titleOffset: '-mt-2 sm:-mt-3',
   },
   {
     title: 'COOP Cloud',
     highlight: 'People-Powered Cloud',
     description:
-      'COOP Cloud teams with the International Cooperative Alliance so 1.2 billion co-op members can run shared infrastructure, earn rewards, and launch services together on GeoMind.',
+      'COOP Cloud teams with the International Cooperative Alliance so 1.2 billion co-op members can run shared infrastructure and launch services together on GeoMind, building a self-sustaining digital infrastructure that serves their communities.',
     image: '/images/coop.jpeg',
+    titleOffset: '-mt-3 sm:-mt-4',
   },
   {
     title: 'Cloud for Nations',
@@ -37,7 +39,7 @@ const useCases = [
     title: 'Real Estate Deployments',
     highlight: 'Underutilized Spaces',
     description:
-      'Deploy GeoMind capacity inside underutilized properties with rapid integration into building utilities. Turn idle rooms into revenue generating data centers at minimal additional cost. Deliver residents and employees data sovereignty tools while relying on passive liquid cooling that requires little maintenance and keeps operating expenses highly competitive.',
+      'Deploy GeoMind in underutilized spaces with rapid integration into building utilities. Turn idle rooms into revenue generating data centers at minimal additional cost. Deliver residents and employees data sovereignty on tech that requires minimal maintenance.',
     image: '/images/hometech2.jpg',
     featured: true,
   },
@@ -53,21 +55,21 @@ export const UseCasesGrid = () => {
   };
 
   return (
-    <section className="py-16 text-slate-100 lg:py-24">
+    <section className="px-4 py-16 text-slate-100 sm:px-0 lg:py-24">
       <motion.div
         initial={{ opacity: 0, y: 24 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true, amount: 0.3 }}
         transition={{ duration: 0.6, ease: 'easeOut' }}
       >
-        <h2 className="text-3xl font-semibold text-white sm:text-4xl">Use Cases</h2>
-        <p className="mt-5 max-w-4xl text-base text-slate-300 sm:text-lg">
+        <h2 className="text-center text-3xl font-semibold text-white sm:text-4xl">Use Cases</h2>
+        <p className="mt-5 max-w-4xl text-center text-base text-slate-300 sm:text-lg sm:mx-auto">
           From decentralized cores to national-scale infrastructure, GeoMind translates sovereign
           compute into deployable products. Each use case blends hyperscale performance with edge
           responsiveness, enabling partners to launch resilient, energy-efficient capacity exactly
           where it is needed.
         </p>
-        <div className="mt-12 grid gap-8 sm:grid-cols-2 xl:grid-cols-4">
+        <div className="mt-12 -mx-4 flex snap-x snap-mandatory gap-6 overflow-x-auto pb-6 sm:mx-0 sm:grid sm:grid-cols-2 sm:gap-8 sm:overflow-visible sm:pb-0 sm:snap-none xl:grid-cols-4">
           {useCases.map((useCase, index) => (
             <motion.article
               key={useCase.title}
@@ -76,8 +78,8 @@ export const UseCasesGrid = () => {
               viewport={{ once: true, amount: 0.25 }}
               transition={{ duration: 0.5, delay: index * 0.05 }}
               className={cn(
-                'group relative flex h-full flex-col overflow-hidden rounded-3xl border border-white/10 bg-slate-950/80 transition-all duration-300 hover:-translate-y-1 hover:border-brand-400/50 hover:shadow-[0_25px_40px_-24px_rgba(15,118,230,0.45)]',
-                useCase.featured && 'sm:col-span-2 xl:col-span-4 sm:flex sm:flex-row sm:items-center sm:gap-8'
+                'group relative flex h-full min-w-[80vw] snap-center flex-col overflow-hidden rounded-3xl border border-white/10 bg-slate-950/80 transition-all duration-300 hover:-translate-y-1 hover:border-brand-400/50 hover:shadow-[0_25px_40px_-24px_rgba(15,118,230,0.45)] sm:min-w-0',
+                useCase.featured && 'min-w-[88vw] sm:col-span-2 xl:col-span-4 sm:flex sm:flex-row sm:items-start sm:gap-8'
               )}
             >
               <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
@@ -85,7 +87,7 @@ export const UseCasesGrid = () => {
               </div>
               <div
                 className={cn(
-                  'relative h-48 overflow-hidden',
+                  'relative h-48 overflow-hidden sm:h-56 lg:h-full',
                   useCase.featured && 'sm:h-full sm:w-[42%] lg:w-[38%]'
                 )}
               >
@@ -98,16 +100,17 @@ export const UseCasesGrid = () => {
               </div>
               <div
                 className={cn(
-                  'relative flex h-full flex-col gap-4 p-8',
-                  useCase.featured && 'sm:flex-1 sm:p-10 lg:p-12'
+                  'relative flex h-full flex-col items-center px-6 pb-6 pt-6 text-center sm:px-8 sm:pb-8 sm:pt-8',
+                  useCase.featured && 'sm:flex-1 sm:px-10 sm:pb-12 sm:pt-12'
                 )}
               >
-                <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.3em] text-sky-200/80">
-                  <span className="h-px w-6 bg-sky-200/60" />
-                  {useCase.highlight}
-                </span>
-                <h3 className="text-xl font-semibold text-white">{useCase.title}</h3>
-                <p className="text-sm leading-6 text-slate-300">{useCase.description}</p>
+                <div className={cn('flex flex-col items-center gap-3', useCase.titleOffset)}>
+                  <span className="text-xs font-semibold uppercase tracking-[0.3em] text-sky-200/80">
+                    {useCase.highlight}
+                  </span>
+                  <h3 className="text-xl font-semibold text-white">{useCase.title}</h3>
+                </div>
+                <p className="mt-6 text-sm leading-6 text-slate-300 sm:mt-8">{useCase.description}</p>
               </div>
             </motion.article>
           ))}
@@ -117,7 +120,7 @@ export const UseCasesGrid = () => {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, amount: 0.3 }}
           transition={{ duration: 0.6, ease: 'easeOut', delay: 0.2 }}
-          className="mt-16 overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#0d112a] via-[#111f3f] to-[#1c2257] p-10 text-white shadow-[0_30px_90px_-50px_rgba(15,23,42,1)] sm:p-12 lg:p-16"
+          className="mt-16 overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#0d112a] via-[#111f3f] to-[#1c2257] p-8 text-white shadow-[0_30px_90px_-50px_rgba(15,23,42,1)] sm:p-12 lg:p-16"
         >
           <div className="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
             <div className="max-w-2xl space-y-4">
diff --git a/src/pages/usecases/components/UseCasesHero.tsx b/src/pages/usecases/components/UseCasesHero.tsx
index 02d0ec1..ac5cd25 100644
--- a/src/pages/usecases/components/UseCasesHero.tsx
+++ b/src/pages/usecases/components/UseCasesHero.tsx
@@ -2,20 +2,20 @@ import { motion } from 'framer-motion';
 
 export const UseCasesHero = () => {
   return (
-    <section className="group relative overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#050a21] via-[#11173a] to-[#221852] text-white shadow-[0_35px_90px_-45px_rgba(17,24,39,0.95)] transition-all duration-500 hover:-translate-y-1.5 hover:border-orange-300/60 hover:shadow-[0_40px_120px_-45px_rgba(249,115,22,0.45)]">
+    <section className="group relative flex overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#050a21] via-[#11173a] to-[#221852] text-white shadow-[0_35px_90px_-45px_rgba(17,24,39,0.95)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/60 hover:shadow-[0_40px_120px_-45px_rgba(122,141,249,0.45)]">
       <img
-        src="/images/uscase_BG.png"
+        src="/images/mesh2.gif"
         alt=""
         className="absolute inset-0 h-full w-full object-cover opacity-40 mix-blend-screen transition-transform duration-700 group-hover:scale-105"
       />
       <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent mix-blend-overlay transition-opacity duration-500 group-hover:opacity-90" />
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(249,115,22,0.3),_transparent_60%)] opacity-90 transition-opacity duration-500 group-hover:opacity-100" />
-      <div className="absolute bottom-[-35%] right-[-5%] h-[380px] w-[380px] rounded-full bg-[#f97316]/25 blur-3xl transition-transform duration-700 group-hover:scale-110" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(122,141,249,0.35),_transparent_60%)] opacity-90 transition-opacity duration-500 group-hover:opacity-100" />
+      <div className="absolute bottom-[-35%] right-[-5%] h-[380px] w-[380px] rounded-full bg-brand-400/30 blur-3xl transition-transform duration-700 group-hover:scale-110" />
       <motion.div
         initial={{ opacity: 0, y: 32 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.6, ease: 'easeOut' }}
-        className="relative z-10 px-6 py-24 sm:px-12 lg:px-20 lg:py-28"
+        className="relative z-10 flex w-full flex-col items-center px-6 py-24 text-center sm:px-12 lg:px-20 lg:py-28"
       >
         <span className="inline-flex items-center gap-3 text-[0.68rem] uppercase tracking-[0.42em] text-white/70">
           <span className="h-px w-10 bg-white/40" />
@@ -26,10 +26,7 @@ export const UseCasesHero = () => {
           Designed for Real-World Impact
         </h1>
         <p className="mt-6 max-w-3xl text-base text-white/80 sm:text-lg">
-          GeoMind empowers organizations to deploy secure, efficient, and sovereign cloud and AI
-          infrastructure anywhere. From enterprises to governments, our use cases demonstrate how
-          next-generation datacenters generate value, ensure sovereignty, and support modern AI,
-          cloud, and edge workloads.
+          GeoMind empowers organizations to deploy secure, efficient, and sovereign infrastructure. From enterprises to governments, our use cases demonstrate GeoMind's potential to generate value, ensure sovereignty, and support modern workloads.
         </p>
       </motion.div>
     </section>