diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index a72b322..0c79a4e 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -35,7 +35,7 @@
             <router-link to="/category/cosmetics" class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"> প্রসাধন </router-link>
           </li>
           <li>
-            <router-link to="/category/" class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"> সব </router-link>
+            <router-link to="/category/" class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"> সব বিভাগ </router-link>
           </li>
         </ul>
       </div>
diff --git a/src/pages/category/index.vue b/src/pages/category/index.vue
index 27e0f69..fd76348 100644
--- a/src/pages/category/index.vue
+++ b/src/pages/category/index.vue
@@ -1,3 +1,83 @@
 <template>
+  <div class="container-fluid mx-auto object-center bg-white p-2">
+    <h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals.</h1>
+    <hr class="">
+
+    <div v-if="loading" class="loading"> <h2> Loading... </h2> </div>
+    <div v-if="error" class="error">{{ error }}</div>
     
-</template>
\ No newline at end of file
+    <div v-if="itemByCategory.data"  class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 p-1">
+      <div v-for="(item, index) in itemByCategory.data" class="">
+      <router-link :to="'/item/' + item.slug">
+        <div class="flex items-center justify-center  ">
+          <img :src="'https://api8.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
+            class=" h-48 space-x-4 flex items-center justify-center" />
+        </div>
+        <h3 class="text-center text-1xl ">{{ item.name }}</h3>
+        <p class="text-center">Qty - 2 </p>
+        <p class="text-center">Price - Rs. {{ item.price }} </p>
+      </router-link>
+      </div>
+    </div>
+  </div>
+  <!-- <div class="post">
+    
+    <div v-if="post" class="content">
+      <h2>{{ post.title }}</h2>
+      <p>{{ post.body }}</p>
+    </div>
+  </div> -->
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      itemByCategory: null,
+      error: null,
+    }
+  },
+    mounted: function () {
+    this.getItemByCategory()
+    // console.log(this.$route.query.cat)
+    // console.log(this.fruits)
+  },
+  created() {
+    this.fetchData()
+    // watch the params of the route to fetch the data again
+    // this.$watch(
+    //   () => this.$route.params,
+    //   () => {
+    //     this.fetchData()
+    //   },
+    //   // fetch the data when the view is created and the data is
+    //   // already being observed
+    //   { immediate: true }
+    // )
+  },
+  methods: {
+    fetchData() {
+        // console.log(this.$route.params.id,)
+      this.error = this.post = null
+      this.loading = true
+      fetch('https://api8.siliconpin.com/items/ecom55?filter[category][_eq]=forhim')
+        .then(response => response.json())
+        .then(data => this.itemByCategory = data)
+      console.log(this.itemByCategory)
+      console.log('itemByCategory')
+      this.loading = false
+      // replace `getPost` with your data fetching util / API wrapper
+    //   getPost(this.$route.params.id, (err, post) => {
+    //     this.loading = false
+    //     if (err) {
+    //       this.error = err.toString()
+    //     } else {
+    //       this.post = post
+    //     }
+    //   })
+    },
+  },
+}
+
+</script>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index f61e5c3..7950790 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,87 +1,141 @@
-<!-- <route lang="json">
-{
-  "meta": {
-    "title": "Home"
-  }
-}
-</route>
-
-<script setup>
-useHead({
-  title: 'Home',
-  title: computed(() => siteData.title),
-    meta: [
-      {
-        name: `description`,
-        content: computed(() => siteData.description),
-      },
-    ]
-})
-</script> -->
 <template>
 
-</template>
+  <div class="container-fluid ">
 
+    
+
+    <h1 class="font-medium text-center leading-tight text-xl p-4 "> গয়না </h1>
+    <hr class="">
+    <div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
+      <div v-for="(item, index) in catJewlry.slice(0,8)" class="">
+        <div class="flex items-center justify-center  ">
+          <img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
+            class=" h-48 space-x-4 flex items-center justify-center" />
+        </div>
+        <h3 class="text-center text-1xl font-bold  uppercase mt-3">{{ item.name }}</h3>
+        <p class="text-center">{{index}} </p>
+        <p class="text-center">Price - Rs. {{ item.price }} </p>       
+      </div>
+    </div>
+      
+
+    <h1 class="font-medium text-center leading-tight text-xl p-4 "> প্রসাধনী </h1>
+    <hr class="">
+    <div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
+      <div v-for="(item, index) in catCosmetics.slice(0,8)" class="">
+        <div class="flex items-center justify-center  ">
+          <img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
+            class=" h-48 space-x-4 flex items-center justify-center" />
+        </div>
+        <h3 class="text-center text-1xl font-bold  uppercase mt-3">{{ item.name }}</h3>
+        <p class="text-center">{{index}} </p>
+        <p class="text-center">Price - Rs. {{ item.price }} </p>       
+      </div>
+    </div>
+
+    <h1 class="font-medium text-center leading-tight text-xl p-4 "> সার্ভিস </h1>
+    <hr class="">
+    <div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
+      <div v-for="(item, index) in catServices.slice(0,8)" class="">
+        <div class="flex items-center justify-center  ">
+          <img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
+            class=" h-48 space-x-4 flex items-center justify-center" />
+        </div>
+        <h3 class="text-center text-1xl font-bold  uppercase mt-3">{{ item.name }}</h3>
+        <p class="text-center">{{index}} </p>
+        <p class="text-center">Price - Rs. {{ item.price }} </p>       
+      </div>
+    </div>
+
+    <h1 class="font-medium text-center leading-tight text-xl p-4 "> সবজি </h1>
+    <hr class="">
+    <div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
+      <div v-for="(item, index) in catVegetables.slice(0,8)" class="">
+        <div class="flex items-center justify-center  ">
+          <img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
+            class=" h-48 space-x-4 flex items-center justify-center" />
+        </div>
+        <h3 class="text-center text-1xl font-bold  uppercase mt-3">{{ item.name }}</h3>
+        <p class="text-center">{{index}} </p>
+        <p class="text-center">Price - Rs. {{ item.price }} </p>       
+      </div>
+    </div>
+
+    <h1 class="font-medium text-center leading-tight text-xl p-4 "> ফল </h1>
+    <hr class="">
+    <div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
+      <div v-for="(item, index) in catFruits.slice(0,8)" class="">
+        <div class="flex items-center justify-center  ">
+          <img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
+            class=" h-48 space-x-4 flex items-center justify-center" />
+        </div>
+        <h3 class="text-center text-1xl font-bold  uppercase mt-3">{{ item.name }}</h3>
+        <p class="text-center">{{index}} </p>
+        <p class="text-center">Price - Rs. {{ item.price }} </p>       
+      </div>
+    </div>
+    <h1 class="font-medium text-center leading-tight text-xl p-4 "> মুদি </h1>
+    <hr class="">
+    <div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
+      <div v-for="(item, index) in catGrocery.slice(0,8)" class="">
+        <div class="flex items-center justify-center  ">
+          <img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
+            class=" h-48 space-x-4 flex items-center justify-center" />
+        </div>
+        <h3 class="text-center text-1xl font-bold  uppercase mt-3">{{ item.name }}</h3>
+        <p class="text-center">{{index}} </p>
+        <p class="text-center">Price - Rs. {{ item.price }} </p>       
+      </div>
+    </div>
+
+
+  </div>
+
+
+
+
+</template>
 <script>
 export default {
-  // data() {
-  //   return {
-  //     smProducts: [],
-  //     catFruits: [],
-  //     catVegetables: [],
-  //     catGrocery: [],
-  //     catServices: [],
-  //     catJewlry: [],
-  //     catCosmetics: [],
-  //     catCloths: [],
-  //     // product: [],
-  //     // shoppingCart: []
-  //   }
-  // },
-
-  // head() {
-  //   return {
-  //     title: 'Swarna Math - Delivery App',
-  //     meta: [
-  //       // hid is used as unique identifier. Do not use `vmid` for it as it will not work
-  //       {
-  //         hid: 'description',
-  //         name: 'description',
-  //         content: 'Swarna Math - Delivery App'
-  //       },
-  //       {
-  //         hid: 'og:description',
-  //         name: 'og:description',
-  //         content: 'Swarna Math - Delivery App'
-  //       },
-  //       {
-  //         hid: 'og:title',
-  //         name: 'og:title',
-  //         content: 'Swarna Math - Delivery App'
-  //       },
-  //       {
-  //         hid: 'og:url',
-  //         name: 'og:url',
-  //         content: 'https://swarnamath.com/'
-  //       },
-  //       {
-  //         hid: 'og:image',
-  //         name: 'og:image',
-  //         content: 'https://api7.siliconpin.com/icon.png'
-  //       },
-  //       {
-  //         hid: 'og:image:secure_url',
-  //         name: 'og:image:secure_url',
-  //         content: 'https://api7.siliconpin.com/icon.png'
-  //       },
-  //       {
-  //         hid: 'og:type',
-  //         name: 'og:type',
-  //         content: 'Delivery App'
-  //       }
-  //     ]
-  //   }
-  // }
+  data() {
+    return {
+      isLoading: true,
+      smProducts: {},
+      catFruits: [],
+      catVegetables: {},
+      catGrocery: {},
+      catServices: {},
+      catJewlry: {},
+      catCosmetics: {},
+      catCloths: {}
+    }
+  },
+  mounted: function () {
+    this.getItemByCategory()
+    // console.log(this.smProducts)
+    // console.log(this.$route.query.cat)
+    // console.log(this.fruits)
+  },
+  methods: {
+    getItemByCategory() {
+      fetch('https://api7.siliconpin.com/items/swarnamath?offset=0&limit=90')
+        // fetch('https://api7.siliconpin.com/items/ecom55')
+        .then(response => response.json())
+        .then(data => {
+          this.smProducts = data
+          // console.log(data)
+          this.catFruits = data.data.filter(item => { if (item.cat == "fruits") return item });
+          this.catVegetables = data.data.filter(item => { if (item.cat == "vegetables") return item });
+          this.catGrocery = data.data.filter(item => { if (item.cat == "grocery") return item });
+          this.catServices = data.data.filter(item => { if (item.cat == "services") return item });
+          this.catJewlry = data.data.filter(item => { if (item.cat == "jewlry") return item });
+          this.catCosmetics = data.data.filter(item => { if (item.cat == "cosmetics") return item });
+          this.catCloths = data.data.filter(item => { if (item.cat == "cloths") return item });
+          
+          this.isLoading = false
+        })
+      
+    }
+  }
 }
-
 </script>
\ No newline at end of file