diff --git a/frontend/components/MerchCard.vue b/frontend/components/MerchCard.vue
index 568c7aa..8fb85f8 100644
--- a/frontend/components/MerchCard.vue
+++ b/frontend/components/MerchCard.vue
@@ -83,8 +83,6 @@ export default {
 </script>
 
 <style scoped>
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
 .poppins {
     font-family: "Poppins", sans-serif;
     font-smooth: always;
diff --git a/frontend/pages/productList.vue b/frontend/pages/productList.vue
new file mode 100644
index 0000000..df62365
--- /dev/null
+++ b/frontend/pages/productList.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="m-14">
+      <div class="flex flex-col gap-4 items-center">
+        <h1 class="poppins font-bold w-full text-center text-[40px]">OUR <span class="text-[#EA454C]">PRODUCTS</span></h1>
+        <div class="poppins text-center text-base font-normal text-[#6C6C6C] ">Look at our wide range of products</div>
+      </div>
+      <div class="flex justify-center items-center flex-col gap-8 mt-5 lg:flex-row ">
+      <div class="flex flex-wrap justify-center gap-8 bg-red px-10 py-8">
+          <NuxtLink v-for="data in productlists" :to="`/products/${data.id}`" :key="data.id">
+            <MerchCard
+              :title= "data.title"
+              :type= "data.type"
+              :imageUrl= "data.product_images" 
+              :seller = "data.seller"
+              :price = "data.price"
+              :description = "data.description"
+              :colors= "data.colors"
+              :sizes= "data.sizes"
+              :tags = "data.tags"
+            />
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  
+  <script setup>
+  import MerchCard from '@/components/MerchCard.vue';
+  const config = useRuntimeConfig();
+  const productlists = ref([]);
+   
+  async function fetchEventData() {
+     try {
+      const response = await $fetch(`${config.public.API_BASE_URL}/api/products/`);
+      productlists.value = response.map(product => {
+        return {
+          ...product,
+          product_images: product.product_images.map(img => ({
+            ...img,
+            image: `${config.public.API_BASE_URL}${img.image}`
+          }))
+        };
+      });
+    }
+    catch (error) {
+      console.error('Error fetching event data', error);
+    }
+  }
+  onMounted(() => fetchEventData());
+  </script>
+  
+  
+  <style>
+  .poppins {
+    font-family: "Poppins", sans-serif;
+    font-smooth: always;
+  }
+  </style>