diff --git a/public/img/product/new.svg b/public/img/product/new.svg
new file mode 100644
index 0000000..040357b
--- /dev/null
+++ b/public/img/product/new.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1.5em" height="1.5em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024"><path fill="#60a5fa" d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" /><path fill="#60a5fa" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372z" /></svg>
\ No newline at end of file
diff --git a/src/components.d.ts b/src/components.d.ts
index 3916d99..094e95b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -10,7 +10,6 @@ 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']
@@ -118,11 +117,13 @@ declare module 'vue' {
     IRupee: typeof import('./components/icons/header/IRupee.vue')['default']
     ISave: typeof import('./components/icons/ISave.vue')['default']
     ISearch: typeof import('./components/icons/ISearch.vue')['default']
+    ISEdit: typeof import('./components/icons/seller/ISEdit.vue')['default']
     ISell: typeof import('./components/icons/ISell.vue')['default']
     ISetting: typeof import('./components/icons/ISetting.vue')['default']
     IShakeHand: typeof import('./components/icons/about/IShakeHand.vue')['default']
     IShop: typeof import('./components/icons/IShop.vue')['default']
     IShopee: typeof import('./components/icons/IShopee.vue')['default']
+    ISNew: typeof import('./components/icons/seller/ISNew.vue')['default']
     IStar: typeof import('./components/icons/IStar.vue')['default']
     IStars: typeof import('./components/icons/IStars.vue')['default']
     IStatus: typeof import('./components/icons/IStatus.vue')['default']
diff --git a/src/components/icons/seller/ISEdit.vue b/src/components/icons/seller/ISEdit.vue
new file mode 100644
index 0000000..beeb294
--- /dev/null
+++ b/src/components/icons/seller/ISEdit.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1.2em" height="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.333 16.048L16.57 3.81a2.56 2.56 0 0 1 3.62 3.619L7.951 19.667a2 2 0 0 1-1.022.547L3 21l.786-3.93a2 2 0 0 1 .547-1.022Z" /><path d="m14.5 6.5l3 3" /></g></svg>
+</template>
diff --git a/src/components/icons/seller/ISNew.vue b/src/components/icons/seller/ISNew.vue
new file mode 100644
index 0000000..9698597
--- /dev/null
+++ b/src/components/icons/seller/ISNew.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 1024 1024"><path fill="currentColor" d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" /><path fill="currentColor" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372z" /></svg>
+</template>
diff --git a/src/components/seller/SLMenu.vue b/src/components/seller/SLMenu.vue
index b7d22c3..7c80d01 100644
--- a/src/components/seller/SLMenu.vue
+++ b/src/components/seller/SLMenu.vue
@@ -49,7 +49,7 @@ const onClick = (index) => {
         </div>
       </div>
       <div v-if="isOrder === true" class="grid pl-10">
-        <router-link to="/seller/orders/all" href="seller/orders/all" :style="isClick.zero ? {'color': 'red'} : {'color': 'black'}" @click="onClick('zero')">
+        <router-link to="/seller/orders/all" :style="isClick.zero ? {'color': 'red'} : {'color': 'black'}" @click="onClick('zero')">
           <span class="text-xl">•</span> All order
         </router-link>
         <router-link to="/seller/orders/all" :style="isClick.one ? {'color': 'red'} : {'color': 'black'}" @click="onClick('one')">
@@ -65,10 +65,10 @@ const onClick = (index) => {
         </div>
       </div>
       <div v-if="isProd === true" class="grid pl-10">
-        <router-link to="/seller/prods/all" :style="isClick.two ? {'color': 'red'} : {'color': 'black'}" @click="onClick('two')">
+        <router-link to="/seller/product/all" :style="isClick.two ? {'color': 'red'} : {'color': 'black'}" @click="onClick('two')">
           <span class="text-xl">•</span> All products
         </router-link>
-        <router-link to="/seller/prods/add" :style="isClick.three ? {'color': 'red'} : {'color': 'black'}" @click="onClick('three')">
+        <router-link to="/seller/product/category" :style="isClick.three ? {'color': 'red'} : {'color': 'black'}" @click="onClick('three')">
           <span class="text-xl">•</span> Add products
         </router-link>
       </div>
diff --git a/src/layouts/seller/prod/LSProdAdd.vue b/src/layouts/seller/product/LSProdAdd.vue
similarity index 100%
rename from src/layouts/seller/prod/LSProdAdd.vue
rename to src/layouts/seller/product/LSProdAdd.vue
diff --git a/src/layouts/seller/prod/LSProdAll.vue b/src/layouts/seller/product/LSProdAll.vue
similarity index 100%
rename from src/layouts/seller/prod/LSProdAll.vue
rename to src/layouts/seller/product/LSProdAll.vue
diff --git a/src/layouts/seller/product/LSProdNew.vue b/src/layouts/seller/product/LSProdNew.vue
new file mode 100644
index 0000000..6b55c17
--- /dev/null
+++ b/src/layouts/seller/product/LSProdNew.vue
@@ -0,0 +1,8 @@
+<template>
+  <main class="text-gray-700 dark:text-gray-200 overflow-x-hidden h-screen w-screen bg-[#F6F6F6]">
+    <SHead />
+    <div class="w-full flex justify-center py-2 bg-[#F6F6F6]">
+      <router-view />
+    </div>
+  </main>
+</template>
diff --git a/src/pages/seller/prods/all.vue b/src/pages/seller/product/all.vue
similarity index 99%
rename from src/pages/seller/prods/all.vue
rename to src/pages/seller/product/all.vue
index 830b15c..7839e6a 100644
--- a/src/pages/seller/prods/all.vue
+++ b/src/pages/seller/product/all.vue
@@ -1,6 +1,6 @@
 <route lang="yaml">
 meta:
-  layout: seller/prod/LSProdAll
+  layout: seller/product/LSProdAll
 </route>
 
 <script setup>
diff --git a/src/pages/seller/prods/add.vue b/src/pages/seller/product/category.vue
similarity index 94%
rename from src/pages/seller/prods/add.vue
rename to src/pages/seller/product/category.vue
index 4135738..ce16058 100644
--- a/src/pages/seller/prods/add.vue
+++ b/src/pages/seller/product/category.vue
@@ -1,6 +1,6 @@
 <route lang="yaml">
 meta:
-  layout: seller/prod/LSProdAdd
+  layout: seller/product/LSProdAdd
 </route>
 
 <script setup>
@@ -109,9 +109,11 @@ const productsList = reactive([
           Thiết Bị Điện Gia Dụng > Thiết bị điện gia dụng lớn > Thiết bị làm mát
         </p>
       </div>
-      <button class="bg-[#E54A2B] text-white rounded-md px-10 py-1.5 my-5 shadow-md shadow-gray-300">
-        Next
-      </button>
+      <router-link to="/seller/product/new">
+        <button class="bg-[#E54A2B] text-white rounded-md px-10 py-1.5 my-5 shadow-md shadow-gray-300">
+          Next
+        </button>
+      </router-link>
     </div>
   </div>
 </template>
diff --git a/src/pages/seller/product/new.vue b/src/pages/seller/product/new.vue
new file mode 100644
index 0000000..3a1071d
--- /dev/null
+++ b/src/pages/seller/product/new.vue
@@ -0,0 +1,477 @@
+<route lang="yaml">
+meta:
+  layout: seller/product/LSProdNew
+</route>
+
+<script setup>
+import { removeItemByIndex } from '~/utils/arrayHandle'
+import countries from '~/shared/countries'
+
+useHead({
+  title: 'seller | new product',
+})
+
+const goBack = () => {
+  history.back()
+}
+
+const categoryList1 = ref([1, 2])
+const categoryList2 = ref([1, 2])
+const discountList = ref([1])
+
+</script>
+
+<template>
+  <div class="seller_new_prod_view max-w-254 w-254">
+    <div class="basic_infor p-7 my-5 bg-white shadow-md shadow-gray-300 rounded-xl">
+      <div>
+        <h5 class="font-medium text-lg">
+          Basic information
+        </h5>
+      </div>
+      <div class="basic_fields flex w-full">
+        <div>
+          <label>Product image</label>
+        </div>
+        <div class="flex gap-3">
+          <div>
+            <div class="cover_img border-1 border-dashed border-blue-400 rounded-md max-w-19 h-19 flex justify-center items-center hover:bg-blue-50  cursor-pointer" style="background-image:url('/img/product/new.svg');background-repeat:no-repeat; background-position:center">
+              <input type="file" name="cover_img" accept="image/png, image/jpeg, image/jpg" class="opacity-0">
+            </div>
+            <p class="text-xs">
+              * Cover image
+            </p>
+          </div>
+          <div v-for="i in 6" :key="i">
+            <div class="cover_img border-1 border-dashed border-blue-400 rounded-md max-w-19 h-19 flex justify-center items-center hover:bg-blue-50  cursor-pointer" style="background-image:url('/img/product/new.svg');background-repeat:no-repeat; background-position:center">
+              <input type="file" :name="`product_img${i}`" accept="image/png, image/jpeg, image/jpg" class="opacity-0">
+            </div>
+            <p class="flex justify-center gap-1 text-xs">
+              image {{ i }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="basic_fields flex w-full">
+        <div>
+          <label>Product video</label>
+        </div>
+        <div class="flex gap-5">
+          <div>
+            <div class="cover_img border-1 border-dashed border-blue-400 rounded-md max-w-19 h-19 flex justify-center items-center hover:bg-blue-50  cursor-pointer" style="background-image:url('/img/product/new.svg');background-repeat:no-repeat; background-position:center">
+              <input type="file" name="cover_img" accept="video/mp4, video/mkv" class="opacity-0">
+            </div>
+            <p class="text-xs">
+              * Cover video
+            </p>
+          </div>
+          <div class="text-xs text-gray-400">
+            <p>1. Maximum sizing: 30Mb, resolution not larger than 1280x1280px</p>
+            <p>2. Length: 10s-60s</p>
+            <p>3. Format: MP4 (not support vp9)</p>
+            <p>4. Note: product can be displayed while processing. They are auto display when succesfull.</p>
+          </div>
+        </div>
+      </div>
+      <div class="basic_fields flex w-full">
+        <div>
+          <label>* Product name</label>
+        </div>
+        <div>
+          <input type="text">
+        </div>
+      </div>
+      <div class="basic_fields flex w-full">
+        <div>
+          <label>* Product descriptions</label>
+        </div>
+        <div>
+          <textarea id="" name="prod_desc" rows="10" />
+        </div>
+      </div>
+      <div class="basic_fields flex w-full">
+        <div>
+          <label>* Category</label>
+        </div>
+        <div class="flex items-center gap-2 text-xs text-gray-500 font-medium">
+          <p class="cursor-pointer">
+            Sắc đẹp > Chăm sóc nam giới > Chăm sóc tóc
+          </p>
+          <router-link to="/seller/product/category">
+            <ISEdit />
+          </router-link>
+        </div>
+      </div>
+    </div>
+    <div class="detail_infor p-7 my-5 bg-white shadow-md shadow-gray-300 rounded-xl">
+      <div>
+        <h5 class="font-medium text-lg">
+          Basic information
+        </h5>
+        <p class="text-xs">
+          Fill full information to grow level of the product display. <a href="" class="text-blue-600 font-medium">Guide view</a>
+        </p>
+      </div>
+      <form method="post" class="detail_fields grid grid-cols-2 gap-5 mt-5">
+        <div>
+          <label>* Brand</label>
+          <select name="brand">
+            <option value="1">
+              1
+            </option>
+          </select>
+        </div>
+        <div>
+          <label>* Sex</label>
+          <select name="sex">
+            <option value="unisex">
+              Unisex
+            </option>
+            <option value="men">
+              Men
+            </option>
+            <option value="women">
+              Women
+            </option>
+          </select>
+        </div>
+        <div>
+          <label>Origin</label>
+          <select name="origin">
+            <option v-for="(country, i) in countries" :key="i" :value="country">
+              {{ country }}
+            </option>
+          </select>
+        </div>
+        <div>
+          <label>Materials</label>
+          <select name="brand">
+            <option value="1">
+              1
+            </option>
+          </select>
+        </div>
+        <div>
+          <label>Organization name</label>
+          <select name="brand">
+            <option value="1">
+              1
+            </option>
+          </select>
+        </div>
+        <div>
+          <label>Organization address</label>
+          <select name="brand">
+            <option value="1">
+              1
+            </option>
+          </select>
+        </div>
+      </form>
+      <div />
+    </div>
+    <div class="sale_infor p-7 my-5 bg-white shadow-md shadow-gray-300 rounded-xl">
+      <div>
+        <h5 class="font-medium text-lg">
+          Sales information
+        </h5>
+      </div>
+      <form method="post">
+        <div class="grid grid-cols-2 gap-5 my-5">
+          <div>
+            <div class="text-center">
+              <label>Group catergory 1</label>
+            </div>
+            <div class="rounded-md bg-[#F6F6F6] p-3">
+              <div class="grid grid-cols-9 justify-between items-center mb-7">
+                <div class="col-span-3">
+                  <label>Name group</label>
+                </div>
+                <div class="border-1 border-[#e9e9e9] rounded-md divide-x divide-1 divide-solid divide-[#e9e9e9] flex bg-white p-1 text-sm col-span-5">
+                  <input type="text" class="border-none p-1 w-full">
+                  <p class="p-1 opacity-70">
+                    0/14
+                  </p>
+                </div>
+                <div class="col-span-1" />
+              </div>
+              <div class="grid grid-cols-9 justify-between items-start my-2">
+                <div class="col-span-3">
+                  <label>Category types</label>
+                </div>
+                <div class="col-span-6">
+                  <div v-for="i in categoryList1" :key="i" class="grid grid-cols-6">
+                    <div class="border-1 border-[#e9e9e9] rounded-md divide-x divide-1 divide-solid divide-[#e9e9e9] flex bg-white p-1 text-sm col-span-5 my-1">
+                      <input type="text" class="border-none p-1 w-full">
+                      <p class="p-1 opacity-70">
+                        0/14
+                      </p>
+                    </div>
+                    <div class="col-span-1 opacity-60 flex justify-center items-center cursor-pointer">
+                      <IARemove @click="removeItemByIndex(categoryList1, i, 1)" />
+                    </div>
+                  </div>
+
+                  <div class="grid grid-cols-6">
+                    <div class="border-1 border-[#e9e9e9] rounded-md border-2 border-dotted border-blue-500 text-blue-400 flex justify-center items-center gap-2 p-1 text-sm col-span-5 my-1 cursor-pointer" @click="categoryList1.push(categoryList1.length+1)">
+                      <ISNew />
+                      <p>Add category type</p>
+                    </div>
+                    <div class="col-span-1" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <div class="text-center">
+              <label>Group catergory 2</label>
+            </div>
+            <div class="rounded-md bg-[#F6F6F6] p-3">
+              <div class="grid grid-cols-9 justify-between items-center mb-7">
+                <div class="col-span-3">
+                  <label>Name group</label>
+                </div>
+                <div class="border-1 border-[#e9e9e9] rounded-md divide-x divide-1 divide-solid divide-[#e9e9e9] flex bg-white p-1 text-sm col-span-5">
+                  <input type="text" class="border-none p-1 w-full">
+                  <p class="p-1 opacity-70">
+                    0/14
+                  </p>
+                </div>
+                <div class="col-span-1" />
+              </div>
+              <div class="grid grid-cols-9 justify-between items-start my-2">
+                <div class="col-span-3">
+                  <label>Category types</label>
+                </div>
+                <div class="col-span-6">
+                  <div v-for="i in categoryList2" :key="i" class="grid grid-cols-6">
+                    <div class="border-1 border-[#e9e9e9] rounded-md divide-x divide-1 divide-solid divide-[#e9e9e9] flex bg-white p-1 text-sm col-span-5 my-1">
+                      <input type="text" class="border-none p-1 w-full">
+                      <p class="p-1 opacity-70">
+                        0/14
+                      </p>
+                    </div>
+                    <div class="col-span-1 opacity-60 flex justify-center items-center cursor-pointer">
+                      <IARemove @click="removeItemByIndex(categoryList2, i, 1)" />
+                    </div>
+                  </div>
+
+                  <div class="grid grid-cols-6">
+                    <div class="border-1 border-[#e9e9e9] rounded-md border-2 border-dotted border-blue-500 text-blue-400 flex justify-center items-center gap-2 p-1 text-sm col-span-5 my-1 cursor-pointer" @click="categoryList2.push(categoryList2.length+1)">
+                      <ISNew />
+                      <p>Add category type</p>
+                    </div>
+                    <div class="col-span-1" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="sale_tips flex justify-between text-sm my-5">
+          <label>Tips for setting up item categories</label>
+          <div class="border-1 border-[#e9e9e9] rounded-md divide-x divide-1 divide-solid divide-[#e9e9e9] flex items-center bg-white">
+            <p class="px-2 opacity-70">
+              $
+            </p>
+            <input type="number" placeholder="price" class="px-1">
+            <input type="number" placeholder="warehouse" class="px-1">
+            <input type="text" placeholder="SKU type" class="px-1">
+          </div>
+          <button class="rounded-md bg-[#EE4D2D] hover:bg-[#E54A2B] px-3 py-1 text-white border-1 border-[#e9e9e9]">
+            Appy for all type
+          </button>
+        </div>
+        <div class="sale_discounts flex justify-between my-5 text-sm">
+          <div class="w-1/5">
+            <label>Buy more for discount</label>
+          </div>
+          <div class="rounded-md bg-[#F6F6F6] p-3 w-4/5 text-gray-500">
+            <div class="flex justify-between items-center">
+              <div class="grid grid-cols-4 w-full">
+                <div />
+                <div>
+                  <p>From (product)</p>
+                </div>
+                <div>
+                  <p>To (product)</p>
+                </div>
+                <div>
+                  <p>Price</p>
+                </div>
+                <div />
+              </div>
+              <div class="opacity-0">
+                <IARemove />
+              </div>
+            </div>
+            <div v-for="i in discountList" :key="i" class="flex justify-between items-center my-2">
+              <div class="grid grid-cols-4 w-full">
+                <div class="text-center">
+                  <p>{{ i }}. Price range {{ i }}</p>
+                </div>
+                <div>
+                  <input type="number" :name="`from${i}`">
+                </div>
+                <div>
+                  <input type="number" :name="`to${i}`">
+                </div>
+                <div>
+                  <input type="number" :name="`price${i}`">
+                </div>
+                <div />
+              </div>
+              <div class="opacity-70 cursor-pointer">
+                <IARemove @click="removeItemByIndex(discountList, i, 1)" />
+              </div>
+            </div>
+            <div class="grid justify-end my-2 px-[4%]">
+              <div class="border-1 border-[#e9e9e9] rounded-md border-2 border-dotted border-blue-500 text-blue-400 flex justify-center items-center gap-2 p-1 text-sm col-span-5 my-1 cursor-pointer" @click="discountList.push(discountList.length+1)">
+                <ISNew />
+                <p>Add price range</p>
+              </div>
+              <div class="text-xs">
+                <p>Buy multiple discounts will be hidden when the product is participating in Shock Deal or Promotion Combo</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="sale_size_chart flex my-5 text-sm">
+          <label>Size Chart image</label>
+          <div class="cover_img border-1 border-dashed border-blue-400 rounded-md max-w-19 h-19 flex justify-center items-center hover:bg-blue-50  cursor-pointer" style="background-image:url('/img/product/new.svg');background-repeat:no-repeat; background-position:center">
+            <input type="file" name="cover_img" accept="image/png, image/jpeg, image/jpg" class="opacity-0">
+          </div>
+        </div>
+      </form>
+    </div>
+    <div class="transport_infor p-7 my-5 bg-white shadow-md shadow-gray-300 rounded-xl">
+      <div>
+        <h5 class="font-medium text-lg">
+          Transport
+        </h5>
+      </div>
+      <form method="post">
+        <div class="transport_fields">
+          <label>Weight (After packing)</label>
+          <div class="flex divide-x divide-solid divide-1 divide-[#e9e9e9]">
+            <input type="text" name="weight">
+            <p>gr</p>
+          </div>
+        </div>
+        <div class="transport_fields">
+          <label>Packing size (variable)</label>
+          <div class="flex divide-x divide-solid divide-1 divide-[#e9e9e9]">
+            <input type="text" name="width" placeholder="W">
+            <p>cm</p>
+          </div>
+          <div class="flex divide-x divide-solid divide-1 divide-[#e9e9e9]">
+            <input type="text" name="long" placeholder="L">
+            <p>cm</p>
+          </div>
+          <div class="flex divide-x divide-solid divide-1 divide-[#e9e9e9]">
+            <input type="text" name="height" placeholder="H">
+            <p>cm</p>
+          </div>
+        </div>
+        <div class="transport_fields">
+          <label>Fee</label>
+          <button class="px-5 py-2 rounded-md hover:bg-[#FFF5F1] border-1 border-solid border-[#EE4D2D] text-[#EE4D2D] text-sm">
+            Activate the transport unit
+          </button>
+        </div>
+      </form>
+    </div>
+    <div class="flex justify-end text-md gap-5">
+      <button class="inline rounded-md bg-white hover:bg-[#F6F6F6] px-3 py-1.5 text-gray-600 border-1 border-[#e9e9e9] flex items-center gap-1" @click="goBack">
+        <IARemove />Cancel
+      </button>
+      <button class="inline rounded-md bg-[#EE4D2D] hover:bg-[#E54A2B] px-3 py-1.25 text-white border-1 border-[#e9e9e9] flex items-center gap-1">
+        <ISave />Save & Display
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+label{
+  font-size: 0.9em;
+  font-weight: 500;
+  color: gray;
+}
+select, option{
+  padding: 0.3rem;
+}
+/* ********************* BASIC ************************ */
+.basic_fields{
+  margin-top: 1rem;
+}
+.basic_fields > div:nth-child(1){
+  width: 20%;
+  text-align: right;
+  padding-right: 1rem;
+  font-size: .8em;
+}
+.basic_fields > div:nth-child(2){
+  width: 80%;
+}
+.basic_fields textarea, .basic_fields input{
+  border: 1px solid #e9e9e9;
+  width: 100%;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  font-size: 0.8em;
+  font-weight: 500;
+}
+/* **************** PRODUCT DETAILS ****************** */
+.detail_fields > div {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: end;
+}
+.detail_fields label{
+  margin-right: 1rem;
+}
+.detail_fields select{
+  width: 50%;
+  min-width: 50%;
+  border: 1px solid #e9e9e9;
+  border-radius: 0.3rem;
+  height: min-content;
+}
+/*  ************* TRANSPORT **************************** */
+.transport_fields{
+  display: flex;
+  text-align: right;
+  align-items: ceter;
+  margin-top: 1rem;
+}
+.transport_fields > div{
+  display: flex;
+  border: 1px solid #e9e9e9;
+  padding: 0.2rem;
+  border-radius: 0.3rem;
+  margin-right: 1rem;
+}
+.transport_fields > div:hover, textarea:hover, select:hover, .sale_discounts input:hover{
+  border: 1px solid #cccccc;
+}
+
+.transport_fields input,
+.transport_fields p,
+.sale_discounts input{
+  padding: 0.25rem;
+}
+.transport_fields > label,
+.sale_infor label{
+  width: 20%;
+  padding-right: 1rem;
+}
+/* ******************* SALE ************************ */
+.sale_discounts input{
+  border: 1px solid #e9e9e9;
+  border-radius: 0.3rem;
+}
+</style>
diff --git a/src/shared/brands.ts b/src/shared/brands.ts
new file mode 100644
index 0000000..e5b576c
--- /dev/null
+++ b/src/shared/brands.ts
@@ -0,0 +1,530 @@
+const brands = {
+  1: 'NoBrand',
+  2: 'AAA JEANS',
+  3: 'ADORE DRESS',
+  4: 'ADRIENNE VITTADINI',
+  5: 'AFTERBEFORE',
+  6: 'AFTF BASIC',
+  7: 'AIRism',
+  8: 'AJIMAL',
+  9: 'AKUBA',
+  10: 'ALAMODEvn',
+  11: 'ALCADO',
+  12: 'ALICE TÔ',
+  13: 'AMADO',
+  14: 'AMELIA',
+  15: 'ANH THO LEATHER',
+  16: 'ANLY',
+  17: 'ANN CHERY',
+  18: 'ANN SARA',
+  19: 'ANNA NINA',
+  20: 'ANNACOCO',
+  21: 'ANNACOCO',
+  22: 'ANNY',
+  23: 'ANY BOUTIQUE',
+  24: 'APROMS',
+  25: 'ARIZONA JEANS',
+  26: 'ATSUGI',
+  27: 'AZAGO',
+  28: 'AZUMI',
+  29: 'Adrianna Papell',
+  30: 'Aimy Boutique',
+  31: 'Aino Sofia',
+  32: 'Alayna',
+  33: 'Alice',
+  34: 'Ameo',
+  35: 'Amilian',
+  36: 'Anadi Home',
+  37: 'Angelavic',
+  38: 'Angelic Pretty',
+  39: 'Anna',
+  40: 'Asala',
+  41: 'Azuno',
+  42: 'adenflu',
+  43: 'aerie',
+  44: 'ailian',
+  45: 'aimilian',
+  46: 'CACHE',
+  47: 'CALLIOPE',
+  48: 'DANCO',
+  49: 'HA GATTINI',
+  50: 'ECOJEANS',
+  51: 'DANY',
+  52: 'FANTOM',
+  53: 'GALASSIN',
+  54: 'FASHION NOVA',
+  55: 'FASVIN',
+  56: 'KAIA',
+  57: 'GBeauty',
+  58: 'GCAROL',
+  59: 'IFU',
+  60: 'CATRIO',
+  61: 'CATSA',
+  62: 'BARDOT',
+  63: 'IKIGAI',
+  64: 'DEGREY',
+  65: 'DELAMO',
+  66: 'DELEAH',
+  67: 'JANET STUDIO',
+  68: 'GEMINI',
+  69: 'KAMA',
+  70: 'GENNI',
+  71: 'KAMAYA',
+  72: 'DEMEYO',
+  73: 'GENZ',
+  74: 'JARNO',
+  75: 'KAMITO',
+  76: 'JASPAL',
+  77: 'BDG',
+  78: 'INFASHION',
+  79: 'HANAMA',
+  80: 'ELISA LITZ',
+  81: 'ELISE',
+  82: 'ELLY',
+  83: 'JERZEES',
+  84: 'KAREN MILEN',
+  85: 'CHARLOTTE FASHION',
+  86: 'KAREN SCOTT',
+  87: 'EMPOLHAM',
+  88: 'EMWEAR',
+  89: 'BEMINE',
+  90: 'FMSTYLE',
+  91: 'CHELLE',
+  92: 'CHENNY',
+  93: 'CHERRYKOKO',
+  94: 'ENINA',
+  95: 'HAPPY ZOO',
+  96: 'ITEM DU JOUR',
+  97: 'ENVY',
+  98: 'ENVY LUXURY',
+  99: 'FORCAST',
+  100: 'GLORIA JEANS',
+  101: 'DIDO',
+  102: 'FORMAT',
+  103: 'IVANKA TRUMP',
+  104: 'IVY moda',
+  105: 'DII',
+  106: 'FORTUNE MOUSE',
+  107: 'HASA',
+  108: 'ERKE',
+  109: 'EROSIA',
+  110: 'JK CLOTHING',
+  111: 'DIRTY COINS',
+  112: 'GOKING',
+  113: 'GOLD RHINO',
+  114: 'BETTERISTA',
+  115: 'BEUTER',
+  116: 'DIVIDED',
+  117: 'KELLYBUI',
+  118: 'FRENCH CONNECTION',
+  119: 'CIRIO',
+  120: 'FRJ Jeans',
+  121: 'JONES',
+  122: 'CIZA',
+  123: 'JONES NEW YORK',
+  124: 'EVA DE EVA',
+  125: 'FUGAZI',
+  126: 'DODACO',
+  127: 'HEATTECH',
+  128: 'KENVA',
+  129: 'CLEMENT',
+  130: 'DOKMA',
+  131: 'GOTI',
+  132: 'CLOTHESRACK',
+  133: 'CLOWNZ',
+  134: 'EVERLANE',
+  135: 'FUSIONISM',
+  136: 'COCO FASHION',
+  137: 'KHATOCO',
+  138: 'iBasic',
+  139: 'KHÂU BY CQ',
+  140: 'EXR PERFORMANCE',
+  141: 'COCO SIN',
+  142: 'iDiva',
+  143: 'JUNO',
+  144: 'GRIMM DC',
+  145: 'DOUX',
+  146: 'JUST FEEL FREE',
+  147: 'COLORFUL SEXY',
+  148: 'JUSTMEN',
+  149: 'HERMES PARIS',
+  150: 'iMERRY',
+  151: 'DRESSIE',
+  152: 'GUGEE',
+  153: 'ice yarns',
+  154: 'GUNZE',
+  155: 'Eden',
+  156: 'Edifice',
+  157: 'CPS CHAPS',
+  158: 'DUPPO',
+  159: 'KIOBI',
+  160: 'BLUE EXCHANGE',
+  161: 'CREME',
+  162: 'DUY LỢI',
+  163: 'HK FASHION',
+  164: 'HK STORE',
+  165: 'intercrew',
+  166: 'Feetures',
+  167: 'HNOSS',
+  168: 'Felice',
+  169: 'HOA THAI',
+  170: 'HOAI VU DESIGN',
+  171: 'Garage',
+  172: 'HOLLIS',
+  173: 'Jeanswest',
+  174: 'KOCHI',
+  175: 'Fig tree',
+  176: 'BONADO',
+  177: 'Daisy',
+  178: 'Filanto',
+  179: 'Elimaz',
+  180: 'HONEY DESIGN',
+  181: 'Gavani',
+  182: 'BONNY',
+  183: 'Eliza J',
+  184: 'Gazzal',
+  185: 'Firetrap',
+  186: 'Jennyfer',
+  187: 'Calie',
+  188: 'Call it Spring',
+  189: 'Callia',
+  190: 'KOOKAI',
+  191: 'Flaseek',
+  192: 'Ellise',
+  193: 'Genviet',
+  194: 'HPVINA',
+  195: 'Elpis',
+  196: 'Fleur Studio',
+  197: 'HTECH',
+  198: 'Georges Rech',
+  199: 'EmSpo',
+  200: 'Ember Spirit',
+  201: 'HUIDUO',
+  202: 'HUMBGO',
+  203: 'Emigo',
+  204: 'Germe',
+  205: 'BRENNA',
+  206: 'HUONG BOUTIQUE',
+  207: 'Gestuz',
+  208: 'Emma Barnes',
+  209: 'Jobelli',
+  210: 'KT Fashion',
+  211: 'KTA Fashion',
+  212: 'Emum',
+  213: 'GiGi',
+  214: 'Gia Huy',
+  215: 'BULBAL',
+  216: 'Forever New',
+  217: 'BWIN',
+  218: 'KWIN',
+  219: 'Halo BEAUTY',
+  220: 'BZR',
+  221: 'Enito',
+  222: 'Francesca Mara',
+  223: 'Hana Fashion',
+  224: 'Ginkgo',
+  225: 'Kalenji',
+  226: 'David’s Bridal',
+  227: 'KanCan',
+  228: 'Freedy',
+  229: 'Happy Socks',
+  230: 'DeRuiLaDy',
+  231: 'Glacier Rock',
+  232: 'Haras',
+  233: 'Gladys',
+  234: 'Erosska',
+  235: 'Jouri',
+  236: 'Estini',
+  237: 'Etam',
+  238: 'Karoll',
+  239: 'Baqiya',
+  240: 'Kartopu',
+  241: 'Ceci Cela',
+  242: 'Bare Lifts',
+  243: 'Kate By Linh Nguyen',
+  244: 'Eunsoo',
+  245: 'Demona',
+  246: 'Golden Lady',
+  247: 'Golden Legs',
+  248: 'HeraDG',
+  249: 'Eva Lover',
+  250: 'Batino',
+  251: 'Funani',
+  252: 'Everich fashion',
+  253: 'Everluxe',
+  254: 'Evie The Label',
+  255: 'BeanPole',
+  256: 'Goosi',
+  257: 'Beautiful Spring',
+  258: 'Beauty Chipi',
+  259: 'Charmia',
+  260: 'Charmilles',
+  261: 'Goût De Jun',
+  262: 'fcuk',
+  263: 'Hity lifestyle your way',
+  264: 'Chener',
+  265: 'elegart',
+  266: 'Cherilon',
+  267: 'Chiffon Fashion',
+  268: 'entiati',
+  269: 'Chikoko',
+  270: 'Chillax',
+  271: 'Khéo Fashion',
+  272: 'eva',
+  273: 'GUMAC',
+  274: 'Dolly Boutique',
+  275: 'Chris Christy',
+  276: 'Bentoni',
+  277: 'ezra',
+  278: 'Betsey johnson',
+  279: 'gaviya',
+  280: 'Dorothy Perkins',
+  281: 'Dowisi',
+  282: 'Kiss Ring',
+  283: 'Hurley',
+  284: 'Citi Mode',
+  285: 'HÀ CÚC',
+  286: 'Kojiba',
+  287: 'Clarita',
+  288: 'Dzung Beiz',
+  289: 'Bliss',
+  290: 'Closshi',
+  291: 'Cloud’Nine',
+  292: 'Club L',
+  293: 'dELIA',
+  294: 'Coble',
+  295: 'Bold Bikini',
+  296: 'dear josé',
+  297: 'Cofason',
+  298: 'Bomia',
+  299: 'kathy ireland',
+  300: 'Coiincos',
+  301: 'Boohoo',
+  302: 'Colo Fashion',
+  303: 'Dottie Premium',
+  304: 'haru',
+  305: 'dzzit',
+  306: 'highcutstudio',
+  307: 'honey fashion',
+  308: 'ContRante',
+  309: 'Conte',
+  310: 'hot tuna',
+  311: 'Breeze',
+  312: 'hug Adore USA',
+  313: 'hunkemoller',
+  314: 'Crayzyteen',
+  315: 'Button On',
+  316: 'ByFeifein',
+  317: 'Cropp',
+  318: 'Cát Tiên Bridal',
+  319: 'cache cache',
+  320: 'can de blanc',
+  321: 'cecina',
+  322: 'charlotte russe',
+  323: 'city chic',
+  324: 'classic fashion',
+  325: 'basic house',
+  326: 'codes combine',
+  327: 'colorfulsexy',
+  328: 'BEESMART',
+  329: 'cosher',
+  330: 'bejirog',
+  331: 'blook',
+  332: 'LA LUNA',
+  333: 'MA CHÉRIE',
+  334: 'LA MURRINA',
+  335: 'MADE LEN',
+  336: 'NAMU',
+  337: 'LADALI',
+  338: 'LADOS',
+  339: 'PALTAL',
+  340: 'MAIDENFORM',
+  341: 'MAKE IT RAIN',
+  342: 'LAMER',
+  343: 'LAMIA',
+  344: 'PAVO',
+  345: 'NAVI',
+  346: 'QUICKSILVER',
+  347: 'MAMA VIRUS',
+  348: 'OLV',
+  349: 'MANDO',
+  350: 'SAII STUDIO',
+  351: 'LANE JT',
+  352: 'SALITO',
+  353: 'SALOME FASHION',
+  354: 'UBG',
+  355: 'LARA',
+  356: 'TAHARI ASL',
+  357: 'ONONO',
+  358: 'SAMY',
+  359: 'RESERVED',
+  360: 'QueenLinh',
+  361: 'OPUS',
+  362: 'MATELUCCA',
+  363: 'PINK QUEEN',
+  364: 'SANKOM',
+  365: 'TALBOTS',
+  366: 'WEFUN',
+  367: 'UNIONBAY',
+  368: 'TAM ANH',
+  369: 'ROBERTA GANDOLFI',
+  370: 'UNIQ',
+  371: 'LCW CASUAL',
+  372: 'MAX STUDIO',
+  373: 'LE CHÂTEAU',
+  374: 'YAT BOUTIQUE',
+  375: 'OUTSET',
+  376: 'WHITE ANT',
+  377: 'OVERDOSE',
+  378: 'NINOMAXX',
+  379: 'PLUMZI',
+  380: 'LECIEN',
+  381: 'ZARA TRAFALUC',
+  382: 'VERO MODA',
+  383: 'ZART',
+  384: 'YFFS',
+  385: 'MAYBI',
+  386: 'WINJEANS',
+  387: 'LEDIN',
+  388: 'ROSIE ASSOULIN',
+  389: 'POLIDO',
+  390: 'ROSY belle',
+  391: 'ZENANA',
+  392: 'URBAN REVIVO',
+  393: 'ROVA',
+  394: 'ROZALO',
+  395: 'NK Fashion',
+  396: 'YOFA',
+  397: 'Odelia',
+  398: 'MDBuddy',
+  399: 'TATICHU',
+  400: 'Xinh FASHION HOMEWEAR',
+  401: 'LEMIA',
+  402: 'MDS',
+  403: 'NOHK',
+  404: 'VIC SEXY',
+  405: 'YOUR Fashion',
+  406: 'USTHEBASIC',
+  407: 'UTAN',
+  408: 'VICERO',
+  409: 'VICKY',
+  410: 'Ugiz',
+  411: 'Xuyen Chi',
+  412: 'VIENA',
+  413: 'VIENNE TRAN',
+  414: 'YUQI',
+  415: 'YAME',
+  416: 'SEMIR',
+  417: 'VIET THANG',
+  418: 'PROSPECS',
+  419: 'Zagu',
+  420: 'Xí Cũn',
+  421: 'NT FASHION',
+  422: 'LIBÉ WORKSHOP',
+  423: 'TED BAKER',
+  424: 'PUNK RAVE',
+  425: 'TEEFIT',
+  426: 'Zavans',
+  427: 'Zawin',
+  428: 'Yami',
+  429: 'VIGOSS',
+  430: 'TEK GEAR',
+  431: 'Rainbow',
+  432: 'MENTOSA',
+  433: 'SEVENTH WAVE',
+  434: 'LIIQ rush',
+  435: 'SEXY FOREVER',
+  436: 'Wannabe',
+  437: 'LILYA',
+  438: 'Raku Raku',
+  439: 'MERONA',
+  440: 'LIME ORANGE',
+  441: 'Padu',
+  442: 'Warm',
+  443: 'Zenda',
+  444: 'SHALIMAR',
+  445: 'Zenfdy',
+  446: 'VINADOWN',
+  447: 'YarnArt',
+  448: 'MHL',
+  449: 'Unplugged Museum',
+  450: 'Zerasy',
+  451: 'MIDDUA',
+  452: 'Uptown girl',
+  453: 'Omely',
+  454: 'MIEGOFCE',
+  455: 'Rare Editions',
+  456: 'MIGIO',
+  457: 'THAI TUAN',
+  458: 'THAICOM',
+  459: 'Utan Homewear',
+  460: 'Pansy',
+  461: 'Uwowo',
+  462: 'VITAS',
+  463: 'Yi Ren',
+  464: 'MIKI',
+  465: 'Panty Stocking',
+  466: 'SHOJO',
+  467: 'Zina Luxury',
+  468: 'Papaya',
+  469: 'LOFT',
+  470: 'Yiyifang',
+  471: 'Papka',
+  472: 'SIENNA SKY',
+  473: 'MINT Basic',
+  474: 'THE SHIRTS STUDIO',
+  475: 'SIMPLE APPAREL',
+  476: 'Wephobia',
+  477: 'LOUIS CASTEL',
+  478: 'Zoé de Las Cases',
+  479: 'SIMPLY Blessed',
+  480: 'MIXSTAR',
+  481: 'THIEN PHUC',
+  482: 'LOVELL',
+  483: 'LOVELY UNIQUE',
+  484: 'SK angel',
+  485: 'LOZA',
+  486: 'MOKLADY',
+  487: 'White House Black Market',
+  488: 'MOLYS',
+  489: 'zennic',
+  490: 'MOMOCO',
+  491: 'LUCKY BRAND',
+  492: 'MONOCO',
+  493: 'THOM BROWNE',
+  494: 'Yoshino',
+  495: 'Nappa',
+  496: 'LUMIÈRE',
+  497: 'THU NGÂN',
+  498: 'Regart',
+  499: 'Valleysa',
+  500: 'Youmeiqi',
+  501: 'MOUSSY',
+  502: 'SMARTMEN',
+  503: 'Vaness Dorothy',
+  504: 'Vanilla HOUSE',
+  505: 'MQF',
+  506: 'SO YOUNG',
+  507: 'Relax',
+  508: 'SOCOMO',
+  509: 'Relish',
+  510: 'Wincent',
+  511: 'LYCHEE',
+  512: 'LYNO',
+  513: 'LYRA',
+  514: 'La Chapelle',
+  515: 'SOHEE',
+  516: 'Winmaxx',
+  517: 'Vella',
+  518: 'SOMALYNG',
+  519: 'MYAN',
+  520: 'Vento',
+  521: 'MYM',
+  522: 'MYMY by PHƯƠNG MY',
+  523: 'Vera Bradley',
+  524: 'La Senza',
+  525: 'TINACE',
+  526: 'Rettymom',
+}
+
+export default brands
diff --git a/src/shared/countries.ts b/src/shared/countries.ts
new file mode 100644
index 0000000..4f4889a
--- /dev/null
+++ b/src/shared/countries.ts
@@ -0,0 +1,201 @@
+const countries = {
+  1: 'Ả Rập Xê Út',
+  2: 'Afghanistan',
+  3: 'Ai Cập',
+  4: 'Albania',
+  5: 'Algeria',
+  6: 'Ấn Độ',
+  7: 'Andorra',
+  8: 'Angola',
+  9: 'Anh',
+  10: 'Antigua và Barbuda',
+  11: 'Áo',
+  12: 'Argentina',
+  13: 'Armenia',
+  14: 'Azerbaijan',
+  15: 'Ba Lan',
+  16: 'Bắc Macedonia',
+  17: 'Bahamas',
+  18: 'Bahrain',
+  19: 'Bangladesh',
+  20: 'Barbados',
+  21: 'Belarus',
+  22: 'Belize',
+  23: 'Bénin',
+  24: 'Bhutan',
+  25: 'Bỉ',
+  26: 'Bờ Biển Ngà',
+  27: 'Bồ Đào Nha',
+  28: 'Bolivia',
+  29: 'Bosnia và Herzegovina',
+  30: 'Botswana',
+  31: 'Brazil',
+  32: 'Brunei',
+  33: 'Bulgaria',
+  34: 'Burkina Faso',
+  35: 'Burundi',
+  36: 'Các tiểu vương quốc Ả Rập Thống nhất',
+  37: 'Cameroon',
+  38: 'Campuchia',
+  39: 'Canada',
+  40: 'Cape',
+  41: 'Verde',
+  42: 'Chad',
+  43: 'Chile',
+  44: 'Colombia',
+  45: 'Comoros',
+  46: 'Cộng hòa Congo',
+  47: 'Cộng hòa dân chủ Congo',
+  48: 'Cộng hòa Dominican',
+  49: 'Cộng hòa Séc',
+  50: 'Cộng hòa Trung Phi',
+  51: 'Costa Rica',
+  52: 'Croatia ',
+  53: 'Cuba',
+  54: 'Djibouti',
+  55: 'Dominica',
+  56: 'Đài Loan',
+  57: 'Đan Mạch',
+  58: 'Đông Timor',
+  59: 'Đức',
+  60: 'Ecuador',
+  61: 'El Salvador',
+  62: 'Eritrea',
+  63: 'Es',
+  64: 'Tonia',
+  65: 'Ethiopia Fiji',
+  66: 'Gabon',
+  67: 'Gambia',
+  68: 'Georgia',
+  69: 'Ghana',
+  70: 'Grenada',
+  71: 'Guatemala',
+  72: 'Guinea',
+  73: 'Guinea Xích đạo',
+  74: 'Guinea-Bissau',
+  75: 'Guyana',
+  76: 'Hà Lan',
+  77: 'Haiti',
+  78: 'Hàn Quốc',
+  79: 'Hoa Kỳ',
+  80: 'Honduras',
+  81: 'Hungary',
+  82: 'Hy Lạp',
+  83: 'Iceland',
+  84: 'Indonesia',
+  85: 'Iran',
+  86: 'Iraq',
+  87: 'Ireland',
+  88: 'Israel',
+  89: 'Jordan',
+  90: 'Jamaica ',
+  91: 'Kazakhstan',
+  92: 'Kenya',
+  93: 'Kiribati',
+  94: 'Kosovo',
+  95: 'Kuwait',
+  96: 'Kyrgyzstan',
+  97: 'Lào',
+  98: 'Latvia',
+  99: 'Lesotho',
+  100: 'Liban',
+  101: 'Liberia',
+  102: 'Libya',
+  103: 'Liechtenstein',
+  104: 'Liên bang Micronesia',
+  105: 'Lithuania',
+  106: 'Luxembourg',
+  107: 'Ma-rốc',
+  108: 'Madagascar',
+  109: 'Malawi',
+  110: 'Malaysia',
+  111: 'Maldives',
+  112: 'Mali',
+  113: 'Malta',
+  114: 'Mauritania',
+  115: 'Mauritius',
+  116: 'Mexico',
+  117: 'Monaco',
+  118: 'Mông Cổ',
+  119: 'Montenegro',
+  120: 'Mozambique',
+  121: 'Myanmar',
+  122: 'Na Uy',
+  123: 'Nam Phi',
+  124: 'Nam Sudan',
+  125: 'Namibia',
+  126: 'Nurua',
+  127: 'Nepal',
+  128: 'New Zealand',
+  129: 'Nga',
+  130: 'Nhật Bản',
+  131: 'Nicaragua',
+  132: 'Niger',
+  133: 'Nigeria',
+  134: 'Oman',
+  135: 'Pakistan',
+  136: 'Palau',
+  137: 'Palestine',
+  138: 'Panama',
+  139: 'Papua',
+  140: 'New Guinea',
+  141: 'Paraguay',
+  142: 'Peru',
+  143: 'Phần Lan',
+  144: 'Pháp',
+  145: 'Philippines',
+  146: 'Qatar',
+  147: 'Quần đảo Marshall ',
+  148: 'Quần đảo Solomon',
+  149: 'Romania',
+  150: 'Rwanda',
+  151: 'Saint Kitts và Nevis',
+  152: 'Saint Lucia',
+  153: 'Saint Vincent và Grenadines',
+  154: 'Samoa',
+  155: 'San Marino ',
+  156: 'São Tomé và Príncipe',
+  157: 'Senegal ',
+  158: 'Serbia',
+  159: 'Seychelles',
+  160: 'Sierra Leone',
+  161: 'Singapore',
+  162: 'Síp',
+  163: 'Slovakia',
+  164: 'Slovenia',
+  165: 'Somalia',
+  166: 'Sri Lanka',
+  167: 'Sudan',
+  168: 'Suriname',
+  169: 'Swaziland',
+  170: 'Syria',
+  171: 'Tajikistan',
+  172: 'Tanzania',
+  173: 'Tây Ban Nha',
+  174: 'Thái Lan',
+  175: 'Thành Vatican',
+  176: 'Thồ Nhĩ Kỳ',
+  177: 'Thụy Điển',
+  178: 'Thụy Sî',
+  179: 'Togo',
+  180: 'Tonga',
+  181: 'Triều Tiên ',
+  182: 'Trinidad và Tobago ',
+  183: 'Trung Quốc',
+  184: 'Tunisia',
+  185: 'Turkmenistan',
+  186: 'Tuvalu',
+  187: 'Úc',
+  188: 'Uganda',
+  189: 'Ukraine',
+  190: 'Uruguay',
+  191: 'Uzbekistan',
+  192: 'Vanuatu ',
+  193: 'Venezuela',
+  194: 'Việt Nam',
+  195: 'Ý',
+  196: 'Yemen',
+  197: 'Zambia',
+  198: 'Zimbabwe',
+}
+export default countries
diff --git a/src/shared/materials.ts b/src/shared/materials.ts
new file mode 100644
index 0000000..b2df3b5
--- /dev/null
+++ b/src/shared/materials.ts
@@ -0,0 +1,250 @@
+const materials = {
+  women_clothes: {
+    1: 'voan',
+    2: 'chinos',
+    3: 'Cotton',
+    4: 'Denim',
+    5: 'Lông vũ',
+    6: 'Nỉ',
+    7: 'Nỉ mỏng',
+    8: 'Lông cừu',
+    9: 'lông',
+    10: 'kaki',
+    11: 'Đan',
+    12: 'Ren',
+    13: 'Da',
+    14: 'Lanh',
+    15: 'Nylon',
+    16: 'Khác',
+    17: 'bông',
+    18: 'Lụa',
+    19: 'Sợi tổng hợp',
+    20: 'Sợi dệt',
+    21: 'Nhung',
+    22: 'Len',
+  },
+  men_clothes: {
+    1: 'chinos',
+    2: 'Cotton',
+    3: 'Denim',
+    4: 'Lông vũ',
+    5: 'Nỉ',
+    6: 'Nỉ mỏng',
+    7: 'Lông cừu',
+    8: 'lông',
+    9: 'kaki',
+    10: 'Đan',
+    11: 'Da',
+    12: 'Lanh',
+    13: 'Nylon',
+    14: 'Khác',
+    15: 'bông',
+    16: 'Sợi tổng hợp',
+    17: 'Sợi dệt',
+    18: 'Len',
+  },
+  hat: {
+    1: 'Canvas',
+    2: 'Dệt Kim',
+    3: 'Ren',
+    4: 'Da',
+    5: 'Khác',
+    6: 'Lụa',
+    7: 'Len',
+  },
+  fashion_accessories: {
+    1: 'Kim cương',
+    2: 'Sợi vải',
+    3: 'Đá Ngọc Bích',
+    4: 'Vàng',
+    5: 'Da',
+    6: 'Mạ kim loại',
+    7: 'Khác',
+    8: 'Ngọc trai',
+    9: 'bạch kim',
+    10: 'Bạc',
+    11: 'Thép',
+    12: 'Titanium, Bismuth & Nam châm',
+  },
+  belt: {
+    1: 'Canvas',
+    2: 'Dệt Kim',
+    3: 'Ren',
+    4: 'Da',
+    5: 'Khác',
+    6: 'Lụa',
+    7: 'Len',
+  },
+  boots: {
+    1: 'Sợi tổng hợp',
+    2: 'Da',
+    3: 'Sợi vải',
+    4: 'Da lộn',
+    5: 'Cao su',
+    6: 'Khác',
+    7: 'Len',
+    8: 'chinos',
+    9: 'Cotton',
+    10: 'Denim',
+    11: 'Nỉ',
+    12: 'Lông cừu',
+    13: 'lông',
+    14: 'Nỉ mỏng',
+    15: 'Đan',
+    16: 'Lanh',
+    17: 'Nylon',
+    18: 'voan',
+    19: 'Jersey',
+    20: 'Nỉ mỏng',
+    21: 'tơ nhân tạo',
+    22: 'Lụa',
+    23: 'Đồ lặn',
+    24: 'Vải dù',
+    25: 'Nhựa',
+    26: 'Cối',
+    27: 'Canvas',
+    28: 'Da PU',
+  },
+  shoes_and_sandals: {
+    1: 'Cotton',
+    2: 'Canvas',
+    3: 'Polyester',
+    4: 'Nylon',
+    5: 'Da',
+    6: 'Da PU',
+    7: 'PVC',
+    8: 'Nhựa',
+    9: 'Sợi tổng hợp',
+    10: 'cashmere',
+    11: 'Đan',
+    12: 'Lanh',
+    13: 'Khác',
+    14: 'Sợi dệt',
+    15: 'lông',
+    16: 'Denim',
+    17: 'Len',
+    18: 'Da lộn',
+    19: 'Cối',
+    20: 'Cao su',
+    21: 'chinos',
+    22: 'Nỉ',
+    23: 'Lông cừu',
+    24: 'Nỉ mỏng',
+    25: 'voan',
+    26: 'Jersey',
+    27: 'tơ nhân tạo',
+    28: 'Lụa',
+    29: 'Đồ lặn',
+    30: 'Vải dù',
+  },
+  suitcase_and_travel_bag: {
+    1: 'Da',
+    2: 'Khác',
+    3: 'Nhựa',
+    4: 'Sợi dệt',
+  },
+  wallets: {
+    1: 'Canvas',
+    2: 'Da',
+    3: 'Nylon',
+    4: 'Khác',
+    5: 'PVC',
+    6: 'Sợi tổng hợp',
+    7: 'Sợi dệt',
+  },
+  watch: {
+    1: 'Hợp kim',
+    2: 'Gốm sứ',
+    3: 'Khác',
+    4: 'Nhựa',
+    5: 'Thép không gỉ',
+    6: 'Titanium',
+  },
+  blanket: {
+    1: 'Tre',
+    2: 'Cotton',
+    3: 'Lông vũ',
+    4: 'Lông cừu',
+    5: 'Lyocell',
+    6: 'Microfiber',
+    7: 'Len',
+    8: 'Polyester',
+  },
+  motobike_accessory: {
+    1: 'Canvas',
+    2: 'Cotton',
+    3: 'Sợi vải',
+    4: 'Da',
+    5: 'Kim loại',
+    6: 'cao su tổng hợp',
+    7: 'Nhựa',
+    8: 'Cao su',
+    9: 'Vinyl',
+  },
+  helmet: {
+    1: 'Sợi tổng hợp',
+    2: 'Kim loại',
+    3: 'Thép',
+    4: 'Hợp kim',
+    5: 'Canvas',
+    6: 'cashmere',
+    7: 'Cotton',
+    8: 'Dệt Kim',
+    9: 'Ren',
+    10: 'Da',
+    11: 'Khác',
+    12: 'Lụa',
+    13: 'Len',
+    14: 'Lông cừu',
+    15: 'Lanh',
+    16: 'Nylon',
+    17: 'kaki',
+    18: 'chinos',
+    19: 'Nỉ mỏng',
+    20: 'Denim',
+    21: 'Nhung',
+    22: 'Lông vũ',
+    23: 'Đan',
+    24: 'voan',
+  },
+  car_accessory: {
+    1: 'Canvas',
+    2: 'Cotton',
+    3: 'Sợi vải',
+    4: 'Da',
+    5: 'Kim loại',
+    6: 'cao su tổng hợp',
+    7: 'Nhựa',
+    8: 'Cao su',
+    9: 'nan',
+    10: 'Vinyl',
+  },
+  toys_and_collectibles: {
+    1: 'PVC',
+    2: 'Khác',
+    3: 'Nhựa',
+    4: 'Nylon',
+    5: 'Canvas',
+    6: 'Cotton',
+    7: 'Polyester',
+    8: 'Giấy',
+    9: 'Sợi tổng hợp',
+    10: 'Kim loại',
+    11: 'Thép',
+    12: 'Hợp kim',
+    13: 'cashmere',
+    14: 'Dệt Kim',
+    15: 'Ren',
+    16: 'Da',
+    17: 'Lụa',
+    18: 'Len',
+    19: 'Cao su',
+    20: 'Kim cương',
+    21: 'Sợi vải',
+    22: 'Đá Ngọc Bích',
+    23: 'Ngọc trai',
+    24: 'Bạc',
+  },
+}
+
+export default materials
diff --git a/src/styles/variables.css b/src/styles/variables.css
new file mode 100644
index 0000000..f569c67
--- /dev/null
+++ b/src/styles/variables.css
@@ -0,0 +1,3 @@
+:root{
+    --light-border: 1px solid #e9e9e9;
+}
\ No newline at end of file
diff --git a/src/utils/arrayHandle.ts b/src/utils/arrayHandle.ts
new file mode 100644
index 0000000..9edff17
--- /dev/null
+++ b/src/utils/arrayHandle.ts
@@ -0,0 +1,9 @@
+const removeItemByIndex = (array: Array<any>, item: any, length: number) => {
+  const index = array.indexOf(item)
+  if (index > -1)
+    array.splice(index, length)
+
+  return array
+}
+
+export { removeItemByIndex }