diff --git a/donutshop_ecommerce/public/cup.png b/donutshop_ecommerce/public/cup.png
deleted file mode 100644
index 629993f..0000000
Binary files a/donutshop_ecommerce/public/cup.png and /dev/null differ
diff --git a/donutshop_ecommerce/public/donut-bg.jpg b/donutshop_ecommerce/public/donut-bg.jpg
new file mode 100644
index 0000000..7a23a5d
Binary files /dev/null and b/donutshop_ecommerce/public/donut-bg.jpg differ
diff --git a/donutshop_ecommerce/public/donut.png b/donutshop_ecommerce/public/donut.png
deleted file mode 100644
index 2415149..0000000
Binary files a/donutshop_ecommerce/public/donut.png and /dev/null differ
diff --git a/donutshop_ecommerce/src/app/globals.css b/donutshop_ecommerce/src/app/globals.css
index 59808f0..df0f84b 100644
--- a/donutshop_ecommerce/src/app/globals.css
+++ b/donutshop_ecommerce/src/app/globals.css
@@ -7,7 +7,6 @@ html{
   overflow-x: hidden;
 }
 body{
-  background-color: #FDE2DE;
   overflow-x: hidden;
 }
 .text-stroke-3 {
diff --git a/donutshop_ecommerce/src/components/layout/Header.js b/donutshop_ecommerce/src/components/layout/Header.js
index fecc420..ce5f0c9 100644
--- a/donutshop_ecommerce/src/components/layout/Header.js
+++ b/donutshop_ecommerce/src/components/layout/Header.js
@@ -36,11 +36,11 @@ const Header = () => {
                 <Link href='' className="">contact</Link>
                 </ul>
             </div>
-            <div className='mt-5'>
+            <div className='mt-3'>
                 <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]">
+                <ul className="hidden md:flex flex-row gap-5 text-xs font-semibold uppercase text-[#95743D] items-center">
                     <Link href='/' className="">Login</Link>
-                    <Link href='/register' className="">Register</Link>
+                    <Link href='/register' className="px-2 py-2 border border-[#DCA0AE] rounded-full hover:bg-[#DCA0AE] hover:text-white duration-300">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 && (
diff --git a/donutshop_ecommerce/src/components/layout/Hero.js b/donutshop_ecommerce/src/components/layout/Hero.js
index 1f2c4c4..50e87e1 100644
--- a/donutshop_ecommerce/src/components/layout/Hero.js
+++ b/donutshop_ecommerce/src/components/layout/Hero.js
@@ -1,13 +1,13 @@
 import React from 'react'
+import Image from 'next/image'
 
 
 const Hero = () => {
-  
-
 
   return (
-    <div className='w-full h-screen flex flex-col gap-10 md:gap-20 relative'>
-      
+    <div className='w-full h-full lg:h-screen flex flex-col relative'>
+      <p className='text-center mt-20 uppercase text-4xl sm:text-6xl md:text-[90px] lg:text-[125px] xl:text-[150px] leading-none text-black font-extrabold tracking-tighter drop-shadow-[0_3px_3px_rgba(45,45,45,0.5)] px-5'>It's donut time</p>
+      <Image src='/donut-bg.jpg' width={1600} height={1600} alt='home-hero' className='w-full md:h-full object-cover -mt-5 sm:-mt-10 -z-10'/>
     </div>
   )
 }
diff --git a/donutshop_ecommerce/src/components/layout/TextAnimation.js b/donutshop_ecommerce/src/components/layout/TextAnimation.js
index c194bc7..bbfbb58 100644
--- a/donutshop_ecommerce/src/components/layout/TextAnimation.js
+++ b/donutshop_ecommerce/src/components/layout/TextAnimation.js
@@ -9,7 +9,7 @@ const TextAnimation = () => {
       };
 
   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='w-full h-[30vh] md:h-[40vh] flex flex-col gap-10 md:gap-20 relative bg-[#68D2E8] rounded-t-3xl -mt-5'>
         <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>