diff --git a/.eslintrc.js b/.eslintrc.js
index 9030412..056c53d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -66,6 +66,7 @@ module.exports = {
                 ],
             },
         ],
+        "@next/next/no-img-element": "off",
         //#endregion  //*======== Import Sort ===========
     },
     globals: {
diff --git a/public/images/category_img/category_academic.webp b/public/images/category_img/category_academic.webp
new file mode 100644
index 0000000..885deab
Binary files /dev/null and b/public/images/category_img/category_academic.webp differ
diff --git a/public/images/category_img/category_beauty.webp b/public/images/category_img/category_beauty.webp
new file mode 100644
index 0000000..2bc35d6
Binary files /dev/null and b/public/images/category_img/category_beauty.webp differ
diff --git a/public/images/category_img/category_clothes.webp b/public/images/category_img/category_clothes.webp
new file mode 100644
index 0000000..a375f79
Binary files /dev/null and b/public/images/category_img/category_clothes.webp differ
diff --git a/public/images/category_img/category_dorm.webp b/public/images/category_img/category_dorm.webp
new file mode 100644
index 0000000..011864b
Binary files /dev/null and b/public/images/category_img/category_dorm.webp differ
diff --git a/public/images/category_img/category_electronics.webp b/public/images/category_img/category_electronics.webp
new file mode 100644
index 0000000..32727df
Binary files /dev/null and b/public/images/category_img/category_electronics.webp differ
diff --git a/public/images/category_img/category_entertainment.webp b/public/images/category_img/category_entertainment.webp
new file mode 100644
index 0000000..e5645b7
Binary files /dev/null and b/public/images/category_img/category_entertainment.webp differ
diff --git a/public/images/category_img/category_other.webp b/public/images/category_img/category_other.webp
new file mode 100644
index 0000000..da49503
Binary files /dev/null and b/public/images/category_img/category_other.webp differ
diff --git a/src/components/categorycard/CategoryCard.jsx b/src/components/categorycard/CategoryCard.jsx
index 10213ce..8ac4b9d 100644
--- a/src/components/categorycard/CategoryCard.jsx
+++ b/src/components/categorycard/CategoryCard.jsx
@@ -1,17 +1,21 @@
-import Image from "next/image";
+import Link from "next/link";
 
-const CategoryCard = ({ title, image, category }) => {
+const CategoryCard = ({ imgSrc, title, href }) => {
     return (
-        <div className='max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden h-36 w-36 '>
-            {/* <Image
-                className='h-36 w-36 object-cover'
-                src={image}
-                alt={title}
-            /> */}
-            <div className='px-6 py-4 text-center'>
-                <div className='text-lg mb-2 mt-20'>{category}</div>
+        <Link href={href}>
+            <div className='h-fit w-36 group'>
+                <div className='w-36 h-36 border border-slate-300 rounded-lg bg-slate-100 shadow-lg '>
+                    <img
+                        className='rounded-lg object-cover w-full h-full'
+                        src={imgSrc}
+                        alt={title}
+                    />
+                </div>
+                <p className='text-black text-lg text-center mt-4 font-medium group-hover:text-green'>
+                    {title}
+                </p>
             </div>
-        </div>
+        </Link>
     );
 };
 
diff --git a/src/components/input/index.jsx b/src/components/input/index.jsx
index f64c09b..2934f7f 100644
--- a/src/components/input/index.jsx
+++ b/src/components/input/index.jsx
@@ -1,4 +1,7 @@
 import clsx from "clsx";
+
+import { cn } from "@/lib/utils";
+
 const Input = ({
     name,
     type,
@@ -8,6 +11,7 @@ const Input = ({
     requiredMessage,
     validation,
     errors,
+    className = "",
 }) => {
     return (
         <>
@@ -24,12 +28,13 @@ const Input = ({
                 })}
                 placeholder={placeholder}
                 type={type}
-                className={clsx(
+                className={cn(
                     "p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-green",
                     {
                         "border-red": errors[name],
                         "border-slate-300": !errors[name],
                     },
+                    className,
                 )}
             />
             {errors[name] && (
diff --git a/src/constants/index.js b/src/constants/index.js
index 0628bef..177101e 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -4,7 +4,7 @@ export const marketingCardData1 = [
     {
         icon: (
             <Image
-                src={"/marketing-icons/sec1.png"}
+                src='/marketing-icons/sec1.png'
                 alt='Icon 1'
                 width={80}
                 height={100}
@@ -17,7 +17,7 @@ export const marketingCardData1 = [
     {
         icon: (
             <Image
-                src={"/marketing-icons/sec2.png"}
+                src='/marketing-icons/sec2.png'
                 alt='Icon 1'
                 width={80}
                 height={100}
@@ -30,7 +30,7 @@ export const marketingCardData1 = [
     {
         icon: (
             <Image
-                src={"/marketing-icons/sec3.png"}
+                src='/marketing-icons/sec3.png'
                 alt='Icon 1'
                 width={80}
                 height={100}
@@ -45,7 +45,7 @@ export const marketingCardData2 = [
     {
         icon: (
             <Image
-                src={"/secondherosec-icons/sec4.png"}
+                src='/secondherosec-icons/sec4.png'
                 alt='Icon 1'
                 width={80}
                 height={80}
@@ -58,7 +58,7 @@ export const marketingCardData2 = [
     {
         icon: (
             <Image
-                src={"/secondherosec-icons/sec5.png"}
+                src='/secondherosec-icons/sec5.png'
                 alt='Icon 1'
                 width={80}
                 height={80}
@@ -71,7 +71,7 @@ export const marketingCardData2 = [
     {
         icon: (
             <Image
-                src={"/secondherosec-icons/sec6.png"}
+                src='/secondherosec-icons/sec6.png'
                 alt='Icon 1'
                 width={80}
                 height={80}
@@ -84,7 +84,7 @@ export const marketingCardData2 = [
     {
         icon: (
             <Image
-                src={"/secondherosec-icons/sec7.png"}
+                src='/secondherosec-icons/sec7.png'
                 alt='Icon 1'
                 width={80}
                 height={80}
@@ -95,3 +95,48 @@ export const marketingCardData2 = [
             "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
     },
 ];
+
+export const categories = [
+    {
+        id: 1,
+        title: "Electronics",
+        imgSrc: "/images/category_img/category_electronics.webp",
+        href: "products/?category=electronics",
+    },
+    {
+        id: 2,
+        title: "Academic",
+        imgSrc: "/images/category_img/category_academic.webp",
+        href: "products/?category=academic",
+    },
+    {
+        id: 3,
+        title: "Clothes",
+        imgSrc: "/images/category_img/category_clothes.webp",
+        href: "products/?category=clothes",
+    },
+    {
+        id: 4,
+        title: "Dorm",
+        imgSrc: "/images/category_img/category_dorm.webp",
+        href: "products/?category=dorm",
+    },
+    {
+        id: 5,
+        title: "Entertainment",
+        imgSrc: "/images/category_img/category_entertainment.webp",
+        href: "products/?category=entertainment",
+    },
+    {
+        id: 6,
+        title: "Beauty",
+        imgSrc: "/images/category_img/category_beauty.webp",
+        href: "products/?category=beauty",
+    },
+    {
+        id: 7,
+        title: "Other",
+        imgSrc: "/images/category_img/category_other.webp",
+        href: "products/?category=other",
+    },
+];
diff --git a/src/layout/Layout.jsx b/src/layout/Layout.jsx
index e5039ae..b93962f 100644
--- a/src/layout/Layout.jsx
+++ b/src/layout/Layout.jsx
@@ -4,7 +4,7 @@ import Navbar from "@/components/navbar/Navbar";
 export default function Layout({ children }) {
     return (
         <div className='w-screen h-screen overflow-x-hidden '>
-            <div className='container mx-auto px-4 lg:px-0 '>
+            <div className='container mx-auto px-4 lg:px-8 '>
                 <Navbar />
                 {children}
             </div>
diff --git a/src/lib/firebase/firestoreFunctions.js b/src/lib/firebase/firestoreFunctions.js
index 97f0c5f..8f05bd8 100644
--- a/src/lib/firebase/firestoreFunctions.js
+++ b/src/lib/firebase/firestoreFunctions.js
@@ -5,6 +5,8 @@ import {
     doc,
     getDoc,
     getDocs,
+    limit,
+    orderBy,
     query,
     updateDoc,
     where,
@@ -95,3 +97,16 @@ export const getItemByCategory = async (category) => {
 export const deleteDocData = async (collection, docId) => {
     return await deleteDoc(doc(db, collection, docId));
 };
+
+// GET ALL
+export const getAllItems = async () => {
+    const q = query(collection(db, "items"), orderBy("createdAt"), limit(15));
+    const querySnapshot = await getDocs(q);
+    const items = [];
+    querySnapshot.forEach((doc) => {
+        let data = doc.data();
+        data.id = doc.id;
+        items.push(data);
+    });
+    return items;
+};
diff --git a/src/pages/listed-items/index.jsx b/src/pages/listed-items/index.jsx
deleted file mode 100644
index f1954a1..0000000
--- a/src/pages/listed-items/index.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import Link from "next/link";
-
-import CategoryCard from "@/components/categorycard/CategoryCard";
-import Footer from "@/components/footer/Footer";
-import ItemCard from "@/components/itemcard/ItemCard";
-import Navbar from "@/components/navbar/Navbar";
-
-//hey you need to run the server of the fake api (json-server --watch --port 4000 ./_data/db.json) in order for this page to work,
-// also fontawesome won't work for some reason and the advanced search still needs to be reviewed in order to be merged. if u click on the click me it will take u to another page yay.
-// I made a couple of tweaks to the itemcard and category so it could look descent.
-
-export default function Information({ id, items }) {
-    return (
-        <div>
-            <Link href={`listed-items/${id}`}>
-                <h1>Click Me</h1>
-            </Link>
-            <div className='flex flex-row m-6 gap-12 justify-center items-center'>
-                {items.map((item) => (
-                    <div key={item.id}>
-                        <CategoryCard category={item.category} />
-                    </div>
-                ))}
-            </div>
-            <div className='flex flex-row gap-6 justify-center items-center'>
-                {items.map((thing) => (
-                    <div key={thing.id}>
-                        <ItemCard
-                            location={thing.location}
-                            title={thing.title}
-                            description={thing.description}
-                        />
-                        <ItemCard
-                            location={thing.location}
-                            title={thing.title}
-                            description={thing.description}
-                        />
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-}
-
-export async function getStaticProps() {
-    try {
-        const response = await fetch("http://localhost:4000/items");
-        const items = await response.json();
-
-        if (!items) {
-            console.error("Items not found.");
-            return {
-                notFound: true,
-            };
-        }
-        return {
-            props: { items },
-        };
-    } catch (error) {
-        console.error("Error fetching items:", error);
-        return {
-            notFound: true,
-        };
-    }
-}
diff --git a/src/pages/products/index.jsx b/src/pages/products/index.jsx
new file mode 100644
index 0000000..a84b04d
--- /dev/null
+++ b/src/pages/products/index.jsx
@@ -0,0 +1,83 @@
+import { useForm } from "react-hook-form";
+
+import { getAllItems } from "@/lib/firebase/firestoreFunctions";
+
+import Button from "@/components/button/Button";
+import CategoryCard from "@/components/categorycard/CategoryCard";
+import Input from "@/components/input";
+import ItemCard from "@/components/itemcard/ItemCard";
+
+import { categories } from "@/constants";
+
+export default function ProductsPage({ items }) {
+    const {
+        register,
+        handleSubmit,
+        formState: { errors, isSubmitting },
+    } = useForm();
+    return (
+        <div className='my-32'>
+            <div className='my-28'>
+                <h2 className='text-3xl font-semibold mb-10'>
+                    Browse by category:{" "}
+                </h2>
+                <div className='flex justify-between'>
+                    {categories.map((category) => {
+                        return <CategoryCard key={category.id} {...category} />;
+                    })}
+                </div>
+            </div>
+            <div className='flex flex-row justify-start gap-5 items-center'>
+                <Input
+                    className='w-1/3 -ml-5'
+                    name='keyword'
+                    type='text'
+                    labelText=''
+                    placeholder='ex: keyboard'
+                    requiredMessage={false}
+                    register={register}
+                    errors={errors}
+                    validation={{
+                        maxLength: {
+                            value: 30,
+                            message: "30 character max",
+                        },
+                    }}
+                />
+                <Input
+                    className='w-1/5'
+                    name='location'
+                    type='text'
+                    labelText=''
+                    placeholder='ex: Oran'
+                    requiredMessage={false}
+                    register={register}
+                    errors={errors}
+                    validation={{
+                        maxLength: {
+                            value: 30,
+                            message: "30 character max",
+                        },
+                    }}
+                />
+                <Button size='lg'> Search</Button>
+                <Button variant='outlineSecondary'> Add item</Button>
+            </div>
+            <div className='flex flex-wrap justify-between w-full mt-5'>
+                {items.map((item) => (
+                    <ItemCard key={item.id} item={item} />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export async function getServerSideProps() {
+    let items = await getAllItems();
+    items = JSON.parse(JSON.stringify(items));
+    return {
+        props: {
+            items,
+        },
+    };
+}