diff --git a/frontend/pages/products.vue b/frontend/pages/products.vue
new file mode 100644
index 0000000..e8e68c0
--- /dev/null
+++ b/frontend/pages/products.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div class="w-full container flex flex-col">
+        <div class="w-full flex justify-between items-center py-[5rem]">
+            <div class="flex flex-col items-start gap-[1.5rem] text-black">
+                <div class="flex-center gap-[.75rem]">
+                    <span>خانه</span>
+                    <span>/</span>
+                    <span>محصولات</span>
+                    <span>/</span>
+                    <span>همه</span>
+                </div>
+                <h1 class="typo-hero-2">همه محصولات</h1>
+            </div>
+
+            <FilterButton />
+        </div>
+        <ul class="w-full grid grid-cols-3 gap-[1.5rem]">
+            <li v-for="i in 9" :key="i">
+                <ProductCard
+                    brand="Samsung"
+                    title="Galaxy S20 Ultra"
+                    picture="/assets/img/product-1.jpg"
+                    :colors="['#0000ff', '#00ff00', 'red']"
+                    :price="599"
+                    :rate="2.4"
+                    tag="New"
+                />
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style scoped></style>