diff --git a/donutshop_ecommerce/src/app/globals.css b/donutshop_ecommerce/src/app/globals.css
index 740d676..bb810fe 100644
--- a/donutshop_ecommerce/src/app/globals.css
+++ b/donutshop_ecommerce/src/app/globals.css
@@ -3,8 +3,8 @@
 @tailwind utilities;
 
 body{
-    background-color: #FDE2DE;
-    overflow-x: hidden;
+  background-color: #FDE2DE;
+  overflow-x: hidden;
 }
   
 /*== logo ==*/
diff --git a/donutshop_ecommerce/src/app/layout.js b/donutshop_ecommerce/src/app/layout.js
index bb89d5a..068fee2 100644
--- a/donutshop_ecommerce/src/app/layout.js
+++ b/donutshop_ecommerce/src/app/layout.js
@@ -4,7 +4,7 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "Create Next App",
+  title: "Puffy Dough | Donuts, Coffee, and Drinks",
   description: "Generated by create next app",
 };
 
diff --git a/donutshop_ecommerce/src/components/layout/Header.js b/donutshop_ecommerce/src/components/layout/Header.js
index 9d7d670..e0f67de 100644
--- a/donutshop_ecommerce/src/components/layout/Header.js
+++ b/donutshop_ecommerce/src/components/layout/Header.js
@@ -4,6 +4,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { IoCloseOutline } from "react-icons/io5";
 import { HiBars2 } from "react-icons/hi2";
+import Hero from "./Hero";
 
 
 const Header = () => {
@@ -11,32 +12,10 @@ const Header = () => {
     const Letter = text.split("");
 
     const [nav, setNav] = useState(false);
-    const links = [
-        {
-            id: 1,
-            link: "home",
-        },
-        {
-            id: 2,
-            link: "menu",
-        },
-        {
-            id: 3,
-            link: "about",
-        },
-        {
-            id: 4,
-            link: "contact",
-        },
-        {
-            id: 5,
-            link: "login",
-        },
-    ];
-
+    
 
   return (
-    <div className='w-full h-full bg-[#FDE2DE]'>
+    <div className='w-full bg-[#FDE2DE]'>
         <div className='flex flex-row justify-between md:flex-col gap-14 items-center py-5 md:py-10 px-5 md:px-8 lg:px-10'>
             <div className='flex justify-center relative px-4'>
                 <div className='mt-5 md:mt3 flex flex-col items-center'>
@@ -50,22 +29,24 @@ const Header = () => {
                     })}
                 </div>
             </div>
-            <div className="flex justify-end md:justify-center items-center w-full text-white  nav">
-                <ul className="hidden md:flex border border-[#E78895] rounded-full">
-                    {links.map(({ id, link }) => (
-                    <li key={id} className="px-6 py-3 cursor-pointer text-xs font-semibold uppercase text-[#95743D] relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">
-                        <Link href={link}>{link}</Link>
-                    </li>
-                    ))}
+            <div className="flex justify-end md:justify-center items-center w-full text-white">
+                <ul className="hidden md:flex border border-[#E78895] rounded-full text-xs font-semibold uppercase text-[#95743D]">
+                    <Link href='/' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">Home</Link>
+                    <Link href='' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">Menu</Link>
+                    <Link href='' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">about</Link>
+                    <Link href='' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">contact</Link>
+                    <Link href='' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">login</Link>
                 </ul>
-                <div onClick={() => setNav(!nav)} className="cursor-pointer pr-4 z-10 text-[#95743D] md:hidden"> {nav ? <IoCloseOutline size={30} /> : <HiBars2 size={30} />}</div>
+                <div onClick={() => setNav(!nav)} className="cursor-pointer pr-4 z-20 text-[#95743D] md:hidden "> {nav ? <IoCloseOutline size={30} /> : <HiBars2 size={30} />}</div>
                 {nav && (
-                    <ul className="flex flex-col justify-center items-center absolute top-0 left-0 w-full h-screen bg-gradient-to-b from-[#f8cdc6] to-[#FDE2DE] text-[#95743D]">
-                        {links.map(({ id, link }) => (
-                            <li key={id} className="px-4 cursor-pointer capitalize py-6 text-4xl">
-                                <Link onClick={() => setNav(!nav)} href={link}>{link}</Link>
-                            </li>
-                        ))}
+                    <ul className="w-full h-screen flex justify-center items-center text-center absolute top-0 left-0  bg-gradient-to-b from-[#f8cdc6] to-[#FDE2DE] text-[#95743D] z-10">
+                        <li onClick={() => setNav(!nav)} className="flex flex-col gap-4 cursor-pointer capitalize text-3xl">
+                            <Link  href='/'>Home</Link>
+                            <Link  href=''>menu</Link>
+                            <Link  href=''>about</Link>
+                            <Link  href=''>contact</Link>
+                            <Link  href=''>login</Link>
+                        </li>        
                     </ul>
                 )}
             </div>
diff --git a/donutshop_ecommerce/src/components/layout/Hero.js b/donutshop_ecommerce/src/components/layout/Hero.js
index 0e74bd5..4c1546a 100644
--- a/donutshop_ecommerce/src/components/layout/Hero.js
+++ b/donutshop_ecommerce/src/components/layout/Hero.js
@@ -2,6 +2,7 @@
 import React from 'react'
 import {motion} from "framer-motion"
 import Image from 'next/image';
+import Link from 'next/link';
 
 
 const Hero = () => {
@@ -14,28 +15,30 @@ const Hero = () => {
 
 
   return (
-    <div className='flex flex-col gap-10 md:gap-20'>
-      <div className='mt-10 -z-20'>
+    <>
+    <div className='w-full h-screen flex flex-col gap-10 md:gap-20'>
+      <div className='mt-10'>
           <motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
             <p className='mt-[30px] text-7xl md:text-9xl text-white font-bold tracking-wider uppercase'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
           </motion.div>
       </div>
-      <div className='mt-10 -z-20'>
+      <div className='mt-10'>
           <motion.div className='absolute whitespace-nowrap' variants={textAnimation1} animate="animate">
             <p className='mt-[30px] text-7xl md:text-9xl text-white font-bold tracking-wider uppercase'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
           </motion.div>
       </div>
-      <div className='mt-10 -z-20'>
+      <div className='mt-10'>
           <motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
             <p className='mt-[30px] text-7xl md:text-9xl text-white font-bold tracking-wider uppercase'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
           </motion.div>
       </div>
-      <div className='w-full h-[80%] flex flex-col justify-center items-center absolute -z-10'>
-        <Image src='/donut.png' width={1000} height={1000} alt='home_donut' className='drop-shadow-2xl w-[750px] -mt-20 md:mt-0 '/>
-        <p>Puffy Donut</p>
-        <p>Why do our donuts so good?</p>
+      <div className='w-full h-[85%] flex flex-col justify-center items-center absolute'>
+        <Image src='/donut.png' width={1000} height={1000} alt='home_donut' className='drop-shadow-2xl w-[750px] mt-10 md:mt-0 '/>
+        <p className='w-full md:w-[600px] px-5 text-center text-xl sm:text-3xl tracking-wide text-white drop-shadow-[0_2px_2px_rgba(195,125,90,1)] mt-5'>Puffy Dough, we bake our donuts fresh everyday using high-quality ingredients without artificial additives.</p>
+        <Link href='' className='mt-5 sm:mt-10 border text-sm border-[#E78895] px-4 py-2 rounded-full uppercase text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Order</Link>
       </div>
     </div>
+    </>
   )
 }