diff --git a/donutshop_ecommerce/public/drink1.png b/donutshop_ecommerce/public/drink1.png
new file mode 100644
index 0000000..eefc57c
Binary files /dev/null and b/donutshop_ecommerce/public/drink1.png differ
diff --git a/donutshop_ecommerce/src/app/globals.css b/donutshop_ecommerce/src/app/globals.css
index c934769..59808f0 100644
--- a/donutshop_ecommerce/src/app/globals.css
+++ b/donutshop_ecommerce/src/app/globals.css
@@ -33,4 +33,5 @@ body{
   .letter {
     transform-origin: 0 70px;
   }
-}
\ No newline at end of file
+}
+
diff --git a/donutshop_ecommerce/src/app/page.js b/donutshop_ecommerce/src/app/page.js
index b2d32e1..739186c 100644
--- a/donutshop_ecommerce/src/app/page.js
+++ b/donutshop_ecommerce/src/app/page.js
@@ -3,6 +3,7 @@ import Header from '@/components/layout/Header'
 import Hero from '@/components/layout/Hero'
 import HomeCreateBox from '@/components/layout/HomeCreateBox'
 import HomeMenu from '@/components/layout/HomeMenu'
+import HomeDrink from '@/components/layout/HomeDrink'
 import React from 'react'
 import { ParallaxProvider } from "react-scroll-parallax";
 
@@ -13,6 +14,7 @@ const page = () => {
     <Hero/>
     <HomeMenu/>
     <HomeCreateBox/>
+    <HomeDrink/>
   </ParallaxProvider>
 
   )
diff --git a/donutshop_ecommerce/src/components/layout/HomeCreateBox.js b/donutshop_ecommerce/src/components/layout/HomeCreateBox.js
index cf8c5cd..97addd1 100644
--- a/donutshop_ecommerce/src/components/layout/HomeCreateBox.js
+++ b/donutshop_ecommerce/src/components/layout/HomeCreateBox.js
@@ -5,26 +5,45 @@ import { Parallax } from "react-scroll-parallax";
 const HomeCreateBox = () => {
   return (
     <Parallax speed={-5}>
-      <div className='w-full h-full bg-[#FFD0D0] rounded-t-3xl md:pb-20 pb-10'>
+      <div className='w-full h-full bg-[#FFD0D0] rounded-t-3xl md:pb-20 pb-10 px-5'>
         <div className='grid grid-cols-1 md:grid-cols-2 items-center py-10 px-5 lg:px-10'>
           <div className='w-full hidden md:flex mt-5 md:mt-0 justify-center md:justify-start'>
             <button className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border border-[#95743D] text-[#95743D] hover:text-[#FFD0D0] hover:bg-[#E78895] hover:border-[#E78895] duration-300'>View Product</button>
           </div>
           <div className='flex flex-col gap-4'>
-            <p className='text-center md:text-end text-4xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[4.5vw] text-[#FF8989] uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Mothers Day Box</p>
-            <p className='w-full text-center md:text-end text-base lg:text-lg text-[#95743D]'>Lets show our appreciation for our moms by treating them with Mothers Day Box from Puffy Dough!</p> 
+            <p className='text-center md:text-end text-3xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[4.5vw] text-[#FF8989] uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Mothers Day Box</p>
+            <p className='w-full text-center md:text-end text-base lg:text-lg xl:text-xl text-[#95743D]'>Lets show our appreciation for our moms by treating them with the special Mothers Day Box from Puffy Dough!</p> 
           </div>
           <div className='w-full flex md:hidden mt-5 md:mt-0 justify-center md:justify-end items-end text-end'>
             <button className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border border-[#95743D] text-[#95743D] hover:text-[#FFD0D0] hover:bg-[#E78895] hover:border-[#E78895] duration-300'>View Product</button>
           </div>
         </div>
-
-        <div className='flex flex-col md:flex-row justify-between px-5 lg:px-10'>
-          <div className='flex justify-center md:justify-start items-center mt-5 md:mt-0'>
-            <Image src='/donuts_special.jpg' width={800} height={800} alt='home-create-box' className='w-[800px] h-[500px] md:h-[600px] xl:-[700px] 2xl:h-[800px] object-cover rounded-xl'/>
+        <div className='flex flex-col md:flex-row justify-between px-2 lg:px-5 mb-5'>
+          <div className='flex justify-center md:justify-start items-center px-2'>
+            <Image src='/donuts_special.jpg' width={800} height={800} alt='home-create-box' className='w-[800px] md:w-[600px] xl:w-[800px] h-[500px] md:h-[600px] xl:h-[650px] 2xl:h-[800px] object-cover rounded-xl'/>
           </div>
-          <div>
-            <p>Mothers Day Box</p>
+          <div className='flex flex-col text-center md:text-end px-2 gap-5 md:items-end items-center'>
+            <p className='text-base lg:text-lg xl:text-xl text-[#AE1D74] font-bold mt-5 md:mt-0'>Mothers Day Donut Flavours:</p>
+            <div className='text-base lg:text-lg text-[#AE1D74]'>
+              <p className='font-semibold'>Love You Mama</p>
+              <p className='text-sm md:text-base'>Strawberry frosted raised ring topped with Mothers Day sprinkle</p>
+            </div>
+            <div className='text-base lg:text-lg text-[#AE1D74]'>
+              <p className='font-semibold'>Sweet & Salty</p>
+              <p className='text-sm md:text-base'>Strawberry frosted vanilla cake topped with cream cheese frosting and crushed pretzels</p>
+            </div>
+            <div className='text-base lg:text-lg text-[#AE1D74]'>
+              <p className='font-semibold'>Hi Mom</p>
+              <p className='text-sm md:text-base'>Vanilla cake topped with vanilla buttercream, covered in pink icing with candy décor and a red rosette</p>
+            </div>
+            <div className='text-base lg:text-lg text-[#AE1D74]'>
+              <p className='font-semibold'>Love Mom</p>
+              <p className='text-sm md:text-base'>Hot pink frosted with black and white drizzle and a heart-shaped doughnut filled with chocolate whip </p>
+            </div>
+            <div className='text-base lg:text-lg text-[#AE1D74]'>
+              <p className='font-semibold'>Tenderheart Bear</p>
+              <p className='text-sm md:text-base'>Raspberry frosted raised bear topped with Tenderheart Bear décor</p>
+            </div>
           </div>
         </div>
       </div>
diff --git a/donutshop_ecommerce/src/components/layout/HomeDrink.js b/donutshop_ecommerce/src/components/layout/HomeDrink.js
new file mode 100644
index 0000000..6b4fb29
--- /dev/null
+++ b/donutshop_ecommerce/src/components/layout/HomeDrink.js
@@ -0,0 +1,84 @@
+import React from 'react'
+import { Parallax } from "react-scroll-parallax";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import Image from 'next/image';
+import DrinkItem from '../menu/DrinkItem';
+
+const HomeMonthly = () => {
+  var drinkSlide = {
+    dots: false,
+    infinite: false,
+    speed: 500,
+    slidesToShow: 5,
+    initialSlide: 0,
+    responsive: [
+      {
+        breakpoint: 1524,
+        settings: {
+        slidesToShow: 4,
+        slidesToScroll: 4,
+        infinite: true,
+        dots: false
+        }
+      },
+      {
+        breakpoint: 1024,
+        settings: {
+        slidesToShow: 3,
+        slidesToScroll: 3,
+        infinite: true,
+        dots: false
+        }
+      },
+      {
+        breakpoint: 810,
+        settings: {
+        slidesToShow: 2,
+        slidesToScroll: 2,
+        initialSlide: 2
+        }
+      },
+      {
+        breakpoint: 480,
+        settings: {
+        slidesToShow: 1,
+        slidesToScroll: 1
+        }
+      }
+    ]
+  };
+  
+  return (
+    <Parallax speed={0}>
+      <div className='w-full h-full bg-[#5F8670] rounded-t-3xl pb-20'>
+        <div className='flex flex-col gap-4 py-5 sm:py-10 px-5 lg:px-10'>
+          <p className='text-center md:text-start text-3xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[5vw] text-[#BACD92] uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Coffee and Drinks</p>
+          <p className='w-full md:w-[500px] lg:w-[600px] text-center md:text-start text-base lg:text-lg xl:text-xl text-white'>Enjoy a selection of freshly made coffee and drinks available in a range of delightful flavors.</p> 
+        </div>
+        <div className='py-2 sm:py-10 px-10'>
+          <Slider arrows={false} {...drinkSlide}>
+            <div className='px-2'> 
+              <DrinkItem/>
+            </div>
+            <div className='px-2'> 
+              <DrinkItem/>
+            </div>
+            <div className='px-2'> 
+              <DrinkItem/>
+            </div>
+            <div className='px-2'> 
+              <DrinkItem/>
+            </div>
+            <div className='px-2'> 
+              <DrinkItem/>
+            </div>
+          </Slider>
+        </div>
+      </div>
+    </Parallax>
+  )
+}
+
+export default HomeMonthly
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/components/layout/HomeMenu.js b/donutshop_ecommerce/src/components/layout/HomeMenu.js
index b9dff0b..e49e085 100644
--- a/donutshop_ecommerce/src/components/layout/HomeMenu.js
+++ b/donutshop_ecommerce/src/components/layout/HomeMenu.js
@@ -6,7 +6,7 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
 
-const HomeMenu = () => {
+const HomeDrink = () => {
   var menuSlide = {
     dots: false,
     infinite: false,
@@ -52,10 +52,10 @@ const HomeMenu = () => {
   
   return (
     <Parallax speed={-10}>
-    <div className='w-full h-full bg-[#D1BB9E] rounded-t-3xl md:pb-20 pb-10'>
+    <div className='w-full h-full bg-[#D1BB9E] rounded-t-3xl md:pb-40 pb-20'>
       <div className='grid grid-cols-1 md:grid-cols-2 items-center py-5 sm:py-10 px-5 lg:px-10'>
         <div className='flex flex-col gap-4'>
-          <p className='text-center md:text-start text-4xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[5vw] text-yellow-100 uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Treat yourself</p>
+          <p className='text-center md:text-start text-3xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[5vw] text-yellow-100 uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Treat yourself</p>
           <p className='w-full md:w-[500px] lg:w-[800px] text-center md:text-start text-base lg:text-lg xl:text-xl text-white'>Puffy Dought offers a wide range of flavors to choose from including classic favorites like glazed and chocolate, as well as unique flavors like Black Sesame Matcha and Passionfruit Creamcheese</p> 
         </div>
         <div className='w-full flex mt-5 md:mt-0 justify-center md:justify-end items-end text-end'>
@@ -86,4 +86,4 @@ const HomeMenu = () => {
   )
 }
 
-export default HomeMenu
\ No newline at end of file
+export default HomeDrink
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/components/menu/DrinkItem.js b/donutshop_ecommerce/src/components/menu/DrinkItem.js
new file mode 100644
index 0000000..67cadeb
--- /dev/null
+++ b/donutshop_ecommerce/src/components/menu/DrinkItem.js
@@ -0,0 +1,15 @@
+import Image from 'next/image'
+import React from 'react'
+
+const DrinkItem = () => {
+  return (
+    <div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl bg-white h-[350px] sm:h-[450px]'>
+      <Image src='/drink1.png' width={300} height={300} alt='menu-donut' className='w-[80px] sm:w-[100px]'/>
+      <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>coffee milkshake</p>
+      <p className='text-[#95743D] text-sm'>$7.59</p>
+      <button className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
+    </div>
+  )
+}
+
+export default DrinkItem
\ No newline at end of file