diff --git a/app/components/snackbar/Error.vue b/app/components/snackbar/Error.vue
index ecde7de..d254a0c 100644
--- a/app/components/snackbar/Error.vue
+++ b/app/components/snackbar/Error.vue
@@ -1,24 +1,25 @@
 <template>
-  <div>
-    <Caption v-bind="{ title: 'Lỗi', type: 'has-text-findata' }"></Caption>
-    <div class="field is-grouped mb-0">
-      <div
-        class="control is-expanded pr-3"
-        v-html="content"
-      ></div>
-      <div class="control">
-        <SvgIcon v-bind="{ name: 'error.svg', type: 'danger', size: 24 }"></SvgIcon>
-      </div>
-    </div>
+  <div class="field is-grouped is-gap-1">
+    <Icon
+      name="material-symbols:cancel-rounded"
+      :size="22"
+      class="has-text-danger-70"
+    />
+    <p
+      v-html="content"
+      class="control is-expanded"
+    ></p>
   </div>
 </template>
-<script>
-export default {
-  props: ["content"],
-  methods: {
-    cancel() {
-      this.$store.commit("updateStore", { name: "showmodal", data: undefined });
-    },
-  },
-};
+<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 b72c00f..5e6b9ed 100644
--- a/app/components/snackbar/Info.vue
+++ b/app/components/snackbar/Info.vue
@@ -2,10 +2,13 @@
   <p v-html="props.content"></p>
 </template>
 <script setup>
-var props = defineProps({
+const props = defineProps({
   content: String,
 });
+
+const { $store } = useNuxtApp();
+
 function cancel() {
-  this.$store.commit("updateStore", { name: "showmodal", data: undefined });
+  $store.commit("updateStore", { name: "showmodal", data: undefined });
 }
 </script>
diff --git a/app/components/snackbar/SnackBar.vue b/app/components/snackbar/SnackBar.vue
index 2185395..d93cfb9 100644
--- a/app/components/snackbar/SnackBar.vue
+++ b/app/components/snackbar/SnackBar.vue
@@ -1,28 +1,29 @@
 <template>
-  <div class="show">
+  <div class="snackbar has-text-white has-background-grey-35 px-3 py-2 rounded-md">
     <component
       :is="dynamicComponent"
       v-bind="vbind"
       @close="$emit('close')"
-    ></component>
+    />
   </div>
 </template>
 <script setup>
 import { defineAsyncComponent } from "vue";
 import { useStore } from "@/stores/index";
-const store = useStore();
-var props = defineProps({
+const props = defineProps({
   component: String,
-  width: Number,
-  height: Number,
+  width: String,
+  height: String,
   vbind: Object,
   title: String,
 });
-const dynamicComponent = defineAsyncComponent(() => import(`~/components/snackbar/Info.vue`));
+
+const store = useStore();
+const dynamicComponent = defineAsyncComponent(() => import(`../snackbar/${props.component || "Info"}.vue`));
 setTimeout(() => store.commit("snackbar", undefined), 3900);
 </script>
-<style>
-.show {
+<style scoped>
+.snackbar {
   position: fixed;
   z-index: 999;
   top: 50px;
@@ -32,10 +33,6 @@ setTimeout(() => store.commit("snackbar", undefined), 3900);
   width: fit-content;
   max-width: 500px;
 
-  background-color: #303030;
-  color: white;
-  border-radius: 6px;
-  padding: 10px;
   /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
   However, delay the fade out process for 2.5 seconds */
   -webkit-animation:
diff --git a/app/components/snackbar/Success.vue b/app/components/snackbar/Success.vue
index 8c6a388..e679d71 100644
--- a/app/components/snackbar/Success.vue
+++ b/app/components/snackbar/Success.vue
@@ -1,29 +1,25 @@
 <template>
-  <div>
-    <Caption
-      v-bind="{
-        title: $stripHtml(title) || 'Thành công',
-        type: 'has-text-primary',
-      }"
-    ></Caption>
-    <div class="field is-grouped mb-0 pb-0">
-      <div
-        class="control is-expanded pr-3 mb-0"
-        v-html="content"
-      ></div>
-      <div class="control mb-0">
-        <SvgIcon v-bind="{ name: 'check2.svg', type: 'primary', size: 24 }"></SvgIcon>
-      </div>
-    </div>
+  <div class="field is-grouped is-gap-1">
+    <Icon
+      name="material-symbols:check-circle-rounded"
+      :size="22"
+      class="has-text-success"
+    />
+    <p
+      v-html="content"
+      class="control is-expanded"
+    ></p>
   </div>
 </template>
-<script>
-export default {
-  props: ["content", "title"],
-  methods: {
-    cancel() {
-      this.$store.commit("updateStore", { name: "showmodal", data: undefined });
-    },
-  },
-};
+<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/plugins/01-common.js b/app/plugins/01-common.js
index 8e2ce92..29fb10e 100644
--- a/app/plugins/01-common.js
+++ b/app/plugins/01-common.js
@@ -27,7 +27,7 @@ export default defineNuxtPlugin((nuxtApp) => {
           ? `<span class="has-text-danger">${title}</span>`
           : title;
 
-    let data = {
+    const data = {
       id: $id(),
       component: `dialog/${type || "Info"}`,
       vbind: { content, duration, vbind },
@@ -35,17 +35,24 @@ export default defineNuxtPlugin((nuxtApp) => {
       width: width || "600px",
       height: height || "100px",
     };
+
     $store.commit("showmodal", data);
   };
 
   const snackbar = function (content, title, type, width, height) {
     content = typeof content == "string" ? content : JSON.stringify(content);
-    let vtitle = type === "Success" ? `<span class="has-text-primary">${title}</span>` : title;
-    if (type === "Error") vtitle = `<span class="has-text-danger">${title}</span>`;
-    let data = {
+
+    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: `snackbar/${type || "Info"}`,
-      vbind: { content: content },
+      component: type || "Info",
+      vbind: { content },
       title: vtitle,
       width: width || "600px",
       height: height || "100px",
@@ -54,13 +61,14 @@ export default defineNuxtPlugin((nuxtApp) => {
   };
 
   const getLink = function (val) {
-    if (val === undefined || val === null || val === "" || val === "") return "";
-    let json = val.indexOf("{") >= 0 ? JSON.parse(val) : { path: val };
+    if ($empty(val)) return "";
+    const json = val.indexOf("{") >= 0 ? JSON.parse(val) : { path: val };
     return json;
   };
 
   const errPhone = function (phone) {
-    var text = undefined;
+    let text;
+
     if ($empty(phone)) {
       text = "Số điện thoại di động không được bỏ trống.";
     } else if (isNaN(phone)) {
@@ -74,7 +82,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   const errEmail = function (email) {
     const re =
       /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-    var text = undefined;
+    let text = undefined;
     if ($empty(email)) {
       text = "Email không được bỏ trống.";
     } else if (!re.test(String(email).toLowerCase())) {
@@ -86,7 +94,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   const errPhoneEmail = function (contact) {
     const re =
       /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-    var text = undefined;
+    let text = undefined;
 
     if ($empty(contact)) {
       text = "Số điện thoại di động hoặc Email không được bỏ trống.";