diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ca2af2c..e5b027f 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -10,9 +10,9 @@ export function Header (){
             <Container>
                 <div className="talkd-menu p-2 rounded-md">
                     <ul className="flex flex-col md:flex-row items-center gap-3">
-                        <MenuItem name="Home" isSelected />
+                        <MenuItem name="Home" isSelected/>
                         {/* <MenuItem name="Pricing"/> */}
-                        <MenuItem name="About" />
+                        <MenuItem name="About" isNotSelected />
                     </ul>
                 </div>
             </Container>
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 40ca6ab..581b9cb 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -1,16 +1,17 @@
 type Props = {
     name: string;
-    isSelected: boolean;
-    onClick: () => void;
+    isSelected?: boolean;
+    isNotSelected?: boolean; 
+    onClick?: () => void;
 }
 
-export function MenuItem ({name, isSelected, onClick}: Props) {
+export function MenuItem ({name, isSelected, isNotSelected, onClick}: Props) {
     return(
         // <button className="flex items-center gap-3">
         <li className="flex menu-item">
              <button className="flex items-center gap-2 pl-2" onClick={onClick}>
                 <span
-                    className={`font-semibold ${isSelected ? 'text-primary-purple' : 'text-white'}`}
+                    className={`font-semibold ${isSelected ? 'text-primary-purple' : isNotSelected ? 'text-white' : ''}`}
                     style={{marginRight: 4}}
                 >{name}</span>
                 <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
diff --git a/src/components/SectionHero.tsx b/src/components/SectionHero.tsx
index 79e0392..7f367df 100644
--- a/src/components/SectionHero.tsx
+++ b/src/components/SectionHero.tsx
@@ -3,7 +3,7 @@ import { Container } from "./container";
 
 export function SectionHero() {
   return (
-    <section className="w-full lg:max-w-[1440px] h-auto bg-black bg-no-repeat bg-cover bg-center talkdai-hero text-white">
+    <section className="w-full mb-40 lg:max-w-[1440px] h-auto bg-black bg-no-repeat bg-cover bg-center talkdai-hero text-white">
       <Container>
         <div className=" w-full max-w-[954px] mx-auto text-center px-4">
           <div className="mb-24">
@@ -27,7 +27,7 @@ export function SectionHero() {
             </p>
           </div>
 
-          <div className="w-full max-w-[997px] h-auto flex flex-col md:flex-row justify-center gap-6 font-normal font-ubuntu-mono">
+          <div className="w-full max-w-[997px] h-auto flex flex-col md:flex-row justify-center gap-6 font-normal font-ubuntu-mono mb-6">
             <a
               href="https://github.com/talkdai/dialog"
               target="_blank"
@@ -56,7 +56,7 @@ export function SectionHero() {
             </a>
           </div>
 
-          <div className=" w-full max-w-[954px] mx-auto text-center px-4 text-primary-gray mt-32">
+          {/* <div className=" w-full max-w-[954px] mx-auto text-center px-4 text-primary-gray mt-32">
             <h1
               className=" font-semibold md:text-[46px]"
               style={{ lineHeight: 1.2 }}
@@ -68,7 +68,7 @@ export function SectionHero() {
                 <Cards/>
                 <Cards/>
                 <Cards/>
-          </div>
+          </div> */}
 
         </div>
       </Container>