diff --git a/src/components/AboutFutureVisionSections.tsx b/src/components/AboutFutureVisionSections.tsx
index 4a39f07..1f8aa1a 100644
--- a/src/components/AboutFutureVisionSections.tsx
+++ b/src/components/AboutFutureVisionSections.tsx
@@ -4,17 +4,17 @@ import React from "react";
 export default function AboutFutureVisionSections() {
   return (
     <div>
-      <div className="flex flex-col justify-center items-center px-12 md:px-0">
+      <div className="flex flex-col justify-center items-center md:px-0">
         {/* <img className="w-full h-auto z-[10]" alt="union-1" src="red-union.svg" /> */}
         <div className="p-4 max-w-6xl w-full pt-36">
-          <div className="flex flex-col items-start justify-center">
+          <div className="flex md:flex-col md:items-start justify-center">
             <h1 className="text-[#101066] font-bold text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-tight leading-none mb-4">
               Future Vision
             </h1>
           </div>
         </div>
         <div className="flex flex-col max-w-7xl items-center mt-8 mx-auto">
-          <div className="flex gap-4 px-8 flex-col lg:flex-row z-[1]">
+          <div className="flex gap-4 md:px-8 flex-col lg:flex-row z-[1]">
             <IonCard
               color="light"
               style={{
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f0bf698..ecaf0ea 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -105,7 +105,7 @@ const Navbar = () => {
                 <li key={item.name}>
                   <a
                     href={item.href}
-                    className={`block py-1 px-4 text-white rounded-full hover:bg-orange-500 md:border-0 ${color}`}
+                    className={`my-2 block py-1 px-4 text-white rounded-full hover:bg-orange-500 md:border-0 ${color}`}
                   >
                     {item.name}
                   </a>
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 5af142a..9d99970 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -9,7 +9,7 @@ import AboutFutureVisionSections from "../components/AboutFutureVisionSections";
 
 const About: React.FC = () => {
   return (
-    <div className="pt-12 mb-48">
+    <div className="pt-36 md:pt-12 mb-48">
       <PaddedHeaderText />
       <AboutMissionSection />
       <AboutTeamProfiles />
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 2cc4703..fea8f3e 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -12,16 +12,12 @@ const Index: React.FC = () => {
     <div>
       <NewHero />
       <div className="bg-gradient-to-b from-[#FFE2E2] to-[#FFFFFF]">
-        <div
-          style={{
-            height: "271px",
-          }}
-        />
+        <div className="h-12 md:h-64" />
         <CenterDescriptionCards />
         <div className="relative max-w-5xl mx-auto my-16">
           <img className="w-full h-auto" alt="Vector" src="vector.svg" />
           <div className="absolute w-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-            <h1 className="font-sans text-[#101066] text-[calc(4vw)] lg:text-[42px] text-center font-[600] tracking-wide">
+            <h1 className="font-sans text-[#101066] text-[calc(6vw)] lg:text-[42px] text-center font-[600] tracking-wide">
               Teens need
               <br />
               mental health support