diff --git a/src/components.d.ts b/src/components.d.ts
index b4d3b35..19071a5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -11,6 +11,7 @@ declare module 'vue' {
     CarbonLanguage: typeof import('~icons/carbon/language')['default']
     CarbonMoon: typeof import('~icons/carbon/moon')['default']
     CarbonSun: typeof import('~icons/carbon/sun')['default']
+    CarbonWarning: typeof import('~icons/carbon/warning')['default']
     CASellerList: typeof import('./components/admin/CASellerList.vue')['default']
     CBAccount: typeof import('./components/buyer/CBAccount.vue')['default']
     CBBanner: typeof import('./components/buyer/CBBanner.vue')['default']
@@ -44,7 +45,8 @@ declare module 'vue' {
     CMap: typeof import('./components/CMap.vue')['default']
     Counter: typeof import('./components/Counter.vue')['default']
     CPagination: typeof import('./components/CPagination.vue')['default']
-    CProductCard: typeof import('./components/CProductCard.vue')['default']
+    CProductCardFlow: typeof import('./components/CProductCardFlow.vue')['default']
+    CProductCardGrid: typeof import('./components/CProductCardGrid.vue')['default']
     CProgress: typeof import('./components/CProgress.vue')['default']
     CSChooseCategory: typeof import('./components/seller/CSChooseCategory.vue')['default']
     CSFooter: typeof import('./components/seller/CSFooter.vue')['default']
@@ -175,6 +177,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']
+    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/CProductCardFlow.vue b/src/components/CProductCardFlow.vue
new file mode 100644
index 0000000..ae43af0
--- /dev/null
+++ b/src/components/CProductCardFlow.vue
@@ -0,0 +1,199 @@
+<script setup>
+import { useRouter } from 'vue-router'
+import { useLoading } from '~/stores/loading'
+import { toast } from '~/stores/toast'
+import { useSeller } from '~/stores/seller'
+import { useProduct } from '~/stores/product'
+import { handleError } from '~/helpers/error'
+import { handleDate } from '~/utils/date'
+import { productStatus } from '~/utils/status'
+import { sliceText } from '~/utils/textHandle'
+import { getResources } from '~/utils/resources'
+
+import ShopRequest from '~/services/shop-request'
+import ProductRequest from '~/services/product-request'
+import AccountRequest from '~/services/account-request'
+import CartRequest from '~/services/cart-request'
+import OrderRequest from '~/services/order-request'
+
+const { t } = useI18n()
+const router = useRouter()
+const useToast = toast()
+const product = useProduct()
+
+const props = defineProps({
+  card: Object,
+})
+
+const productPrice = ref()
+const productStock = ref()
+
+// ------------------------------------------
+watchEffect(async() => {
+  // get price min-max
+  const valuesPrice = props.card.models.map(i => i.price)
+  const maxPrice = Math.max(...valuesPrice)
+  const minPrice = Math.min(...valuesPrice)
+  if (maxPrice === minPrice)
+    productPrice.value = `$${maxPrice}`
+  else
+    productPrice.value = `$${minPrice} - $${maxPrice}`
+
+  // get stock min-max
+  const valuesStock = props.card.models.map(i => i.stock)
+  const maxStock = Math.max(...valuesStock)
+  const minStock = Math.min(...valuesStock)
+  if (minStock === maxStock)
+    productStock.value = `${maxStock}`
+  else
+    productStock.value = `${minStock} - ${maxStock}`
+})
+
+// ------------------- VISIST PRODUCT DETAIL --------------
+const onVisitProduct = (prod_id, shop_id) => {
+  product.productRequestID = prod_id
+  product.shopRequestID = shop_id
+  router.push(`/product/${encodeURIComponent(prod_id)}`)
+}
+// -----------------------------------------
+const isPopup = ref(false)
+const onOpenPopup = () => {
+  const body = document.body
+  body.style.overflowY = 'hidden'
+  isPopup.value = true
+}
+const onClosePopup = () => {
+  const body = document.body
+  body.style.overflowY = ''
+  isPopup.value = false
+}
+
+</script>
+
+<template>
+  <div>
+    <div class="relative z-1">
+      <div class="card-type flex justify-between absolute w-full p-5">
+        <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>
+      <!-- <div class="split third rounded-lg shadow-md" @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>
+    <div class="product-description text-left p-2">
+      <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>
+      </div>
+
+      <div class="product-infor py-5 text-sm leading-6">
+        <p v-for="(line, i) in sliceText(props.card.description)?.split('\\n')" :key="i">
+          {{ line }}
+        </p>
+      </div>
+
+      <div class="product-quantity">
+        <p>{{ t('search.availability') }}: <span class="text-[#10A391]">{{ productStock }} In Stock</span></p>
+      </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">
+          {{ 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="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'">
+              {{ t('search.add-success-message') }}
+            </h5>
+            <span class="cursor-pointer text-4xl absolute right-3 -top-1" @click="onClosePopup">&times;</span>
+          </div>
+          <div class="grid grid-cols-7 px-10 pt-10 pb-5 divide-1 divide-solid divide-gray-200 divide-x">
+            <div class="flex col-span-3 gap-2">
+              <img src="/img/product/shoes/3.webp" alt="new_product" class="max-w-50 max-h-50">
+              <div class="text-md font-semibold">
+                <h6 class="pb-3">
+                  New Balance Running Arishi trainers in triple
+                </h6>
+                <p>$29.00</p>
+                <p>{{ t('search.dimension') }}: <span class="text-sm font-normal">40x60cm</span></p>
+                <p>{{ t('search.quantity') }}: 1</p>
+              </div>
+            </div>
+            <div class="col-span-4 px-10 text-sm font-semibold">
+              <p class="py-0.5 font-normal">
+                {{ t('search.there-is') }} 1 {{ t('search.item-in-your-cart') }}.
+              </p>
+              <p class="py-0.5">
+                {{ t('search.total-products') }}: <span class="font-normal">$123.72</span>
+              </p>
+              <p class="py-0.5">
+                {{ t('search.total-shipping') }}: <span class="font-normal">$7.00</span>
+              </p>
+              <p class="py-0.5">
+                {{ t('search.taxes') }} <span class="font-normal">$0.00</span>
+              </p>
+              <p class="py-0.5">
+                {{ t('search.total') }}: <span class="font-normal">$130.72 (tax excl.)</span>
+              </p>
+              <div class="uppercase flex text-white font-medium text-sm py-5">
+                <h6 class="bg-black rounded-md py-2 px-6 mr-2 hover:bg-red-500 cursor-pointer duration-200">
+                  {{ t('search.continue-shopping') }}
+                </h6>
+                <h6 class="bg-black rounded-md py-2 px-6 hover:bg-red-500 cursor-pointer duration-200 flex gap-2 items-center">
+                  <ICheck />{{ t('search.proceed-checkout') }}
+                </h6>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="isPopup === true" class="fixed w-screen h-screen bg-black opacity-50 top-0 left-0" @click="onClosePopup" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.split.third {
+    display: block;
+    overflow: hidden;
+    cursor: pointer;
+}
+.split.third img {
+    width: 100%;
+    height: auto;
+    -webkit-transition: -webkit-transform 0.8s ease;
+            transition: -webkit-transform 0.8s ease;
+            transition: transform 0.8s ease;
+            transition: transform 0.8s ease, -webkit-transform 1s ease;
+}
+.split.third:hover img {
+    -webkit-transform: scale(1.15);
+            transform: scale(1.15);
+}
+/* ************************ POPUP MODAL **************************** */
+.popup-modal{
+  animation: popup-animate 0.1s linear;
+}
+</style>
diff --git a/src/components/CProductCard.vue b/src/components/CProductCardGrid.vue
similarity index 98%
rename from src/components/CProductCard.vue
rename to src/components/CProductCardGrid.vue
index f4f40d1..6300587 100644
--- a/src/components/CProductCard.vue
+++ b/src/components/CProductCardGrid.vue
@@ -65,7 +65,7 @@ const onVisitProduct = (prod_id, shop_id) => {
   </div>
   <div class="split third rounded-lg shadow-md" @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="thumbnail">
+      <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">
diff --git a/src/components/head/CBSearch.vue b/src/components/head/CBSearch.vue
index 0d45b70..2c471fd 100644
--- a/src/components/head/CBSearch.vue
+++ b/src/components/head/CBSearch.vue
@@ -6,13 +6,15 @@ const useKeyword = keyword()
 const key = ref(useKeyword.savedKeyword)
 
 const router = useRouter()
+
 const go = async() => {
   if (key.value) {
-    await router.push(`/search/keyword=${encodeURIComponent(key.value)}`)
+    await router.push(`/search/${encodeURIComponent(key.value)}`)
     await location.reload()
     key.value = ''
   }
 }
+
 </script>
 
 <template>
diff --git a/src/components/rendering/RProductCardGrid.vue b/src/components/rendering/RProductCardGrid.vue
new file mode 100644
index 0000000..8c0edbf
--- /dev/null
+++ b/src/components/rendering/RProductCardGrid.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/pages/buyer/account/orders.vue b/src/pages/buyer/account/orders.vue
index 208d045..7949404 100644
--- a/src/pages/buyer/account/orders.vue
+++ b/src/pages/buyer/account/orders.vue
@@ -38,7 +38,7 @@ watch(async() => {
 })
 const trackOrder = (order_id) => {
   order.savedOrder = order_id
-  router.push(`/buyer/order/id=${encodeURIComponent(order_id)}`)
+  router.push(`/buyer/order/${encodeURIComponent(order_id)}`)
 }
 </script>
 
diff --git a/src/pages/buyer/order/[order].vue b/src/pages/buyer/order/[order].vue
index 3d13fd0..e3a7f21 100644
--- a/src/pages/buyer/order/[order].vue
+++ b/src/pages/buyer/order/[order].vue
@@ -6,6 +6,7 @@ meta:
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useOrder } from '~/stores/order'
+import { useLoading} from '~/stores/loading'
 import { handleDate } from '~/utils/date'
 import { useProduct } from '~/stores/product'
 import { getResources } from '~/utils/resources'
@@ -15,6 +16,7 @@ import IBOrderArrowRight from '~/components/icons/account/IBOrderArrowRight.vue'
 const router = useRouter()
 const order = useOrder()
 const product = useProduct()
+const loading = useLoading()
 const { t } = useI18n()
 useHead({
   title: `order | ${order.savedOrder}`,
@@ -33,13 +35,15 @@ const statusPercent = (status_id: number) => {
     case 5:
       return 99
     default:
-      return 0
+      return 10
   }
 }
 const payget = ref([])
 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
diff --git a/src/pages/search/[keyword].vue b/src/pages/search/[keyword].vue
index 92771c2..759bd25 100644
--- a/src/pages/search/[keyword].vue
+++ b/src/pages/search/[keyword].vue
@@ -5,11 +5,15 @@ meta:
 
 <script setup lang="ts">
 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()
 const useKeyword = keyword()
+const loading = useLoading()
 const { t } = useI18n()
 
 useHead({
@@ -17,7 +21,7 @@ useHead({
 })
 // ------------- get result of search product -----------
 const payload = reactive({
-  limit: 10,
+  limit: 12,
   page: 1,
   keyword: props.keyword,
   order_by: 2,
@@ -32,8 +36,10 @@ onMounted(async() => {
     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
   }
 })
 // get props keyword from store after search
@@ -51,171 +57,6 @@ const regime = ref('grid')
 const onChangeRegime = (type: any) => {
   regime.value = String(type)
 }
-
-const isPopup = ref(false)
-const onOpenPopup = () => {
-  const body = document.body
-  body.style.overflowY = 'hidden'
-  isPopup.value = true
-}
-const onClosePopup = () => {
-  const body = document.body
-  body.style.overflowY = ''
-  isPopup.value = false
-}
-
-const products = reactive([{
-  img: '/img/arrival/1.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/arrival/2.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 5.99,
-},
-{
-  img: '/img/arrival/3.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/arrival/4.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/arrival/5.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/arrival/6.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/arrival/7.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/arrival/8.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/arrival/9.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/arrival/10.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/product/shoes/1.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/product/shoes/2.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/product/shoes/3.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/product/shoes/5.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/product/shoes/6.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/product/shoes/7.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/product/shoes/8.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/product/shoes/9.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-},
-{
-  img: '/img/product/shoes/12.webp',
-  desc: 'New Luxury Men\'s Slim Fit Shirt Short Sleeve...',
-  infor: 'Block out the haters with the fresh adidas® Originals Kaval Windbreaker Jacket. Part of the Kaval Collection. Regular fit is eased, but not sloppy, and perfect for any activity. Plain-woven jacket specifically constructed for freedom of movement.',
-  quantity: 1200,
-  price: 11.90,
-  discountPrice: 11.90,
-}])
 </script>
 
 <template>
@@ -339,7 +180,7 @@ const products = reactive([{
         </h4>
       </div>
       <ul class="product-tag flex justify-start items-center mb-10 mt-5 flex-wrap ">
-        <li v-for="i in tags.length" :key="i">
+        <li v-for="i in tags.length" :key="i" :class="{'active':i === 2}">
           <a href="#">{{ tags[i-1] }}</a>
         </li>
       </ul>
@@ -383,108 +224,20 @@ const products = reactive([{
         </div>
       </div>
       <Transition name="slide-fade">
-        <div v-if="regime === 'grid'" 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">
-            <CProductCard :card="prod" />
+        <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>
           </div>
         </div>
       </Transition>
       <Transition name="slide-fade">
         <div v-if="regime === 'flow'" class="grid-products-list grid gap-3 py-10">
-          <div v-for="(prod, i) in products" :key="i" class="card duration-200 ease-linear rounded-lg w-full hover:shadow-md hover:shadow-gray-400/50 pb-0 flex">
-            <div class="relative">
-              <div class="card-type flex justify-between absolute w-full p-5">
-                <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">
-                <a href="single-product.html">
-                  <img class="first-img rounded-t-lg" :src="prod.img" alt="thumbnail">
-                </a>
-              </div>
-            </div>
-            <div class="product-description text-left p-2">
-              <div class="px-2">
-                <p class="card-title cursor-pointer duration-200 ease-linear hover:text-[#FF6600]">
-                  {{ prod.desc }}
-                </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" :style="[prod.price == prod.discountPrice ? {color: 'black'} : {color: '#9B9B9B','text-decoration': 'line-through'}]">
-                    ${{ prod.price }}
-                  </h6>
-                  <h6 v-if="prod.price !== prod.discountPrice" class="font-bold tracking-tighter text-red-500">
-                    ${{ prod.discountPrice }}
-                  </h6>
-                </div>
-              </div>
-              <div class="product-infor py-5 text-sm leading-6">
-                <p v-for="(line, index) in prod.infor.split('.')" :key="index">
-                  {{ line }}
-                </p>
-              </div>
-              <div class="product-quantity">
-                <p>{{ t('search.availability') }}: <span class="text-[#10A391]">{{ prod.quantity }} In Stock</span></p>
-              </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">
-                  {{ t('search.add-to-cart') }}
-                </h3>
-              </div>
-              <div v-if="isPopup === true" class="popup-modal 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">
-                  <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'">
-                      {{ t('search.add-success-message') }}
-                    </h5>
-                    <span class="cursor-pointer text-4xl absolute right-3 -top-1" @click="onClosePopup">&times;</span>
-                  </div>
-                  <div class="grid grid-cols-7 px-10 pt-10 pb-5 divide-1 divide-solid divide-gray-200 divide-x">
-                    <div class="flex col-span-3 gap-2">
-                      <img src="/img/product/shoes/3.webp" alt="new_product" class="max-w-50 max-h-50">
-                      <div class="text-md font-semibold">
-                        <h6 class="pb-3">
-                          New Balance Running Arishi trainers in triple
-                        </h6>
-                        <p>$29.00</p>
-                        <p>{{ t('search.dimension') }}: <span class="text-sm font-normal">40x60cm</span></p>
-                        <p>{{ t('search.quantity') }}: 1</p>
-                      </div>
-                    </div>
-                    <div class="col-span-4 px-10 text-sm font-semibold">
-                      <p class="py-0.5 font-normal">
-                        {{ t('search.there-is') }} 1 {{ t('search.item-in-your-cart') }}.
-                      </p>
-                      <p class="py-0.5">
-                        {{ t('search.total-products') }}: <span class="font-normal">$123.72</span>
-                      </p>
-                      <p class="py-0.5">
-                        {{ t('search.total-shipping') }}: <span class="font-normal">$7.00</span>
-                      </p>
-                      <p class="py-0.5">
-                        {{ t('search.taxes') }} <span class="font-normal">$0.00</span>
-                      </p>
-                      <p class="py-0.5">
-                        {{ t('search.total') }}: <span class="font-normal">$130.72 (tax excl.)</span>
-                      </p>
-                      <div class="uppercase flex text-white font-medium text-sm py-5">
-                        <h6 class="bg-black rounded-md py-2 px-6 mr-2 hover:bg-red-500 cursor-pointer duration-200">
-                          {{ t('search.continue-shopping') }}
-                        </h6>
-                        <h6 class="bg-black rounded-md py-2 px-6 hover:bg-red-500 cursor-pointer duration-200 flex gap-2 items-center">
-                          <ICheck />{{ t('search.proceed-checkout') }}
-                        </h6>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="isPopup === true" class="fixed z-10 w-screen h-screen bg-black opacity-5 top-0 left-0" @click="onClosePopup" />
-              </div>
-            </div>
-          </div>
+          <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++" />
@@ -696,17 +449,15 @@ input[type=range]:focus::-webkit-slider-runnable-track {
   font-weight: lighter;
   cursor: pointer;
 }
-.product-tag > li:hover{
+.product-tag > li:hover,
+.product-tag > li.active{
   background: #F33535;
   color: white;
 }
 .product-infor{
  font-family: "Gilroy-Light";
 }
-/* ************************ POPUP MODAL **************************** */
-.popup-modal{
-  animation: popup-animate 0.1s linear;
-}
+
 /* ************************ TRANSITION ***************************** */
 .slide-fade-enter-active {
   transition: all 0.3s ease-out;
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 9bccb98..c95a2c4 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -16,4 +16,6 @@
 
 	--dark-bg: #111a2e;
 	--dark-text: #94a3b8;
+
+	--light-rendering: #d1d5db;
 }
\ No newline at end of file
diff --git a/windi.config.ts b/windi.config.ts
index ff7d63c..cb925d4 100644
--- a/windi.config.ts
+++ b/windi.config.ts
@@ -6,7 +6,7 @@ export default defineConfig({
   darkMode: 'class',
   // https://windicss.org/posts/v30.html#attributify-mode
   attributify: true,
-  safelist: ['accent-[#34B1AA]', 'accent-[#FFAF00]', 'accent-[#F95F53]', 'accent-[#34B1AA]', 'bg-[#FCA130]', 'bg-[#F93E3E]', 'bg-[#49CC90]', 'bg-[#61AFFE]', 'bg-[#6B7280]', 'bg-[#9061F9]', 'bg-[#C27803]', 'bg-[#E74694]'].join(' '),
+  safelist: ['accent-[#34B1AA]', 'accent-[#FFAF00]', 'accent-[#F95F53]', 'accent-[#34B1AA]', 'bg-[#FCA130]', 'bg-[#F93E3E]', 'bg-[#49CC90]', 'bg-[#61AFFE]', 'bg-[#6B7280]', 'bg-[#9061F9]', 'bg-[#C27803]', 'bg-[#E74694]', 'before:w-[10%]', 'before:w-[29%]', 'before:w-[51%]', 'before:w-[75%]', 'before:w-[99%]'].join(' '),
   plugins: [
     typography(),
   ],