diff --git a/app/components/datatable/ContextMenu.vue b/app/components/datatable/ContextMenu.vue
index 9a7f49a..b2b4d9c 100644
--- a/app/components/datatable/ContextMenu.vue
+++ b/app/components/datatable/ContextMenu.vue
@@ -234,14 +234,11 @@
         class="tooltiptext"
         style="top: 110%; bottom: unset; min-width: max-content; right: 0"
       >
-        <span class="is-block">Lưu thiết lập: </span>
-        <span class="tag fs-12 has-text-inherit is-family-monospace has-background-blue-85">{{
-          pagedata.setting.name
-        }}</span>
+        Lưu thiết lập
       </p>
     </div>
   </div>
-  <div class="tabs is-centered">
+  <div class="tabs">
     <ul>
       <li
         v-for="(v, i) in getMenu().filter((x) =>
@@ -255,7 +252,7 @@
         :class="selectTab.code === v.code ? 'is-active' : 'has-text-primary'"
         @click="changeTab(v)"
       >
-        <a class="px-16 py-1.5 fs-14">{{ v.name }}</a>
+        <a class="py-1.5 fs-14">{{ v.name }}</a>
       </li>
     </ul>
   </div>
@@ -477,8 +474,8 @@ const radioType = store.datatype.find((v) => v.code === currentField.format);
 // var textsize = undefined;
 // var radioSize = colorchoice.find((v) => v.code === "none");
 var minwidth = undefined;
-// var radioWidth = colorchoice.find((v) => v.code === "none");
-// var radioMaxWidth = colorchoice.find((v) => v.code === "none");
+var radioWidth = colorchoice.find((v) => v.code === "none");
+var radioMaxWidth = colorchoice.find((v) => v.code === "none");
 var maxwidth = undefined;
 // var selectAlign = undefined;
 // var radioAlign = colorchoice.find((v) => v.code === "none");
@@ -622,7 +619,7 @@ const showSidebar = function () {
   showmodal.value = {
     component: "datatable/FormatOption",
     width: "850px",
-    height: "500px",
+    height: "600px",
     title,
     vbind: {
       event,
diff --git a/app/components/datatable/DataTable.vue b/app/components/datatable/DataTable.vue
index deffbef..a0de555 100644
--- a/app/components/datatable/DataTable.vue
+++ b/app/components/datatable/DataTable.vue
@@ -273,10 +273,13 @@ const showField = async function (field) {
       width,
     },
     component: "datatable/ContextMenu",
-    title: field.name,
+    title: `
+      <span>${field.name}</span>
+      <span class="tag font-normal fs-12 is-primary is-light">${pagedata.setting.name}</span>
+    `,
     width: "650px",
     height: "500px",
-  }; //$stripHtml(field.label)
+  };
 };
 const getStyle = function (field, record) {
   let stop = false;
diff --git a/app/components/imports/Barcode.vue b/app/components/imports/Barcode.vue
new file mode 100644
index 0000000..b1b719e
--- /dev/null
+++ b/app/components/imports/Barcode.vue
@@ -0,0 +1,25 @@
+<script setup>
+import JsBarcode from "jsbarcode";
+
+const props = defineProps({
+  imei: {
+    type: String,
+    required: true,
+  },
+});
+
+const barcodeSvg = useTemplateRef("barcode");
+onMounted(() => {
+  if (barcodeSvg.value)
+    JsBarcode(barcodeSvg.value, props.imei, {
+      background: "transparent",
+      width: 1,
+      height: 15,
+      displayValue: false,
+    });
+});
+</script>
+
+<template>
+  <svg ref="barcode"></svg>
+</template>
diff --git a/app/components/snackbar/Error.vue b/app/components/snackbar/Error.vue
index efd38c3..119ff8f 100644
--- a/app/components/snackbar/Error.vue
+++ b/app/components/snackbar/Error.vue
@@ -9,7 +9,7 @@
     </span>
     <p
       v-html="content"
-      class="control is-expanded fs-14"
+      class="control is-expanded fs-14 has-text-danger-85"
     ></p>
   </div>
 </template>
diff --git a/app/components/snackbar/SnackBar.vue b/app/components/snackbar/SnackBar.vue
index dd5d19b..d31cd49 100644
--- a/app/components/snackbar/SnackBar.vue
+++ b/app/components/snackbar/SnackBar.vue
@@ -14,7 +14,7 @@ setTimeout(() => store.commit("snackbar", undefined), 2500);
 
 <template>
   <div
-    class="snackbar is-flex is-justify-content-space-between is-align-items-center is-gap-3 pl-3 pr-1.5 py-2 rounded-md has-text-white"
+    class="snackbar is-flex is-justify-content-space-between is-align-items-center is-gap-1 pl-3 pr-1.5 py-2 rounded-md"
   >
     <Info
       v-if="component === 'Info'"
diff --git a/app/components/snackbar/Success.vue b/app/components/snackbar/Success.vue
index 536d6bd..52f315f 100644
--- a/app/components/snackbar/Success.vue
+++ b/app/components/snackbar/Success.vue
@@ -9,7 +9,7 @@
     </span>
     <p
       v-html="content"
-      class="control is-expanded fs-14"
+      class="control is-expanded fs-14 has-text-success-80"
     ></p>
   </div>
 </template>
diff --git a/app/plugins/04-components.js b/app/plugins/04-components.js
index ddb520a..ce6ba29 100644
--- a/app/plugins/04-components.js
+++ b/app/plugins/04-components.js
@@ -43,6 +43,7 @@ import IMEIButton from "~/components/imports/IMEIButton.vue";
 import DeleteProductVariant from "~/components/imports/DeleteProductVariant.vue";
 import ProductImage from "~/components/imports/ProductImage.vue";
 import Returns from "~/components/imports/Returns.vue";
+import Barcode from "~/components/imports/Barcode.vue";
 import Exports from "~/components/exports/Exports.vue";
 import ExportsDamaged from "~/components/exports/ExportsDamaged.vue";
 import ExportsInternal from "~/components/exports/ExportsInternal.vue";
@@ -92,6 +93,7 @@ const components = {
   DeleteProduct,
   Color,
   IMEIButton,
+  Barcode,
   DeleteProductVariant,
   ProductImage,
   Returns,