diff --git a/src/components/About.tsx b/src/components/About.tsx
index e55f2ab..d03c109 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -7,7 +7,7 @@ export function About() {
   return (
     <section
       id="about"
-      className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:-top-12 top-0"
+      className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:top-0 top-0"
     >
       <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
         <CircleBackground color="#fff" className="animate-spin-slower" />
@@ -28,6 +28,7 @@ export function About() {
               href="https://docs.ourworld.tf/mycelium_cloud/docs/"
               target="_blank"
               variant="outline"
+              color="white"
             >
               Learn More
             </Button>
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 27f88bf..99a630e 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -16,7 +16,8 @@ const variantStyles = {
     gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
   },
   outline: {
-    gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+    gray: 'border-gray-300 text-gray-700 hover:text-gray-500 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+    white: 'border-gray-300 text-white hover:text-gray-200 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80', 
   },
 }
 
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 1fbfa99..66de473 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -98,7 +98,7 @@ function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 
 export function Hero() {
   return (
-    <div className="overflow-hidden lg:py-32 pb-4">
+    <div className="overflow-hidden lg:py-32 lg:pb-0 pb-24">
       <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="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
@@ -126,8 +126,8 @@ export function Hero() {
             </div>
           </div>
           <div className="relative lg:mt-10 mt-0  lg:col-span-5 lg:row-span-2 xl:col-span-6">
-            <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-16 lg:ml-12 xl:-top-14 ml-0" />
-            <div className="-mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)]  lg:px-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:pt-10 xl:-bottom-32">
+            <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12  ml-0" />
+            <div className="mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)]  lg:px-0 lg:absolute lg:-inset-x-10 lg:-top-24  lg:h-auto lg:pt-10 xl:-bottom-32">
               <Image
                 src="/images/phoneframe.png"
                 alt="Mycelium application demo"