diff --git a/src/components.d.ts b/src/components.d.ts
index 19071a5..56d8bed 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -21,6 +21,7 @@ declare module 'vue' {
     CBDemo1: typeof import('./components/buyer/CBDemo1.vue')['default']
     CBDemo2: typeof import('./components/buyer/CBDemo2.vue')['default']
     CBDemo3: typeof import('./components/buyer/CBDemo3.vue')['default']
+    CBFeature: typeof import('./components/buyer/CBFeature.vue')['default']
     CBFlashSales: typeof import('./components/buyer/CBFlashSales.vue')['default']
     CBFooter: typeof import('./components/buyer/CBFooter.vue')['default']
     CBHead: typeof import('./components/buyer/CBHead.vue')['default']
@@ -41,6 +42,7 @@ declare module 'vue' {
     CCartItem: typeof import('./components/buyer/CCartItem.vue')['default']
     CError: typeof import('./components/CError.vue')['default']
     CExtension: typeof import('./components/CExtension.vue')['default']
+    CGetCategoryChildren: typeof import('./components/CGetCategoryChildren.vue')['default']
     CLoading: typeof import('./components/CLoading.vue')['default']
     CMap: typeof import('./components/CMap.vue')['default']
     Counter: typeof import('./components/Counter.vue')['default']
@@ -71,6 +73,7 @@ declare module 'vue' {
     IBCreate: typeof import('./components/icons/account/IBCreate.vue')['default']
     IBDashboard: typeof import('./components/icons/account/IBDashboard.vue')['default']
     IBDelete: typeof import('./components/icons/account/IBDelete.vue')['default']
+    IBDescription: typeof import('./components/icons/product/IBDescription.vue')['default']
     IBDownload: typeof import('./components/icons/account/IBDownload.vue')['default']
     IBEmail: typeof import('./components/icons/auth/IBEmail.vue')['default']
     IBEye: typeof import('./components/icons/account/IBEye.vue')['default']
@@ -140,6 +143,7 @@ declare module 'vue' {
     IRupee: typeof import('./components/icons/header/IRupee.vue')['default']
     ISave: typeof import('./components/icons/ISave.vue')['default']
     ISChat: typeof import('./components/icons/seller/ISChat.vue')['default']
+    ISDescription: typeof import('./components/icons/seller/ISDescription.vue')['default']
     ISearch: typeof import('./components/icons/ISearch.vue')['default']
     ISEdit: typeof import('./components/icons/seller/ISEdit.vue')['default']
     ISell: typeof import('./components/icons/ISell.vue')['default']
@@ -177,8 +181,8 @@ declare module 'vue' {
     PSRegister: typeof import('./components/partterns/seller/PSRegister.vue')['default']
     README: typeof import('./components/README.md')['default']
     RMenu: typeof import('./components/header/RMenu.vue')['default']
+    RProductCard: typeof import('./components/rendering/RProductCard.vue')['default']
     RProductCardGrid: typeof import('./components/rendering/RProductCardGrid.vue')['default']
-    RProductSearch: typeof import('./components/rendering/RProductSearch.vue')['default']
     SHead: typeof import('./components/seller/SHead.vue')['default']
     SLMenu: typeof import('./components/seller/SLMenu.vue')['default']
   }
diff --git a/src/components/CGetCategoryChildren.vue b/src/components/CGetCategoryChildren.vue
new file mode 100644
index 0000000..a576333
--- /dev/null
+++ b/src/components/CGetCategoryChildren.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { useRouter } from 'vue-router'
+import { useProduct } from '~/stores/product'
+
+const router = useRouter()
+const product = useProduct()
+
+const props = defineProps({
+  level0: Object,
+})
+
+const searchCategory = async(category) => {
+  await router.push(`/search/${encodeURIComponent(category)}`)
+  await location.reload()
+}
+
+</script>
+
+<template>
+  <div class="grid grid-cols-4 rounded-xl gap-2">
+    <div class="py-2 max-h-max overflow-y-scroll rounded-xl shadow-md" :class="{'bg-white dark:(bg-blue-gray-800 shadow-gray-600)': props.level0}">
+      <div v-for="(category, i) in props.level0" :key="i" class="flex justify-between items-center dark:hover:bg-blue-gray-700 hover:(bg-[#FAFAFA] text-red-500 font-medium) px-3 py-1 cursor-pointer" @mouseover="product.level.level1 = category.children" @click="searchCategory(category.name)">
+        <p>{{ category.name }}</p>
+        <ICaretRight v-if="category.number_of_children" />
+      </div>
+    </div>
+
+    <Transition duration="500" name="nested">
+      <div v-if="product.level.level1" :class="{'py-2 bg-white rounded-xl shadow-md dark:(bg-blue-gray-800 shadow-gray-600)': product.level.level1}">
+        <div v-for="(category, i) in product.level.level1" :key="i" class="flex justify-between items-center dark:hover:bg-blue-gray-700 hover:(bg-[#FAFAFA] text-red-500 font-medium) px-3 py-1 cursor-pointer" @mouseover="product.level.level2 = category.children" @click="searchCategory(category.name)">
+          <p>{{ category.name }}</p>
+          <ICaretRight v-if="category.number_of_children" />
+        </div>
+      </div>
+    </Transition>
+
+    <Transition duration="500" name="nested">
+      <div v-if="product.level.level2" class="py-2 bg-white rounded-xl shadow-md dark:(bg-blue-gray-800 shadow-gray-600)">
+        <div v-for="(category, i) in product.level.level2" :key="i" class="flex justify-between items-center dark:hover:bg-blue-gray-700 hover:(bg-[#FAFAFA] text-red-500 font-medium) px-3 py-1 cursor-pointer" @mouseover="product.level.level3 = category.children">
+          <a>{{ category.name }}</a>
+          <ICaretRight v-if="category.number_of_children" />
+        </div>
+      </div>
+    </Transition>
+
+    <Transition duration="500" name="nested">
+      <div v-if="product.level.level3" :class="{'py-2 bg-white rounded-xl shadow-md dark:(bg-blue-gray-800 shadow-gray-600)': product.level.level3}">
+        <div v-for="(category, i) in product.level.level3" :key="i" class="flex justify-between items-center dark:hover:bg-blue-gray-700 hover:(bg-[#FAFAFA] text-red-500 font-medium) px-3 py-1 cursor-pointer">
+          <p>{{ category.name }}</p>
+          <ICaretRight v-if="category.number_of_children" />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+::-webkit-scrollbar-thumb {
+  background: #ddd;
+}
+::-webkit-scrollbar {
+  width: 2px;
+}
+.nested-enter-active {
+    transition: all 0.2s ease-in-out;
+}
+
+.nested-enter-from{
+    transform: translateY(30px);
+    opacity: 0;
+}
+</style>
diff --git a/src/components/CPagination.vue b/src/components/CPagination.vue
index c85d06a..c05b71a 100644
--- a/src/components/CPagination.vue
+++ b/src/components/CPagination.vue
@@ -10,10 +10,15 @@ defineEmits(['on-prev', 'on-next'])
 
 <template>
   <div class="flex justify-center items-center">
-    <a href="#" class="inline-flex items-center py-2 px-4 mr-3 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" :class="{'pointer-events-none opacity-65': props.index <= 1}" @click="$emit('on-prev')">
+    <a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" :class="{'pointer-events-none opacity-65': props.index <= 1}" @click="$emit('on-prev')">
       <svg class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" /></svg>
       {{ t('pagination.previous') }}
     </a>
+    <div class="bg-orange-400 flex items-center justify-center h-8 w-8 text-white rounded-full font-medium shadow-lg mx-3">
+      <p>
+        {{ props.index }}
+      </p>
+    </div>
     <a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" @click="$emit('on-next')">
       {{ t('pagination.next') }}
       <svg class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
diff --git a/src/components/CProductCardFlow.vue b/src/components/CProductCardFlow.vue
index ae43af0..1a8bde1 100644
--- a/src/components/CProductCardFlow.vue
+++ b/src/components/CProductCardFlow.vue
@@ -77,8 +77,11 @@ const onClosePopup = () => {
         <span class="bg-green-600 text-white font-bold capitalize text-xs rounded p-0.75">-10%</span>
         <span class="bg-orange-400 text-white font-bold capitalize text-xs rounded p-0.75">{{ t('search.new') }}</span>
       </div>
-      <div class="card-img max-w-full max-h-7/12" @click="onVisitProduct(props.card.id, props.card.shop_id)">
-        <img class="first-img rounded-xl w-full" :src="`${getResources(props.card.images[0])}_tn`" alt="product_img">
+      <div class="split third rounded-lg shadow-md card-img max-w-80 min-w-80 max-h-80 p-1" @click="onVisitProduct(props.card.id, props.card.shop_id)">
+        <div class="cover">
+          <img class="first-img rounded-xl w-full" :src="`${getResources(props.card.images[0])}_tn`" alt="product_img">
+        </div>
+        <!-- <img class="first-img rounded-xl w-full" :src="`${getResources(props.card.images[0])}_tn`" alt="product_img"> -->
       </div>
       <!-- <div class="split third rounded-lg shadow-md" @click="onVisitProduct(props.card.id, props.card.shop_id)">
     <div class="cover">
@@ -86,21 +89,23 @@ const onClosePopup = () => {
     </div>
   </div> -->
     </div>
-    <div class="product-description text-left p-2">
+    <div class="product-description text-left p-2 w-full">
       <div class="px-2">
         <p class="card-title cursor-pointer duration-200 ease-linear hover:text-[#FF6600]" @click="onVisitProduct(props.card.id, props.card.shop_id)">
           {{ props.card.name }}
         </p>
-        <div class="star-rating flex justify-start py-2">
-          <img v-for="i in 5" :key="i" src="https://img.icons8.com/fluency/48/ffffff/star.png" class="max-w-4 max-h-4">
-        </div>
-        <div class="flex items-center justify-start">
-          <h6 class="card-price font-bold tracking-tighter mr-2 black text[#9B9B9B] text-decoration line-through">
-            $999
-          </h6>
-          <h6 class="font-bold tracking-tighter text-red-500">
-            {{ productPrice }}
-          </h6>
+        <div class="flex justify-between">
+          <div class="flex items-center justify-start">
+            <h6 class="card-price font-bold tracking-tighter mr-2 black text[#9B9B9B] text-decoration line-through">
+              $999
+            </h6>
+            <h6 class="font-bold tracking-tighter text-red-500">
+              {{ productPrice }}
+            </h6>
+          </div>
+          <div class="star-rating flex justify-start py-2">
+            <img v-for="i in 5" :key="i" src="https://img.icons8.com/fluency/48/ffffff/star.png" class="max-w-4 max-h-4">
+          </div>
         </div>
       </div>
 
@@ -115,13 +120,13 @@ const onClosePopup = () => {
       </div>
 
       <div class="py-5 flex justify-start">
-        <h3 class="uppercase py-2.5 px-10 rounded-md bg-black text-white font-medium text-sm cursor-pointer hover:bg-[#F33535] duration-200" @click="onOpenPopup">
+        <h3 class="uppercase py-2.5 px-10 rounded-md bg-black text-white font-medium text-sm cursor-pointer hover:bg-[#F33535] dark:bg-[#F33535] duration-200" @click="onOpenPopup">
           {{ t('search.add-to-cart') }}
         </h3>
       </div>
 
       <div v-if="isPopup === true" class="popup-modal z-3 fixed w-screen h-screen top-0 left-0 flex justify-center items-center ease-linear">
-        <div class="bg-white w-284 z-20 rounded-lg" @click="onClosePopup">
+        <div class="bg-white dark:bg-gray-800 w-284 z-20 rounded-lg" @click="onClosePopup">
           <div class="text-white flex justify-center items-center bg-black rounded-t-lg gap-2 relative py-2">
             <ICheck />
             <h5 class="text-lg" style="font-family: 'Gilroy-Medium'">
@@ -182,7 +187,7 @@ const onClosePopup = () => {
 }
 .split.third img {
     width: 100%;
-    height: auto;
+    height: 100%;
     -webkit-transition: -webkit-transform 0.8s ease;
             transition: -webkit-transform 0.8s ease;
             transition: transform 0.8s ease;
diff --git a/src/components/CProductCardGrid.vue b/src/components/CProductCardGrid.vue
index 6300587..c338167 100644
--- a/src/components/CProductCardGrid.vue
+++ b/src/components/CProductCardGrid.vue
@@ -23,6 +23,7 @@ const product = useProduct()
 
 const props = defineProps({
   card: Object,
+  mode: String,
 })
 
 const productPrice = ref()
@@ -59,17 +60,27 @@ const onVisitProduct = (prod_id, shop_id) => {
 </script>
 
 <template>
-  <div class="card-type flex justify-between absolute w-full p-2">
+  <img v-if="props.mode === 'feature'" src="/img/today/extra.png" alt="extra" class="absolute top-0 left-0 w-full z-1">
+  <img v-if="props.mode === 'feature'" src="/img/today/discount.svg" alt="discount" class="absolute -top-2 -right-6 w-21 z-1">
+  <div v-if="props.mode === 'feature'" class="absolute top-1 -right-4 w-20 text-xs z-1">
+    <p class="text-red-500">
+      30%
+    </p>
+    <p class="text-white" style="font-size:0.55em;">
+      {{ t('ctoday.decrease') }}
+    </p>
+  </div>
+  <div v-if="props.mode === 'discount'" class="card-type flex justify-between absolute w-full p-2 z-1">
     <span class="bg-green-600 text-white font-bold capitalize text-xs rounded p-0.75">-10%</span>
     <span class="bg-orange-400 text-white font-bold capitalize text-xs rounded p-0.75">{{ t('search.new') }}</span>
   </div>
-  <div class="split third rounded-lg shadow-md" @click="onVisitProduct(props.card.id, props.card.shop_id)">
+  <div class="split third rounded-lg shadow-md z-0" @click="onVisitProduct(props.card.id, props.card.shop_id)">
     <div class="cover">
       <img class="first-img rounded-t-lg w-full max-h-80" :src="`${getResources(props.card.images[0])}_tn`" alt="product_img">
     </div>
   </div>
   <div class="product-description text-left p-2">
-    <p class="card-title cursor-pointer duration-200 ease-linear hover:text-[#FF6600] text-sm" @click="onVisitProduct(props.card.id, props.card.shop_id)">
+    <p class="card-title cursor-pointer duration-200 ease-linear hover:text-[#FF6600] dark:text-gray-300 text-sm" @click="onVisitProduct(props.card.id, props.card.shop_id)">
       {{ sliceText(props.card.name) }}...
     </p>
     <div class="flex items-center justify-between my-2">
@@ -84,7 +95,7 @@ const onVisitProduct = (prod_id, shop_id) => {
       <div class="star-rating flex justify-start">
         <img v-for="i in 5" :key="i" src="https://img.icons8.com/fluency/48/ffffff/star.png" class="max-w-4 max-h-4">
       </div>
-      <h6 class="text-xs">
+      <h6 class="text-xs dark:text-gray-300">
         Solded {{ props.card.sold }}
       </h6>
     </div>
diff --git a/src/components/buyer/CBFeature.vue b/src/components/buyer/CBFeature.vue
new file mode 100644
index 0000000..125899f
--- /dev/null
+++ b/src/components/buyer/CBFeature.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { useLoading } from '~/stores/loading'
+import ProductRequest from '~/services/product-request'
+
+const loading = useLoading()
+const { t } = useI18n()
+
+const payload = reactive({
+  limit: 10,
+  page: 1,
+})
+const productList = ref([])
+watch(async() => {
+  loading.isLoading = true
+  const { data: featureData } = await ProductRequest.getProductsFeature({ params: { ...payload } })
+  productList.value = featureData.data
+  loading.isLoading = false
+})
+
+</script>
+
+<template>
+  <div class="hint-today-container max-w-349 my-10">
+    <div class="flex justify-start rounded-lg border-1 border-[#e9e9e9] bg-light-100 dark:(bg-blue-gray-800 border-transparent)">
+      <h2 class="text-red-500 border-b-4 border-b-solid border-b-red-500 text-lg rounded-l-lg text-left inline-block py-2 px-10 uppercase font-medium">
+        {{ t('ctoday.hint') }}
+      </h2>
+    </div>
+    <div class="flex flex-wrap gap-3 py-3">
+      <div v-if="loading.isLoading" class="grid-products-list flex justify-center flex-wrap gap-5 py-10">
+        <RProductCardGrid v-for="index in 12" :key="index" />
+      </div>
+      <div v-else v-cloak class="grid-products-list flex justify-center flex-wrap gap-5 py-10">
+        <div v-for="(prod, index) in productList" :key="index" class="card duration-200 ease-linear relative rounded-lg w-60 shadow-md dark:bg-gray-700 hover:shadow-gray-400/50 pb-0">
+          <CProductCardGrid :card="prod" mode="feature" />
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-center">
+      <p class="bg-white dark:(bg-blue-gray-800 hover:bg-blue-gray-700 text-gray-300 border-transparent) border-1 border-solid border-gray-200 py-2 px-10 rounded-md cursor-pointer hover:(bg-[#F5F5F5] border-gray-300)" :class="{'hidden':payload.limit === 25}" @click="payload.limit += 5">
+        {{ t('ctoday.see-more') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hint-today-container > div:nth-child(2) > div{
+    font-size: 14px;
+    line-height: 16.8px;
+    padding: 10px;
+}
+</style>
diff --git a/src/components/buyer/CBFooter.vue b/src/components/buyer/CBFooter.vue
index 5eef0b9..125a154 100644
--- a/src/components/buyer/CBFooter.vue
+++ b/src/components/buyer/CBFooter.vue
@@ -6,7 +6,7 @@ const { t } = useI18n()
 <template>
   <div class="footer flex dark:text-$dark-text">
     <div class="left md:(w-1/3 p-16 bg-gray-100) text-left dark:bg-black <md:(w-1/2 p-7 bg-light-200)">
-      <IBrand class="py-4" />
+      <IBrand class="py-4" style="filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.2));" />
       <p class="py-4">
         {{ t('footer.commit') }}
       </p>
diff --git a/src/components/head/CBBrand.vue b/src/components/head/CBBrand.vue
index 9a9017d..9a9bed6 100644
--- a/src/components/head/CBBrand.vue
+++ b/src/components/head/CBBrand.vue
@@ -9,5 +9,6 @@
 svg {
     fill: white;
     width: 9rem;
+    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.2));
 }
 </style>
diff --git a/src/components/head/CBList.vue b/src/components/head/CBList.vue
index 323baab..e05cfad 100644
--- a/src/components/head/CBList.vue
+++ b/src/components/head/CBList.vue
@@ -6,6 +6,7 @@ import AccountRequest from '~/services/account-request'
 import { useCart } from '~/stores/cart'
 import { toast } from '~/stores/toast'
 import { useUser } from '~/stores/user'
+import { getResources } from '~/utils/resources'
 import { floorNumber } from '~/utils/floorNumber'
 import { removeItemByIndex } from '~/utils/arrayHandle'
 
@@ -75,10 +76,10 @@ const handleOrder = async() => {
   <div class="container flex justify-center items-center lg:w-xs text-white dark:text-black">
     <div>
       <router-link to="/buyer/favourite">
-        <IHeart class="hover:text-[#adff2f] dark:text-[#adff2f]" />
+        <IHeart class="hover:text-[#adff2f] dark:text-[#adff2f]" style="filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.2));" />
       </router-link>
     </div>
-    <div class="flex items-end hover:text-[#adff2f] dark:text-[#adff2f] relative" @click="openNav">
+    <div class="flex items-end hover:text-[#adff2f] dark:text-[#adff2f] relative" style="filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.2));" @click="openNav">
       <span class="total-notifications absolute -top-2 left-5 bg-green-500 w-5 h-5 text-white rounded-full flex justify-center items-center pr-0.5 text-xs font-medium">{{ cart.result.length }}</span>
       <IBCart />
       <h1 class="font-semibold ml-3">
@@ -87,8 +88,8 @@ const handleOrder = async() => {
     </div>
     <div>
       <router-link to="/buyer/account/dashboard">
-        <img v-if="avatarID" :src="`https://tp-o.tk/resources/images/${avatarID}`" alt="avatar_img" class="rounded-full w-12 h-12 border-2 border-blue-500" style="object-fit: cover;">
-        <img v-else class="w-12 h-12 rounded-full" src="/img/avatar_sample.png" alt="avatar_sample">
+        <img v-if="avatarID" :src="getResources(avatarID)" alt="avatar_img" class="rounded-full w-12 min-w-12 max-w-12 h-12 min-h-12 max-h-12 border-2 border-blue-500" style="object-fit: cover;filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.2));">
+        <img v-else class="w-12 min-w-12 max-w-12 h-12 min-h-12 max-h-12 rounded-full shadow-lg shadow-gray-500/50" src="/img/avatar_sample.png" alt="avatar_sample">
       </router-link>
     </div>
     <div v-if="isBlurBgModal" class="blur-bg w-screen h-screen absolute top-0 -left-10 bg-black bg-opacity-30 z-1" @click="closeNav" />
@@ -107,7 +108,7 @@ const handleOrder = async() => {
                 src="/img/product/1.png" alt="cart_product_img" class="max-w-25 max-h-25 border-light-600 border-solid border-1 rounded-md mr-3"
               > -->
               <img
-                :src="`https://tp-o.tk/resources/images/${item.product.images[0]}`" alt="cart_product_img" class="max-w-25 max-h-25 border-light-600 border-solid border-1 rounded-md mr-3"
+                :src="getResources(item.product.images[0])" alt="cart_product_img" class="max-w-25 max-h-25 border-light-600 border-solid border-1 rounded-md mr-3"
               >
             </a>
             <div>
diff --git a/src/components/head/CBMenuCategories.vue b/src/components/head/CBMenuCategories.vue
index b5a5f32..0689ba4 100644
--- a/src/components/head/CBMenuCategories.vue
+++ b/src/components/head/CBMenuCategories.vue
@@ -5,49 +5,29 @@ import { useProduct } from '~/stores/product'
 const { t } = useI18n()
 const product = useProduct()
 
-watch(async() => {
+watchEffect(async() => {
   const { data } = await ProductRequest.getCategoriesChildrenById()
   product.category = data
 })
 
-const getLevel1 = async(id) => {
-  const { data } = await ProductRequest.getCategoriesChildrenById(id)
-  product.level1 = data
-  product.choicedList[0] = product.level1.parent
-}
-
-const getLevel2 = async(id) => {
-  const { data } = await ProductRequest.getCategoriesChildrenById(id)
-  product.level2 = data
-  product.choicedList[1] = product.level2.parent
-}
-
-const getLevel3 = async(id) => {
-  const { data } = await ProductRequest.getCategoriesChildrenById(id)
-  product.level3 = data
-  product.choicedList[2] = product.level3.parent
-}
-
 const isAppearMenu = ref(false)
-const onAppearMenu = () => {
+const appearMenu = () => {
   isAppearMenu.value = !isAppearMenu.value
-  if (!isAppearMenu.value) {
-    product.level1 = ''
-    product.level2 = ''
-    product.level3 = ''
-  }
+  product.level.level1 = ''
+  product.level.level2 = ''
+  product.level.level3 = ''
 }
 </script>
 
 <template>
   <div class="menu-item-container">
     <div class="menu-item relative">
-      <p href="#" class="menu-link text-sm text-gray-500 duration-200 py-1.5 pl-5 pr-4 flex items-end gap-1.5 cursor-pointer" @click="onAppearMenu">
+      <p href="#" class="menu-link text-sm text-gray-500 duration-200 py-1.5 pl-5 pr-4 flex items-end gap-1.5 cursor-pointer" @mouseover="appearMenu" @click="appearMenu">
         <i class="fas fa-list-ul mb-0.5" /> {{ t('header.categories') }} <IBCaretDown />
       </p>
       <Transition duration="500" name="nested">
-        <div v-if="isAppearMenu === true" class="menu-child absolute z-90 mt-3 rounded-xl">
-          <CSChooseCategory class="w-max" :level0="product.category.children" :level1="product.level1.children" :level2="product.level2.children" :level3="product.level3.children" @get-level1="getLevel1" @get-level2="getLevel2" @get-level3="getLevel3" />
+        <div v-if="isAppearMenu" class="menu-child absolute z-90 mt-3 rounded-xl">
+          <CGetCategoryChildren class="w-max" :level0="product.category" />
         </div>
       </Transition>
     </div>
diff --git a/src/components/icons/product/IBDescription.vue b/src/components/icons/product/IBDescription.vue
new file mode 100644
index 0000000..9815f95
--- /dev/null
+++ b/src/components/icons/product/IBDescription.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path fill="currentColor" d="M2.5 5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1h-15Zm0 3a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1h-15ZM2 11.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5Zm.5 2.5a.5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1h-10Z" /></svg>
+</template>
diff --git a/src/components/icons/seller/ISDescription.vue b/src/components/icons/seller/ISDescription.vue
new file mode 100644
index 0000000..9815f95
--- /dev/null
+++ b/src/components/icons/seller/ISDescription.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path fill="currentColor" d="M2.5 5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1h-15Zm0 3a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1h-15ZM2 11.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5Zm.5 2.5a.5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1h-10Z" /></svg>
+</template>
diff --git a/src/components/partterns/PNotFound.vue b/src/components/partterns/PNotFound.vue
index 72be17a..81b7013 100644
--- a/src/components/partterns/PNotFound.vue
+++ b/src/components/partterns/PNotFound.vue
@@ -1,3 +1,3 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94 93"><g fill="none" fill-rule="evenodd" transform="translate(-2)"><rect width="96" height="96" /><ellipse cx="47" cy="87" fill="#F2F2F2" rx="45" ry="6" /><path fill="#FFF" stroke="#D8D8D8" d="M79,55.5384191 L79,84.1647059 C79,85.1783108 78.1452709,86 77.0909091,86 L17.9090909,86 C16.8547291,86 16,85.1783108 16,84.1647059 L16,9.83529412 C16,8.82168917 16.8547291,8 17.9090909,8 L77.0909091,8 C78.1452709,8 79,8.82168917 79,9.83529412 L79,43.6504538 L79,55.5384191 Z" /><path fill="#FAFAFA" stroke="#D8D8D8" d="M64.32,4.0026087 L56.62,4.0026087 L56.62,3.5026087 C56.62,2.92262436 56.214985,2.5 55.68,2.5 L40.32,2.5 C39.785015,2.5 39.38,2.92262436 39.38,3.5026087 L39.38,4.0026087 L31.68,4.0026087 C31.433015,4.0026087 31.22,4.22488523 31.22,4.50434783 L31.22,12.5182609 C31.22,12.7977235 31.433015,13.02 31.68,13.02 L64.32,13.02 C64.566985,13.02 64.78,12.7977235 64.78,12.5182609 L64.78,4.50434783 C64.78,4.22488523 64.566985,4.0026087 64.32,4.0026087 Z" /><g fill="#D8D8D8" transform="translate(83)"><circle cx="10" cy="13" r="3" opacity=".5" /><circle cx="2" cy="9" r="2" opacity=".3" /><path d="M8.5,1 C7.67157288,1 7,1.67157288 7,2.5 C7,3.32842712 7.67157288,4 8.5,4 C9.32842712,4 10,3.32842712 10,2.5 C10,1.67157288 9.32842712,1 8.5,1 Z M8.5,7.10542736e-15 C9.88071187,7.10542736e-15 11,1.11928813 11,2.5 C11,3.88071187 9.88071187,5 8.5,5 C7.11928813,5 6,3.88071187 6,2.5 C6,1.11928813 7.11928813,7.10542736e-15 8.5,7.10542736e-15 Z" opacity=".3" /></g><path fill="#D8D8D8" d="M48.5,43 C48.7761424,43 49,43.2238576 49,43.5 C49,43.7761424 48.7761424,44 48.5,44 L26.5,44 C26.2238576,44 26,43.7761424 26,43.5 C26,43.2238576 26.2238576,43 26.5,43 L48.5,43 Z M68.5,34 C68.7761424,34 69,34.2238576 69,34.5 C69,34.7761424 68.7761424,35 68.5,35 L26.5,35 C26.2238576,35 26,34.7761424 26,34.5 C26,34.2238576 26.2238576,34 26.5,34 L68.5,34 Z M68.5,25 C68.7761424,25 69,25.2238576 69,25.5 C69,25.7761424 68.7761424,26 68.5,26 L26.5,26 C26.2238576,26 26,25.7761424 26,25.5 C26,25.2238576 26.2238576,25 26.5,25 L68.5,25 Z" /></g></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94 93"><g fill="none" fill-rule="evenodd" transform="translate(-2)"><rect width="96" height="96" /><ellipse cx="47" cy="87" class="dark:fill-gray-700 fill-[#F2F2F2]" rx="45" ry="6" /><path class="dark:fill-gray-700 fill-[#FFF]" stroke="#D8D8D8" d="M79,55.5384191 L79,84.1647059 C79,85.1783108 78.1452709,86 77.0909091,86 L17.9090909,86 C16.8547291,86 16,85.1783108 16,84.1647059 L16,9.83529412 C16,8.82168917 16.8547291,8 17.9090909,8 L77.0909091,8 C78.1452709,8 79,8.82168917 79,9.83529412 L79,43.6504538 L79,55.5384191 Z" /><path class="dark:fill-gray-700 fill-[#FAFAFA]" stroke="#D8D8D8" d="M64.32,4.0026087 L56.62,4.0026087 L56.62,3.5026087 C56.62,2.92262436 56.214985,2.5 55.68,2.5 L40.32,2.5 C39.785015,2.5 39.38,2.92262436 39.38,3.5026087 L39.38,4.0026087 L31.68,4.0026087 C31.433015,4.0026087 31.22,4.22488523 31.22,4.50434783 L31.22,12.5182609 C31.22,12.7977235 31.433015,13.02 31.68,13.02 L64.32,13.02 C64.566985,13.02 64.78,12.7977235 64.78,12.5182609 L64.78,4.50434783 C64.78,4.22488523 64.566985,4.0026087 64.32,4.0026087 Z" /><g fill="#D8D8D8" transform="translate(83)"><circle cx="10" cy="13" r="3" opacity=".5" /><circle cx="2" cy="9" r="2" opacity=".3" /><path d="M8.5,1 C7.67157288,1 7,1.67157288 7,2.5 C7,3.32842712 7.67157288,4 8.5,4 C9.32842712,4 10,3.32842712 10,2.5 C10,1.67157288 9.32842712,1 8.5,1 Z M8.5,7.10542736e-15 C9.88071187,7.10542736e-15 11,1.11928813 11,2.5 C11,3.88071187 9.88071187,5 8.5,5 C7.11928813,5 6,3.88071187 6,2.5 C6,1.11928813 7.11928813,7.10542736e-15 8.5,7.10542736e-15 Z" opacity=".3" /></g><path fill="#D8D8D8" d="M48.5,43 C48.7761424,43 49,43.2238576 49,43.5 C49,43.7761424 48.7761424,44 48.5,44 L26.5,44 C26.2238576,44 26,43.7761424 26,43.5 C26,43.2238576 26.2238576,43 26.5,43 L48.5,43 Z M68.5,34 C68.7761424,34 69,34.2238576 69,34.5 C69,34.7761424 68.7761424,35 68.5,35 L26.5,35 C26.2238576,35 26,34.7761424 26,34.5 C26,34.2238576 26.2238576,34 26.5,34 L68.5,34 Z M68.5,25 C68.7761424,25 69,25.2238576 69,25.5 C69,25.7761424 68.7761424,26 68.5,26 L26.5,26 C26.2238576,26 26,25.7761424 26,25.5 C26,25.2238576 26.2238576,25 26.5,25 L68.5,25 Z" /></g></svg>
 </template>
diff --git a/src/components/rendering/RProductCard.vue b/src/components/rendering/RProductCard.vue
new file mode 100644
index 0000000..8c0edbf
--- /dev/null
+++ b/src/components/rendering/RProductCard.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="rendering_container animate-pulse duration-200 ease-linear rounded-lg w-60 shadow-md">
+    <div class="split third rounded-lg shadow-md">
+      <img class="first-img rounded-t-lg w-full max-h-80" src="/img/product/1.jpg" alt="thumbnail">
+    </div>
+    <div class="product-description text-left p-2">
+      <div class="flex flex-col gap-2 my-2">
+        <p class="w-[80%] h-3 rounded-lg bg-$light-rendering" />
+        <p class="w-[50%] h-3 rounded-lg bg-$light-rendering" />
+      </div>
+      <div class="flex items-center justify-between my-2">
+        <h6 class="w-[30%] h-2 rounded-lg bg-$light-rendering" />
+        <h6 class="w-[30%] h-2 rounded-lg bg-$light-rendering" />
+      </div>
+      <div class="flex justify-between">
+        <h6 class="w-[40%] h-2 rounded-lg bg-$light-rendering" />
+        <h6 class="w-[30%] h-2 rounded-lg bg-$light-rendering" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/data/feature.json b/src/data/feature.json
new file mode 100644
index 0000000..cb3fca1
--- /dev/null
+++ b/src/data/feature.json
@@ -0,0 +1,741 @@
+{
+    "status": true,
+    "data": {
+        "current_page": 1,
+        "data": [
+            {
+                "id": 12,
+                "name": "Blackdot V200 Superlight Smartwatch with 60 Days Standby Battery, Touch Control, App Notifications, Temperature Sensor",
+                "description": "The 2022 Blackdot V200 UNISEX Superlight Smartwatch with 60 Days Standby Battery, Full Touch Control, App Notifications, Temperature Sensor. #MOVESMART | AVAILABLE NOW |\\nBlackdot V200 Smartwatch is packed with all the necessary features you need. This superlight smartwatch is designed for sports and activities and has 20 Sport modes for you to track and record data.\\n\u2705Product Specifications & Features\\nColours Available: Black\\nControls: Full Touch Control\\nScreen Resolution: 240*240\\nDisplay:1.28 inches Round Screen\\nDisplay Colour: Colour Screen\\nWeight: Superlight (26g)\\nBattery Capacity: 250mAh\\nStandby time: 60 Days\\nWorking Time: 18 Days\\nCertificate: CE ROHS FCC\\nWater Resistant: Yes (IP68) (Not recommended during shower or swimming)\\nSupporting Devices: All Bluetooth enabled devices (Android 4.4 or above iOS 8.0 or above)\\nWatch Faces: Customizable, able to set photos as wallpapers\\nAPP: WoFit (Available in Play Store & App Store)\\n\u2705Product Functions:\\nBody Temperature Monitor: Yes\\nHeart Rate Monitor: Yes\\nBlood Pressure Monitor: Yes\\nFitness\/ Workout Tracker: Yes\\nStep Counter: Yes\\nChronograph: Yes\\nMusic Controls: Yes (Able to play, pause, skip, control volume)\\nCall Reminder: Yes (Able to Attend or reject calls)\\nPush Message Notifications: Yes (Facebook, WhatsApp, Messages etc.)\\nInbuilt Camera: No\\nSupport SIM: No\\nGPS: No\\nNFC: No, not able to make payments\\nMake Phone Calls: No\\n\u2705What is inside the box:\\n1 x Smart Watch\\n1 x USB Charging Cable\\n1 x User Manual\\n\u2705Warranty\/Return Policy Blackdot V200 Smartwatch has a warranty of 1 month. Physical damages caused by the user will not be considered for warranty or replacement. For replacement or refund, the item must be returned to us. You can visit our office or post the item back to us. We are 24\/7 available and feel free to contact us at any time.\\n\u00a9Blackdot Technologies Pte Ltd\\n#SmartWatch #Blackdot #FitnessTracker",
+                "weight": "300",
+                "avg_rating": "0",
+                "sold": 0,
+                "images": [
+                    "demo-4cef6e48e42daadf581edea1401eea5f",
+                    "demo-1a3abca44b320378246750ff2412efbb"
+                ],
+                "videos": [],
+                "variations": [],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 8,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 29,
+                        "sku": "",
+                        "price": "69",
+                        "stock": 50,
+                        "variation_index": [],
+                        "is_default": false,
+                        "product_id": 12
+                    }
+                ]
+            },
+            {
+                "id": 21,
+                "name": "novita Hot\/Cold Water Dispenser W28 - The WaterStation + Free Gift",
+                "description": "\u26a0\ufe0f PRE-ORDER  - DEL FROM END-MAY\/ EARLY-JUN ONWARDS\\n\u2b50FREE GIFT PROMOTION:\\n\u2705  novita Nano Copper Ions Surgical Respirator R2 (100pcs in a box) (U P. $80)\\n\ud83d\udccc Include Standard Installation: * Order will be delivered first, and followed by installation appointment from novita directly\\nBe surprised by the extra time and additional space, while rejoicing with quality water and more savings all at once with the novita Hot\/Cold Water dispenser W28! Driven by HydroNano\u2122 Ultra Filtration System, enjoy unrivalled fresh, pristine and great tasting purified water right at your fingertips to satisfy the all-day hydration needs and beyond. Packed with notable smart features and user-friendly interface, this WaterStation is definitely the perfect choice for your home\/workplace, to keep up with your lifestyle!\\n\ud83d\udd36FEATURES:\\n\u2705 SLIM + COMPACT DESIGN AT 185MM WIDTH!\\n\u2705 FLEXIBLE TEMPERATURE SETTINGS:\\n\u2022 HOT WATER: 40\u00b0C - 98\u00b0C\\n\u2022 COLD WATER: 3\u00b0C - 8\u00b0C\\n\u2705 3 PRESET VOLUME (280ml \/ 500ml \/ 800ml)\\n\u2705 TANK CAPACITY:\\n\u2022 HOT WATER: 1 Litres\\n\u2022 COLD WATER: 1.4 Litres\\n\u2705 FAST DISPENSING\\n\u2705 2 WATTS ENERGY SAVING MODE:\\n\u2022 When unit senses surrounding darkness for 30 minutes, unit automatically switches off light indicators & both heating and cooling functions deactivate to reduce electricity consumption!\\n\u2705 SMART FILTER REPLACEMENT INDICATOR ALERTS YOU 14-DAYS BEFORE FILTER IS DUE\\n\u2705 EFFORTLESS EzTwist\u00ae FILTER SET WITH FRONT FILTER COVER FOR EASY FILTER REPLACEMENT\\n\u2022 Simply replace the EzTwist filter set with a twist to remove them!\\n\u2705 CLOCK DISPLAY\\n\u2705 AMBIENCE LIGHT\\n\u2705 REMOVABLE DRIP TRAY\\n\ud83d\udd36 5-STAGE HYDRONANO\u2122 ULTRA FILTRATION SYSTEM:\\n\u2705 SEDIMENT FILTER:\\n\u2022 Filters suspended particles, rust and sediments from the source water\\n\u2705 SILVER NANO CARBON BLOCK FILTER:\\n\u2022 Provides extra bacterial resistance while removing chlorine, reducing VOCs, chemical residuals & heavy metal ions\\n\u2022 Deodorizes and enhance water taste\\n\u2705 ACTIVATED CARBON FIBRE FILTER:\\n\u2022 Removes residual chlorine, VOCs, chemicals or other impurities and greatly improves the taste of the water\\n\u2705 ADVANCED ULTRA HOLLOW MEMBRANE FILTER:\\n\u2022 Tested for proven efficiency by Korea Testing & Research Institute (KTR)\\n\u2022 Removes 99.99% of Bacteria & suspended colloids up to 0.1 microns while keeping essential minerals intact\\n\u2705 UV-C LED STERILIZATION:\\n\u2022 Produces UV-C wavelength for effective water sterilization and ensures no residual \/ harmful by-products remains\\n\u2022 Eliminates 99.9% of E.Coli and protects water against microorganisms such as virus, bacteria, algae, yeast and cryptosporidium\\n*UV-C LED is semi-permanent and does not require replacement",
+                "weight": "11500",
+                "avg_rating": "0",
+                "sold": 0,
+                "images": [
+                    "demo-a263809ed64d5e6aef8bdf8a5a814cb2",
+                    "demo-8e4b897d0641d4b46de628fc37e82315"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "W18 Colour",
+                        "options": [
+                            "Arctic White",
+                            "Jet Black"
+                        ]
+                    },
+                    {
+                        "name": "Filter Type",
+                        "options": [
+                            "HydroNano\u2122"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 12,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 48,
+                        "sku": "",
+                        "price": "1689",
+                        "stock": 50,
+                        "variation_index": [
+                            0,
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 21
+                    },
+                    {
+                        "id": 49,
+                        "sku": "",
+                        "price": "1789",
+                        "stock": 50,
+                        "variation_index": [
+                            0,
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 21
+                    },
+                    {
+                        "id": 50,
+                        "sku": "",
+                        "price": "1689",
+                        "stock": 50,
+                        "variation_index": [
+                            1,
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 21
+                    },
+                    {
+                        "id": 51,
+                        "sku": "",
+                        "price": "1789",
+                        "stock": 50,
+                        "variation_index": [
+                            1,
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 21
+                    }
+                ]
+            },
+            {
+                "id": 30,
+                "name": "Mysleep Premium Hotel Grade | Dynasty 10\"inch Imported Knitted Fabric with Pocketed Spring | FREE & Next Day Delivery",
+                "description": "Is your current mattress affecting your Quality of Sleep? \ud83e\udd71\ud83d\ude2a\ud83d\ude34\\n\ud83e\uddd0 Are you looking for an affordable High-Quality Premium Hotel Grade Mattress? Good news!\\n\ud83e\udd73 We have sold and delivered over 1000 pcs of Mattress monthly to Our Happy Customers. Hit us up and we will recommend the most suitable mattress for your requirements.\\n\u2705 \ud835\uddd9\ud835\udde5\ud835\uddd8\ud835\uddd8 \ud835\udfee\ud835\ude05 \ud835\udde0\ud835\ude06\ud835\ude00\ud835\uddf9\ud835\uddf2\ud835\uddf2\ud835\uddfd \ud835\udfed\ud835\udfec\ud835\udfec% \ud835\udde6\ud835\ude06\ud835\uddfb\ud835\ude01\ud835\uddf5\ud835\uddf2\ud835\ude01\ud835\uddf6\ud835\uddf0 \ud835\udddf\ud835\uddee\ud835\ude01\ud835\uddf2\ud835\ude05 \ud835\udde3\ud835\uddf6\ud835\uddf9\ud835\uddf9\ud835\uddfc\ud835\ude04 (\ud835\uddea\ud835\uddfc\ud835\uddff\ud835\ude01\ud835\uddf5 $\ud835\udff4\ud835\udfec) \ud835\ude04\ud835\uddf6\ud835\ude01\ud835\uddf5 \ud835\uddee \ud835\uddfa\ud835\uddf6\ud835\uddfb. \ud835\ude00\ud835\uddfd\ud835\uddf2\ud835\uddfb\ud835\uddf1\ud835\uddf6\ud835\uddfb\ud835\uddf4 \ud835\uddfc\ud835\uddf3 $\ud835\udff2\ud835\udfec\ud835\udfec\\n\u2705 \ud835\uddd9\ud835\udde5\ud835\uddd8\ud835\uddd8 \ud835\uddd7\ud835\uddf2\ud835\uddf9\ud835\uddf6\ud835\ude03\ud835\uddf2\ud835\uddff\ud835\ude06\\nVisit us at any of our outlets islandwide and test our mattress today:\\n\ud83d\udccd \ud835\udddd\ud835\ude02\ud835\uddff\ud835\uddfc\ud835\uddfb\ud835\uddf4 \ud835\udde2\ud835\ude02\ud835\ude01\ud835\uddf9\ud835\uddf2\ud835\ude01 (The Furniture Mall)\\nLocation: 10 Toh Guan Road, #01-29 The Furniture Mall S(608838)\\n\u2705 PK - 8250 4068 (English & Malay)\\n\u2705 Annie - 8269 7642 (Chinese & Malay)\\n\u23f0 Mon-Sat (From 11.30am-8pm) | Sun&PH (From 11.30am-7pm)\\n-------\\n\ud83d\udccd \ud835\udde8\ud835\uddef\ud835\uddf6 \ud835\udde2\ud835\ude02\ud835\ude01\ud835\uddf9\ud835\uddf2\ud835\ude01 (\ud835\udde2\ud835\ude05\ud835\uddf9\ud835\uddf2\ud835\ude06 \ud835\uddd5\ud835\uddf6\ud835\ude07\ud835\udddb\ud835\ude02\ud835\uddef)\\nLocation: 71 Ubi Road 1, #10-39 Oxley BizHub S(408732)\\n\u2705 Samantha - 9001 9891 (Chinese & English)\\n\u2705 Kelvin - 8750 0475 (English & Chinese)\\n\u23f0 Mon-Sat (From 11am-8pm) | Sun&PH (From 11am-6pm)\\n--------\\n\ud83d\udccd \ud835\udde6\ud835\uddf2\ud835\uddfa\ud835\uddef\ud835\uddee\ud835\ude04\ud835\uddee\ud835\uddfb\ud835\uddf4 \ud835\udde2\ud835\ude02\ud835\ude01\ud835\uddf9\ud835\uddf2\ud835\ude01 \/ \ud835\uddea\ud835\uddee\ud835\uddff\ud835\uddf2\ud835\uddf5\ud835\uddfc\ud835\ude02\ud835\ude00\ud835\uddf2 (\ud835\udde1\ud835\uddfc\ud835\uddff\ud835\ude01\ud835\uddf5 \ud835\udddf\ud835\uddf6\ud835\uddfb\ud835\uddf8 \ud835\uddd5\ud835\ude02\ud835\uddf6\ud835\uddf9\ud835\uddf1\ud835\uddf6\ud835\uddfb\ud835\uddf4)\\nLocation: 10 Admiralty Street, #05-89 North Link Building S(757695)\\n\u2705 Agnes - 8398 3878 (Chinese & Malay)\\n\u2705 Joey - 8816 8562 (English & Malay)\\n\u23f0 Mon-Sat (From 9am-6pm) | Sun&PH (From 11am-6pm)\\n--------\\n*Policy*\\n1. You are required to inspect the Product for any defects when you take delivery of it.\\n2. Except as otherwise expressly provided herein, we shall not accept the return of a Product that has been delivered\\nunless it is with our prior written consent and agreement. Only a return authorised by us will be accepted and\\nour acceptance of any return of a Product shall be subject to such terms and conditions as we may prescribe at our sole and absolute discretion.\\n3. Cost of transportation to and from the dealer is to be bear by the purchaser of this invoice & the transportation and\\nservice charge will be from $70 onwards. Except as otherwise expressly provided herein, we shall not accept the return of a Product that has been delivered unless it is with our prior written consent and agreement. Only a return authorized\\nby us will be accepted and our acceptance of any return of a Product shall be subject to such terms and conditions as\\nwe may prescribe at our sole and absolute discretion.\\n(Warranty covered on spring unit only)\\n\u2013 This mattress has been manufactured under strict quality control and is guaranteed against any defects as a result of normal use within 10 years for Bonnell Spring and 12 years for Pocketed Spring from the date of purchase.\\n\u2013 The material covering this mattress is not covered by this guarantee and damage caused by accident, misuse or\\ntampered is also not covered by this warranty.",
+                "weight": "40000",
+                "avg_rating": "0",
+                "sold": 0,
+                "images": [
+                    "demo-cbeb2f1e11d2aff38a008c5309da0234",
+                    "demo-338ed342e58ee2d93b657794ca66f8fc"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "Type",
+                        "options": [
+                            "Single 10\"inch"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 11,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 60,
+                        "sku": "",
+                        "price": "9",
+                        "stock": 50,
+                        "variation_index": [
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 30
+                    }
+                ]
+            },
+            {
+                "id": 1,
+                "name": "Samsung Galaxy A53 5G | A52s 5G (8GB+128GB\/256GB) with 1 Year Warranty by Samsung",
+                "description": "Samsung A52s 5G Key Specs:\\nDisplay : 6.5 inches (Super AMOLED,120Hz)\\nCPU : Octa-core (4x2.4 GHz Kryo 670 & 4x1.9 GHz Kryo 670)\\nMain Camera : 64MP + 12MP + 5MP + 5MP\\nSelfie Camera : 32MP\\nRAM : 8GB\\nStorage : 128GB\/256GB\\nBattery Capacity : 4500 mAh (Fast Charging 25W)\\n\\nFor more details, please check at :\\nhttps:\/\/www.samsung.com\/sg\/smartphones\/galaxy-a\/galaxy-a52s-5g-awesomemint-256gb-sm-a528blgixsp\/\\n\\nSamsung A53 5G Key Specs :\\nDisplay : 6.5 inches (Super AMOLED,120Hz)\\nCPU : Octa-core (2x2.4 GHz Cortex-A78 & 6x2.0 GHz Cortex-A55)\\nMain Camera : 64MP + 12MP + 5MP + 5MP\\nSelfie Camera : 32MP\\nRAM : 8GB\\nStorage : 128GB\/256GB\\nBattery Capacity : 5000 mAh (Fast Charging 25W)\\n\\nFor more details,please check at\\nhttps:\/\/www.samsung.com\/sg\/smartphones\/galaxy-a\/galaxy-a53-5g-awesome-blue-128gb-sm-a536elbgxsp\/\\n\\n-All products are 100% authentic.\\n-Local Singapore set.\\n-All products are sourced from authorised dealers,official stores and telcos (M1,Singtel,Starhub & etc).\\n-Some products are unsealed to check for manufacturer defect.\\n-All products warranty based on manufactured date.\\n-Some products might less than 1 year warranty due to activation policy from dealers or telcos.\\n-If you wish to purchase Samsung Care+,please request by leave a message when placing order.\\n-Telcos receipt or official dealers receipt will be provided if available.\\n-Store soft copy receipt can be issue upon request.\\n-For products that comes with manufacturer warranty,buyer must contact manufacturer or visit manufacturer\u2019s service center for repair\/exchange or any technical support.\\n-All products sold are not exchangeable and not refundable.",
+                "weight": "500",
+                "avg_rating": "0",
+                "sold": 0,
+                "images": [
+                    "demo-93bc5fa42886e635fd9f103d03c9c31d",
+                    "demo-6085df7be931e1ef9d79ce125cacdb8b"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "Colour",
+                        "options": [
+                            "Awesome Black",
+                            "Awesome White"
+                        ]
+                    },
+                    {
+                        "name": "Model",
+                        "options": [
+                            "A52s 8GB+128GB",
+                            "A53 8GB+128GB"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 1,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 1,
+                        "sku": "",
+                        "price": "516",
+                        "stock": 5,
+                        "variation_index": [
+                            0,
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 1
+                    },
+                    {
+                        "id": 2,
+                        "sku": "",
+                        "price": "296",
+                        "stock": 5,
+                        "variation_index": [
+                            0,
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 1
+                    },
+                    {
+                        "id": 3,
+                        "sku": "",
+                        "price": "406",
+                        "stock": 5,
+                        "variation_index": [
+                            1,
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 1
+                    },
+                    {
+                        "id": 4,
+                        "sku": "",
+                        "price": "515",
+                        "stock": 50,
+                        "variation_index": [
+                            1,
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 1
+                    }
+                ]
+            },
+            {
+                "id": 2,
+                "name": "\u3010SG\u3011 PBT Dye Sublimation Keycap Set (108 Keys) - OEM Profile",
+                "description": "Local SG Seller \u2013 Fast Delivery \u2013 Buy with Confidence!\\nNote: Keycaps only, keyboard not included.\\nTransform your bland and boring keyboard into an Instagram-worthy one! These keycap sets are truly special. Guaranteed to bring your keyboard and setup to life with its vibrant color scheme and radiant colors.\\n\u3010COMPATIBILITY\u3011\\nFits most mechanical keyboards and optical keyboards that use Cherry MX switches or Cherry-like switches such as Gateron, Kailh, Outemu, and more.\\n\u3010PBT Dye-Sub\u3011\\nThis set of keycaps is made of high-quality PBT materials, and the thickness is about 1.5 mm, which is very durable. In addition, dye-sublimation technology is used to print fonts and exquisite patterns on the keycaps. These fonts and patterns are very clear and not easy to fall off.\\n\u3010OEM PROFILE\u3011\\nThe most popular OEM profile keycaps have sculpted shapes that conform to your fingertips to increase comfort during typing or gaming.\\n\u3010Keyboard Layout\u3011\\nCompatible with 61\/87\/104 keys standard US\/ANSI mechanical keyboard whose spacebar is 6.25u (around 11.7cm), and 1.25u bottom modifier keys. This keycap set is not compatible with 64\/68\/71\/72\/82\/84 keys mechanical keyboard layout. This is also not compatible with non-standard bottom row layouts such as Razer Huntsman Elite (6.0u spacebar) or Corsair K70\/Logitech G710+ (6.5u spacebar).\\n\u3010Specification\u3011\\nMaterial: PBT\\nThickness: ~1.5 mm\\nLegend: Dye Sublimation\\nBacklit: No\\nLayout: US\/ANSI 108 keys\\nProfile: OEM Profile\\nSakura - 113 keys (OEM Profile)\\nChinese Ink - 113 keys (OEM Profile)\\nTang Dynasty - 113 keys (OEM Profile)\\nFamicom - 108 keys (OEM Profile)\\nNintendo (NES) - 108 keys (OEM Profile)\\nMatcha - 108 keys (OEM Profile)\\nPirate - 108 keys (OEM Profile)\\nHana - 108 keys (OEM Profile)",
+                "weight": "500",
+                "avg_rating": "0",
+                "sold": 0,
+                "images": [
+                    "demo-31bdac4679edf9ebf483e86461c024ad",
+                    "demo-ecf68a0e351256c3589211483005f9ac"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "Theme",
+                        "options": [
+                            "Matcha",
+                            "Hana"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 3,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 5,
+                        "sku": "",
+                        "price": "0.3",
+                        "stock": 50,
+                        "variation_index": [
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 2
+                    },
+                    {
+                        "id": 6,
+                        "sku": "",
+                        "price": "0.3",
+                        "stock": 50,
+                        "variation_index": [
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 2
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "\u3010SG\u3011 Gateron KS-9 Mechanical Keyboard Switch",
+                "description": "Local SG Seller \u2013 Fast Delivery \u2013 Buy with Confidence!\\nNote: Not compatible with Outemu hot-swap PCB (e.g. Tecware Phantom RGB), as it has a narrower socket that only accept Outemu switches.\\nMinimum order 30 pcs, can mix and match.\\nContact us if you would like to have switch tester kit with 9 type of Gateron switches.\\n\u3010Gateron White Switch\u3011\\nType: Linear\\nActuation Force: 35 gf\\nActuation Distance: 2.0 mm\\nTravel Distance: 4.0 mm\\nDescription: The white switch has the lightest actuation force amongst the linear switches. The smooth nature of the Gateron allows it to be triggered with very light force, making it effortless to type.\\n\u3010Gateron Red Switch\u3011\\nType: Linear\\nActuation Force: 45 gf\\nActuation Distance: 2.0 mm\\nTravel Distance: 4.0 mm\\nDescription: Gateron red is the most commonly used Gateron switch because it is a linear switch, making the typing sound quieter. The pressure is more moderate, light, and prolonged periods of typing will not feel tired.\\n\u3010Gateron Yellow Switch\u3011\\nType: Linear\\nActuation Force: 50 gf\\nActuation Distance: 2.0 mm\\nTravel Distance: 4.0 mm\\nDescription: The design of the Gateron yellow switch is the same as the red switch, but the departure strength is 5g bigger, which seems small but does offer a difference in feeling. The feedback of the yellow switch is more rigid, but it doesn\u2019t need heavy force to be triggered.\\n\u3010Gateron Black Switch\u3011\\nType: Linear\\nActuation Force: 60 gf\\nActuation Distance: 2.0 mm\\nTravel Distance: 4.0 mm\\nDescription: The black switch is a linear switch with the greatest strength amongst standard mass-produced switches. Those who like mechanical keyboards with a stronger trigger force will likely prefer the Gateron black switch.\\n\u3010Gateron Brown Switch\u3011\\nType: Tactile\\nActuation Force: 55 gf\\nActuation Distance: 2.0 mm\\nTravel Distance: 4.0 mm\\nDescription: Gateron brown switch has the characteristics of both the red and blue switches. The vertical press still feels smooth, but also has the feeling of a bump. The sound is relatively quiet and will not disturb the surrounding environment.\\n\u3010Gateron Blue Switch\u3011\\nType: Clicky\\nActuation Force: 60 gf\\nActuation Distance: 2.3 mm\\nTravel Distance: 4.0 mm\\nDescription: Gateron Blue has a unique clicky touch feel and a louder sound. It still has the characteristics of the Gateron Switch and is smooth with tactile feedback. This structure can let you type for a long period and not get tired. It\u2019s ideal for games and typing.\\n\u3010Gateron Green Switch\u3011\\nType: Clicky\\nActuation Force: 80 gf\\nActuation Distance: 2.3 mm\\nTravel Distance: 4.0 mm\\nDescription: Gateron Green switch is seen by many as an upgraded version of Gateron Blue switch. 80g of press force is 20g higher than the Blue switch. The green switch has stronger feedback and a harder rebound.",
+                "weight": "50",
+                "avg_rating": "0",
+                "sold": 0,
+                "images": [
+                    "demo-4cc279abec8e74f480bc3968989be311"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "Switch Type",
+                        "options": [
+                            "Gateron White",
+                            "Gateron Red"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 3,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 7,
+                        "sku": "",
+                        "price": "59.9",
+                        "stock": 50,
+                        "variation_index": [
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 3
+                    },
+                    {
+                        "id": 8,
+                        "sku": "",
+                        "price": "59.9",
+                        "stock": 50,
+                        "variation_index": [
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 3
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "[\u2705SG Ready Stock] \ud83d\udd25 60\/80\/100x40\/50cm Nordic Study Table Laptop Home Office Desks Computer Modern Writing Table",
+                "description": "60\/80x40cm Nordic Study Table Laptop Home Office Desks Computer Modern Writing Table\\n\u2605\u2605 \ud835\uddea\ud835\uddd4\ud835\udde5\ud835\udde0 \ud835\udde5\ud835\uddd8\ud835\udde0\ud835\udddc\ud835\udde1\ud835\uddd7\ud835\uddd8\ud835\udde5 \u2605\u2605\\n\ud83d\udca2 1 Table = 1 Order Only \ud83d\ude0a\\n\ud83d\udca2 2 Table  = Need 2 Orders \ud83d\ude0a\\n\ud83d\udca2 Please don\u2019t combine with other products \ud83d\ude0a\\n** Please take note before place order **\\n***** Please Separate The Order *****\\nIf You Need To Buy More Than One Item, Please Purchase One Item Each Order TQ\\n1 Table = 1 Order Only\\n1 Item = 1 Order\\n10 Table = Need 10 Order",
+                "weight": "7000",
+                "avg_rating": "0",
+                "sold": 0,
+                "images": [
+                    "demo-6462d797d526c25510abe38442fc21d2",
+                    "demo-eaa6b336a5cb84383b6f991f32b89256"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "Size",
+                        "options": [
+                            "60x40cm Curve White",
+                            "60x40cm Curve Maple"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 4,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 11,
+                        "sku": "",
+                        "price": "299",
+                        "stock": 50,
+                        "variation_index": [
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 5
+                    },
+                    {
+                        "id": 12,
+                        "sku": "",
+                        "price": "299",
+                        "stock": 50,
+                        "variation_index": [
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 5
+                    }
+                ]
+            },
+            {
+                "id": 6,
+                "name": "KEF Lsx P1 Desk Pad",
+                "description": "\u2022 1\/4\" screw mounting for use with LSX\\n\u2022 Aluminium construction for rigidity and stability\\n\u2022 100 upwards tilt\\n\u2022 Available finished: Black \/ Silver",
+                "weight": "1000",
+                "avg_rating": "0",
+                "sold": 0,
+                "images": [
+                    "demo-5f463dba65c0185d9dae94c0d019c902",
+                    "demo-6c5485a694fff40b1e55265f68f6d9ba"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "Colour",
+                        "options": [
+                            "Black",
+                            "Silver"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 5,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 13,
+                        "sku": "",
+                        "price": "2599",
+                        "stock": 50,
+                        "variation_index": [
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 6
+                    },
+                    {
+                        "id": 14,
+                        "sku": "",
+                        "price": "2599",
+                        "stock": 50,
+                        "variation_index": [
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 6
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "KEF KC62 SUBWOOFER",
+                "description": "KC62 is an incredibly compact subwoofer that delivers the might and magic of deep, accurate bass for a thrillingly immersive music, movie and gaming experience. Created using innovative KEF engineering including the ground-breaking Uni-Core\u2122 technology, the football-sized KC62 features two 6.5inch force cancelling drive units powered by 1,000W RMS of specially designed Class D amplification.KC62 is an incredibly compact subwoofer that delivers the might and magic of deep, accurate bass for a thrillingly immersive music, movie and gaming experience. Created using innovative KEF engineering including the ground-breaking Uni-Core\u2122 technology, the football-sized KC62 features two 6.5inch force cancelling drive units powered by 1,000W RMS of specially designed Class D amplification.",
+                "weight": "2000",
+                "avg_rating": "0",
+                "sold": 0,
+                "images": [
+                    "demo-e7ee45724c72734c0303b25137d8c4d6",
+                    "demo-347cb1e930a2ed5e08edac1aa0e70e07"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "Colour",
+                        "options": [
+                            "Black",
+                            "White"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 5,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 15,
+                        "sku": "",
+                        "price": "2000",
+                        "stock": 50,
+                        "variation_index": [
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 7
+                    },
+                    {
+                        "id": 16,
+                        "sku": "",
+                        "price": "2100",
+                        "stock": 50,
+                        "variation_index": [
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 7
+                    }
+                ]
+            },
+            {
+                "id": 4,
+                "name": "[\u2705SG Ready Stock] \ud83d\udd25 Premium Foldable Baby High Chair\/ Feeding Chair\/ Low Chair\/ Adjustable Infant Toddlers Dining Seat",
+                "description": "Feature\\n1) Washable Food Tray Only\\n2) Washable PU Leather Seat Cover Only\\n3) Chair Colour ( Pink \/ Blue \/ Grey ) + Food Tray + Seat Cover + Wheel\\n4) Foldable for Space Saving\\n\ud83c\udf1fProduct Highlights\ud83c\udf1f\\n\ud83c\udd93\ud83c\udd93 Washable PU Leather Seat Cover\\n\ud83c\udd93\ud83c\udd93 Washable Dining Food Tray\\n\ud83c\udd93\ud83c\udd93 Multi-range Adjustment\\n\u2705 Adjustable Height\\n\u2705 Lightweight, Foldable & Portable\\n\u2705 Adjustable Safety belt included\\n\u2705 Suitable age start from 6 month to 5 years\\n\u2705 Sustain for baby weight up to 25kg\\n\u2705 Multipurpose adjustable dining chair\\n\u2705 Light weight for easy carrying\\n\u2705 Premium Material Surface - Easy to wipe clean\\n#haby #highchair # multifunction #foodtray #adjustable #safety #Premium #Baby #Singapore #Local",
+                "weight": "2500",
+                "avg_rating": "4",
+                "sold": 2,
+                "images": [
+                    "demo-5d428c67197abda913f95b5e29da189f"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "Colour",
+                        "options": [
+                            "Blue",
+                            "Pink"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 4,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 9,
+                        "sku": "",
+                        "price": "22.9",
+                        "stock": 50,
+                        "variation_index": [
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 4
+                    },
+                    {
+                        "id": 10,
+                        "sku": "",
+                        "price": "22.9",
+                        "stock": 50,
+                        "variation_index": [
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 4
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "SG M330 ultra silent Black wireless gaming working work ergonomic mouse mice accessories",
+                "description": "Meet M330 Silent Plus\\nGet all your work done without missing a beat or disturbing people around you. Silent Mice have the same click feel without the click noise\u2014over 90 percent noise reduction.* Say hello to the silent one in the room and goodbye to your last annoying click. Your family and friends will thank you\\nM330 Black wireless gaming working work ergonomic mouse mice accessories\\naccessories mice wireless mouse wireless gaming mice computer mouse ergonomic mouse wireless bluetooth wireless gaming mouse wireless mouse",
+                "weight": "700",
+                "avg_rating": "0",
+                "sold": 0,
+                "images": [
+                    "demo-7c311a63d50279bbce830f1eb219d501",
+                    "demo-b8183953f66801b0b6fd0ffdddf07872"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "Colour",
+                        "options": [
+                            "Black M330",
+                            "White M330"
+                        ]
+                    },
+                    {
+                        "name": "Quantity",
+                        "options": [
+                            "1 Pack",
+                            "2 Packs"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 6,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 17,
+                        "sku": "",
+                        "price": "8",
+                        "stock": 50,
+                        "variation_index": [
+                            0,
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 8
+                    },
+                    {
+                        "id": 18,
+                        "sku": "",
+                        "price": "16",
+                        "stock": 50,
+                        "variation_index": [
+                            0,
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 8
+                    },
+                    {
+                        "id": 19,
+                        "sku": "",
+                        "price": "7",
+                        "stock": 50,
+                        "variation_index": [
+                            1,
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 8
+                    },
+                    {
+                        "id": 20,
+                        "sku": "",
+                        "price": "14",
+                        "stock": 50,
+                        "variation_index": [
+                            1,
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 8
+                    }
+                ]
+            },
+            {
+                "id": 9,
+                "name": "Local SG 2.4GH silent Wireless Mouse wireless Gaming Mouse mice Rechargeable mouse Gaming Mice Silent LED Wireless Mouse",
+                "description": "2.4GHz Wireless Gaming Mouse Optical Rechargeable Gaming Mice Silent LED Backlit Ergonomics E-Sport Wireless Mouse\\nSpecifications:\\nBrand: FREE WOLF\\nModel: X8\\nColor: Black, White, Gray, Star Black\\nWireless distance: 10 meters\\nKey life: 20 million times\\nPower: Built-in Rechargeable 600mAh lithium battery\\nResponse speed: 150PS\\nWireless technology: 2.4GHz\\nVoltage and current: 3,7V-18MA\\nCharacteristics of light effect: Phantom seven color breathing\\nNumber of keys: 6 keys\\nOptical resolution: 1800DPI\\nDPI switching: 800\/1600\/2400 3 modes\\nErgonomics: support\\nSystem requirements: Windows10 Windows XP, Vista, Win 7, Win 8, ME,2000 and Mac OS...or latest\\nProduct size: approx.138X80X38mm\\nProduct weight: approx.120g\\nLocal SG 2.4GHz silent Wireless Mouse wireless Gaming Mouse mice Rechargeable mouse Gaming Mice Silent LED Wireless Mouse\\naccessories mice wireless mouse wireless gaming mice computer mouse ergonomic mouse wireless bluetooth wireless gaming mouse wireless mouse silent rechargable blue tooth mouse",
+                "weight": "120",
+                "avg_rating": "0",
+                "sold": 0,
+                "images": [
+                    "demo-613ab8657862f6d133e450288c9d1ad5",
+                    "demo-146c64c60f2bbe68a4bfa93a1f590545"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "Colour",
+                        "options": [
+                            "Black",
+                            "White"
+                        ]
+                    },
+                    {
+                        "name": "Quantity",
+                        "options": [
+                            "1 Pack",
+                            "2 Packs"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 6,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 21,
+                        "sku": "",
+                        "price": "4",
+                        "stock": 50,
+                        "variation_index": [
+                            0,
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 9
+                    },
+                    {
+                        "id": 22,
+                        "sku": "",
+                        "price": "8",
+                        "stock": 50,
+                        "variation_index": [
+                            0,
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 9
+                    },
+                    {
+                        "id": 23,
+                        "sku": "",
+                        "price": "5",
+                        "stock": 50,
+                        "variation_index": [
+                            1,
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 9
+                    },
+                    {
+                        "id": 24,
+                        "sku": "",
+                        "price": "10",
+                        "stock": 50,
+                        "variation_index": [
+                            1,
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 9
+                    }
+                ]
+            }
+        ],
+        "first_page_url": "http:\/\/tp-o.tk\/api\/v2\/products\/feature?page=1",
+        "from": 1,
+        "last_page": 3,
+        "last_page_url": "http:\/\/tp-o.tk\/api\/v2\/products\/feature?page=3",
+        "links": [
+            {
+                "url": null,
+                "label": "&laquo; Previous",
+                "active": false
+            },
+            {
+                "url": "http:\/\/tp-o.tk\/api\/v2\/products\/feature?page=1",
+                "label": "1",
+                "active": true
+            },
+            {
+                "url": "http:\/\/tp-o.tk\/api\/v2\/products\/feature?page=2",
+                "label": "2",
+                "active": false
+            },
+            {
+                "url": "http:\/\/tp-o.tk\/api\/v2\/products\/feature?page=3",
+                "label": "3",
+                "active": false
+            },
+            {
+                "url": "http:\/\/tp-o.tk\/api\/v2\/products\/feature?page=2",
+                "label": "Next &raquo;",
+                "active": false
+            }
+        ],
+        "next_page_url": "http:\/\/tp-o.tk\/api\/v2\/products\/feature?page=2",
+        "path": "http:\/\/tp-o.tk\/api\/v2\/products\/feature",
+        "per_page": "12",
+        "prev_page_url": null,
+        "to": 12,
+        "total": 33
+    }
+}
\ No newline at end of file
diff --git a/src/data/product.json b/src/data/product.json
index 9d13bfa..0cc2c6b 100644
--- a/src/data/product.json
+++ b/src/data/product.json
@@ -28,7 +28,7 @@
         "attributes": [
             {
                 "name": "Connection Type",
-                "value": "Type-C",
+                "S": "Type-C",
                 "unit": null
             },
             {
diff --git a/src/data/shop_product.json b/src/data/shop_product.json
new file mode 100644
index 0000000..7a4cc8b
--- /dev/null
+++ b/src/data/shop_product.json
@@ -0,0 +1,172 @@
+{
+    "status": true,
+    "data": {
+        "current_page": 1,
+        "data": [
+            {
+                "id": 5,
+                "name": "[\u2705SG Ready Stock] \ud83d\udd25 60\/80\/100x40\/50cm Nordic Study Table Laptop Home Office Desks Computer Modern Writing Table",
+                "description": "60\/80x40cm Nordic Study Table Laptop Home Office Desks Computer Modern Writing Table\\n\u2605\u2605 \ud835\uddea\ud835\uddd4\ud835\udde5\ud835\udde0 \ud835\udde5\ud835\uddd8\ud835\udde0\ud835\udddc\ud835\udde1\ud835\uddd7\ud835\uddd8\ud835\udde5 \u2605\u2605\\n\ud83d\udca2 1 Table = 1 Order Only \ud83d\ude0a\\n\ud83d\udca2 2 Table  = Need 2 Orders \ud83d\ude0a\\n\ud83d\udca2 Please don\u2019t combine with other products \ud83d\ude0a\\n** Please take note before place order **\\n***** Please Separate The Order *****\\nIf You Need To Buy More Than One Item, Please Purchase One Item Each Order TQ\\n1 Table = 1 Order Only\\n1 Item = 1 Order\\n10 Table = Need 10 Order",
+                "weight": "7000",
+                "avg_rating": "0",
+                "sold": 0,
+                "images": [
+                    "demo-6462d797d526c25510abe38442fc21d2",
+                    "demo-eaa6b336a5cb84383b6f991f32b89256"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "Size",
+                        "options": [
+                            "60x40cm Curve White",
+                            "60x40cm Curve Maple"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 4,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 11,
+                        "sku": "",
+                        "price": "299",
+                        "stock": 50,
+                        "variation_index": [
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 5
+                    },
+                    {
+                        "id": 12,
+                        "sku": "",
+                        "price": "299",
+                        "stock": 50,
+                        "variation_index": [
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 5
+                    }
+                ]
+            },
+            {
+                "id": 4,
+                "name": "[\u2705SG Ready Stock] \ud83d\udd25 Premium Foldable Baby High Chair\/ Feeding Chair\/ Low Chair\/ Adjustable Infant Toddlers Dining Seat",
+                "description": "Feature\\n1) Washable Food Tray Only\\n2) Washable PU Leather Seat Cover Only\\n3) Chair Colour ( Pink \/ Blue \/ Grey ) + Food Tray + Seat Cover + Wheel\\n4) Foldable for Space Saving\\n\ud83c\udf1fProduct Highlights\ud83c\udf1f\\n\ud83c\udd93\ud83c\udd93 Washable PU Leather Seat Cover\\n\ud83c\udd93\ud83c\udd93 Washable Dining Food Tray\\n\ud83c\udd93\ud83c\udd93 Multi-range Adjustment\\n\u2705 Adjustable Height\\n\u2705 Lightweight, Foldable & Portable\\n\u2705 Adjustable Safety belt included\\n\u2705 Suitable age start from 6 month to 5 years\\n\u2705 Sustain for baby weight up to 25kg\\n\u2705 Multipurpose adjustable dining chair\\n\u2705 Light weight for easy carrying\\n\u2705 Premium Material Surface - Easy to wipe clean\\n#haby #highchair # multifunction #foodtray #adjustable #safety #Premium #Baby #Singapore #Local",
+                "weight": "2500",
+                "avg_rating": "4",
+                "sold": 2,
+                "images": [
+                    "demo-5d428c67197abda913f95b5e29da189f"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "Colour",
+                        "options": [
+                            "Blue",
+                            "Pink"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 4,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 9,
+                        "sku": "",
+                        "price": "22.9",
+                        "stock": 50,
+                        "variation_index": [
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 4
+                    },
+                    {
+                        "id": 10,
+                        "sku": "",
+                        "price": "22.9",
+                        "stock": 50,
+                        "variation_index": [
+                            1
+                        ],
+                        "is_default": false,
+                        "product_id": 4
+                    }
+                ]
+            },
+            {
+                "id": 23,
+                "name": "[\u2705SG Ready Stock] \ud83d\udd25 30L\/70L Storage Box with Wheels \/ Storage Organizer Stackable",
+                "description": "\ud83d\udd25 30L\/70L Storage Box with Wheels \/ Storage Organizer Stackable",
+                "weight": "5000",
+                "avg_rating": "0",
+                "sold": 0,
+                "images": [
+                    "demo-6b56925e442e74911e9f32ba8aff4934",
+                    "demo-5ddd4032f8277d4dbce1ac20b904f6b7"
+                ],
+                "videos": [],
+                "variations": [
+                    {
+                        "name": "Size",
+                        "options": [
+                            "30L"
+                        ]
+                    }
+                ],
+                "created_at": "2022-06-04 07:14:57",
+                "shop_id": 4,
+                "brand_id": 1,
+                "status_id": 1,
+                "models": [
+                    {
+                        "id": 53,
+                        "sku": "",
+                        "price": "90",
+                        "stock": 50,
+                        "variation_index": [
+                            0
+                        ],
+                        "is_default": false,
+                        "product_id": 23
+                    }
+                ]
+            }
+        ],
+        "first_page_url": "http:\/\/tp-o.tk\/api\/v2\/shops\/4\/products?page=1",
+        "from": 1,
+        "last_page": 1,
+        "last_page_url": "http:\/\/tp-o.tk\/api\/v2\/shops\/4\/products?page=1",
+        "links": [
+            {
+                "url": null,
+                "label": "&laquo; Previous",
+                "active": false
+            },
+            {
+                "url": "http:\/\/tp-o.tk\/api\/v2\/shops\/4\/products?page=1",
+                "label": "1",
+                "active": true
+            },
+            {
+                "url": null,
+                "label": "Next &raquo;",
+                "active": false
+            }
+        ],
+        "next_page_url": null,
+        "path": "http:\/\/tp-o.tk\/api\/v2\/shops\/4\/products",
+        "per_page": "15",
+        "prev_page_url": null,
+        "to": 3,
+        "total": 3
+    }
+}
\ No newline at end of file
diff --git a/src/pages/buyer/account/dashboard.vue b/src/pages/buyer/account/dashboard.vue
index 9e490ba..418e59b 100644
--- a/src/pages/buyer/account/dashboard.vue
+++ b/src/pages/buyer/account/dashboard.vue
@@ -143,7 +143,9 @@ const signOut = async() => {
         <input v-model="user.payget.email" placeholder="Email address" disabled>
       </div>
       <div>
-        <input id="user_avatar_file" type="file" accept=".png, .jpg, .jpeg">
+        <input
+          id="user_avatar_file" type="file" accept=".png, .jpg, .jpeg" class="block w-full text-sm text-slate-500 file:(mr-4 py-2 px-4 rounded-full border-0 text-sm font-semibold bg-violet-50 text-violet-700) hover:file:bg-violet-100"
+        >
       </div>
       <div class="pt-5 flex justify-end">
         <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleUpdate">
diff --git a/src/pages/buyer/cart.vue b/src/pages/buyer/cart.vue
index ffa519d..947b4e8 100644
--- a/src/pages/buyer/cart.vue
+++ b/src/pages/buyer/cart.vue
@@ -34,7 +34,7 @@ const payget = reactive({
   limit: 10,
   page: 1,
 })
-onMounted(async() => {
+watchEffect(async() => {
   loading.isLoading = true
   const { data: cartData } = await CartRequest.getCart({ params: { limit: payget.limit, page: payget.page } })
   loading.isLoading = false
@@ -52,6 +52,7 @@ const payload = reactive(
 const handleDelete = async(id) => {
   removeItemByIndex(cart.result, id, 1)
   await CartRequest.deleteCart(id)
+  await location.reload()
   useToast.updateToast('success', 'You has been delete one cart items!', true)
 }
 // --------------------------------------------
diff --git a/src/pages/buyer/home.vue b/src/pages/buyer/home.vue
index e5a82af..a42593b 100644
--- a/src/pages/buyer/home.vue
+++ b/src/pages/buyer/home.vue
@@ -30,11 +30,14 @@ onMounted(() => {
     <CBMonthSale />
     <CBDealArrivals />
     <CBDemo3 /> -->
-    <div class="flex justify-center">
+    <!-- <div class="flex justify-center">
       <CBToday />
+    </div> -->
+    <div class="flex justify-center">
+      <CBFeature />
     </div>
     <!-- <CSlick /> -->
-    <!-- <CBDemo2 />
-    <CBService /> -->
+    <CBDemo2 />
+    <CBService />
   </div>
 </template>
diff --git a/src/pages/buyer/order/[order].vue b/src/pages/buyer/order/[order].vue
index e3a7f21..92ded5e 100644
--- a/src/pages/buyer/order/[order].vue
+++ b/src/pages/buyer/order/[order].vue
@@ -11,7 +11,6 @@ import { handleDate } from '~/utils/date'
 import { useProduct } from '~/stores/product'
 import { getResources } from '~/utils/resources'
 import OrderRequest from '~/services/order-request'
-import IBOrderArrowRight from '~/components/icons/account/IBOrderArrowRight.vue'
 
 const router = useRouter()
 const order = useOrder()
@@ -43,11 +42,11 @@ const orderImg = ref('')
 onMounted(async() => {
   loading.isLoading = true
   const { data: orderData } = await OrderRequest.getOrdersById(order.savedOrder)
-  loading.isLoading = false
   payget.value = orderData
   order.orderVariation = orderData.product.variations[0]
   order.orderAddress = orderData.received_address
   orderImg.value = getResources(orderData.product.images[0])
+  loading.isLoading = false
 })
 watchEffect(() => {
   order.setNewOrder(order.savedOrder)
diff --git a/src/pages/product/[product].vue b/src/pages/product/[product].vue
index d912d09..df553b2 100644
--- a/src/pages/product/[product].vue
+++ b/src/pages/product/[product].vue
@@ -42,9 +42,9 @@ onMounted(async() => {
   else {
     loading.isLoading = true
     const { data: productData } = await ProductRequest.getProductsById(product.productRequestID)
-    loading.isLoading = false
     productResponseData.value = productData
     productImg.value = productData.images
+    loading.isLoading = false
 
     const { data: reviewData } = await ProductRequest.getReviewsProductsById(product.productRequestID, { params: { limit: 10 } })
     productReview.value = reviewData
@@ -59,6 +59,7 @@ watchOnce(async() => {
   seller.statics = shopdata.statistic
 })
 // ---------------------------------------
+const isAdd = ref(false)
 const payloadCart = reactive({
   product_model_id: '',
   quantity: 1,
@@ -66,6 +67,7 @@ const payloadCart = reactive({
 const handleAdd = async() => {
   await CartRequest.addCart(payloadCart)
   useToast.updateToast('success', 'You cart items has been updated!', true)
+  isAdd.value = true
 }
 // ------------------------------------------
 const isChoossen = ref()
@@ -145,12 +147,12 @@ const onvisitShop = () => {
 </script>
 
 <template>
-  <div class="product-summary-container max-w-300 bg-white dark:bg-gray-800 rounded-lg shadow-md shadow-gray-400/50 p-3 mx-2">
-    <div class="main-content flex gap-10">
+  <div class="product-summary-container max-w-300 bg-white dark:bg-gray-800 rounded-xl shadow-md shadow-gray-400/50 p-3 mx-2">
+    <div v-cloak class="main-content flex gap-10">
       <div>
-        <img :src="getResources(productImg[0])" alt="product_img" class="max-w-112 max-h-112 rounded-lg shadow-lg shadow-gray-300">
+        <img :src="getResources(productImg[0])" alt="product_img" class="max-w-112 max-h-112 rounded-2xl shadow-lg shadow-gray-400/50 dark:shadow-gray-700">
         <div class="grid grid-cols-5 max-w-112 mt-3 gap-2">
-          <img :src="getResources(productImg[1])" alt="product_preview_img" class="rounded-md border-2 border-solid hover:border-[#EE4D2D] cursor-pointer">
+          <img v-for="(img, i) in productImg" :key="i" :src="getResources(img)" alt="product_preview_img" class="rounded-md border-2 border-solid hover:border-[#EE4D2D] cursor-pointer">
           <!-- <img src="https://cf.shopee.vn/file/12ae221177dcb74dc4b1701afc06b298_tn" alt="product_preview_img" class="rounded-md border-2 border-solid hover:border-[#EE4D2D] cursor-pointer">
           <img src="https://cf.shopee.vn/file/5413e844e5893181b0f33a191af65cd0_tn" alt="product_preview_img" class="rounded-md border-2 border-solid hover:border-[#EE4D2D] cursor-pointer">
           <img src="https://cf.shopee.vn/file/7ed7a314372976ba07c7cc4f083bbf68_tn" alt="product_preview_img" class="rounded-md border-2 border-solid hover:border-[#EE4D2D] cursor-pointer">
@@ -222,7 +224,10 @@ const onvisitShop = () => {
             <IBShipping /> {{ t('product.transport') }}
           </p>
           <div>
-            <select name="province" class="cursor-pointer dark:bg-gray-700 rounded-md pl-2 appearance-none pl-2 border-1 border-dashed border-gray-300">
+            <select name="province" class="cursor-pointer dark:bg-gray-700 rounded-md px-2 appearance-none border-1 border-dashed border-gray-300">
+              <option value="" selected hidden disabled>
+                Choose province
+              </option>
               <option v-for="(province, i) in provinceNames" :key="i" :value="province" class="mt-5 bg-[#FFF5F1] dark:bg-gray-700">
                 {{ province }}
               </option>
@@ -242,7 +247,7 @@ const onvisitShop = () => {
         <div class="infor">
           <label>{{ t('product.quantities') }}</label>
           <div class="uppercase flex items-center rounded-md border-1 border-solid border-gray-300 text-sm">
-            <p class="px-2 cursor-pointer hover:bg-[#FAFAFA]" :class="{'pointer-events-none': payloadCart.quantity<2}" @click="payloadCart.quantity--">
+            <p class="px-2 cursor-pointer hover:bg-[#FAFAFA]" :class="{'pointer-events-none opacity-50': payloadCart.quantity<2}" @click="payloadCart.quantity--">
               <IBMinus />
             </p>
             <p class="border-l-1 border-l-solid border-l-gray-300 border-r-1 border-r-solid border-r-gray-300 font-medium px-5 py-1">
@@ -263,6 +268,9 @@ const onvisitShop = () => {
           <button class="px-5 py-3 rounded-md bg-[#EE4D2D] hover:bg-[#F05D40] border-1 border-solid border-[#EE4D2D] text-white capitalize" @click="handleOrder">
             {{ t('product.order-now') }}
           </button>
+          <button v-if="isAdd" class="px-5 py-3 rounded-md bg-[#FFEEE8] hover:bg-[#FFF5F1] border-1 border-solid border-[#EE4D2D] text-[#EE4D2D] capitalize flex items-center gap-1" @click="router.push('/buyer/cart')">
+            <ICart class="max-h-6" />View cart
+          </button>
         </div>
       </div>
     </div>
@@ -283,7 +291,7 @@ const onvisitShop = () => {
     </div>
   </div>
 
-  <div class="shop-product-container max-w-300 bg-white dark:bg-gray-800 rounded-lg shadow-md shadow-gray-400/50 p-5 mx-2 divide-x divide-1 divide-solid divide-gray-300 flex flex-wrap">
+  <div class="shop-product-container max-w-300 bg-white dark:bg-gray-800 rounded-xl shadow-md shadow-gray-400/50 p-5 mx-2 divide-x divide-1 divide-solid divide-gray-300 flex flex-wrap">
     <div class="flex">
       <img v-if="seller.payget.avatar_image" :src="`https://tp-o.tk/resources/images/${seller.payget.avatar_image}`" alt="shop_avatar" class="max-w-19 max-h-19 rounded-full shadow-md shadow-gray-200 mr-4 object-cover">
       <img v-else src="https://cf.shopee.vn/file/7ebd612d6fddcf7f4114bf2d97da382a_tn" alt="shop_avatar" class="max-w-19 max-h-19 rounded-full shadow-md shadow-gray-200 mr-4">
@@ -338,21 +346,30 @@ const onvisitShop = () => {
     </div>
   </div>
 
-  <div class="product-details max-w-300 bg-white dark:bg-gray-800 rounded-lg shadow-md shadow-gray-400/50 p-5 mx-2">
-    <div class="bg-[#FAFAFA] dark:bg-gray-700 p-3 rounded-lg">
-      <h2 class="uppercase text-xl">
+  <div class="product-details max-w-300 bg-white dark:bg-gray-800 rounded-xl shadow-md shadow-gray-400/50 p-5 mx-2">
+    <div class="bg-[#FAFAFA] dark:bg-gray-700 p-3 rounded-xl flex items-center gap-2 uppercase text-xl font-medium">
+      <IBDescription />
+      <h2>
         {{ t('product.product-describes') }}
       </h2>
     </div>
     <div>
       <label>{{ t('product.category') }}</label>
-      <p class="text-[#0055BD] cursor-pointer">
-        e-shopee > men's shoes > sandal > other
-      </p>
+      <div class="text-[#0055BD] cursor-pointer font-medium flex">
+        e-shopee >
+        <div v-if="productResponseData.attributes" class="flex gap-7">
+          <p v-for="(attr, i) in productResponseData.attributes" :key="i">
+            {{ attr.name }} > {{ attr.value }}
+          </p>
+        </div>
+        <p v-else>
+          updating...
+        </p>
+      </div>
     </div>
     <div>
       <label>{{ t('product.organization') }}</label>
-      <p>{{ t('product.updating') }}...</p>
+      <p>Trung tâm hàng nội địa xuất khẩu Quảng Châu</p>
     </div>
     <div>
       <label>{{ t('product.origin') }}</label>
@@ -372,7 +389,7 @@ const onvisitShop = () => {
     </div>
     <div>
       <p v-for="(desc, i) in productResponseData.description?.split('\\n')" :key="i">
-        {{ desc }}
+        &bull; {{ desc }}
       </p>
 
       <!-- <p>🔥Thanh toán khi nhận hàng liên hệ trước với shop nếu muốn xem hàng trước khi thanh toán</p>
@@ -395,29 +412,35 @@ const onvisitShop = () => {
     </div>
   </div>
 
-  <div class="product-evalutions max-w-300 bg-white dark:bg-gray-800 rounded-lg shadow-md shadow-gray-400/50 p-5 mx-2">
-    <div class="text-xl uppercase">
+  <div class="product-evalutions max-w-300 bg-white dark:bg-gray-800 rounded-xl shadow-md shadow-gray-400/50 p-5 mx-2">
+    <div class="text-xl uppercase flex items-center gap-2 uppercase text-xl font-medium">
+      <IBDescription />
       <h2>{{ t('product.product-evalutions') }}</h2>
     </div>
     <div class="divide-y divide-1 divide-solid divide-gray-200">
-      <div v-for="i in 3" :key="i" class="flex justify-between items-start py-3">
+      <div v-for="i in 2" :key="i" class="flex justify-between items-start py-3">
         <div class="flex">
           <div class="px-3">
             <img src="https://cf.shopee.vn/file/3922ddaf7b5dde58c3193c6689e7aaca_tn" alt="customer_avatar_img" class="max-w-10 max-h-10 rounded-full">
           </div>
-          <div class="customer-cmt">
-            <p class="customer-username text-xs text-gray-600">
+          <div class="customer-cmt text-sm text-gray-600 dark:text-gray-300">
+            <p class="customer-username text-xs">
               yen050619
             </p>
             <p class="flex gap-0.25">
               <IStars v-for="i in 5" :key="i" />
             </p>
-            <p class="text-gray-500 text-sm">
+            <p>
               Very good! I like it.
             </p>
-            <p class="flex items-center gap-2 text-sm cursor-pointer text-gray-500">
-              <IBLike /> 11
-            </p>
+            <div class="flex items-center gap-5">
+              <p class="flex items-center gap-1.5 cursor-pointer">
+                <IBLike /> 11
+              </p>
+              <p class="flex items-center gap-1.5 cursor-pointer">
+                <IBChat /> Comment
+              </p>
+            </div>
           </div>
         </div>
         <div class="cursor-pointer hover:opacity-60">
diff --git a/src/pages/search/[keyword].vue b/src/pages/search/[keyword].vue
index 759bd25..b903186 100644
--- a/src/pages/search/[keyword].vue
+++ b/src/pages/search/[keyword].vue
@@ -7,8 +7,6 @@ meta:
 import { keyword } from '~/stores/keyword'
 import { useLoading } from '~/stores/loading'
 import ProductRequest from '~/services/product-request'
-import RProductSearch from '~/components/rendering/RProductSearch.vue'
-import RProductCardGrid from '~/components/rendering/RProductCardGrid.vue'
 
 const props = defineProps<{ keyword: string }>()
 const router = useRouter()
@@ -24,23 +22,22 @@ const payload = reactive({
   limit: 12,
   page: 1,
   keyword: props.keyword,
-  order_by: 2,
+  order_by: 1,
   filter: {
     category_ids: [
       1,
     ],
   },
 })
-onMounted(async() => {
-  if (!localStorage.getItem('token')) {
+onMounted(() => {
+  if (!localStorage.getItem('token'))
     router.push({ path: '/buyer/login' })
-  }
-  else {
-    loading.isLoading = true
-    const { data: searchData } = await ProductRequest.searchProducts({ params: { limit: payload.limit, page: payload.page, keyword: payload.keyword, order_by: payload.order_by, filter: payload.filter } })
-    useKeyword.resultProduct = searchData.data
-    loading.isLoading = false
-  }
+})
+watch(async() => {
+  loading.isLoading = true
+  const { data: searchData } = await ProductRequest.searchProducts({ params: { limit: payload.limit, page: payload.page, keyword: payload.keyword, order_by: payload.order_by, filter: payload.filter } })
+  useKeyword.resultProduct = searchData.data
+  loading.isLoading = false
 })
 // get props keyword from store after search
 watchEffect(() => {
@@ -60,7 +57,7 @@ const onChangeRegime = (type: any) => {
 </script>
 
 <template>
-  <div class="filter-container bg-white grid grid-cols-4 py-20 px-10 gap-3 dark:bg-black">
+  <div class="filter-container bg-white grid grid-cols-4 py-20 px-10 gap-3 dark:bg-gray-800">
     <aside class="left-sidebar theme1 text-left col-span-1 px-2">
       <div class="search-filter">
         <h4 class="title">
@@ -190,9 +187,9 @@ const onChangeRegime = (type: any) => {
         </a>
       </div>
     </aside>
-    <!-- ************************************ -->
+    <!-- ------------------------------------ -->
     <div class="grid-products-filter col-span-3">
-      <div class="flex justify-between items-center bg-gray-100 rounded-lg py-2 px-5">
+      <div class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 rounded-lg py-2 px-5">
         <ul id="pills-tab" class="nav-pills flex items-center">
           <li class="nav-item text-lg hover:text-red-500 cursor-pointer" :style="[regime === 'grid' ? {color:'red'} : {color:'gray'}]" @click="onChangeRegime('grid')">
             <i class="fa fa-th" />
@@ -203,34 +200,35 @@ const onChangeRegime = (type: any) => {
           <li><span class="total-products text-sm">{{ t('search.there-are') }} {{ useKeyword.resultProduct.length }} {{ t('search.products') }}.</span></li>
         </ul>
         <div>
-          <span class="text-sm mr-3">{{ t('search.sort-by') }}: </span>
-          <select id="sort_by" name="sort_by" class="px-3 py-0.5 cursor-pointer text-sm text-gray-900 bg-blue-100 rounded-lg border border-gray-300 focus:(ring-blue-500 border-blue-500) dark:(bg-gray-700 placeholder-gray-400 text-white) dark:focus:ring-blue-500 dark:focus:border-blue-500">
+          <span class="text-sm mr-3" for="sort_by">{{ t('search.sort-by') }}: </span>
+          <select id="sort_by" v-model="payload.order_by" name="sort_by" class="px-3 py-0.5 cursor-pointer text-sm text-gray-900 bg-blue-100 rounded-lg border border-gray-300 focus:(ring-blue-500 border-blue-500) dark:(bg-gray-700 placeholder-gray-400 text-white) dark:focus:ring-blue-500 dark:focus:border-blue-500">
             <option value="" disabled selected hidden>
               {{ t('search.relevance') }}
             </option>
-            <option value="name_a_to_z" class="bg-white dark:bg-transparent">
+            <option value="name_a_to_z" class="bg-white dark:bg-transparent hidden">
               {{ t('search.name') }}, {{ t('search.a-z') }}
             </option>
-            <option value="name_z_to_a" class="bg-white dark:bg-transparent">
-              {{ t('search.name') }}, {{ t('search.z-a') }}
-            </option>
-            <option value="price_low_to_high" class="bg-white dark:bg-transparent">
-              {{ t('search.price') }}, {{ t('search.low-high') }}
+            <option :value="1" class="bg-white dark:bg-transparent">
+              {{ t('search.name') }} newest
             </option>
-            <option value="price_high_to_low" class="bg-white dark:bg-transparent">
+            <option :value="2" class="bg-white dark:bg-transparent">
               {{ t('search.price') }}, {{ t('search.high-low') }}
             </option>
+            <option :value="3" class="bg-white dark:bg-transparent">
+              {{ t('search.price') }}, {{ t('search.low-high') }}
+            </option>
           </select>
         </div>
       </div>
+
       <Transition name="slide-fade">
         <div v-if="regime === 'grid'">
           <div v-if="loading.isLoading" class="grid-products-list flex flex-wrap gap-5 py-10">
             <RProductCardGrid v-for="index in 12" :key="index" />
           </div>
           <div v-else v-cloak class="grid-products-list flex flex-wrap gap-5 py-10">
-            <div v-for="(prod, index) in useKeyword.resultProduct" :key="index" class="card duration-200 ease-linear relative rounded-lg w-60  shadow-md hover:shadow-gray-400/50 pb-0">
-              <CProductCardGrid :card="prod" />
+            <div v-for="(prod, index) in useKeyword.resultProduct" :key="index" class="card duration-200 ease-linear relative rounded-lg w-60  shadow-md dark:bg-gray-700 hover:shadow-gray-400/50 pb-0">
+              <CProductCardGrid :card="prod" mode="discount" />
             </div>
           </div>
         </div>
@@ -240,7 +238,14 @@ const onChangeRegime = (type: any) => {
           <CProductCardFlow v-for="(prod, index) in useKeyword.resultProduct" :key="index" class="card duration-200 ease-linear rounded-xl w-full shadow-md hover:(shadow-lg shadow-gray-400/50) pb-0 flex border-t-1 border-t-[#e9e9e9]" :card="prod" />
         </div>
       </Transition>
-      <CPagination :index="payload.page" @on-prev="payload.page--" @on-next="payload.page++" />
+      <div v-if="useKeyword.resultProduct.length===0" class="grid justify-center gap-5">
+        <PNotFound class="w-70 justify-self-center" />
+        <div class="flex gap-5 text-gray-500 dark:text-gray-300">
+          <p class="bg-[#e9e9e9] dark:(bg-gray-700 shadow-gray-700) rounded-full shadow-md shadow-gray-300 w-7 h-7 p-1 cursor-pointer" @click="router.back()"><svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" /></svg></p>
+          <p>not have product at here</p>
+        </div>
+      </div>
+      <CPagination v-else :index="payload.page" @on-prev="--payload.page" @on-next="++payload.page" />
     </div>
   </div>
 </template>
diff --git a/src/pages/shop/[shop].vue b/src/pages/shop/[shop].vue
index fd9805b..fdfba47 100644
--- a/src/pages/shop/[shop].vue
+++ b/src/pages/shop/[shop].vue
@@ -10,6 +10,7 @@ import { shop } from '~/stores/shop'
 import { useSeller } from '~/stores/seller'
 import { useLoading } from '~/stores/loading'
 import { handleDate } from '~/utils/date'
+import { getResources } from '~/utils/resources'
 import ShopRequest from '~/services/shop-request'
 
 const props = defineProps({ shop: String })
@@ -17,339 +18,39 @@ const router = useRouter()
 const useShop = shop()
 const loading = useLoading()
 const seller = useSeller()
-
 useHead({
   title: `shop | ${props.shop}`,
 })
-
 onMounted(() => {
   if (!localStorage.getItem('token'))
     router.push({ path: '/buyer/login' })
 })
-// get shop infor after search
+// get shop id after search
 watchEffect(() => {
   useShop.setNewShop(props.shop)
 })
-
 const { t } = useI18n()
-
 watchOnce(async() => {
   loading.isLoading = true
   const { data: shopdata } = await ShopRequest.getShopsById(props.shop)
-  loading.isLoading = false
   seller.payget = shopdata
   seller.statics = shopdata.statistic
-})
+  loading.isLoading = false
 
+  const { data: productData } = await ShopRequest.getProductsOfShopId(props.shop, { params: { limit: 15, page: 1 } })
+  useShop.publicProducts = productData.data
+})
 const onPrev = () => prev('shop_demo_product')
 const onNext = () => next('shop_demo_product')
-
 const activeTime = ref('minutes')
-
-const demoShopProducts = reactive([{
-  img: '/img/top-products/1.jfif',
-  name: 'Quần lót nam co giãn',
-  price: 1000,
-  solded: 5,
-  quantity: 15,
-},
-{
-  img: '/img/top-products/2.jfif',
-  name: 'Ốp lưng iphone',
-  price: 1000,
-  solded: 5,
-  quantity: 15,
-},
-{
-  img: '/img/top-products/3.jfif',
-  name: 'Ốp lưng',
-  price: 1000,
-  solded: 5,
-  quantity: 20,
-},
-{
-  img: '/img/top-products/4.jfif',
-  name: 'Áo thun Polo nam ngắn tay',
-  price: 1000,
-  solded: 5,
-  quantity: 15,
-},
-{
-  img: '/img/top-products/5.jfif',
-  name: 'Bút kẻ mắt chống nước',
-  price: 1000,
-  solded: 5,
-  quantity: 15,
-},
-{
-  img: '/img/top-products/6.jfif',
-  name: 'Bông tẩy trang 3 lớp',
-  price: 1000,
-  solded: 5,
-  quantity: 15,
-}])
-
-const openProduct = () => {
-  router.push('/buyer/product')
-}
-
-const hintList = reactive([{
-  img: '/img/today/1.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/2.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: true,
-},
-{
-  img: '/img/today/3.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/4.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/5.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/6.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/7.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: true,
-},
-{
-  img: '/img/today/8.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/9.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/10.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: true,
-},
-{
-  img: '/img/today/11.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/12.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/13.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/14.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/15.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/16.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/17.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/18.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/19.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/20.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/21.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/22.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/23.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/24.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/25.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/26.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/27.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/28.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/29.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/30.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/31.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/32.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/33.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/34.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-},
-{
-  img: '/img/today/35.jfif',
-  desc: 'Áo Hoodie nam, nữ form rộng. Áo khoác bomber nam...',
-  price: 1.065,
-  soldQuatity: '2K',
-  extra: false,
-}])
-
-const hintListInit = ref(15)
-const stepVisible = ref(5)
-const hintListComputed = computed(() => hintList.slice(0, hintListInit.value))
 </script>
 
 <template>
   <div class="shop_view_container grid justify-center max-w-250 px-2 gap-5">
-    <div class="h-min bg-white dark:bg-gray-800 rounded-lg shadow-md shadow-gray-300 p-3 grid grid-cols-2 justify-between mt-5 border-t-1 border-t-[#e9e9e9]">
+    <div class="h-min bg-white dark:bg-gray-800 rounded-xl shadow-md shadow-gray-300 p-3 grid grid-cols-2 justify-between mt-5 border-t-1 border-t-[#e9e9e9]">
       <div class="p-3">
-        <div class="flex justify-evenly gap-3 rounded-md p-3 text-gray-200 w-4/5" :style="`background-image: url(https://tp-o.tk/resources/images/${seller.payget.cover_image})`" :class="{'bg-[#644B4A]': !seller.payget.cover_image}">
-          <img v-if="seller.payget.avatar_image" :src="`https://tp-o.tk/resources/images/${seller.payget.avatar_image}`" alt="shop_avatar" class="rounded-full border-4 border-[#A29392] w-25 h-25 object-cover">
+        <div class="flex justify-evenly gap-3 rounded-lg p-3 text-gray-200 w-4/5" :style="`background-image: url(${getResources(seller.payget.cover_image)})`" :class="{'bg-[#644B4A]': !seller.payget.cover_image}">
+          <img v-if="seller.payget.avatar_image" :src="getResources(seller.payget.avatar_image)" alt="shop_avatar" class="rounded-full border-4 border-[#A29392] w-25 h-25 object-cover">
           <img v-else src="https://cf.shopee.vn/file/56dd7c9788031f9b16fd990b11ccc62c_tn" alt="shop_avatar" class="rounded-full border-4 border-[#A29392] w-25 h-25">
           <div class="grid place-content-between">
             <div>
@@ -397,78 +98,41 @@ const hintListComputed = computed(() => hintList.slice(0, hintListInit.value))
           <p>{{ t('shop.rating') }}: <span>{{ seller.statics.average_raiting }}% (8 votes)</span></p>
         </div>
       </div>
-    </div>
-    <div class="h-min bg-white dark:bg-gray-800 rounded-lg shadow-md shadow-gray-300 py-3 px-5">
-      <div class="text-lg uppercase font-medium text-gray-500">
-        <h2>{{ t('shop.shop-information') }} [ID: {{ props.shop }}]</h2>
-      </div>
-      <div class="grid grid-cols-2 text-sm gap-5">
-        <div class="flex items-center">
-          <div class="prev flex justify-center items-center rounded-full bg-white shadow-md shadow-gray-300 duration-300 cursor-pointer w-7 h-7 p-1 text-gray-500" @click="onPrev">
-            &#10094;
-          </div>
-          <div id="shop_demo_product" class="flex overflow-x-scroll gap-3 p-2 w-full">
-            <div v-for="(demo, i) in demoShopProducts" :key="i" class="min-w-full max-h-72">
-              <img :src="demo.img" alt="demo_img" class="min-w-full rounded-md">
-            </div>
-          </div>
-          <div class="next flex justify-center items-center rounded-full bg-white shadow-md shadow-gray-300 duration-300 cursor-pointer w-7 h-7 p-1 text-gray-500" @click="onNext">
-            &#10095;
-          </div>
-        </div>
-        <div class="grid justify-center place-content-start gap-2">
-          <p>{{ seller.payget.description }}</p>
-        </div>
+      <div v-if="seller.payget.description" class="col-span-2">
+        <p class="flex items-center gap-2">
+          <ISDescription /> Descriptions:
+        </p>
+        <p>{{ seller.payget.description }}</p>
       </div>
     </div>
-    <div class="h-min bg-white dark:bg-gray-800 rounded-lg shadow-md shadow-gray-300 p-3">
-      <div class="shop_view_action bg-[#EDEDED] flex items-center gap-3 p-2 text-md rounded-lg">
+
+    <div class="h-min bg-white dark:bg-gray-800 rounded-xl shadow-md shadow-gray-300 p-3">
+      <div class="shop_view_action bg-[#EDEDED] dark:bg-gray-700 flex items-center gap-3 p-2 text-md rounded-lg">
         <div>
           <p>{{ t('shop.sort-by') }}</p>
         </div>
-        <div class="bg-white cursor-pointer rounded-md py-1 px-3 capitalize">
+        <div class="bg-white dark:bg-gray-600 cursor-pointer rounded-md py-1 px-3 capitalize">
           <p>{{ t('shop.popular') }}</p>
         </div>
-        <div class="bg-white cursor-pointer rounded-md py-1 px-3 capitalize">
+        <div class="bg-white dark:bg-gray-600 cursor-pointer rounded-md py-1 px-3 capitalize">
           <p>{{ t('shop.latest') }}</p>
         </div>
-        <select class="rounded-md py-1 px-3 cursor-pointer">
+        <select class="rounded-md py-1 px-3 cursor-pointer dark:bg-gray-600">
           <option>{{ t('shop.price') }}: {{ t('shop.default') }}</option>
           <option>{{ t('shop.price') }}: {{ t('shop.low-to-high') }}</option>
           <option>{{ t('shop.price') }}: {{ t('shop.high-to-low') }}</option>
         </select>
       </div>
-      <div class="shop_view_content flex justify-center flex-wrap gap-3 py-3">
-        <div v-for="(hint, i) in hintListComputed" :key="i" class="max-w-45 rounded-md bg-light-100 shadow-sm shadow-gray-400/50 border-1 border-solid border-transparent hover:border-red-500 cursor-pointer relative" @click="openProduct">
-          <img v-if="hint.extra === true" src="/img/today/extra.png" alt="extra" class="absolute top-0 left-0 w-full">
-          <img src="/img/today/discount.svg" alt="discount" class="absolute -top-2 -right-6 w-21">
-          <div class="absolute top-1 right-4 w-20 text-xs">
-            <p class="text-red-500">
-              30%
-            </p>
-            <p class="text-white" style="font-size:0.55em;">
-              {{ t('ctoday.decrease') }}
-            </p>
-          </div>
-          <img :src="hint.img" alt="" class="w-full h-47 rounded-t-md">
-          <p class="text-left text-xs p-1">
-            {{ hint.desc }}
-          </p>
-          <div class="flex justify-between items-center px-1 py-2">
-            <p class="text-red-500">
-              <span class="text-xs font-light">$</span>{{ hint.price }}
-            </p>
-            <p class="text-xs">
-              {{ t('ctoday.sold') }} {{ hint.soldQuatity }}
-            </p>
+      <div>
+        <div v-if="loading.isLoading" class="shop_view_content flex justify-center flex-wrap gap-3 py-3">
+          <RProductCard v-for="i in 6" :key="i" />
+        </div>
+        <div v-else class="shop_view_content flex justify-center flex-wrap gap-3 py-3">
+          <div v-for="(prod, index) in useShop.publicProducts" :key="index" class="card duration-200 ease-linear relative rounded-lg w-60  shadow-md dark:(bg-gray-700) hover:shadow-gray-400/50 pb-0">
+            <CProductCardGrid :card="prod" />
           </div>
         </div>
       </div>
-      <div class="flex justify-center">
-        <p v-if="hintListInit < hintList.length" class="bg-white border-1 border-solid border-gray-200 py-2 px-10 rounded-md cursor-pointer hover:bg-[#F5F5F5] hover:border-gray-300" @click="hintListInit += stepVisible">
-          {{ t('ctoday.see-more') }}
-        </p>
-      </div>
     </div>
   </div>
 </template>
diff --git a/src/services/product-request.js b/src/services/product-request.js
index fa47059..ed27b76 100644
--- a/src/services/product-request.js
+++ b/src/services/product-request.js
@@ -31,6 +31,11 @@ class ProductRequest {
     return AxiosInstance.post(url, data)
   }
 
+  getProductsFeature(data) {
+    const url = '/products/feature'
+    return AxiosInstance.get(url, data)
+  }
+
   getPrices(data) {
     const url = '/products/prices'
     return AxiosInstance.get(url, data)
diff --git a/src/services/shop-request.js b/src/services/shop-request.js
index 5e52dd5..f34b5f9 100644
--- a/src/services/shop-request.js
+++ b/src/services/shop-request.js
@@ -6,9 +6,9 @@ class ShopRequest {
     return AxiosInstance.get(url)
   }
 
-  getShopsProductsById(id_or_slug) {
+  getProductsOfShopId(id_or_slug, data) {
     const url = `/shops/${id_or_slug}/products`
-    return AxiosInstance.get(url)
+    return AxiosInstance.get(url, data)
   }
 
   getShops() {
diff --git a/src/stores/product.ts b/src/stores/product.ts
index 54095a8..97f6507 100644
--- a/src/stores/product.ts
+++ b/src/stores/product.ts
@@ -5,19 +5,17 @@ export const useProduct = defineStore('product', () => {
   // create new product in seller page
   const productName = ref<string>('')
   const category = ref<any>([])
-  const level1 = ref<any>([])
-  const level2 = ref<any>([])
-  const level3 = ref<any>([])
-  const choicedList = reactive({
-    0: '',
-    1: '',
-    2: '',
+  const level = reactive<any>({
+    level1: '',
+    level2: '',
+    level3: '',
   })
+
   // search public product
   const productRequestID = ref()
   const shopRequestID = ref()
 
-  return { productName, category, level1, level2, level3, choicedList, productRequestID, shopRequestID }
+  return { productName, category, level, productRequestID, shopRequestID }
 })
 
 if (import.meta.hot)
diff --git a/src/stores/shop.ts b/src/stores/shop.ts
index b50a610..c11815e 100644
--- a/src/stores/shop.ts
+++ b/src/stores/shop.ts
@@ -23,10 +23,13 @@ export const shop = defineStore('shop', () => {
     savedShop.value = name
   }
 
+  const publicProducts = ref<any>([])
+
   return {
     setNewShop,
     otherShop,
     savedShop,
+    publicProducts,
   }
 })