diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index b8ba59a..5adf760 100755
Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ
diff --git a/frontend/package.json b/frontend/package.json
index 1a9c768..8e3b0d7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "resend": "^3.5.0",
+    "sass": "^1.80.5",
     "sharp": "^0.33.5",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
diff --git a/frontend/public/payment.png b/frontend/public/payment.png
index 4454402..7564a18 100644
Binary files a/frontend/public/payment.png and b/frontend/public/payment.png differ
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 3f1c2c0..9d98d4c 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${inter.className} bg-slate-700`}>
+      <body className={`${inter.className} bg-slate-700 w-full max-h-screen text-white`}>
         <Navbar />
         {children}
         <Footer />
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index c0c8e93..b1e486f 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -10,11 +10,11 @@ import styles from "@/styles/Home.module.css";
 import { Poppins } from "next/font/google";
 import { sendEmail } from "./actions/sendEmail";
 import { sendEmails } from "@/lib/mail.utils";
-import ProductCarousel from '@/components/ProductCarousel/ProductCarousel';
+import ProductCarousel from "@/components/ProductCarousel/ProductCarousel";
+import Categories from "@/components/Categories/Categories";
 
 const Popp = Poppins({ weight: "400", subsets: ["latin"] });
 
-
 // improve to drag & drop side cart for more fun
 
 export default function Home() {
@@ -26,9 +26,7 @@ export default function Home() {
     orders: "",
   });
 
-  function newItem(){
-
-  }
+  function newItem() {}
 
   async function newOrder(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -76,13 +74,16 @@ export default function Home() {
   }
 
   return (
-    <main className="flex min-h-screen flex-col px-20 gap-y-6">
+    <main className="flex max-h-screen flex-col px-20 gap-y-6">
       <div className="sm:max-w-max md:w-full">
-        <ProductCarousel/>
+        <ProductCarousel />
       </div>
 
+        <Categories />
+
+
       {/* Body */}
-      <div className="w-full h-content">
+      {/* <div className="w-full h-content">
         <MenuCard Menu={Product} />
       </div>
 
@@ -139,11 +140,11 @@ export default function Home() {
         >
           Submit
         </button>
-      </form>
+      </form> */}
       {/* Add that we will send a paypal invoice to confirm the order and items  */}
 
       {/* Footer */}
-      <div className="flex w-full h-[250px] items-center text-gray-400">
+      {/* <div className="flex w-full h-[250px] items-center text-gray-400">
         <div className="font-bold ">
           Email us at&nbsp;
           <a href="mailto:kevosattire@gmail.com" className="text-emerald-500">
@@ -152,7 +153,7 @@ export default function Home() {
           &nbsp;for any questions!
         </div>
         <div></div>
-      </div>
+      </div> */}
     </main>
   );
 }
diff --git a/frontend/src/app/products/page.tsx b/frontend/src/app/products/page.tsx
new file mode 100644
index 0000000..ddfd2b6
--- /dev/null
+++ b/frontend/src/app/products/page.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import MenuCard from '@/components/ui/MenuCard/MenuCard'
+import Product from "@/../public/batch1/files_list.json";
+
+const Products = () => {
+  return (
+    <div>
+        <MenuCard Menu={Product}/>
+    </div>
+  )
+}
+
+export default Products
\ No newline at end of file
diff --git a/frontend/src/components/Categories/Categories.scss b/frontend/src/components/Categories/Categories.scss
new file mode 100644
index 0000000..5b4bdcd
--- /dev/null
+++ b/frontend/src/components/Categories/Categories.scss
@@ -0,0 +1,15 @@
+.col{
+    flex:1;
+    display: flex; 
+    flex-direction: column;
+    gap: 10px;
+}
+
+.col-l{
+    flex:2;
+}
+.row{
+    flex:1;
+    display:flex;
+    gap: 10px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/Categories/Categories.tsx b/frontend/src/components/Categories/Categories.tsx
new file mode 100644
index 0000000..4f020cf
--- /dev/null
+++ b/frontend/src/components/Categories/Categories.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import "./Categories.scss"
+
+const Categories = () => {
+  return (
+    <div className="flex h-[80svh] gap-[10px] mx-[10px] w-full">
+      <div className="col">
+        <div className="row">r1</div>
+        <div className="row">r2</div>
+      </div>
+      <div className="col">
+        <div className="row">r3</div>
+      </div>
+      <div className="col-l">
+        <div className="row">
+          <div className="col">
+            <div className="row">r4</div>
+          </div>
+          <div className="col">
+            <div className="row">r5</div>
+          </div>
+        </div>
+        <div className="row">r6</div>
+      </div>
+    </div>
+  );
+};
+
+export default Categories;
diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
index dca900f..5647062 100644
--- a/frontend/src/components/Footer/Footer.tsx
+++ b/frontend/src/components/Footer/Footer.tsx
@@ -6,12 +6,12 @@ import Image from "next/image";
 
 const Footer = () => {
   return (
-    <div className="footer text-white mb-[20px] mt-[100px] mx-[200px]">
-      <div className="top flex gap-[50px]">
+    <div className="footer text-white pb-[20px] pt-[80px] px-[200px] bg-slate-800 w-full">
+      <div className="top flex w-full">
         <div className="item flex-1 flex flex-col gap-[10px] text-justify text-sm text-gray-400">
           <h1 className="text-xl font-bold text-gray-200">Categories</h1>
-          <span>Women</span>
           <span>Men</span>
+          <span>Women</span>
           <span>Shoes</span>
           <span>Accessories</span>
           <span>New Arrivals</span>
@@ -24,18 +24,18 @@ const Footer = () => {
           <span>Compare</span>
           <span>Cookies</span>
         </div>
-        <div className="item"></div>
-        <div className="item"></div>
       </div>
-      <div className="Socials flex gap-4 text-xl">
+      <div className="Socials flex gap-4 text-xl mt-[30px] text-gray-300">
         <FaFacebookF />
         <FaInstagram />
         <FaTiktok />
       </div>
-      <div className="bottom text-xs flex gap-4 items-center justify-between mt-[50px]">
+
+      {/* copyright */}
+      <div className="bottom text-xs flex gap-4 items-center justify-between mt-[30px]">
         <div className="flex flex-col gap-4">
           <span className="flex max-w-[320px]">
-            All items are sold under the beleif that they are original works and
+            All items are sold under the belief that they are original works and
             not copyrighted under another company.
           </span>
           <span>© 2024 - Kevos Attire LLC. All rights reserved. </span>
@@ -45,7 +45,7 @@ const Footer = () => {
             src="/payment.png"
             fill
             style={{ objectFit: "cover", objectPosition: "center" }}
-            className="hidden md:block"
+            className="hidden md:block bg-slate-300"
             alt="payment systems"
           />
         </div>
diff --git a/frontend/src/components/ProductCarousel/ProductCarousel.tsx b/frontend/src/components/ProductCarousel/ProductCarousel.tsx
index e687338..8289819 100644
--- a/frontend/src/components/ProductCarousel/ProductCarousel.tsx
+++ b/frontend/src/components/ProductCarousel/ProductCarousel.tsx
@@ -1,98 +1,111 @@
-import * as React from "react"
-import Autoplay from "embla-carousel-autoplay"
+import * as React from "react";
+import Autoplay from "embla-carousel-autoplay";
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from "@/components/ui/carousel"
-import Image from 'next/image';
-
+} from "@/components/ui/carousel";
+import Image from "next/image";
 
 const ProductCarousel = () => {
-
   const plugin = React.useRef(
     Autoplay({ delay: 3000, stopOnInteraction: true })
-  )
+  );
   return (
-    <Carousel  
-    plugins={[plugin.current]}
-    className="w-full max-w-full "
-    onMouseEnter={plugin.current.stop}
-    onMouseLeave={plugin.current.reset}
+    <Carousel
+      plugins={[plugin.current]}
+      className="w-full max-w-full "
+      onMouseEnter={plugin.current.stop}
+      onMouseLeave={plugin.current.reset}
     >
-      <CarouselContent className='-ml-4'>
-        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4">
+      <CarouselContent className="-ml-4">
+        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 hover:scale-125 relative">
           <Image
             src="/batch1/Mockup 126.png"
             width={300}
             height={300}
             alt="shirt 3"
+            quality={100}
           />
+          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
         </CarouselItem>
-        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4">
+        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
           <Image
             src="/batch1/Mockup 18.png"
             width={300}
             height={300}
             alt="shirt 6"
+            quality={100}
           />
+          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
         </CarouselItem>
-        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4">
+        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
           <Image
             src="/batch1/Mockup 73.png"
             width={300}
             height={300}
             alt="shirt 10"
+            quality={100}
           />
+          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
         </CarouselItem>
-        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4">
+        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
           <Image
             src="/batch1/Mockup 112.png"
             width={300}
             height={300}
             alt="shirt 3"
+            quality={100}
           />
+          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
         </CarouselItem>
-        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4">
+        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
           <Image
             src="/batch1/Mockup 4.png"
             width={300}
             height={300}
             alt="shirt 6"
+            quality={100}
           />
+          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
         </CarouselItem>
-        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4">
+        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
           <Image
             src="/batch1/Mockup 97.png"
             width={300}
             height={300}
             alt="shirt 10"
+            quality={100}
           />
+          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
         </CarouselItem>
-        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4">
+        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
           <Image
             src="/batch1/Mockup 132.png"
             width={300}
             height={300}
             alt="shirt 10"
+            quality={100}
           />
+          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
         </CarouselItem>
-        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4">
+        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
           <Image
             src="/batch1/Mockup 133.png"
             width={300}
             height={300}
             alt="shirt 10"
+            quality={100}
           />
+          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
         </CarouselItem>
       </CarouselContent>
       <CarouselPrevious />
       <CarouselNext />
     </Carousel>
+  );
+};
 
-  )
-}
-
-export default ProductCarousel
\ No newline at end of file
+export default ProductCarousel;
diff --git a/frontend/src/components/ui/carousel.tsx b/frontend/src/components/ui/carousel.tsx
index ec505d0..b072751 100644
--- a/frontend/src/components/ui/carousel.tsx
+++ b/frontend/src/components/ui/carousel.tsx
@@ -157,7 +157,8 @@ const CarouselContent = React.forwardRef<
   const { carouselRef, orientation } = useCarousel()
 
   return (
-    <div ref={carouselRef} className="overflow-hidden">
+    // <div ref={carouselRef} className="overflow-hidden">
+    <div ref={carouselRef} className=" overflow-x-clip">
       <div
         ref={ref}
         className={cn(
