diff --git a/locales/en.yml b/locales/en.yml
index 4f36d30..962fa06 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -195,7 +195,6 @@ account:
   order-no: No
   order-name: Name
   order-date: Date
-  order-status: Status
   order-total: Total
   order-action: Action
   save-changes: Save changes
diff --git a/src/components.d.ts b/src/components.d.ts
index 81e92fb..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']
@@ -30,6 +31,7 @@ declare module 'vue' {
     CBMenuItem: typeof import('./components/head/CBMenuItem.vue')['default']
     CBMonthSale: typeof import('./components/buyer/CBMonthSale.vue')['default']
     CBOurProducts: typeof import('./components/buyer/CBOurProducts.vue')['default']
+    CBreadcrumbNavigation: typeof import('./components/CBreadcrumbNavigation.vue')['default']
     CBSearch: typeof import('./components/head/CBSearch.vue')['default']
     CBService: typeof import('./components/buyer/CBService.vue')['default']
     CBSwipper: typeof import('./components/buyer/CBSwipper.vue')['default']
@@ -43,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']
@@ -81,6 +84,7 @@ declare module 'vue' {
     IBMinus: typeof import('./components/icons/product/IBMinus.vue')['default']
     IBook: typeof import('./components/icons/about/IBook.vue')['default']
     IBOrder: typeof import('./components/icons/account/IBOrder.vue')['default']
+    IBOrderArrowRight: typeof import('./components/icons/account/IBOrderArrowRight.vue')['default']
     IBPassword: typeof import('./components/icons/auth/IBPassword.vue')['default']
     IBPayment: typeof import('./components/icons/account/IBPayment.vue')['default']
     IBPlus: typeof import('./components/icons/product/IBPlus.vue')['default']
@@ -92,6 +96,7 @@ declare module 'vue' {
     IBShipping: typeof import('./components/icons/services/IBShipping.vue')['default']
     IBSupport: typeof import('./components/icons/services/IBSupport.vue')['default']
     IBThreeDot: typeof import('./components/icons/product/IBThreeDot.vue')['default']
+    IBTrackOrder: typeof import('./components/icons/account/IBTrackOrder.vue')['default']
     IBUnlock: typeof import('./components/icons/auth/IBUnlock.vue')['default']
     IBUsername: typeof import('./components/icons/auth/IBUsername.vue')['default']
     ICake: typeof import('./components/icons/ICake.vue')['default']
@@ -172,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/CBreadcrumbNavigation.vue b/src/components/CBreadcrumbNavigation.vue
new file mode 100644
index 0000000..f69491d
--- /dev/null
+++ b/src/components/CBreadcrumbNavigation.vue
@@ -0,0 +1,148 @@
+<template>
+  <!-- a simple div with some links -->
+  <div class="breadcrumb">
+    <a href="#" class="active">Browse</a>
+    <a href="#">Compare</a>
+    <a href="#">Order Confirmation</a>
+    <a href="#">Checkout</a>
+  </div>
+  <br><br>
+  <!-- another version - flat style with animated hover effect -->
+  <div class="breadcrumb flat">
+    <a href="#" class="active">Browse</a>
+    <a href="#">Compare</a>
+    <a href="#">Order Confirmation</a>
+    <a href="#">Checkout</a>
+  </div>
+
+  <!-- Prefixfree -->
+  <!-- <script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript" /> -->
+</template>
+
+<style scoped>
+
+@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans);
+
+* {margin: 0; padding: 0;}
+
+html, body {min-height: 100%;}
+
+body {
+	text-align: center;
+	padding-top: 100px;
+	background: #689976;
+	background: linear-gradient(#689976, #ACDACC);
+	font-family: 'Merriweather Sans', arial, verdana;
+}
+
+.breadcrumb {
+	/*centering*/
+	display: inline-block;
+	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
+	overflow: hidden;
+	border-radius: 5px;
+	/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
+	counter-reset: flag;
+}
+
+.breadcrumb a {
+	text-decoration: none;
+	outline: none;
+	display: block;
+	float: left;
+	font-size: 12px;
+	line-height: 36px;
+	color: white;
+	/*need more margin on the left of links to accomodate the numbers*/
+	padding: 0 10px 0 60px;
+	background: #666;
+	background: linear-gradient(#666, #333);
+	position: relative;
+}
+/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
+.breadcrumb a:first-child {
+	padding-left: 46px;
+	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
+}
+.breadcrumb a:first-child:before {
+	left: 14px;
+}
+.breadcrumb a:last-child {
+	border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
+	padding-right: 20px;
+}
+
+/*hover/active styles*/
+.breadcrumb a.active, .breadcrumb a:hover{
+	background: #333;
+	background: linear-gradient(#333, #000);
+}
+.breadcrumb a.active:after, .breadcrumb a:hover:after {
+	background: #333;
+	background: linear-gradient(135deg, #333, #000);
+}
+
+/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
+.breadcrumb a:after {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: -18px; /*half of square's length*/
+	/*same dimension as the line-height of .breadcrumb a */
+	width: 36px;
+	height: 36px;
+	/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
+	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
+	if diagonal required = 1; length = 1/1.414 = 0.707*/
+	transform: scale(0.707) rotate(45deg);
+	/*we need to prevent the arrows from getting buried under the next link*/
+	z-index: 1;
+	/*background same as links but the gradient will be rotated to compensate with the transform applied*/
+	background: #666;
+	background: linear-gradient(135deg, #666, #333);
+	/*stylish arrow design using box shadow*/
+	box-shadow:
+		2px -2px 0 2px rgba(0, 0, 0, 0.4),
+		3px -3px 0 2px rgba(255, 255, 255, 0.1);
+	/*
+		5px - for rounded arrows and
+		50px - to prevent hover glitches on the border created using shadows*/
+	border-radius: 0 5px 0 50px;
+}
+/*we dont need an arrow after the last link*/
+.breadcrumb a:last-child:after {
+	content: none;
+}
+/*we will use the :before element to show numbers*/
+.breadcrumb a:before {
+	content: counter(flag);
+	counter-increment: flag;
+	/*some styles now*/
+	border-radius: 100%;
+	width: 20px;
+	height: 20px;
+	line-height: 20px;
+	margin: 8px 0;
+	position: absolute;
+	top: 0;
+	left: 30px;
+	background: #444;
+	background: linear-gradient(#444, #222);
+	font-weight: bold;
+}
+
+.flat a, .flat a:after {
+	background: white;
+	color: black;
+	transition: all 0.5s;
+}
+.flat a:before {
+	background: white;
+	box-shadow: 0 0 0 1px #ccc;
+}
+.flat a:hover, .flat a.active,
+.flat a:hover:after, .flat a.active:after{
+	background: #9EEB62;
+}
+
+</style>
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 756f37a..2c471fd 100644
--- a/src/components/head/CBSearch.vue
+++ b/src/components/head/CBSearch.vue
@@ -6,6 +6,7 @@ const useKeyword = keyword()
 const key = ref(useKeyword.savedKeyword)
 
 const router = useRouter()
+
 const go = async() => {
   if (key.value) {
     await router.push(`/search/${encodeURIComponent(key.value)}`)
@@ -13,6 +14,7 @@ const go = async() => {
     key.value = ''
   }
 }
+
 </script>
 
 <template>
diff --git a/src/components/icons/account/IBOrderArrowRight.vue b/src/components/icons/account/IBOrderArrowRight.vue
new file mode 100644
index 0000000..ae6b6c5
--- /dev/null
+++ b/src/components/icons/account/IBOrderArrowRight.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 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16m-7-7l7 7l-7 7" /></svg>
+</template>
diff --git a/src/components/icons/account/IBTrackOrder.vue b/src/components/icons/account/IBTrackOrder.vue
new file mode 100644
index 0000000..61b0fe7
--- /dev/null
+++ b/src/components/icons/account/IBTrackOrder.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 24 24"><path fill="currentColor" d="M12 22q-2.075 0-3.9-.788q-1.825-.787-3.175-2.137q-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175q1.35-1.35 3.175-2.138Q9.925 2 12 2h.25q.325 0 .538.212q.212.213.212.538v7.525q.45.275.725.712Q14 11.425 14 12q0 .825-.587 1.412Q12.825 14 12 14q-.825 0-1.412-.588Q10 12.825 10 12q0-.575.275-1.025q.275-.45.725-.7v-2.15q-1.3.35-2.15 1.412Q8 10.6 8 12q0 1.65 1.175 2.825Q10.35 16 12 16q1.65 0 2.825-1.175Q16 13.65 16 12q0-.575-.162-1.138q-.163-.562-.488-1.062q-.225-.35-.187-.688q.037-.337.287-.587q.3-.3.762-.3q.463 0 .738.4q.55.8.8 1.662Q18 11.15 18 12q0 2.5-1.75 4.25T12 18q-2.5 0-4.25-1.75T6 12q0-2.25 1.425-3.912Q8.85 6.425 11 6.075V4.05q-2.975.375-4.987 2.625Q4 8.925 4 12q0 3.35 2.325 5.675Q8.65 20 12 20q3.35 0 5.675-2.325Q20 15.35 20 12q0-1.475-.425-2.65q-.425-1.175-1.2-2.175q-.275-.35-.262-.75q.012-.4.312-.7q.3-.3.713-.3q.412 0 .662.325q1.05 1.275 1.625 2.825Q22 10.125 22 12q0 2.075-.788 3.9q-.787 1.825-2.137 3.175q-1.35 1.35-3.175 2.137Q14.075 22 12 22Z" /></svg>
+</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/data/order_id.json b/src/data/order_id.json
new file mode 100644
index 0000000..8f7609d
--- /dev/null
+++ b/src/data/order_id.json
@@ -0,0 +1,64 @@
+{
+  "status": true,
+  "data": {
+    "id": 4,
+    "name": "M220 Silent Wireless Mouse 1600DPI Optical Tracking accessories mice wireless mouse wireless gaming mice computer mouse",
+    "variations": [
+      "Black M220"
+    ],
+    "quantity": 3,
+    "total": "369",
+    "grand_total": "369",
+    "created_at": "2022-06-05 06:57:47",
+    "user_id": 21,
+    "product_id": 25,
+    "product_model_id": 55,
+    "received_address_id": 22,
+    "pickup_address_id": null,
+    "status_id": 1,
+    "shop_id": 6,
+    "product": {
+      "id": 25,
+      "name": "M220 Silent Wireless Mouse 1600DPI Optical Tracking accessories mice wireless mouse wireless gaming mice computer mouse",
+      "description": "M220 Silent Wireless Mouse 1600DPI Optical Tracking accessories mice wireless mouse wireless gaming mice computer mouse wireless bluetooth wireless gaming mouse wireless mouse silent blue tooth mouse\\nSpecification\\nModel: M220\\nType\uff1awireless mouse\\nColor\uff1ablack \/ red \/ blue\\nWireless transmission frequency:\uff1a2.4GHz\\nNumber of buttons\uff1a3\\nInterface\uff1aUSB\\nResolution\uff1a1600DPI\\nOperating distance\uff1a10 m\\nBattery type\uff1aAA\\nErgonomics\uff1aYes\\nApplicable system\uff1aWindows 10 or Higher version \/ Windows 8 \/ Windows RT \/ Windows 7 \/ Mac OS X 10.5 or Higher version \/ Chrome OS \/ Linus Kernel 2.6+2\\nMouse size\uff1a99 * 60 * 39 mm\\nWeight of mouse (including battery) \uff1a85g\\naccessories mice wireless mouse wireless gaming mice computer mouse ergonomic mouse wireless bluetooth wireless gaming mouse wireless mouse silent blue tooth mouse",
+      "weight": "5000",
+      "avg_rating": "0",
+      "sold": 0,
+      "images": [
+        "demo-dd787648e6a85debc81100ab1d12d724",
+        "demo-57e75a92ec7668c4fee7fc1314bbf69e"
+      ],
+      "videos": [],
+      "variations": [
+        {
+          "name": "Color",
+          "options": [
+            "Black M220"
+          ]
+        }
+      ],
+      "created_at": "2022-06-04 07:14:57",
+      "shop_id": 6,
+      "brand_id": 1,
+      "status_id": 1
+    },
+    "received_address": {
+      "id": 22,
+      "full_name": "Tran Nguyen Thuong Truong",
+      "phone": "12345678911",
+      "state": "HoChiMinh",
+      "city": "Thu Duc",
+      "town": "Linh Trung",
+      "address": "International University",
+      "is_home": null
+    },
+    "pickup_address": null,
+    "progresses": [
+      {
+        "note": "",
+        "created_at": "2022-06-05 06:57:47",
+        "status_id": 1
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/src/layouts/buyer/LBOrder.vue b/src/layouts/buyer/LBOrder.vue
new file mode 100644
index 0000000..af0b43b
--- /dev/null
+++ b/src/layouts/buyer/LBOrder.vue
@@ -0,0 +1,16 @@
+<template>
+  <main class="text-gray-700 dark:(text-gray-200 bg-$dark-bg) overflow-x-hidden">
+    <CBHeaderTop />
+    <CBHead />
+    <router-view />
+    <CBFooter />
+  </main>
+</template>
+
+<style scoped>
+@media (max-width: 992px){
+  .header-home{
+    display: none;
+  }
+}
+</style>
diff --git a/src/pages/buyer/account/address.vue b/src/pages/buyer/account/address.vue
index a67d81c..0503f37 100644
--- a/src/pages/buyer/account/address.vue
+++ b/src/pages/buyer/account/address.vue
@@ -81,8 +81,8 @@ const handleDelete = async() => {
       </div>
       <div class="flex items-center gap-5">
         <div class="text-blue-500 cursor-pointer" @click="isCreating = !isCreating">
-          <IBCreate v-if="!isCreating" />
-          <IEdit v-if="isCreating" />
+          <IBCreate v-if="isCreating" />
+          <IEdit v-if="!isCreating" />
         </div>
         <IBDelete class="text-red-400 cursor-pointer" @click="handleDelete" />
       </div>
@@ -176,10 +176,10 @@ const handleDelete = async() => {
       </div>
 
       <div class="pt-5 flex gap-5 justify-end">
-        <button v-if="!isCreating" type="submit" class="btn bg-black duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleUpdate">
+        <button v-if="isCreating" type="submit" class="btn bg-black duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleUpdate">
           <ISave />{{ t('account.address-update') }}
         </button>
-        <button v-if="isCreating" type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleCreate">
+        <button v-if="!isCreating" type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleCreate">
           <ISave />{{ t('account.address-create') }}
         </button>
       </div>
diff --git a/src/pages/buyer/account/credit.vue b/src/pages/buyer/account/credit.vue
index 390ce1e..7dcaec9 100644
--- a/src/pages/buyer/account/credit.vue
+++ b/src/pages/buyer/account/credit.vue
@@ -47,13 +47,13 @@ watch(async() => {
 const handleCreate = async(e) => {
   e.preventDefault()
   await AccountRequest.createCreditCard(payload)
-  useToast.updateToast('sucess', 'your card has been created successfully!', true)
+  useToast.updateToast('success', 'A new card has been created successfully!', true)
 }
 // ----------------------------------
 const handleUpdate = async(e) => {
   e.preventDefault()
   await AccountRequest.updateCreditCardById(user.credit.id, payload)
-  useToast.updateToast('updated', 'Your card has been successfully!', true)
+  useToast.updateToast('success', 'Your card has been updated!', true)
 }
 // ------------------------------
 const handleDelete = async(e) => {
diff --git a/src/pages/buyer/account/dashboard.vue b/src/pages/buyer/account/dashboard.vue
index 51d923e..9e490ba 100644
--- a/src/pages/buyer/account/dashboard.vue
+++ b/src/pages/buyer/account/dashboard.vue
@@ -61,6 +61,10 @@ watch(async() => {
 // --------------------------------------------
 
 const genderType = reactive([
+  {
+    id: 0,
+    type: 'Others',
+  },
   {
     id: 1,
     type: 'Male',
@@ -68,10 +72,6 @@ const genderType = reactive([
   {
     id: 2,
     type: 'Female',
-  },
-  {
-    id: 3,
-    type: 'Others',
   }])
 const handleUpdate = async() => {
   await AccountRequest.updateProfile(payload)
@@ -131,7 +131,7 @@ const signOut = async() => {
         <input v-model="payload.display_name" placeholder="Full name" type="text" required>
       </div>
       <div>
-        <input v-model="payload.phone" placeholder="Phone name" type="text">
+        <input v-model="payload.phone" placeholder="Phone number (10digits)" type="number" min="0000000000" max="9999999999">
         <select v-model="payload.gender" class="cursor-pointer">
           <option v-for="(gender, i) in genderType" :key="i" :value="gender.id">
             {{ gender.type }}
@@ -140,14 +140,13 @@ const signOut = async() => {
       </div>
       <div>
         <input v-model="payload.date_of_birth" placeholder="Date of birth (MM/DD/YYYY)" type="text" required>
-        <input v-model="user.payget.email" placeholder="Date of birth" disabled>
+        <input v-model="user.payget.email" placeholder="Email address" disabled>
       </div>
       <div>
-        <!-- <input v-model="payload.avatar_image" placeholder="Avatar link url" type="text" required disabled> -->
         <input id="user_avatar_file" type="file" accept=".png, .jpg, .jpeg">
       </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" :disabled="!payload.avatar_image" :class="{'pointer-events-none':!payload.avatar_image}" @click="handleUpdate">
+        <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">
           <ISave />{{ t('account.save-changes') }}
         </button>
       </div>
diff --git a/src/pages/buyer/account/orders.vue b/src/pages/buyer/account/orders.vue
index 8356718..7949404 100644
--- a/src/pages/buyer/account/orders.vue
+++ b/src/pages/buyer/account/orders.vue
@@ -4,13 +4,12 @@ meta:
 </route>
 
 <script setup>
+import { useRouter } from 'vue-router'
 import { useLoading } from '~/stores/loading'
 import { toast } from '~/stores/toast'
 import { useUser } from '~/stores/user'
 import { useOrder } from '~/stores/order'
-import { orderStatus } from '~/utils/status'
 import OrderRequest from '~/services/order-request'
-import { handleDate } from '~/utils/date'
 
 useHead({
   title: 'buyer | orders',
@@ -19,6 +18,7 @@ const { t } = useI18n()
 const loading = useLoading()
 const user = useUser()
 const order = useOrder()
+const router = useRouter()
 
 onMounted(() => {
   if (!localStorage.getItem('token'))
@@ -36,6 +36,10 @@ watch(async() => {
   user.order = orderData
   order.payget = orderData.data
 })
+const trackOrder = (order_id) => {
+  order.savedOrder = order_id
+  router.push(`/buyer/order/${encodeURIComponent(order_id)}`)
+}
 </script>
 
 <template>
@@ -53,9 +57,6 @@ watch(async() => {
           <tr>
             <th>{{ t('account.order-no') }}</th>
             <th>{{ t('account.order-name') }}</th>
-            <th>{{ t('account.order-date') }}</th>
-            <th>{{ t('account.order-status') }}</th>
-            <th>Quantity</th>
             <th>{{ t('account.order-total') }}</th>
             <th>{{ t('account.order-action') }}</th>
           </tr>
@@ -65,11 +66,14 @@ watch(async() => {
           <tr v-for="(item, index) in order.payget" :key="index">
             <td>{{ index+1 }}</td>
             <td>{{ item.name }}</td>
-            <td>{{ item.created_at }}</td>
-            <td>{{ orderStatus(item.status_id) }}</td>
-            <td>{{ item.quantity }}</td>
-            <td>${{ item.total }}</td>
-            <td><a :href="item" class="hover:opacity-50">Download</a></td>
+            <td class="text-red-500 font-medium">
+              ${{ item.total }}
+            </td>
+            <td>
+              <button type="button" class="text-gray-700 bg-gradient-to-r from-teal-200 to-lime-200 hover:(bg-gradient-to-l from-teal-200 to-lime-200) focus:(ring-2 focus:ring-lime-200) dark:focus:ring-teal-700 font-medium rounded-lg text-sm px-5 py-1.75 text-center mr-2 mb-2 flex items-center gap-1" @click="trackOrder(item.id)">
+                <IBTrackOrder /> Track
+              </button>
+            </td>
           </tr>
         </tbody>
       </table>
diff --git a/src/pages/buyer/cart.vue b/src/pages/buyer/cart.vue
index 48a23e6..ffa519d 100644
--- a/src/pages/buyer/cart.vue
+++ b/src/pages/buyer/cart.vue
@@ -38,7 +38,7 @@ onMounted(async() => {
   loading.isLoading = true
   const { data: cartData } = await CartRequest.getCart({ params: { limit: payget.limit, page: payget.page } })
   loading.isLoading = false
-  cart.result = cartData.data
+  cart.result = cartData
 })
 // ---------------------------------------------
 
diff --git a/src/pages/buyer/cart_nhap.vue b/src/pages/buyer/cart_nhap.vue
deleted file mode 100644
index ffa519d..0000000
--- a/src/pages/buyer/cart_nhap.vue
+++ /dev/null
@@ -1,547 +0,0 @@
-<route lang="yaml">
-meta:
-  layout: buyer/LBCart
-</route>
-
-<script setup>
-import { useRouter } from 'vue-router'
-import { useCart } from '~/stores/cart'
-import { toast } from '~/stores/toast'
-import { useLoading } from '~/stores/loading'
-import CartRequest from '~/services/cart-request'
-import { floorNumber } from '~/utils/floorNumber'
-import AccountRequest from '~/services/account-request'
-import OrderRequest from '~/services/order-request'
-import { handleError } from '~/helpers/error'
-import { removeItemByIndex } from '~/utils/arrayHandle'
-
-useHead({
-  title: 'buyer | cart',
-})
-const { t } = useI18n()
-
-const router = useRouter()
-const useToast = toast()
-const loading = useLoading()
-const cart = useCart()
-
-onMounted(() => {
-  if (!localStorage.getItem('token'))
-    router.push({ path: '/buyer/login' })
-})
-
-const payget = reactive({
-  limit: 10,
-  page: 1,
-})
-onMounted(async() => {
-  loading.isLoading = true
-  const { data: cartData } = await CartRequest.getCart({ params: { limit: payget.limit, page: payget.page } })
-  loading.isLoading = false
-  cart.result = cartData
-})
-// ---------------------------------------------
-
-const payload = reactive(
-  {
-    product_model_id: '',
-    quantity: '',
-  },
-)
-
-const handleDelete = async(id) => {
-  removeItemByIndex(cart.result, id, 1)
-  await CartRequest.deleteCart(id)
-  useToast.updateToast('success', 'You has been delete one cart items!', true)
-}
-// --------------------------------------------
-const payloadOrder = reactive({
-  address_id: '',
-  orders: [],
-})
-onMounted(async() => {
-  const { data: addressData } = await AccountRequest.getAddress()
-  payloadOrder.address_id = addressData.filter(e => Object.keys(addressData.id === 0))[0].id
-})
-
-const handleOrder = async() => {
-  if (payloadOrder.address_id) {
-    await cart.result.map(item => payloadOrder.orders.push({ product_model_id: item.product_model_id, quantity: item.quantity }))
-    await OrderRequest.createOrders(payloadOrder)
-    useToast.updateToast('success', 'You order has been created!', true)
-  }
-  else {
-    useToast.updateToast('error', 'Please need fill your address information!', true)
-    router.push({ path: '/buyer/account/address' })
-  }
-}
-</script>
-
-<template>
-  <div class="cart-container text-center">
-    <div class="relative overflow-x-auto shadow-md sm:rounded-xl">
-      <div class="p-4 bg-[#FFF3ED] dark:bg-blue-gray-800">
-        <div class="relative mt-1">
-          <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /></svg>
-          </div>
-          <input id="table-search" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for items">
-        </div>
-      </div>
-      <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 capitalize">
-          <tr>
-            <th class="p-2 text-center">
-              👁 {{ t('cart.preview') }}
-            </th>
-            <th class="p-2">
-              🏷 {{ t('cart.name') }}
-            </th>
-            <th class="p-2">
-              ⏳ {{ t('cart.variations') }}
-            </th>
-            <th class="p-2">
-              📈 {{ t('cart.price') }}
-            </th>
-            <th class="p-2">
-              ✒ {{ t('cart.quantity') }}
-            </th>
-            <th class="p-2">
-              💰 {{ t('cart.subtotal') }}
-            </th>
-            <th class="p-2 text-center">
-              🛒 {{ t('cart.action') }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <CCartItem v-for="(item, index) in cart.result" :key="index" :item="item" @remove-item="handleDelete" />
-        </tbody>
-      </table>
-    </div>
-
-    <div class="checkout-bot flex flex-col p-5">
-      <div class="wrapper flex justify-between relative">
-        <div class="h-min w-[40%]">
-          <div class="subtotal w-full">
-            <ul>
-              <li class="totalRow">
-                <span />
-              </li>
-              <li class="totalRow">
-                <span />
-              </li>
-              <li class="totalRow">
-                <span />
-              </li>
-              <li class="totalRow final">
-                <span class="label">{{ t('cart.total') }}</span><span class="value">${{ floorNumber(cart.result.reduce((accum,item) => accum + item.total_price, 0)) }}</span>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <button class="checkout absolute bottom-10 left-10 bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 rounded-3xl text-white py-2 shadow-md shadow-gray-300 px-5 flex justify-end items-center gap-1" @click="handleOrder">
-          <ISave />{{ t('cart.checkout') }}
-        </button>
-        <div class="card-wrap">
-          <div class="card">
-            <svg
-              version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-              viewBox="0 0 216.3 234.1" enable-background="new 0 0 216.3 234.1" xml:space="preserve"
-            >
-              <g id="shadow">
-                <g>
-                  <path
-                    fill="#5A488F" d="M178.1,211.7c14.8-2.1,23.9-5.1,23.9-8.3c0-6.6-37.8-11.9-84.4-11.9c-46.6,0-84.4,5.3-84.4,11.9
-    c0,5.1,23,9.5,55.3,11.2c-10.5,2.1-16.7,4.7-16.7,7.6c0,6.6,32.4,11.9,72.3,11.9c39.9,0,72.3-5.3,72.3-11.9
-    C216.3,217.7,200.8,213.7,178.1,211.7z"
-                  />
-                </g>
-              </g>
-              <g id="back_hand">
-                <g>
-                  <path
-                    fill="#FFFFFF" d="M43.4,127.7c-2.6-4.5-3.7-9-1.9-17.2c0.4-1.6-1-3.1-2.6-2.8c-6.9,1.2-6.2,14.1-6.2,14.1H4.8
-                c-2,0-3.6,1.6-3.6,3.6v0.1c0,2,1.6,3.6,3.6,3.6h10.2v20.5c0,0.5,0.4,1,1,1H18h4.5h8.8c7.5,0,14-5.6,14.7-13.1
-                C46.4,133.8,45.3,130.4,43.4,127.7z"
-                  />
-                  <g>
-                    <path fill="#DAEDF7" d="M32.7,125.9h-3.4c-2.3,0-4-1.9-3.8-4.2v0h7.2L32.7,125.9z" />
-                  </g>
-                  <g>
-                    <path
-                      fill="#665AA7" d="M18,130.2H4.8c-2.6,0-4.8-2.1-4.8-4.8c0-2.7,2.1-4.8,4.8-4.8h27.9c0.6,0,1.1,0.5,1.1,1.1
-                    s-0.5,1.1-1.1,1.1H4.8c-1.4,0-2.5,1.1-2.5,2.5c0,1.4,1.1,2.6,2.5,2.6H18c0.6,0,1.1,0.5,1.1,1.1S18.6,130.2,18,130.2z"
-                    />
-                  </g>
-                  <g>
-                    <path
-                      fill="#DAEDF7" d="M29.3,130.9c8.3-0.6,11.2,16.6,2,19.1c-3.3,0.6-2.8-0.8-2.8-0.8l0.6-2.6c0,0-2.7-2.4,0-7.4
-                    C27.9,136.2,29.3,133.6,29.3,130.9z"
-                    />
-                  </g>
-                  <g>
-                    <path
-                      fill="#665AA7" d="M31.7,151.6H18c-0.6,0-1.1-0.5-1.1-1.1s0.5-1.1,1.1-1.1h13.7c7.3,0,13.3-5.9,13.3-13.3
-                    c0-2.8-0.9-5.5-2.5-7.7c0,0,0-0.1-0.1-0.1c-2.6-4.4-4-9.2-2-18.1c0.1-0.4,0-0.8-0.3-1.1c-0.3-0.3-0.7-0.4-1-0.4
-                    c-3.6,0.6-5.5,7-5.3,17.1c0,0.6-0.5,1.1-1.1,1.2c-0.6,0-1.1-0.5-1.2-1.1c-0.3-11.7,2.3-18.6,7.2-19.4c1.1-0.2,2.2,0.2,3,1
-                    c0.8,0.8,1.1,2,0.9,3.2c-1.8,8.1-0.7,12.3,1.7,16.4c1.9,2.7,2.9,5.8,2.9,9C47.2,144.7,40.3,151.6,31.7,151.6z"
-                    />
-                  </g>
-                  <g>
-                    <path
-                      fill="#665AA7" d="M26.1,137.3h-8.5c-2.4,0-4.3-1.9-4.3-4.3v-0.8c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3v0.8
-                    C30.4,135.4,28.5,137.3,26.1,137.3z M17.6,130.2c-1.1,0-2.1,0.9-2.1,2.1v0.8c0,1.1,0.9,2.1,2.1,2.1h8.5c1.1,0,2.1-0.9,2.1-2.1
-                    v-0.8c0-1.1-0.9-2.1-2.1-2.1H17.6z"
-                    />
-                  </g>
-                  <g>
-                    <path
-                      fill="#665AA7" d="M26.1,144.5h-8.5c-2.4,0-4.3-1.9-4.3-4.3v-0.8c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3v0.8
-                    C30.4,142.5,28.5,144.5,26.1,144.5z M17.6,137.3c-1.1,0-2.1,0.9-2.1,2.1v0.8c0,1.1,0.9,2.1,2.1,2.1h8.5c1.1,0,2.1-0.9,2.1-2.1
-                    v-0.8c0-1.1-0.9-2.1-2.1-2.1H17.6z"
-                    />
-                  </g>
-                  <g>
-                    <path
-                      fill="#665AA7" d="M26.1,151.6h-8.5c-2.4,0-4.3-1.9-4.3-4.3v-0.8c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3v0.8
-                    C30.4,149.7,28.5,151.6,26.1,151.6z M17.6,144.5c-1.1,0-2.1,0.9-2.1,2.1v0.8c0,1.1,0.9,2.1,2.1,2.1h8.5c1.1,0,2.1-0.9,2.1-2.1
-                    v-0.8c0-1.1-0.9-2.1-2.1-2.1H17.6z"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g id="card">
-                <g>
-                  <path
-                    fill="#E02E92" d="M178.4,203.4H56.8c-4.8,0-8.6-3.9-8.6-8.6V8.6c0-4.8,3.9-8.6,8.6-8.6h121.5c4.8,0,8.6,3.9,8.6,8.6v186.2
-                C187,199.6,183.1,203.4,178.4,203.4z"
-                  />
-                </g>
-                <g>
-                  <rect x="144" fill="#363284" width="27.9" height="203.4" />
-                </g>
-              </g>
-              <g id="front_hand">
-                <g>
-                  <g>
-                    <path
-                      fill="#FFFFFF" d="M132.2,131.7c-2.6-4.5-3.7-9-1.9-17.2c0.4-1.6-1-3.1-2.6-2.8c-6.9,1.1-6.2,14.1-6.2,14.1H93.6
-                    c-2,0-3.6,1.6-3.6,3.6v0.1c0,2,1.6,3.6,3.6,3.6H104l0.4,21.4h16.2c7.9,0,14.4-6.4,14.4-14.4C135,137,134,134.1,132.2,131.7z"
-                    />
-                  </g>
-                  <g>
-                    <path
-                      fill="#DAEDF7" d="M125,125.7c0,0-0.6-2.5,0.8-6.9c0.6-1.9-2-2.9-3.3-0.6c0,0-0.9,1.5-0.9,7.3
-                    C124.5,125.7,125,125.7,125,125.7z"
-                    />
-                  </g>
-                  <g>
-                    <path
-                      fill="#665AA7" d="M120.6,155.6h-13.7c-2.6,0-4.7-2.1-4.7-4.7c0-1.4,0.6-2.7,1.6-3.6c-1-0.9-1.6-2.1-1.6-3.5
-                    c0-1.4,0.6-2.7,1.6-3.6c-1-0.9-1.6-2.1-1.6-3.5c0-0.9,0.3-1.8,0.7-2.5h-9.3c-2.6,0-4.8-2.1-4.8-4.8c0-2.7,2.1-4.8,4.8-4.8h26.7
-                    c0-4.1,0.8-13,7.2-14.1c1.1-0.2,2.2,0.2,3,1c0.8,0.8,1.1,2,0.9,3.2c-1.8,8.1-0.7,12.3,1.7,16.4c1.9,2.7,2.9,5.8,2.9,9
-                    C136.1,148.7,129.1,155.6,120.6,155.6z M108,147.3c0,0.6-0.5,1.1-1.1,1.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.4,1.1,2.5,2.4,2.5h13.7
-                    c7.3,0,13.3-5.9,13.3-13.3c0-2.8-0.9-5.5-2.5-7.7c0,0,0-0.1-0.1-0.1c-2.6-4.4-4-9.2-2-18.1c0.1-0.4,0-0.8-0.3-1.1
-                    c-0.3-0.3-0.7-0.4-1-0.4c-4.9,0.8-5.3,9.6-5.3,11.9h1.6c0.6,0,1.1,0.5,1.1,1.1s-0.5,1.1-1.1,1.1H93.6c-1.4,0-2.5,1.1-2.5,2.5
-                    c0,1.4,1.1,2.6,2.5,2.6h13.2c0.6,0,1.1,0.5,1.1,1.1s-0.5,1.1-1.1,1.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.2,0.8,2.2,2,2.4
-                    c0.5,0.1,0.9,0.6,0.9,1.1l0,0.1c0,0.5-0.4,1-0.9,1.1c-1.1,0.2-2,1.2-2,2.4c0,1.4,1.1,2.5,2.4,2.5
-                    C107.5,146.2,108,146.7,108,147.3z"
-                    />
-                  </g>
-                  <g>
-                    <path fill="#FFFFFF" d="M88.3,136" />
-                  </g>
-                </g>
-              </g>
-              <g id="coins">
-                <g>
-                  <g>
-                    <g>
-                      <g>
-                        <path
-                          fill="#ED912F" d="M206.4,216c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
-                            v-4.8h81.4V216z"
-                        />
-                      </g>
-                      <g>
-                        <ellipse fill="#F9C441" cx="165.8" cy="211.2" rx="40.7" ry="3.9" />
-                      </g>
-                    </g>
-                    <g>
-                      <g>
-                        <path
-                          fill="#ED912F" d="M206.4,207.8c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
-                            V203h81.4V207.8z"
-                        />
-                      </g>
-                      <g>
-                        <ellipse fill="#F9C441" cx="165.8" cy="203" rx="40.7" ry="3.9" />
-                      </g>
-                    </g>
-                    <g>
-                      <g>
-                        <path
-                          fill="#ED912F" d="M213.7,200.5c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
-                            v-4.8h81.4V200.5z"
-                        />
-                      </g>
-                      <g>
-                        <ellipse fill="#F9C441" cx="173" cy="195.7" rx="40.7" ry="3.9" />
-                      </g>
-                    </g>
-                    <g>
-                      <g>
-                        <path
-                          fill="#ED912F" d="M196.4,192.8c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
-                            V188h81.4V192.8z"
-                        />
-                      </g>
-                      <g>
-                        <ellipse fill="#F9C441" cx="155.7" cy="188" rx="40.7" ry="3.9" />
-                      </g>
-                    </g>
-                    <g>
-                      <defs>
-                        <path
-                          id="SVGID_1_" d="M195.9,192.5V188c0-2.1-18.3-3.9-40.8-3.9s-40.8,1.7-40.8,3.9v4.8c0,1.5,1.3,2.7,2.8,3
-                            c2.9,0.6,7.9,1.4,15.1,2v2.7c0,0.1,0.1,0.2,0.1,0.3c-4.6,0.6-7.2,1.4-7.2,2.2v4.8c0,1,0.5,1.9,1.3,2.5c-0.8,0.3-1.3,0.6-1.3,1
-                            v4.8c0,1.5,0.9,2.7,2.3,3c5.6,1.1,20.3,3.2,38.1,3.2c17.9,0,32.3-2,38-3.2c1.4-0.3,2.2-1.6,2.2-3v-4.8c0-0.3-0.4-0.7-1.3-1
-                            c0.8-0.6,1.3-1.5,1.3-2.5v-3.5c2.6-0.3,3.5-0.6,4.7-0.8c1.4-0.3,2.4-1.6,2.4-3v-4.8C212.7,194.4,205.6,193.2,195.9,192.5z"
-                        />
-                      </defs>
-                      <clipPath id="SVGID_2_">
-                        <use xlink:href="#SVGID_1_" overflow="visible" />
-                      </clipPath>
-                    </g>
-                  </g>
-                </g>
-                <g>
-                  <defs>
-                    <path
-                      id="SVGID_3_" d="M196.4,192.5V188c0-2.1-18.2-3.9-40.7-3.9c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-5.6,0-11,0.1-15.8,0.3
-                    c3.5-3.5,6.1-6.3,7.6-8.1c0.9-1.1,1-2.8,0.1-3.9l-3-3.8c-1.3-1.7-16.7,8.3-34.3,22.3c-17.6,14-30.8,26.7-29.5,28.3l3,3.8
-                    c0.9,1.2,2.5,1.5,3.8,0.8c5.1-2.6,17.9-10.2,31.9-21.3c2.3-1.9,4.6-3.7,6.7-5.5c2,0.2,4.2,0.5,6.6,0.7v2.7c0,0.1,0.1,0.2,0.1,0.3
-                    c-4.6,0.6-7.2,1.4-7.2,2.2v4.8c0,1,0.5,1.9,1.3,2.5c-0.8,0.3-1.3,0.6-1.3,1v4.8c0,1.5,0.9,2.7,2.3,3c5.6,1.1,20.3,3.2,38.1,3.2
-                    c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c17.9,0,32.6-2,38.2-3.2c1.4-0.3,2.5-1.6,2.5-3v-4.8c0-0.3-0.4-0.7-1.3-1
-                    c0.8-0.6,1.3-1.5,1.3-2.5v-3.5c1.9-0.3,3.6-0.6,4.7-0.8c1.4-0.3,2.5-1.6,2.5-3v-4.8C213.7,194.4,206.8,193.2,196.4,192.5z"
-                    />
-                  </defs>
-                  <clipPath id="SVGID_4_">
-                    <use xlink:href="#SVGID_3_" overflow="visible" />
-                  </clipPath>
-                  <polygon
-                    opacity="0.24" clip-path="url(#SVGID_4_)" fill="#ED1C24" points="146.8,176.4 150.7,184.1 173.6,191.5 173.4,198.3
-                179.8,199.6 179.8,206.6 179.7,221.8 137.1,236.3 97.8,224.2 		"
-                  />
-                </g>
-                <g>
-                  <g>
-                    <path
-                      fill="#ED912F" d="M146.9,172.5c0.9,1.2,0.9,2.8-0.1,3.9c-3.7,4.4-14,15.1-28,26.2c-14,11.1-26.8,18.7-31.9,21.3
-                    c-1.3,0.7-2.9,0.3-3.8-0.8l-3-3.8l63.7-50.6L146.9,172.5z"
-                    />
-                  </g>
-                  <g>
-
-                    <ellipse transform="matrix(0.7832 -0.6217 0.6217 0.7832 -96.3369 111.7049)" fill="#F9C441" cx="112" cy="194" rx="40.7" ry="3.9" />
-                  </g>
-                </g>
-              </g>
-              <g id="mouth">
-                <g>
-                  <path
-                    fill="#363284" d="M106.3,86.3c-1,0-1.9-0.1-2.9-0.4c-0.6-0.2-0.9-0.8-0.8-1.4c0.2-0.6,0.8-0.9,1.4-0.8
-                c2.2,0.6,4.4,0.3,6.4-0.7c2-1.1,3.4-2.9,4-5.1c0.2-0.6,0.8-0.9,1.4-0.8c0.6,0.2,0.9,0.8,0.8,1.4C115.2,83.2,110.9,86.3,106.3,86.3
-                z"
-                  />
-                </g>
-              </g>
-              <g id="right_eye_wink">
-                <g display="inline">
-                  <path
-                    fill="#363284" d="M116.4,40.9c-0.4,0-0.7-0.2-0.9-0.5c-0.3-0.5-0.2-1.2,0.3-1.6c2.6-1.7,9.5-5.2,17.8-0.4
-                c0.5,0.3,0.7,1,0.4,1.5c-0.3,0.5-1,0.7-1.5,0.4c-6.9-4-12.6-1.5-15.4,0.4C116.8,40.9,116.6,40.9,116.4,40.9z"
-                  />
-                </g>
-                <g display="inline">
-                  <path
-                    fill="#363284" d="M130.7,55.9c-0.2,0-0.5-0.1-0.7-0.2c-4.1-3.1-11.8-2.8-11.9-2.8c-0.5,0-0.9-0.3-1.1-0.8
-                c-0.2-0.5,0-1,0.4-1.3c0.3-0.2,8.1-5.8,14.3-3.1c0.6,0.3,0.8,0.9,0.6,1.5c-0.3,0.6-0.9,0.8-1.5,0.6c-2.8-1.3-6.3-0.2-8.8,1
-                c2.9,0.3,6.7,1.1,9.4,3.1c0.5,0.4,0.6,1.1,0.2,1.6C131.4,55.8,131.1,55.9,130.7,55.9z"
-                  />
-                </g>
-              </g>
-              <g id="right_eye">
-                <g>
-                  <path
-                    fill="#363284" d="M133.5,53.6c-0.6-0.3-1.2-0.6-1.8-0.9c0.1-0.5,0.2-0.9,0.2-1.4c0-4-3.2-7.3-7.3-7.3c-4,0-7.3,3.2-7.3,7.3
-                c0,0.6,0.1,1.2,0.2,1.7c-0.8,0.4-1.4,0.8-1.9,1.1c-0.5,0.3-0.7,1-0.3,1.6c0.2,0.3,0.6,0.5,0.9,0.5c0.2,0,0.4-0.1,0.6-0.2
-                c2.8-1.9,8.5-4.4,15.4-0.4c0.5,0.3,1.2,0.1,1.5-0.4C134.2,54.6,134,54,133.5,53.6z"
-                  />
-                  <g>
-                    <path fill="#FFFFFF" d="M123,45.8c0.2,0.2,0.3,0.5,0.1,0.7s-0.4,0.2-0.6,0c-0.2-0.2-0.4-0.4-0.2-0.6S122.8,45.6,123,45.8z" />
-                  </g>
-                  <g>
-                    <path
-                      fill="#FFFFFF" d="M122.2,47.5c0,0.6-0.5,0.4-1.1,0.4c-0.6,0-1.1,0.2-1.1-0.4c0-0.6,0.5-1.1,1.1-1.1
-                    C121.7,46.5,122.2,46.9,122.2,47.5z"
-                    />
-                  </g>
-                  <g>
-                    <path
-                      fill="#363284" d="M116.4,39.2c-0.4,0-0.7-0.2-0.9-0.5c-0.3-0.5-0.2-1.2,0.3-1.6c2.6-1.7,9.5-5.2,17.8-0.4
-                    c0.5,0.3,0.7,1,0.4,1.5c-0.3,0.5-1,0.7-1.5,0.4c-6.9-4-12.6-1.5-15.4,0.4C116.8,39.2,116.6,39.2,116.4,39.2z"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g id="left_eye">
-                <g>
-                  <path
-                    fill="#363284" d="M85.5,53.6c-0.6-0.3-1.2-0.6-1.8-0.9c0.1-0.5,0.2-0.9,0.2-1.4c0-4-3.2-7.3-7.3-7.3c-4,0-7.3,3.2-7.3,7.3
-                c0,0.6,0.1,1.2,0.2,1.7c-0.8,0.4-1.4,0.8-1.9,1.1c-0.5,0.3-0.7,1-0.3,1.6c0.2,0.3,0.6,0.5,0.9,0.5c0.2,0,0.4-0.1,0.6-0.2
-                c2.8-1.9,8.5-4.4,15.4-0.4c0.5,0.3,1.2,0.1,1.5-0.4C86.2,54.6,86,54,85.5,53.6z"
-                  />
-                  <g>
-                    <path fill="#FFFFFF" d="M75,45.8c0.2,0.2,0.3,0.5,0.1,0.7s-0.4,0.2-0.6,0c-0.2-0.2-0.4-0.4-0.2-0.6S74.8,45.6,75,45.8z" />
-                  </g>
-                  <g>
-                    <path
-                      fill="#FFFFFF" d="M74.2,47.5c0,0.6-0.5,0.4-1.1,0.4c-0.6,0-1.1,0.2-1.1-0.4c0-0.6,0.5-1.1,1.1-1.1
-                    C73.7,46.5,74.2,46.9,74.2,47.5z"
-                    />
-                  </g>
-                  <g>
-                    <path
-                      fill="#363284" d="M68.4,39.2c-0.4,0-0.7-0.2-0.9-0.5c-0.3-0.5-0.2-1.2,0.3-1.6c2.6-1.7,9.5-5.2,17.8-0.4
-                    c0.5,0.3,0.7,1,0.4,1.5c-0.3,0.5-1,0.7-1.5,0.4c-6.9-4-12.6-1.5-15.4,0.4C68.8,39.2,68.6,39.2,68.4,39.2z"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g id="sunglasses">
-                <g>
-                  <g>
-                    <path
-                      fill="#F9C441" d="M35.7,30v1.8c0,0.9,0.9,1.3,1.8,1.3h4.2v6.2c0,15.4,12.4,27.9,27.8,27.9l-0.1,0c12.6,0,23.2-8,26.6-19.6
-                    c0.7-2.5,2.7-4.5,5.2-5.1c3.7-0.8,7.2,1.5,8.2,4.9c3.3,11.3,13.2,19.2,25.2,19.8c16.2,0.7,29.1-12.7,29.1-28.9v-5.2h4.1
-                    c0.9,0,1.9-0.4,1.9-1.3V30c0-0.9-1-1.9-1.9-1.9H37.5C36.6,28.1,35.7,29.1,35.7,30z"
-                    />
-                  </g>
-                  <g>
-                    <defs>
-                      <path
-                        id="SVGID_5_" d="M67.9,60.1c-11.7,0-22.2-8.9-22.2-20.8v-6.2h111v5.7c0,12.4-9.5,22.9-21.6,22.9l-0.1,0
-                        c-9.9-0.2-17.8-6.4-20.6-15.8c-1.5-5.3-6.3-9.1-11.8-9.1c-5.5,0-10.3,2.8-11.9,8.2c-2.8,9.5-11.4,15-21.4,15H67.9z"
-                      />
-                    </defs>
-                    <clipPath id="SVGID_6_">
-                      <use xlink:href="#SVGID_5_" overflow="visible" />
-                    </clipPath>
-                    <g clip-path="url(#SVGID_6_)">
-                      <path fill="#FFFFFF" d="M157.3,23.1h-9.2l-26.3,57h9.2L157.3,23.1z M145,23.1h-2.7l-26.3,57h2.7L145,23.1z" />
-                    </g>
-                    <g clip-path="url(#SVGID_6_)">
-                      <path fill="#FFFFFF" d="M88.4,23.1h-9.2l-26.3,57h9.2L88.4,23.1z M76.1,23.1h-2.7l-26.3,57h2.7L76.1,23.1z" />
-                    </g>
-                  </g>
-                </g>
-              </g>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button{
-  -webkit-appearance: none;
-  margin: 0;
-}
-.wrapper {
-  margin: auto;
-  width: 43.75rem;
-  flex-shrink: 0;
-  background: white;
-  overflow: hidden;
-  height: 22.75rem;
-  border-radius: 1rem;
-  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
-}
-.subtotal .totalRow {
-  padding: 0.25em 0.5rem;
-  text-align: right;
-}
-.subtotal .totalRow.final {
-  font-size: 1.25em;
-  font-weight: bold;
-  text-align: right;
-}
-.subtotal .totalRow span {
-  display: inline-block;
-  text-align: right;
-}
-.subtotal .totalRow .label {
-  font-size: 0.85em;
-  text-transform: uppercase;
-  color: #777;
-}
-.subtotal .totalRow .value {
-  letter-spacing: -0.025em;
-  width: 35%;
-}
-
-.card-wrap {
-  width: 260px;
-  float: right;
-  background: #665aa7;
-  padding: 50px;
-  transform: scale(1.5) rotate(20deg);
-}
-.card {
-  transform: scale(0.75) rotate(-20deg);
-}
-#sunglasses {
-  transition: transform 0.15s;
-}
-.checkout:hover ~ .card-wrap #sunglasses {
-  transform: translateY(-40px);
-}
-#right_eye_wink {
-  display: none;
-}
-.checkout:active ~ .card-wrap #right_eye {
-  display: none;
-}
-.checkout:active ~ .card-wrap #right_eye_wink {
-  display: block;
-}
-
-#mouth {
-  transition: transform 0.15s;
-}
-.checkout:hover ~ .card-wrap #mouth {
-  transform: translateY(-10px);
-}
-
-#front_hand, #back_hand {
-  transition: transform 0.03s;
-}
-.checkout:active ~ .card-wrap #front_hand, .checkout:active ~ .card-wrap #back_hand {
-  transform: translateX(10px);
-}
-.card > svg {
-  width: 150%;
-  position: relative;
-  right: 130px;
-  top: 0;
-  overflow: visible;
-}
-.card > svg:not(:root) {
-  overflow: visible;
-}
-</style>
diff --git a/src/pages/buyer/order/[order].vue b/src/pages/buyer/order/[order].vue
new file mode 100644
index 0000000..e3a7f21
--- /dev/null
+++ b/src/pages/buyer/order/[order].vue
@@ -0,0 +1,230 @@
+<route lang="yaml">
+meta:
+  layout: buyer/LBOrder
+</route>
+
+<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'
+import OrderRequest from '~/services/order-request'
+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}`,
+})
+
+const statusPercent = (status_id: number) => {
+  switch (status_id) {
+    case 1:
+      return 10
+    case 2:
+      return 29
+    case 3:
+      return 51
+    case 4:
+      return 75
+    case 5:
+      return 99
+    default:
+      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
+  orderImg.value = getResources(orderData.product.images[0])
+})
+watchEffect(() => {
+  order.setNewOrder(order.savedOrder)
+})
+// ------------------- VISIST PRODUCT DETAIL --------------
+const onVisitProduct = (prod_id: number, shop_id: number) => {
+  product.productRequestID = prod_id
+  product.shopRequestID = shop_id
+  router.push(`/product/${encodeURIComponent(prod_id)}`)
+}
+
+</script>
+
+<template>
+  <div class="order_detail_view flex p-10 bg-[#CFDBEA] dark:bg-gray-900">
+    <div class="container bg-white dark:bg-gray-800 rounded-2xl shadow-md shadow-gray-300 dark:shadow-gray-600 w-300 max-w-300 grid grid-cols-5 m-auto p-10 h-max">
+      <div class="col-span-2">
+        <div class="text-2xl text-red-400 font-medium text-center">
+          <h1>Order check detail</h1>
+        </div>
+        <div class="hero-img-container flex justify-center items-center relative py-5">
+          <div class="triangle1" />
+          <div class="arc inline-block border-1 border-solid border-[#000] rounded-full border-t-transparent border-r-transparent border-b-transparent opacity-40 absolute min-w-50 min-h-50 left-0 top-7" style="transform: rotate(-15deg);" />
+          <div class="pattern" />
+          <img src="https://drive.google.com/uc?id=15iXUI6DkRr5Zcp0yH5uF2U47ycr-WzUY" class="hero-img w-2/3">
+        </div>
+      </div>
+
+      <div class="col-span-3 grid">
+        <div class="order-status-container flex justify-between items-start relative text-sm font-medium">
+          <div class="status-item first before:(content-\00a0 h-1 bg-[#5858EF] absolute top-3 left-0 rounded-lg)" :class="`before:w-[${statusPercent(payget.status_id)}%]`" :style="[statusPercent(payget.status_id)>= 10 ? {'opacity':'1'} : {'opacity': '0.6'}]">
+            <div class="status-circle" />
+            <p>Processing</p>
+          </div>
+          <div class="status-item second before:(content-\00a0 h-1 w-full top-3 left-0 opacity-20 absolute bg-[#5858EF] rounded-lg)" :style="[statusPercent(payget.status_id)>= 29 ? {'opacity':'1'} : {'opacity': '0.7'}]">
+            <div class="status-circle" />
+            <p>Ready</p>
+          </div>
+          <div class="status-item" :style="[statusPercent(payget.status_id)>= 51 ? {'opacity':'1'} : {'opacity': '0.6'}]">
+            <div class="status-circle" />
+            <p>Shipping</p>
+          </div>
+          <div class="status-item" :style="[statusPercent(payget.status_id)>= 75 ? {'opacity':'1'} : {'opacity': '0.6'}]">
+            <div class="status-circle" />
+            <p>Delivered</p>
+          </div>
+          <div class="status-item" :style="[statusPercent(payget.status_id)>= 99 ? {'opacity':'1'} : {'opacity': '0.6'}]">
+            <div class="status-circle" />
+            <p>Cancelled</p>
+          </div>
+        </div>
+
+        <div class="mt-10">
+          <div class="flex justify-between gap-2">
+            <div class="grid">
+              <div class="flex justify-between">
+                <div>
+                  <p class="text-green-500 text-sm">
+                    {{ t('account.order-date') }}: {{ handleDate(payget.created_at) }}
+                  </p>
+                  <p class="text-gray-400 text-xs">
+                    Order ID: {{ payget.id }}
+                  </p>
+                  <p class="text-gray-400 text-xs">
+                    Product ID: {{ payget.product_id }}
+                  </p>
+                </div>
+                <div class="text-right">
+                  <p class="text-red-500 font-medium">
+                    {{ t('account.order-total') }}: ${{ payget.total }}
+                  </p>
+                  <p class="text-xs">
+                    Quantity: {{ payget.quantity }}
+                  </p>
+                  <p class="text-xs">
+                    {{ order.orderVariation.name }}: {{ order.orderVariation.options }}
+                  </p>
+                </div>
+              </div>
+              <div class="font-medium text-base">
+                <h5>{{ payget.name }}</h5>
+              </div>
+            </div>
+            <div>
+              <img :src="orderImg" alt="product_order_img" class="max-w-45 max-h-45 rounded-xl cursor-pointer border-1" @click="onVisitProduct(payget.product_id, payget.shop_id)">
+            </div>
+          </div>
+          <div class="flex justify-between">
+            <div>
+              <p class="text-xs text-red-300">
+                Address
+              </p>
+              <div class="text-sm text-gray-500">
+                <p>
+                  Name: {{ order.orderAddress.full_name }}
+                </p>
+                <p>Phone: {{ order.orderAddress.phone }}</p>
+                <p>Address: {{ order.orderAddress.address }}, {{ order.orderAddress.town }}, {{ order.orderAddress.city }}, {{ order.orderAddress.state }}</p>
+              </div>
+            </div>
+            <div class="flex justify-center items-end">
+              <button type="button" class="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:(ring-2 ring-purple-300) dark:focus:ring-purple-800 font-medium rounded-lg text-sm px-5 py-2 text-center mr-2 flex items-center gap-1" @click="onVisitProduct(payget.product_id, payget.shop_id)">
+                <IBOrderArrowRight /> See product
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
+.order_detail_view {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.hero-img-container::before {
+    height: 1.5rem;
+    width: 1.5rem;
+    background-color: #0268EE;
+    position: absolute;
+    top: 5%;
+    right: 35%;
+    content: '';
+    border-radius: 50%;
+}
+
+.pattern {
+  width: 50px;
+  height: 50px;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8Y2lyY2xlIGN4PSc0JyBjeT0nNCcgcj0nNCcgZmlsbD0nYmxhY2snLz4KPC9zdmc+");
+  opacity: 0.1;
+  position: absolute;
+  right: 2rem;
+  top: 2rem;
+}
+
+.triangle1 {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 10px 20px 10px;
+  border-color: transparent transparent #767EEF transparent;
+  position: absolute;
+  top: 3.8rem;
+  left: 0.7rem;
+  transform: rotate(36deg);
+}
+.status-item {
+  display:flex;
+  flex-direction:column;
+  justify-content: flex-start;
+  align-items: end;
+  height: fit-content;
+}
+
+.status-circle {
+  height: 1.5rem;
+  width: 1.5rem;
+  background-color: #665CF5;
+  border-radius: 50%;
+  border: 5px solid white;
+  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  z-index: 2;
+  transition: all 0.2s;
+  cursor: pointer;
+  margin-bottom: 0.5rem;
+}
+
+.status-circle:hover {
+  transform: scale(1.2);
+  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+}
+
+</style>
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/services/order-request.js b/src/services/order-request.js
index ddd7b5c..9a20eec 100644
--- a/src/services/order-request.js
+++ b/src/services/order-request.js
@@ -12,7 +12,7 @@ class OrderRequest {
   }
 
   getOrdersById(id) {
-    const url = `/user/orders${id}`
+    const url = `/user/orders/${id}`
     return AxiosInstance.get(url)
   }
 
diff --git a/src/stores/order.ts b/src/stores/order.ts
index 1ff9f4a..5d8e164 100644
--- a/src/stores/order.ts
+++ b/src/stores/order.ts
@@ -1,7 +1,23 @@
-import { defineStore } from 'pinia'
+import { acceptHMRUpdate, defineStore } from 'pinia'
 import { ref } from 'vue'
 
 export const useOrder = defineStore('order', () => {
   const payget = ref<any>([])
-  return { payget }
+
+  const savedOrder = ref('')
+  const previousOrder = ref(new Set<string>())
+
+  const usedOrder = computed(() => Array.from(previousOrder.value))
+  function setNewOrder(order_id: string) {
+    if (savedOrder.value)
+      previousOrder.value.add(savedOrder.value)
+
+    savedOrder.value = order_id
+  }
+
+  const orderVariation = ref([])
+  const orderAddress = ref('')
+  return { payget, savedOrder, previousOrder, usedOrder, setNewOrder, orderVariation, orderAddress }
 })
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useOrder, import.meta.hot))
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/src/utils/date.ts b/src/utils/date.ts
index d2f948c..f026000 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -1,4 +1,4 @@
 export const handleDate = (date: string) => {
   const result = new Date(date)
-  return `${result.getUTCDate()}/${result.getUTCMonth()}/${result.getUTCFullYear()}`
+  return `${result.getDate()}/${result.getMonth() + 1}/${result.getFullYear()}`
 }
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(),
   ],