diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 183053612b..1ed0b461c9 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -300,18 +300,30 @@ watch(
   { immediate: true },
 )
 
-
 const setIcon = (icon: string, table: TableType) => {
   table.meta = {
-    // ...table.meta || {},
+    ...(table.meta || {}),
     icon,
   }
+  tables.value.splice(tables.value.indexOf(table), 1, { ...table })
+
   $api.dbTable.update(table.id as string, {
-    meta: {
-      icon,
-    },
+    meta: table.meta,
   })
 }
+
+// const getTableIcon = (table: TableType) => {
+//   if (table.meta?.icon) {
+//     return h(
+//       'span',
+//       {
+//         'key': table.meta?.icon,
+//         'class': 'iconify !cursor-pointer !text-2xl',
+//         'data-icon': table.meta?.icon,
+//       },)
+//   }
+//   return icon(table)
+// }
 </script>
 
 <template>
@@ -546,14 +558,14 @@ const setIcon = (icon: string, table: TableType) => {
                   :nc-base="bases[0].id"
                 >
                   <div
-                    v-for="table of tables.filter((table) => table.base_id === bases[0].id)"
+                    v-for="(table, i) of tables.filter((table) => table.base_id === bases[0].id)"
                     :key="table.id"
                     v-e="['a:table:open']"
                     :class="[
                       { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
                       `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
                     ]"
-                    class="nc-tree-item text-sm cursor-pointer group"
+                    class="nc-tree-item text-sm cursor-pointer group1"
                     :data-order="table.order"
                     :data-id="table.id"
                     :data-testid="`tree-view-table-${table.title}`"
@@ -563,8 +575,7 @@ const setIcon = (icon: string, table: TableType) => {
                       <template #title>{{ table.table_name }}</template>
                       <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                         <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-
-                          <a-popover trigger="hover" @click.stop>
+                          <a-popover trigger="click" @click.stop>
                             <div @click.stop>
                               <MdiDrag
                                 v-if="isUIAllowed('treeview-drag-n-drop')"
@@ -573,32 +584,38 @@ const setIcon = (icon: string, table: TableType) => {
                                 @click.stop.prevent
                               />
 
-                              <span v-if="table.meta?.icon" class="iconify cursor-pointer" :data-icon="table.meta?.icon"></span>
-
-                              <component
-                                v-else
-                                :is="icon(table)"
-                                class="nc-view-icon text-xs"
-                                :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                              />
+                              <a-tooltip>
+                                <span v-if="table.meta?.icon" :key="table.meta?.icon">
+                                  <GeneralIconifyIcon class="text-2xl" :key="table.meta?.icon" :icon="table.meta?.icon"></GeneralIconifyIcon>
+                                </span>
+                                <component
+                                  :is="icon(table)"
+                                  v-else
+                                  class="nc-view-icon text-xs"
+                                  :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                                />
+
+                                <template #title>Change icon</template>
+                              </a-tooltip>
                             </div>
                             <template #content>
                               <LazyGeneralEmojiIcons @selectIcon="setIcon($event, table)" />
                             </template>
                           </a-popover>
 
-                          <MdiDragVertical
-                            v-if="isUIAllowed('treeview-drag-n-drop')"
-                            :class="`nc-child-draggable-icon-${table.title}`"
-                            class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
-                            @click.stop.prevent
-                          />
-
-                          <component
-                            :is="icon(table)"
-                            class="nc-view-icon text-xs"
-                            :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                          />
+                          <!--
+                                                    <MdiDragVertical
+                                                      v-if="isUIAllowed('treeview-drag-n-drop')"
+                                                      :class="`nc-child-draggable-icon-${table.title}`"
+                                                      class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
+                                                      @click.stop.prevent
+                                                    />
+
+                                                    <component
+                                                      :is="icon(table)"
+                                                      class="nc-view-icon text-xs"
+                                                      :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                                                    /> -->
                         </div>
 
                         <div class="nc-tbl-title flex-1">
diff --git a/packages/nc-gui/components/general/EmojiIcons.vue b/packages/nc-gui/components/general/EmojiIcons.vue
index b62a23bb27..6df2ecd937 100644
--- a/packages/nc-gui/components/general/EmojiIcons.vue
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
 const emit = defineEmits(['selectIcon'])
 const search = $ref('')
 
@@ -1843,15 +1845,26 @@ const icons = [
 const filteredIcons = computed(() => {
   return icons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase()))
 })
+
 </script>
 
 <template>
-  <a-card class="overflow-y-auto">
-    <a-input-search v-model:value="search" class="w-full overflow-y-auto !m-4" placeholder="Search"></a-input-search>
-    <div class="flex gap-4 flex-wrap w-full m-4 max-w-80 max-h-40">
+  <div class="p-1 w-85 h-80 flex flex-col gap-1 justify-start">
+    <div>
+      <input v-model="search" class="p-1 border-1 w-full overflow-y-auto" placeholder="Search" />
+    </div>
+    <div class="flex gap-4 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
       <div v-for="icon of filteredIcons" :key="icon" @click="emit('selectIcon', `emojione:${icon}`)">
-        <span class="iconify cursor-pointer active:ring" :data-icon="`emojione:${icon}`"></span>
+        <span class="cursor-pointer nc-emoji-item">
+          <Icon class="text-2xl iconify"
+                :icon="`emojione:${icon}`"></Icon>
+        </span>
       </div>
     </div>
-  </a-card>
+  </div>
 </template>
+<style scoped>
+.nc-emoji-item {
+  @apply hover:(bg-primary bg-opacity-10) active:(bg-primary !bg-opacity-20) rounded-md w-[38px] h-[38px] block flex items-center justify-center;
+}
+</style>
diff --git a/packages/nc-gui/components/general/IconifyIcon.vue b/packages/nc-gui/components/general/IconifyIcon.vue
new file mode 100644
index 0000000000..c5fb192848
--- /dev/null
+++ b/packages/nc-gui/components/general/IconifyIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <Icon :icon="icon"/>
+</template>
+
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+</script>
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index c05611aa7a..5521ba43dc 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -9,7 +9,7 @@
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@ckpack/vue-color": "^1.2.0",
-        "@iconify/iconify": "^2.2.1",
+        "@iconify/vue": "^4.0.1",
         "@types/file-saver": "^2.0.5",
         "@vue-flow/additional-components": "^1.2.0",
         "@vue-flow/core": "^1.3.0",
@@ -1210,6 +1210,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.2.1.tgz",
       "integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ==",
+      "dev": true,
       "funding": {
         "url": "http://github.com/sponsors/cyberalien"
       }
@@ -1234,6 +1235,25 @@
         "local-pkg": "^0.4.1"
       }
     },
+    "node_modules/@iconify/vue": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.0.1.tgz",
+      "integrity": "sha512-k4VwcSQpGqJpoyqENRRviFuXlVcquLvQ6BKLNJ6o2amZo7u+3HyALSO79Xyz7Sg68szQGstOk6weaKUF0DJbog==",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
+    "node_modules/@iconify/vue/node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
+    },
     "node_modules/@intlify/bundle-utils": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz",
@@ -18576,7 +18596,8 @@
     "@iconify/iconify": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.2.1.tgz",
-      "integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ=="
+      "integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ==",
+      "dev": true
     },
     "@iconify/types": {
       "version": "1.1.0",
@@ -18598,6 +18619,21 @@
         "local-pkg": "^0.4.1"
       }
     },
+    "@iconify/vue": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.0.1.tgz",
+      "integrity": "sha512-k4VwcSQpGqJpoyqENRRviFuXlVcquLvQ6BKLNJ6o2amZo7u+3HyALSO79Xyz7Sg68szQGstOk6weaKUF0DJbog==",
+      "requires": {
+        "@iconify/types": "^2.0.0"
+      },
+      "dependencies": {
+        "@iconify/types": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+          "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
+        }
+      }
+    },
     "@intlify/bundle-utils": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index 6f3ff2f551..aebde1d385 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -32,7 +32,8 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.2.0",
-    "@iconify/iconify": "^2.2.1",
+    "@iconify/vue": "^4.0.1",
+    "@types/file-saver": "^2.0.5",
     "@vue-flow/additional-components": "^1.2.0",
     "@vue-flow/core": "^1.3.0",
     "@vuelidate/core": "^2.0.0-alpha.44",
@@ -42,7 +43,6 @@
     "ant-design-vue": "^3.2.11",
     "d3-scale": "^4.0.2",
     "dagre": "^0.8.5",
-    "@types/file-saver": "^2.0.5",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
     "httpsnippet": "^2.0.0",