diff --git a/app/assets/styles/main.scss b/app/assets/styles/main.scss
index 318126b..7f0c674 100644
--- a/app/assets/styles/main.scss
+++ b/app/assets/styles/main.scss
@@ -25,3 +25,40 @@
     }
   }
 }
+
+// Tooltip Styles
+.tooltiptext {
+  visibility: hidden;
+  opacity: 0;
+  background-color: var(--bulma-primary-95);
+  color: var(--bulma-primary-bold);
+  border-radius: 6px;
+  position: absolute;
+  margin-left: 0px;
+  z-index: 999;
+  bottom: 110%;
+  transition: opacity 0.3s;
+  padding: 6px 9px;
+  font-size: 13px;
+  pointer-events: none;
+  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
+}
+
+.to-left {
+  right: 30px;
+}
+
+@mixin tooltipshow() {
+  visibility: visible;
+  opacity: 1;
+  position: absolute;
+  min-width: 300px;
+  z-index: 999;
+}
+
+.control:hover .tooltiptext {
+  @include tooltipshow();
+}
+.control:hover .tooltiptext .to-left {
+  @include tooltipshow();
+}
diff --git a/app/assets/styles/overrides-components.scss b/app/assets/styles/overrides-components.scss
index 9282d71..ac8ae24 100644
--- a/app/assets/styles/overrides-components.scss
+++ b/app/assets/styles/overrides-components.scss
@@ -10,6 +10,11 @@
   --bulma-hr-background-color: var(--bulma-grey-90);
 }
 
+.title,
+.subtitle {
+  --bulma-subtitle-weight: var(--bulma-weight-semibold);
+}
+
 .textarea,
 .input {
   box-shadow: none;
@@ -30,6 +35,22 @@
 .modal-card-head {
   --bulma-shadow: 0 0.125em 0 0 hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.1);
 }
+
+.label {
+  color: inherit;
+}
+
+.control {
+  --bulma-input-icon-color: var(--bulma-text-60);
+}
+
+.control,
+.input,
+.select,
+.textarea {
+  --bulma-input-placeholder-color: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l), 0.5);
+}
+
 // might break lots of stuff
 // .skeleton-block:not(:last-child), .media:not(:last-child), .level:not(:last-child), .fixed-grid:not(:last-child), .grid:not(:last-child), .tabs:not(:last-child), .pagination:not(:last-child), .message:not(:last-child), .card:not(:last-child), .breadcrumb:not(:last-child), .field:not(:last-child), .file:not(:last-child), .title:not(:last-child), .subtitle:not(:last-child), .tags:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .progress:not(:last-child), .notification:not(:last-child), .content:not(:last-child), .buttons:not(:last-child), .box:not(:last-child), .block:not(:last-child) {
 //   margin-bottom: inherit;
diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
index f4937f7..fe03b68 100644
--- a/app/components/SearchBox.vue
+++ b/app/components/SearchBox.vue
@@ -4,9 +4,9 @@
       class="field has-addons"
       :id="docid"
     >
-      <div class="control has-icons-left is-expanded">
+      <div class="control has-icons-left has-icons-right is-expanded">
         <div
-          :class="`dropdown ${pos || ''} ${focused ? 'is-active' : ''}`"
+          :class="['dropdown', pos, { 'is-active': focused }]"
           style="width: 100%"
         >
           <div
@@ -14,16 +14,35 @@
             style="width: 100%"
           >
             <input
+              :class="[
+                'input',
+                {
+                  'is-danger': error,
+                  'has-text-dark': disabled,
+                },
+              ]"
               :disabled="disabled"
-              :class="`input ${error ? 'is-danger' : ''} ${disabled ? 'has-text-dark' : ''}`"
               type="text"
               @focus="setFocus"
               @blur="lostFocus"
               @keyup.enter="pressEnter"
+              @keyup.esc="lostFocus"
               @keyup="beginSearch"
               v-model="value"
               :placeholder="placeholder"
             />
+            <span class="icon is-left">
+              <Icon
+                name="material-symbols:search"
+                :size="22"
+              />
+            </span>
+            <span class="icon is-right">
+              <Icon
+                name="material-symbols:keyboard-arrow-down-rounded"
+                :size="22"
+              />
+            </span>
           </div>
           <div
             class="dropdown-menu"
@@ -36,12 +55,13 @@
               style="min-width: 100%"
             >
               <p
-                class="has-text-warning"
                 v-if="data.length === 0"
+                class="has-text-grey px-2 py-1"
               >
                 {{ isVietnamese ? "Không có giá trị thỏa mãn" : "No matching values" }}
               </p>
               <ScrollBox
+                v-else
                 v-bind="{
                   data: data,
                   name: field,
@@ -50,14 +70,10 @@
                   notick: true,
                 }"
                 @selected="choose"
-                v-else
-              ></ScrollBox>
+              />
             </div>
           </div>
         </div>
-        <span class="icon is-left">
-          <SvgIcon v-bind="{ name: 'magnify.svg', type: 'gray', size: 22 }"></SvgIcon>
-        </span>
       </div>
       <div
         class="control"
@@ -90,12 +106,17 @@
         v-if="addon"
       >
         <button
-          class="button is-primary px-2"
+          class="button is-primary"
           @click="addNew()"
           style="height: 100%"
           type="button"
         >
-          <SvgIcon v-bind="{ name: 'add1.png', type: 'white', size: 24 }"></SvgIcon>
+          <span class="icon">
+            <Icon
+              name="material-symbols:add-2-rounded"
+              :size="22"
+            />
+          </span>
         </button>
       </div>
     </div>
diff --git a/app/components/TopMenu.vue b/app/components/TopMenu.vue
index bd590a2..5761aed 100644
--- a/app/components/TopMenu.vue
+++ b/app/components/TopMenu.vue
@@ -126,7 +126,7 @@ import { watch } from "vue";
 const router = useRouter();
 const route = useRoute();
 const emit = defineEmits(["changetab", "langChanged"]);
-const { $find, $filter, $store } = useNuxtApp();
+const { $find, $filter, $store, $snackbar } = useNuxtApp();
 const lang = ref($store.lang);
 const menu = $filter($store.common, { category: "topmenu" });
 // if($store.rights.length>0) {
diff --git a/app/components/common/InputNumber.vue b/app/components/common/InputNumber.vue
index 525f6a5..06d31a4 100644
--- a/app/components/common/InputNumber.vue
+++ b/app/components/common/InputNumber.vue
@@ -1,15 +1,18 @@
 <template>
   <div class="control has-icons-left">
     <input
-      :class="`input ${disabled ? 'has-text-black' : ''}`"
       type="text"
-      :placeholder="placeholder || ''"
       v-model="value"
+      :class="['input', disabled && 'has-text-black']"
+      :placeholder="placeholder || ''"
       @keyup="doCheck"
-      :disabled="disabled || false"
+      :disabled="disabled"
     />
     <span class="icon is-left">
-      <SvgIcon v-bind="{ name: 'calculator.svg', type: 'gray', size: 22 }"></SvgIcon>
+      <Icon
+        name="mdi:calculator"
+        :size="22"
+      />
     </span>
   </div>
 </template>
diff --git a/app/components/datatable/ScrollBox.vue b/app/components/datatable/ScrollBox.vue
index 504a8da..2074e46 100644
--- a/app/components/datatable/ScrollBox.vue
+++ b/app/components/datatable/ScrollBox.vue
@@ -1,32 +1,26 @@
 <template>
-  <div
-    class="px-2"
-    :style="`max-height: ${maxheight}; overflow-y: auto;`"
-  >
+  <div :style="`max-height: ${maxheight}; overflow-y: auto;`">
     <div
       v-for="(v, i) in rows"
       :key="i"
-      class="field is-grouped py-1 my-0"
-      :style="{
-        borderBottom: i !== rows.length - 1 && '1px solid red',
-      }"
+      class="field is-grouped my-0"
     >
-      <p
-        class="control is-expanded py-0 fs-14 hyperlink"
+      <button
+        class="button is-white fs-14 font-normal w-full is-justify-content-start py-1.5"
+        type="button"
         @click="doClick(v, i)"
       >
-        {{ $stripHtml(v[name] || v.fullname || v.code || "n/a", 75) }}
+        <span>{{ $stripHtml(v[name] || v.fullname || v.code || "n/a", 75) }}</span>
         <span
-          class="icon has-text-primary"
           v-if="checked[i] && notick !== true"
+          class="icon has-text-primary"
         >
-          <SvgIcon v-bind="{ name: 'tick.svg', type: 'primary', size: 15 }"></SvgIcon>
           <Icon
             name="material-symbols:check-rounded"
-            :size="15"
+            :size="17"
           />
         </span>
-      </p>
+      </button>
       <p
         class="control py-0"
         v-if="show"
@@ -117,10 +111,18 @@ export default {
     getdata() {
       this.currentPage = 1;
       this.array = this.$copy(this.data);
-      if (this.sort !== false) {
-        let f = {};
-        let showtime = this.show ? this.show.time : false;
-        showtime ? (f["create_time"] = "desc") : (f[this.name] = "asc");
+      if (this.sort) {
+        const f = {};
+        if (this.show?.time) {
+          f.create_time = "desc";
+        }
+
+        if (this.sort.startsWith("-")) {
+          f[this.sort.slice(1)] = "desc";
+        } else {
+          f[this.sort] = "asc";
+        }
+
         this.$multiSort(this.array, f);
       }
       this.rows = this.array.slice(0, this.perpage);
@@ -160,3 +162,12 @@ export default {
   },
 };
 </script>
+<style scoped>
+.button.is-ghost {
+  color: var(--bulma-button-text-color);
+}
+.button.is-ghost:hover,
+.button.is-ghost.is-hovered {
+  color: var(--bulma-button-ghost-hover-color);
+}
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 14a6f55..993766a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -57,6 +57,10 @@
   </ClientOnly>
 </template>
 <script setup>
+useHead({
+  link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.svg" }],
+});
+
 const { $createMeta, $store, $copy, $id } = useNuxtApp();
 const componentMap = {};
 const componentKey = ref();
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 640bb73..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..5b86dde
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,13 @@
+<svg
+style="max-height: none; width: 44px"
+width="80"
+height="80"
+viewBox="0 0 80 80"
+fill="none"
+xmlns="http://www.w3.org/2000/svg"
+>
+<path
+  d="M40.5 6C59.0015 6 74 20.9985 74 39.5C74 58.0015 59.0015 73 40.5 73C21.9985 73 7 58.0015 7 39.5C7 20.9985 21.9985 6 40.5 6ZM17.9834 29.0654V48.2373H30.9395V44.8955H22.0371V40.3174H30.2373V36.9756H22.0371V32.4072H30.9014V29.0654H17.9834ZM33.8604 48.2373H37.9141V41.4404H40.873L44.5039 48.2373H48.9785L44.9092 40.7852C44.9677 40.7598 45.0277 40.7378 45.085 40.7109C46.1269 40.2242 46.9225 39.5252 47.4717 38.6143C48.0209 37.6969 48.2959 36.6012 48.2959 35.3281C48.2959 34.0613 48.0244 32.9595 47.4814 32.0234C46.9448 31.0812 46.1613 30.3545 45.1318 29.8428C44.1085 29.3248 42.8725 29.0655 41.4248 29.0654H33.8604V48.2373ZM50.8965 48.2373H54.9492V42.0215H58.3574C59.83 42.0214 61.0843 41.7499 62.1201 41.207C63.1623 40.6641 63.9577 39.9052 64.5068 38.9316C65.0559 37.9582 65.331 36.8354 65.3311 35.5625C65.3311 34.2895 65.0595 33.1659 64.5166 32.1924C63.9799 31.2127 63.2001 30.4476 62.1768 29.8984C61.1533 29.343 59.914 29.0654 58.46 29.0654H50.8965V48.2373ZM57.6826 32.3789C58.4689 32.3789 59.1182 32.5139 59.6299 32.7822C60.1416 33.0443 60.5228 33.4151 60.7725 33.8955C61.0283 34.3698 61.1562 34.9259 61.1562 35.5625C61.1562 36.1925 61.0281 36.7507 60.7725 37.2373C60.5228 37.7178 60.1416 38.0955 59.6299 38.3701C59.1245 38.6384 58.482 38.7734 57.7021 38.7734H54.9492V32.3789H57.6826ZM40.6475 32.3789C41.4274 32.3789 42.0733 32.4948 42.585 32.7256C43.1028 32.9502 43.4867 33.2811 43.7363 33.7178C43.9922 34.1546 44.1201 34.6916 44.1201 35.3281C44.1201 35.9584 43.9922 36.4858 43.7363 36.9102C43.4867 37.3344 43.1064 37.6531 42.5947 37.8652C42.083 38.0774 41.4399 38.1836 40.666 38.1836H37.9141V32.3789H40.6475Z"
+  fill="#1476ff"
+/>
+</svg>
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 1b49b7a..a1fdd36 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,7 @@
   // https://nuxt.com/docs/guide/concepts/typescript
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
+    "ignoreDeprecations": "6.0",
     "baseUrl": "./app",
     "paths": {
       "@/*": ["./*"],