diff --git a/src/components/UnderBar/UnderBar.jsx b/src/components/UnderBar/UnderBar.jsx
index cc42d60..6802ebb 100644
--- a/src/components/UnderBar/UnderBar.jsx
+++ b/src/components/UnderBar/UnderBar.jsx
@@ -1,7 +1,90 @@
 import React from "react";
-
-function UnderBar() {
-    return <div>UnderBar</div>;
+import Link from "next/link";
+import { twMerge } from "tailwind-merge";
+function UnderBar({ className }) {
+    return (
+        <div
+            className={twMerge(
+                "bg-[#585785] font-bold md:font-semibold md:bg-[#585785] lg:bg-[#585785] lg:font-semibold",
+                className
+            )}
+        >
+            <ul className='p-4 md:p-0 md:flex md:justify-around lg:p- lg:flex lg:justify-around lg:w-[75%] lg:mx-auto '>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize underline hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        All Categories
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Electronics
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Books
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Gaming
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Clothes
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Shoes
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Food
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Transportation
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Furniture
+                    </Link>
+                </li>
+            </ul>
+        </div>
+    );
 }
 
 export default UnderBar;
diff --git a/src/components/UnderBar/__test__/UnderBar.test.js b/src/components/UnderBar/__test__/UnderBar.test.js
new file mode 100644
index 0000000..c906fff
--- /dev/null
+++ b/src/components/UnderBar/__test__/UnderBar.test.js
@@ -0,0 +1,7 @@
+import renderer from "react-test-renderer";
+import UnderBar from "../UnderBar";
+
+it("renders correctly", () => {
+    const tree = renderer.create(<UnderBar />).toJSON();
+    expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/UnderBar/__test__/__snapshots__/UnderBar.test.js.snap b/src/components/UnderBar/__test__/__snapshots__/UnderBar.test.js.snap
new file mode 100644
index 0000000..3d3a59d
--- /dev/null
+++ b/src/components/UnderBar/__test__/__snapshots__/UnderBar.test.js.snap
@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="bg-[#585785] font-bold md:font-semibold md:bg-[#585785] lg:bg-[#585785] lg:font-semibold"
+>
+  <ul
+    className="p-4 md:p-0 md:flex md:justify-around lg:p- lg:flex lg:justify-around lg:w-[75%] lg:mx-auto "
+  >
+    <li>
+      <a
+        className="capitalize underline hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  "
+        href="#"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        All Categories
+      </a>
+    </li>
+    <li>
+      <a
+        className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  "
+        href="#"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        Electronics
+      </a>
+    </li>
+    <li>
+      <a
+        className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  "
+        href="#"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        Books
+      </a>
+    </li>
+    <li>
+      <a
+        className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  "
+        href="#"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        Gaming
+      </a>
+    </li>
+    <li>
+      <a
+        className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  "
+        href="#"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        Clothes
+      </a>
+    </li>
+    <li>
+      <a
+        className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  "
+        href="#"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        Shoes
+      </a>
+    </li>
+    <li>
+      <a
+        className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  "
+        href="#"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        Food
+      </a>
+    </li>
+    <li>
+      <a
+        className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  "
+        href="#"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        Transportation
+      </a>
+    </li>
+    <li>
+      <a
+        className="capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  "
+        href="#"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        Furniture
+      </a>
+    </li>
+  </ul>
+</div>
+`;