diff --git a/app/components/common/QRcode.vue b/app/components/common/QRcode.vue
index 9839bfb..fcfc9da 100644
--- a/app/components/common/QRcode.vue
+++ b/app/components/common/QRcode.vue
@@ -106,9 +106,7 @@ async function download() {
 
   if (!svg) {
     console.error("QR Code SVG element not found after waiting.");
-    $snackbar(isVietnamese.value ? "Không tìm thấy mã QR để tải xuống." : "QR Code not found for download.", {
-      type: "is-danger",
-    });
+    $snackbar(isVietnamese.value ? "Không tìm thấy mã QR để tải xuống." : "QR Code not found for download.", "Error");
     return;
   }
 
@@ -135,7 +133,7 @@ async function download() {
     linkElement.click();
 
     URL.revokeObjectURL(url);
-    $snackbar(isVietnamese.value ? "Đã tải xuống mã QR!" : "QR Code downloaded!", { type: "is-success" });
+    $snackbar(isVietnamese.value ? "Đã tải xuống mã QR!" : "QR Code downloaded!", "Error");
   };
   image.src = url;
 }
diff --git a/app/components/customer/Company.vue b/app/components/customer/Company.vue
index 9212c67..9db3fbf 100644
--- a/app/components/customer/Company.vue
+++ b/app/components/customer/Company.vue
@@ -269,7 +269,7 @@ async function update() {
   record.update_time = new Date();
   let rs = record.value.id ? await $updateapi("company", record.value) : await $insertapi("company", record.value);
   if (rs === "error") return;
-  if (!record.value.id) $snackbar(`Khách hàng đã được khởi tạo với mã <b>${rs.code}</b>`, "Thành công", "Success");
+  if (!record.value.id) $snackbar(`Khách hàng đã được khởi tạo với mã <b>${rs.code}</b>`, "Success");
   record.value.id = rs.id;
   let ele = await $getdata("company", { id: rs.id }, null, true);
   emit("update", ele);
diff --git a/app/components/customer/CustomerInfo.vue b/app/components/customer/CustomerInfo.vue
index 881efed..4848138 100644
--- a/app/components/customer/CustomerInfo.vue
+++ b/app/components/customer/CustomerInfo.vue
@@ -712,7 +712,7 @@ async function update() {
     }
 
     if (rs === "error") {
-      $snackbar("Có lỗi xảy ra khi lưu dữ liệu", "Lỗi", "Error");
+      $snackbar("Có lỗi xảy ra khi lưu dữ liệu", "Error");
       return;
     }
     record.value.id = rs.id;
@@ -725,7 +725,6 @@ async function update() {
         `${
           isVietnamese.value ? "Khách hàng đã được khởi tạo với mã" : "Customer has been created with code"
         } <b>${rs.code}</b>`,
-        "Thành công",
         "Success",
       );
     } else {
@@ -733,7 +732,6 @@ async function update() {
         `${
           isVietnamese.value ? "Khách hàng đã được cập nhật với mã" : "Customer has been updated with code"
         } <b>${rs.code}</b>`,
-        "Thành công",
         "Success",
       );
     }
diff --git a/app/components/customer/CustomerView.vue b/app/components/customer/CustomerView.vue
index ed74802..5a1598c 100644
--- a/app/components/customer/CustomerView.vue
+++ b/app/components/customer/CustomerView.vue
@@ -345,7 +345,7 @@ export default {
     },
     copy(value) {
       this.$copyToClipboard(value);
-      this.$snackbar("Đã copy vào clipboard.", "Copy", "Success");
+      this.$snackbar("Đã copy vào clipboard", "Success");
     },
     openPhone() {
       this.showmodal = {
diff --git a/app/components/datatable/MenuSave.vue b/app/components/datatable/MenuSave.vue
index 5e183f4..5005590 100644
--- a/app/components/datatable/MenuSave.vue
+++ b/app/components/datatable/MenuSave.vue
@@ -177,7 +177,7 @@ async function saveSetting() {
       copy[idx] = result;
       store.commit("settings", copy);
     }
-    $snackbar("Lưu thiết lập thành công", undefined, "Success");
+    $snackbar("Lưu thiết lập thành công", "Success");
     emit("modalevent", { name: "updatesetting", data: result });
     emit("close");
   }
diff --git a/app/components/dialog/Delete.vue b/app/components/dialog/Delete.vue
index 6961b0b..d221ffe 100644
--- a/app/components/dialog/Delete.vue
+++ b/app/components/dialog/Delete.vue
@@ -48,7 +48,7 @@ export default {
         result = await this.$updateapi(name, record);
       } else result = await this.$deleteapi(name, id);
       if (result === "error") return this.$dialog("Đã xảy ra lỗi, xóa dữ liệu thất bại", "Lỗi", "Error");
-      this.$snackbar("Dữ liệu đã được xoá khỏi hệ thống", undefined, "Success");
+      this.$snackbar("Dữ liệu đã được xoá khỏi hệ thống", "Success");
       let arr = Array.isArray(id) ? id : [{ id: id }];
       let copy = this.$copy(this.$store.state[pagename].data);
       arr.map((x) => {
diff --git a/app/components/media/ImageCard.vue b/app/components/media/ImageCard.vue
index de98672..79ef8a3 100644
--- a/app/components/media/ImageCard.vue
+++ b/app/components/media/ImageCard.vue
@@ -40,10 +40,10 @@ async function saveEditImage() {
     });
 
     props.loadImages();
-    $snackbar("Đã cập nhật ảnh thành công", "Thành công", "Success");
+    $snackbar("Đã cập nhật ảnh thành công", "Success");
   } catch (error) {
     console.error("Error updating image", error);
-    $snackbar("Cập nhật ảnh thất bại", "Lỗi", "Error");
+    $snackbar("Cập nhật ảnh thất bại", "Error");
   }
 
   resetEditRefs();
diff --git a/app/components/media/ImageLayout.vue b/app/components/media/ImageLayout.vue
index 5ada7e7..6e0b21f 100644
--- a/app/components/media/ImageLayout.vue
+++ b/app/components/media/ImageLayout.vue
@@ -284,11 +284,11 @@ async function onUploaded(uploadedFiles) {
 
     if (attachedCount > 0) {
       loadImages();
-      $snackbar(`Đã thêm ${attachedCount} ảnh thành công`, "Thành công", "Success");
+      $snackbar(`Đã thêm ${attachedCount} ảnh thành công`, "Success");
     }
   } catch (error) {
     console.error("Error attaching images:", error);
-    $snackbar("Không thể thêm ảnh, vui lòng thử lại", "Lỗi", "Error");
+    $snackbar("Không thể thêm ảnh, vui lòng thử lại", "Error");
   }
 }
 
@@ -297,10 +297,10 @@ async function deleteImage(image) {
     await $deleteapi(isForProduct.value ? "productfile" : "projectfile", image.id);
     await $deleteapi("file", image.file);
     loadImages();
-    $snackbar("Đã xóa ảnh thành công", "Thành công", "Success");
+    $snackbar("Đã xóa ảnh thành công", "Success");
   } catch (error) {
     console.error("Error deleting image:", error);
-    $snackbar("Xóa ảnh không thành công", "Lỗi", "Error");
+    $snackbar("Xóa ảnh không thành công", "Error");
   }
 }
 
@@ -317,7 +317,7 @@ async function excel() {
   found.url = "exportcsv/File/";
   found.params.filter = { code__in: images.value.map((v) => v.file__code) };
   const rs = await $getapi([found]);
-  if (rs === "error") return $snackbar("Đã xảy ra lỗi. Vui lòng thử lại.");
+  if (rs === "error") return $snackbar("Đã xảy ra lỗi. Vui lòng thử lại.", "Error");
   const url = window.URL.createObjectURL(new Blob([rs[0].data]));
   const link = document.createElement("a");
   const fileName = `${$dayjs(new Date()).format("YYYYMMDDhhmmss")}-data.csv`;
diff --git a/app/components/media/Imagebox.vue b/app/components/media/Imagebox.vue
index 6ee075c..7b611e6 100644
--- a/app/components/media/Imagebox.vue
+++ b/app/components/media/Imagebox.vue
@@ -308,7 +308,7 @@ export default {
       setTimeout(() => document.getElementById("url").focus(), 100);
     },
     checkUrl() {
-      if (this.$empty(this.url)) return this.$snackbar(`Đường dẫn không hợp lệ`, undefined, "Error");
+      if (this.$empty(this.url)) return this.$snackbar("Đường dẫn không hợp lệ", "Error");
       let self = this;
       this.loading = true;
       this.$axios
diff --git a/app/components/modal/DealerProductSetting.vue b/app/components/modal/DealerProductSetting.vue
index 188eada..efa8616 100644
--- a/app/components/modal/DealerProductSetting.vue
+++ b/app/components/modal/DealerProductSetting.vue
@@ -76,11 +76,11 @@ async function confirmChange() {
     );
 
     if (result === "error" || !result) {
-      $snackbar("Cập nhật thất bại", "Lỗi", "Error");
+      $snackbar("Cập nhật thất bại", "Error");
       return;
     }
 
-    $snackbar("Cập nhật trạng thái thành công", "Thành công", "Success");
+    $snackbar("Cập nhật trạng thái thành công", "Success");
 
     // Phát sự kiện để component cha (hoặc bảng) cập nhật lại dữ liệu
     emit("modalevent", {
@@ -94,7 +94,7 @@ async function confirmChange() {
     close();
   } catch (error) {
     console.error("Lỗi đổi trạng thái:", error);
-    $snackbar("Có lỗi xảy ra", "Lỗi", "Error");
+    $snackbar("Có lỗi xảy ra", "Error");
   } finally {
     isSaving.value = false;
   }
diff --git a/app/components/parameter/ImportData.vue b/app/components/parameter/ImportData.vue
index ee8f8ce..6382509 100644
--- a/app/components/parameter/ImportData.vue
+++ b/app/components/parameter/ImportData.vue
@@ -193,7 +193,7 @@ export default {
       let thefile = this.$upload(file, "file", 1);
 
       if (thefile.error) {
-        this.$snackbar(thefile.text, undefined, "Error");
+        this.$snackbar(thefile.text, "Error");
         return (this.isloading = false);
       }
       if (!(thefile.name.search(".xls") > 0 || thefile.name.search(".xlsx") > 0)) {
diff --git a/app/components/people/PeopleInfo.vue b/app/components/people/PeopleInfo.vue
index 6790a0b..b54d3a4 100644
--- a/app/components/people/PeopleInfo.vue
+++ b/app/components/people/PeopleInfo.vue
@@ -361,7 +361,7 @@ async function update() {
     ? await $updateapi("people", record.value)
     : await $insertapi("people", record.value, undefined, false);
   if (rs === "error") return;
-  if (!record.value.id) $snackbar(`Người liên quan đã được khởi tạo với mã <b>${rs.code}</b>`, "Thành công", "Success");
+  if (!record.value.id) $snackbar(`Người liên quan đã được khởi tạo với mã <b>${rs.code}</b>`, "Success");
   record.value.id = rs.id;
   if (record.value.image ? record.value.image.length > 0 : false) {
     let arr = [];
diff --git a/app/components/people/PeopleView.vue b/app/components/people/PeopleView.vue
index d7c9997..f20f157 100644
--- a/app/components/people/PeopleView.vue
+++ b/app/components/people/PeopleView.vue
@@ -203,7 +203,7 @@ export default {
     },
     copy(value) {
       this.$copyToClipboard(value);
-      this.$snackbar("Đã copy vào clipboard.", "Copy", "Success");
+      this.$snackbar("Đã copy vào clipboard.", "Success");
     },
     openPhone() {
       this.showmodal = {
diff --git a/app/components/snackbar/Error.vue b/app/components/snackbar/Error.vue
index 9ec2706..053991b 100644
--- a/app/components/snackbar/Error.vue
+++ b/app/components/snackbar/Error.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="is-flex is-align-items-center is-gap-1">
-    <Icon
-      name="material-symbols:cancel-rounded"
-      :size="18"
-      class="has-text-danger-80"
-    />
+    <div style="width: 18px; height: 18px">
+      <Icon
+        name="material-symbols:cancel-rounded"
+        :size="18"
+        class="has-text-danger-80"
+      />
+    </div>
     <p
       v-html="content"
       class="control is-expanded"
@@ -14,12 +16,5 @@
 <script setup>
 const props = defineProps({
   content: String,
-  title: String,
 });
-
-const { $store } = useNuxtApp();
-
-function cancel() {
-  $store.commit("updateStore", { name: "showmodal", data: undefined });
-}
 </script>
diff --git a/app/components/snackbar/Info.vue b/app/components/snackbar/Info.vue
index 5e6b9ed..cc47637 100644
--- a/app/components/snackbar/Info.vue
+++ b/app/components/snackbar/Info.vue
@@ -5,10 +5,4 @@
 const props = defineProps({
   content: String,
 });
-
-const { $store } = useNuxtApp();
-
-function cancel() {
-  $store.commit("updateStore", { name: "showmodal", data: undefined });
-}
 </script>
diff --git a/app/components/snackbar/SnackBar.vue b/app/components/snackbar/SnackBar.vue
index 0c14f63..17cb1f2 100644
--- a/app/components/snackbar/SnackBar.vue
+++ b/app/components/snackbar/SnackBar.vue
@@ -1,34 +1,12 @@
-<template>
-  <div
-    class="snackbar is-flex is-align-items-center is-gap-3 pl-3 pr-1.5 py-2 rounded-md has-background-grey-25 has-text-white"
-  >
-    <component
-      :is="resolvedComponent"
-      v-bind="vbind"
-      @close="$emit('close')"
-    />
-    <button
-      @click="$emit('close')"
-      class="button is-ghost is-small"
-    >
-      <span class="icon">
-        <Icon
-          name="material-symbols:close-rounded"
-          :size="18"
-        />
-      </span>
-    </button>
-  </div>
-</template>
 <script setup>
 import { defineAsyncComponent } from "vue";
 import { useStore } from "@/stores/index";
+import Info from "@/components/snackbar/Info.vue";
+import Success from "@/components/snackbar/Success.vue";
+import Error from "@/components/snackbar/Error.vue";
 const props = defineProps({
   component: String,
-  width: String,
-  height: String,
   vbind: Object,
-  title: String,
 });
 
 const store = useStore();
@@ -58,6 +36,40 @@ watchEffect(() => {
 });
 setTimeout(() => store.commit("snackbar", undefined), 3900);
 </script>
+
+<template>
+  <div
+    class="snackbar is-flex is-align-items-center is-gap-3 pl-3 pr-1.5 py-2 rounded-md has-background-grey-25 has-text-white"
+  >
+    <Info
+      v-if="component === 'Info'"
+      v-bind="vbind"
+      @close="$emit('close')"
+    />
+    <Success
+      v-if="component === 'Success'"
+      v-bind="vbind"
+      @close="$emit('close')"
+    />
+    <Error
+      v-if="component === 'Error'"
+      v-bind="vbind"
+      @close="$emit('close')"
+    />
+    <button
+      @click="$emit('close')"
+      class="button is-ghost is-small"
+    >
+      <span class="icon">
+        <Icon
+          name="material-symbols:close-rounded"
+          :size="18"
+        />
+      </span>
+    </button>
+  </div>
+</template>
+
 <style scoped>
 .snackbar {
   position: fixed;
diff --git a/app/components/snackbar/Success.vue b/app/components/snackbar/Success.vue
index 2667da2..f18b246 100644
--- a/app/components/snackbar/Success.vue
+++ b/app/components/snackbar/Success.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="is-flex is-align-items-center is-gap-1">
-    <Icon
-      name="material-symbols:check-circle-rounded"
-      :size="18"
-      class="has-text-success-70"
-    />
+    <div style="width: 18px; height: 18px">
+      <Icon
+        name="material-symbols:check-circle-rounded"
+        :size="18"
+        class="has-text-success-70"
+      />
+    </div>
     <p
       v-html="content"
       class="control is-expanded"
@@ -14,12 +16,5 @@
 <script setup>
 const props = defineProps({
   content: String,
-  title: String,
 });
-
-const { $store } = useNuxtApp();
-
-function cancel() {
-  $store.commit("updateStore", { name: "showmodal", data: undefined });
-}
 </script>
diff --git a/app/components/user/SetPassword.vue b/app/components/user/SetPassword.vue
index 1291523..42c501c 100644
--- a/app/components/user/SetPassword.vue
+++ b/app/components/user/SetPassword.vue
@@ -110,7 +110,7 @@ export default {
       let rs1 = await this.$updateapi("user", user);
       if (rs1 !== "error") this.$emit("close");
       else {
-        this.$snackbar("Có lỗi xảy ra. Hãy thử lại một lần nữa", undefined, "Error");
+        this.$snackbar("Có lỗi xảy ra. Hãy thử lại một lần nữa", "Error");
       }
     },
     checkPassword() {
diff --git a/app/plugins/01-common.js b/app/plugins/01-common.js
index 29fb10e..5a2683c 100644
--- a/app/plugins/01-common.js
+++ b/app/plugins/01-common.js
@@ -39,25 +39,13 @@ export default defineNuxtPlugin((nuxtApp) => {
     $store.commit("showmodal", data);
   };
 
-  const snackbar = function (content, title, type, width, height) {
-    content = typeof content == "string" ? content : JSON.stringify(content);
-
-    const vtitle =
-      type === "Success"
-        ? `<span class="has-text-primary">${title}</span>`
-        : type === "Error"
-          ? `<span class="has-text-danger">${title}</span>`
-          : title;
-
-    const data = {
-      id: $id(),
-      component: type || "Info",
-      vbind: { content },
-      title: vtitle,
-      width: width || "600px",
-      height: height || "100px",
-    };
-    $store.commit("snackbar", data);
+  const snackbar = function (content, component = "Info") {
+    $store.commit("snackbar", {
+      component,
+      vbind: {
+        content: typeof content == "string" ? content : JSON.stringify(content),
+      },
+    });
   };
 
   const getLink = function (val) {
diff --git a/app/plugins/02-connection.js b/app/plugins/02-connection.js
index 4a54428..57d96ad 100644
--- a/app/plugins/02-connection.js
+++ b/app/plugins/02-connection.js
@@ -1227,8 +1227,8 @@ export default defineNuxtPlugin((nuxtApp) => {
       }
       if (notify !== false) {
         $store.lang === "en"
-          ? $snackbar("Data has been successfully saved to the system.", "Success", "Success")
-          : $snackbar("Dữ liệu đã được lưu vào hệ thống", "Thành công", "Success");
+          ? $snackbar("Data has been successfully saved to the system.", "Success")
+          : $snackbar("Dữ liệu đã được lưu vào hệ thống", "Success");
       }
       return rs;
     } catch (err) {
@@ -1264,8 +1264,8 @@ export default defineNuxtPlugin((nuxtApp) => {
       }
       if (notify !== false) {
         $store.lang === "en"
-          ? $snackbar("Data has been successfully saved to the system.", "Success", "Success")
-          : $snackbar("Dữ liệu đã được lưu vào hệ thống", "Thành công", "Success");
+          ? $snackbar("Data has been successfully saved to the system.", "Success")
+          : $snackbar("Dữ liệu đã được lưu vào hệ thống", "Success");
       }
       return rs;
     } catch (err) {
@@ -1289,8 +1289,8 @@ export default defineNuxtPlugin((nuxtApp) => {
 
       if (notify !== false) {
         $store.lang === "en"
-          ? $snackbar("Data has been successfully saved to the system.", "Success", "Success")
-          : $snackbar("Dữ liệu đã được lưu vào hệ thống", "Thành công", "Success");
+          ? $snackbar("Data has been successfully saved to the system.", "Success")
+          : $snackbar("Dữ liệu đã được lưu vào hệ thống", "Success");
       }
       return rs;
     } catch (err) {