diff --git a/donutshop_ecommerce/public/favicon.png b/donutshop_ecommerce/public/favicon.png
new file mode 100644
index 0000000..e0279f3
Binary files /dev/null and b/donutshop_ecommerce/public/favicon.png differ
diff --git a/donutshop_ecommerce/src/app/layout.js b/donutshop_ecommerce/src/app/layout.js
index 068fee2..6b01e4e 100644
--- a/donutshop_ecommerce/src/app/layout.js
+++ b/donutshop_ecommerce/src/app/layout.js
@@ -1,5 +1,6 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
+import Header from "@/components/layout/Header";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -11,7 +12,11 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className} suppressHydrationWarning={true}>{children}</body>
+      <link rel="shortcut icon" href="/favicon.png" />
+      <body className={inter.className} suppressHydrationWarning={true}>
+        <Header/>
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/donutshop_ecommerce/src/app/page.js b/donutshop_ecommerce/src/app/page.js
index a19ae18..d20ba7b 100644
--- a/donutshop_ecommerce/src/app/page.js
+++ b/donutshop_ecommerce/src/app/page.js
@@ -1,6 +1,5 @@
 "use client"
 import HomeCustom from '@/components/layout/HomeCustom'
-import Header from '@/components/layout/Header'
 import Hero from '@/components/layout/Hero'
 import HomeCreateBox from '@/components/layout/HomeCreateBox'
 import HomeMenu from '@/components/layout/HomeMenu'
@@ -8,19 +7,19 @@ import HomeMonthly from '@/components/layout/HomeMonthly'
 import React from 'react'
 import { ParallaxProvider } from "react-scroll-parallax";
 import Footer from '@/components/layout/Footer'
+import TextAnimation from '@/components/layout/TextAnimation'
 
 const page = () => {
   return (
   <ParallaxProvider>
-    <Header/>
     <Hero/>
+    <TextAnimation/>
     <HomeMenu/>
     <HomeCreateBox/>
     <HomeMonthly/>
     <HomeCustom/>
     <Footer/>
   </ParallaxProvider>
-
   )
 }
 
diff --git a/donutshop_ecommerce/src/app/register/page.js b/donutshop_ecommerce/src/app/register/page.js
new file mode 100644
index 0000000..63d134b
--- /dev/null
+++ b/donutshop_ecommerce/src/app/register/page.js
@@ -0,0 +1,14 @@
+"use client"
+import React from 'react'
+
+const RegisterPage = () => {
+
+
+  return (
+    <>
+    This is register page
+    </>
+  )
+}
+
+export default RegisterPage
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/components/layout/Footer.js b/donutshop_ecommerce/src/components/layout/Footer.js
index de95573..f6601c0 100644
--- a/donutshop_ecommerce/src/components/layout/Footer.js
+++ b/donutshop_ecommerce/src/components/layout/Footer.js
@@ -1,11 +1,12 @@
 import React from 'react'
-import { GiCoffeeBeans } from "react-icons/gi";
+import { GiCoffeeBeans, GiDonut } from "react-icons/gi";
+import { BiSolidDrink } from "react-icons/bi";
 
 const Footer = () => {
   return (
     <div className='w-full h-full bg-[#FFC55A] px-5 lg:px-10 pb-5'>
         <div className='grid grid-cols-1 md:grid-cols-2'>
-            <div className='w-full xl:w-3/4 flex flex-col gap-4 text-start text-white pl-0 md:pl-10 xl:pl-20 2xl:pl-40'>
+            <div className='w-full xl:w-3/4 flex flex-col gap-4 text-start text-white pl-0 pr-0 md:pr-5 lg:pr-0 md:-pl-10 lg:pl-10 xl:pl-20 2xl:pl-40'>
                 <p className='uppercase font-bold text-2xl lg:text-4xl mb-0 lg:mb-2'>Stay up to date</p>
                 <input placeholder='Name' className='outline-none bg-transparent px-4 lg:px-6 py-2 lg:py-3 border border-white rounded-full'/>
                 <input placeholder='Email' className='outline-none bg-transparent px-4 lg:px-6 py-2 lg:py-3 border border-white rounded-full'/>
@@ -22,7 +23,7 @@ const Footer = () => {
                     </div>
                 </div>
                 <div className='flex flex-col gap-2 sm:gap-3 text-white'>
-                    <GiCoffeeBeans className='text-2xl sm:text-3xl'/>
+                    <GiDonut className='text-2xl sm:text-3xl'/>
                     <p className='text-base sm:text-lg font-bold uppercase'>Learn</p>
                     <div className='flex flex-col gap-2 text-sm sm:text-base'>
                         <p className='cursor-pointer hover:underline'>Gift Cards</p>
@@ -31,7 +32,7 @@ const Footer = () => {
                     </div>
                 </div>
                 <div className='flex flex-col gap-2 sm:gap-3 text-white'>
-                    <GiCoffeeBeans className='text-2xl sm:text-3xl'/>
+                    <BiSolidDrink className='text-2xl sm:text-3xl'/>
                     <p className='text-base sm:text-lg font-bold uppercase'>Contact</p>
                     <div className='flex flex-col gap-2 text-sm sm:text-base'>
                         <p className='cursor-pointer hover:underline'>Contact Us</p>
diff --git a/donutshop_ecommerce/src/components/layout/Header.js b/donutshop_ecommerce/src/components/layout/Header.js
index e16755b..fecc420 100644
--- a/donutshop_ecommerce/src/components/layout/Header.js
+++ b/donutshop_ecommerce/src/components/layout/Header.js
@@ -14,40 +14,47 @@ const Header = () => {
     
 
   return (
-    <div className='w-full h-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='w-full h-full'>
+        <div className='flex justify-between 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'>
-                    <Image src='/logo.png' width={120} height={120} alt='' className='w-[100px]'/>
+                <Image src='/logo.png' width={120} height={120} alt='' className='w-[70px] md:w-[100px]'/>
                 </div>
                 <div className='circle absolute mt-10'>
-                    {Letter.map((item, index) => {
-                        return (
-                        <span key={index} className="letter inline-block absolute -top-[50px] md:-top-[70px] text-xs text-[#95743D]" style={{transform: `rotate(${index * 14.5}deg)`}}>{item}</span>
-                        );
-                    })}
+                {Letter.map((item, index) => {
+                    return (
+                    <span key={index} className="letter inline-block absolute -top-[50px] md:-top-[70px] text-xs text-[#95743D]" style={{transform: `rotate(${index * 14.5}deg)`}}>{item}</span>
+                    );
+                })}
                 </div>
             </div>
-            <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>
+            <div className='mt-5'>
+                <ul className="hidden md:flex flex-row gap-10 text-xs font-semibold uppercase text-[#95743D]">
+                <Link href='/' className="">Home</Link>
+                <Link href='' className="">Menu</Link>
+                <Link href='' className="">about</Link>
+                <Link href='' className="">contact</Link>
+                </ul>
+            </div>
+            <div className='mt-5'>
+                <div className="flex justify-end md:justify-center items-center w-full text-white">
+                <ul className="hidden md:flex flex-row gap-5 text-xs font-semibold uppercase text-[#95743D]">
+                    <Link href='/' className="">Login</Link>
+                    <Link href='/register' className="">Register</Link>
                 </ul>
                 <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="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>        
+                    <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>
             </div>
         </div>
     </div>
diff --git a/donutshop_ecommerce/src/components/layout/Hero.js b/donutshop_ecommerce/src/components/layout/Hero.js
index 42484ea..1f2c4c4 100644
--- a/donutshop_ecommerce/src/components/layout/Hero.js
+++ b/donutshop_ecommerce/src/components/layout/Hero.js
@@ -1,46 +1,14 @@
-"use client"
 import React from 'react'
-import {motion} from "framer-motion"
-import Image from 'next/image';
-import Link from 'next/link';
 
 
 const Hero = () => {
-  const textAnimation = {
-    animate: {x: [0, -1000], transition: {x: {repeat: Infinity, repeatType: "loop", duration: 5, ease: "linear",},},},
-  };
-  const textAnimation1 = {
-    animate: {x: [-1000, 0], transition: {x: {repeat: Infinity, repeatType: "loop", duration: 5, ease: "linear",},},},
-  };
   
 
 
   return (
-    <>
     <div className='w-full h-screen flex flex-col gap-10 md:gap-20 relative'>
-      <div className='mt-10 -z-20 w-[100vw] max-w-[100%] overflow-x-hidden'>
-          <motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
-            <p className='mt-[30px] text-7xl md:text-9xl text-[#FDE2DE] font-bold tracking-wider uppercase text-stroke-3 overflow-hidden'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
-          </motion.div>
-      </div>
-      <div className='mt-10 -z-20 w-[100vw] max-w-[100%]overflow-x-hidden'>
-          <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 w-[100vw] max-w-[100%] overflow-x-hidden'>
-          <motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
-            <p className='mt-[30px] text-7xl md:text-9xl text-[#FDE2DE] font-bold tracking-wider uppercase text-stroke-3'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
-          </motion.div>
-      </div>
-      <div className='w-full h-[90%] md:h-[90%] flex flex-col justify-center items-center absolute'>
-        <Image src='/donut.png' width={500} height={300} alt='home_donut' className='drop-shadow-2xl w-[340px] sm:w-[500px] mt-64'/>
-        <Image src='/cup.png' width={500} height={300} alt='home_donut' className='drop-shadow-2xl w-[340px] sm:w-[450px] -mt-40 sm:-mt-60 absolute -z-10'/>
-        <p className='w-full md:w-[700px] px-5 text-center text-2xl sm:text-4xl tracking-wide text-white drop-shadow-[0_2px_2px_rgba(195,125,90,1)] mt-5'>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>
-    </>
   )
 }
 
diff --git a/donutshop_ecommerce/src/components/layout/TextAnimation.js b/donutshop_ecommerce/src/components/layout/TextAnimation.js
new file mode 100644
index 0000000..c194bc7
--- /dev/null
+++ b/donutshop_ecommerce/src/components/layout/TextAnimation.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import {motion} from "framer-motion"
+
+
+
+const TextAnimation = () => {
+    const textAnimation = {
+        animate: {x: [0, -1000], transition: {x: {repeat: Infinity, repeatType: "loop", duration: 5, ease: "linear",},},},
+      };
+
+  return (
+    <div className='w-full h-[30vh] md:h-[40vh] flex flex-col gap-10 md:gap-20 relative bg-[#68D2E8] rounded-t-3xl'>
+        <div className='mt-10 w-[100vw] max-w-[100%] overflow-x-hidden'>
+          <motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
+            <p className='mt-[30px] text-5xl md:text-9xl text-white font-bold tracking-wider uppercase overflow-hidden'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
+          </motion.div>
+      </div>
+    </div>
+  )
+}
+
+export default TextAnimation
\ No newline at end of file
