diff --git a/donutshop_ecommerce/public/cup.png b/donutshop_ecommerce/public/cup.png
new file mode 100644
index 0000000..629993f
Binary files /dev/null and b/donutshop_ecommerce/public/cup.png differ
diff --git a/donutshop_ecommerce/src/app/globals.css b/donutshop_ecommerce/src/app/globals.css
index bb810fe..4e09f29 100644
--- a/donutshop_ecommerce/src/app/globals.css
+++ b/donutshop_ecommerce/src/app/globals.css
@@ -6,21 +6,23 @@ body{
   background-color: #FDE2DE;
   overflow-x: hidden;
 }
-  
+.text-stroke-3 {
+  text-shadow: -1px -1px 0 #95743D, 2px -1px 0 #95743D, -1px 2px 0 #95743D, 1px 1px 0 #95743D;
+} 
 /*== logo ==*/
 .circle{
     animation: animate 17.5s linear infinite;
 }
 @keyframes animate {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 .letter {
-    transform-origin: 0 50px;
+  transform-origin: 0 50px;
 }
 
 @media (min-width: 765px){
diff --git a/donutshop_ecommerce/src/app/page.js b/donutshop_ecommerce/src/app/page.js
index 9d12e6e..0e423fc 100644
--- a/donutshop_ecommerce/src/app/page.js
+++ b/donutshop_ecommerce/src/app/page.js
@@ -1,5 +1,6 @@
 import Header from '@/components/layout/Header'
 import Hero from '@/components/layout/Hero'
+import HomeMenu from '@/components/layout/HomeMenu'
 import React from 'react'
 
 const page = () => {
@@ -7,6 +8,7 @@ const page = () => {
     <>
       <Header/>
       <Hero/>
+      <HomeMenu/>
     </>
   )
 }
diff --git a/donutshop_ecommerce/src/components/layout/Hero.js b/donutshop_ecommerce/src/components/layout/Hero.js
index 4c1546a..51ed96a 100644
--- a/donutshop_ecommerce/src/components/layout/Hero.js
+++ b/donutshop_ecommerce/src/components/layout/Hero.js
@@ -17,24 +17,25 @@ const Hero = () => {
   return (
     <>
     <div className='w-full h-screen flex flex-col gap-10 md:gap-20'>
-      <div className='mt-10'>
+      <div className='mt-10 -z-20'>
           <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>
+            <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='mt-10'>
+      <div className='mt-10 -z-20'>
           <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'>
+      <div className='mt-10 -z-20'>
           <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>
+            <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-[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>
+      <div className='w-full h-[90%] md:h-[90%] flex flex-col justify-center items-center absolute'>
+        <Image src='/donut.png' width={1000} height={1000} alt='home_donut' className='drop-shadow-2xl w-[340px] sm:w-[500px] mt-64'/>
+        <Image src='/cup.png' width={1000} height={1000} 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-xl 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/HomeMenu.js b/donutshop_ecommerce/src/components/layout/HomeMenu.js
new file mode 100644
index 0000000..d449944
--- /dev/null
+++ b/donutshop_ecommerce/src/components/layout/HomeMenu.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const HomeMenu = () => {
+  return (
+    <div>HomeMenu</div>
+  )
+}
+
+export default HomeMenu
\ No newline at end of file