diff --git a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
index 5fd1422e1c..5bc1eed06f 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
@@ -93,17 +93,21 @@ onMounted(() => {
       </div>
       <template #overlay>
         <NcMenu data-testid="nc-sidebar-userinfo">
-          <NcMenuItem v-e="['c:user:logout']" data-testid="nc-sidebar-user-logout" @click="logout">
-            <GeneralLoader v-if="isLoggingOut" class="!ml-0.5 !mr-0.5 !max-h-4.5 !-mt-0.5" />
-            <GeneralIcon v-else icon="signout" class="menu-icon" />
-            <span class="menu-btn"> {{ $t('general.logout') }}</span>
+          <NcMenuItem data-testid="nc-sidebar-user-logout" @click="logout">
+            <div v-e="['c:user:logout']" class="flex gap-2 items-center">
+              <GeneralLoader v-if="isLoggingOut" class="!ml-0.5 !mr-0.5 !max-h-4.5 !-mt-0.5" />
+              <GeneralIcon v-else icon="signout" class="menu-icon" />
+              <span class="menu-btn"> {{ $t('general.logout') }}</span>
+            </div>
           </NcMenuItem>
           <template v-if="!isMobileMode">
-            <NcMenuItem v-e="['c:auth-token:copy']" @click="onCopy">
-              <GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black menu-icon" />
-              <GeneralIcon v-else icon="copy" class="menu-icon" />
-              <template v-if="isAuthTokenCopied"> {{ $t('title.copiedAuthToken') }} </template>
-              <template v-else> {{ $t('title.copyAuthToken') }} </template>
+            <NcMenuItem @click="onCopy">
+              <div v-e="['c:auth-token:copy']" class="flex gap-2 items-center">
+                <GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black menu-icon" />
+                <GeneralIcon v-else icon="copy" class="menu-icon" />
+                <template v-if="isAuthTokenCopied"> {{ $t('title.copiedAuthToken') }} </template>
+                <template v-else> {{ $t('title.copyAuthToken') }} </template>
+              </div>
             </NcMenuItem>
           </template>
           <NcDivider />
@@ -140,13 +144,17 @@ onMounted(() => {
           <template v-if="!appInfo.ee">
             <NcDivider />
             <a-popover key="language" class="lang-menu !py-1.5" placement="rightBottom">
-              <NcMenuItem v-e="['c:translate:open']">
-                <GeneralIcon icon="translate" class="group-hover:text-black nc-language ml-0.25 menu-icon" />
-                {{ $t('labels.language') }}
-                <div class="flex items-center text-gray-400 text-xs">{{ $t('labels.community.communityTranslated') }}</div>
-                <div class="flex-1" />
+              <NcMenuItem>
+                <div v-e="['c:translate:open']" class="flex gap-2 items-center">
+                  <GeneralIcon icon="translate" class="group-hover:text-black nc-language ml-0.25 menu-icon" />
+                  {{ $t('labels.language') }}
+                  <div class="flex items-center text-gray-400 text-xs">{{ $t('labels.community.communityTranslated') }}</div>
+                  <div class="flex-1" />
 
-                <MaterialSymbolsChevronRightRounded class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400" />
+                  <MaterialSymbolsChevronRightRounded
+                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                  />
+                </div>
               </NcMenuItem>
 
               <template #content>
diff --git a/packages/nc-gui/components/dashboard/TreeView/BaseOptions.vue b/packages/nc-gui/components/dashboard/TreeView/BaseOptions.vue
index 5610e255b5..b1ba78dfb3 100644
--- a/packages/nc-gui/components/dashboard/TreeView/BaseOptions.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/BaseOptions.vue
@@ -62,7 +62,6 @@ function openQuickImportDialog(type: string) {
   <NcSubMenu class="py-0" data-testid="nc-sidebar-base-import">
     <template #title>
       <GeneralIcon icon="download" />
-
       {{ $t('labels.importData') }}
     </template>
 
@@ -71,41 +70,41 @@ function openQuickImportDialog(type: string) {
     <NcMenuItem
       v-if="isUIAllowed('airtableImport', { roles: baseRole })"
       key="quick-import-airtable"
-      v-e="['c:import:airtable']"
       @click="openAirtableImportDialog(source.base_id, source.id)"
     >
-      <GeneralIcon icon="airtable" class="max-w-3.75 group-hover:text-black" />
-      <div class="ml-0.5">{{ $t('labels.airtable') }}</div>
+      <div v-e="['c:import:airtable']" class="flex gap-2 items-center">
+        <GeneralIcon icon="airtable" class="max-w-3.75 group-hover:text-black" />
+        <div class="ml-0.5">{{ $t('labels.airtable') }}</div>
+      </div>
     </NcMenuItem>
 
-    <NcMenuItem
-      v-if="isUIAllowed('csvImport', { roles: baseRole })"
-      key="quick-import-csv"
-      v-e="['c:import:csv']"
-      @click="openQuickImportDialog('csv')"
-    >
-      <GeneralIcon icon="csv" class="w-4 group-hover:text-black" />
-      {{ $t('labels.csvFile') }}
+    <NcMenuItem v-if="isUIAllowed('csvImport', { roles: baseRole })" key="quick-import-csv" @click="openQuickImportDialog('csv')">
+      <div v-e="['c:import:csv']" class="flex gap-2 items-center">
+        <GeneralIcon icon="csv" class="w-4 group-hover:text-black" />
+        {{ $t('labels.csvFile') }}
+      </div>
     </NcMenuItem>
 
     <NcMenuItem
       v-if="isUIAllowed('jsonImport', { roles: baseRole })"
       key="quick-import-json"
-      v-e="['c:import:json']"
       @click="openQuickImportDialog('json')"
     >
-      <GeneralIcon icon="code" class="w-4 group-hover:text-black" />
-      {{ $t('labels.jsonFile') }}
+      <div v-e="['c:import:json']" class="flex gap-2 items-center">
+        <GeneralIcon icon="code" class="w-4 group-hover:text-black" />
+        {{ $t('labels.jsonFile') }}
+      </div>
     </NcMenuItem>
 
     <NcMenuItem
       v-if="isUIAllowed('excelImport', { roles: baseRole })"
       key="quick-import-excel"
-      v-e="['c:import:excel']"
       @click="openQuickImportDialog('excel')"
     >
-      <GeneralIcon icon="excel" class="max-w-4 group-hover:text-black" />
-      {{ $t('labels.microsoftExcel') }}
+      <div v-e="['c:import:excel']" class="flex gap-2 items-center">
+        <GeneralIcon icon="excel" class="max-w-4 group-hover:text-black" />
+        {{ $t('labels.microsoftExcel') }}
+      </div>
     </NcMenuItem>
   </NcSubMenu>
 </template>
diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index d4d340b142..d346d3a157 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -77,7 +77,7 @@ const tempTitle = ref('')
 
 const activeBaseId = ref('')
 
-const isErdModalOpen = ref<Boolean>(false)
+const isErdModalOpen = ref<boolean>(false)
 
 const { t } = useI18n()
 
@@ -116,7 +116,7 @@ const showBaseOption = computed(() => {
   return ['airtableImport', 'csvImport', 'jsonImport', 'excelImport'].some((permission) => isUIAllowed(permission))
 })
 
-const enableEditMode = () => {
+function enableEditMode() {
   editMode.value = true
   tempTitle.value = base.value.title!
   nextTick(() => {
@@ -126,7 +126,7 @@ const enableEditMode = () => {
   })
 }
 
-const updateProjectTitle = async () => {
+async function updateProjectTitle() {
   if (!tempTitle.value) return
 
   try {
@@ -146,7 +146,7 @@ const updateProjectTitle = async () => {
 
 const { copy } = useCopy(true)
 
-const copyProjectInfo = async () => {
+async function copyProjectInfo() {
   try {
     if (
       await copy(
@@ -168,7 +168,7 @@ defineExpose({
   enableEditMode,
 })
 
-const setIcon = async (icon: string, base: BaseType) => {
+async function setIcon(icon: string, base: BaseType) {
   try {
     const meta = {
       ...((base.meta as object) || {}),
@@ -224,7 +224,8 @@ function openTableCreateDialog(sourceIndex?: number | undefined) {
 }
 
 const isAddNewProjectChildEntityLoading = ref(false)
-const addNewProjectChildEntity = async () => {
+
+async function addNewProjectChildEntity() {
   if (isAddNewProjectChildEntityLoading.value) return
 
   isAddNewProjectChildEntityLoading.value = true
@@ -248,7 +249,7 @@ const addNewProjectChildEntity = async () => {
   }
 }
 
-const onProjectClick = async (base: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => {
+async function onProjectClick(base: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) {
   if (!base) {
     return
   }
@@ -347,17 +348,17 @@ onKeyStroke('Escape', () => {
 const isDuplicateDlgOpen = ref(false)
 const selectedProjectToDuplicate = ref()
 
-const duplicateProject = (base: BaseType) => {
+function duplicateProject(base: BaseType) {
   selectedProjectToDuplicate.value = base
   isDuplicateDlgOpen.value = true
 }
 
-const tableDelete = () => {
+function tableDelete() {
   isTableDeleteDialogVisible.value = true
   $e('c:table:delete')
 }
 
-const projectDelete = () => {
+function projectDelete() {
   isProjectDeleteDialogVisible.value = true
   $e('c:project:delete')
 }
@@ -396,21 +397,18 @@ const projectDelete = () => {
           </NcButton>
 
           <div class="flex items-center mr-1" @click="onProjectClick(base)">
-            <div class="flex items-center select-none w-6 h-full">
+            <div v-e="['c:base:emojiSelect']" class="flex items-center select-none w-6 h-full">
               <a-spin v-if="base.isLoading" class="!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" :indicator="indicator" />
 
               <LazyGeneralEmojiPicker
                 v-else
                 :key="base.meta?.icon"
-                v-e="['c:base:emojiSelect']"
                 :emoji="base.meta?.icon"
                 :readonly="true"
                 size="small"
                 @emoji-selected="setIcon($event, base)"
               >
-                <template #default>
-                  <GeneralProjectIcon :type="base.type" />
-                </template>
+                <GeneralProjectIcon :type="base.type" />
               </LazyGeneralEmojiPicker>
             </div>
           </div>
@@ -460,24 +458,22 @@ const projectDelete = () => {
                 @click="isOptionsOpen = false"
               >
                 <template v-if="!isSharedBase">
-                  <NcMenuItem
-                    v-if="isUIAllowed('baseRename')"
-                    v-e="['c:base:rename']"
-                    data-testid="nc-sidebar-project-rename"
-                    @click="enableEditMode"
-                  >
-                    <GeneralIcon icon="edit" class="group-hover:text-black" />
-                    {{ $t('general.rename') }}
+                  <NcMenuItem v-if="isUIAllowed('baseRename')" data-testid="nc-sidebar-project-rename" @click="enableEditMode">
+                    <div v-e="['c:base:rename']" class="flex gap-2 items-center">
+                      <GeneralIcon icon="edit" class="group-hover:text-black" />
+                      {{ $t('general.rename') }}
+                    </div>
                   </NcMenuItem>
 
                   <NcMenuItem
                     v-if="isUIAllowed('baseDuplicate', { roles: [stringifyRolesObj(orgRoles), baseRole].join() })"
-                    v-e="['c:base:duplicate']"
                     data-testid="nc-sidebar-base-duplicate"
                     @click="duplicateProject(base)"
                   >
-                    <GeneralIcon icon="duplicate" class="text-gray-700" />
-                    {{ $t('general.duplicate') }}
+                    <div v-e="['c:base:duplicate']" class="flex gap-2 items-center">
+                      <GeneralIcon icon="duplicate" class="text-gray-700" />
+                      {{ $t('general.duplicate') }}
+                    </div>
                   </NcMenuItem>
 
                   <NcDivider v-if="['baseDuplicate', 'baseRename'].some((permission) => isUIAllowed(permission))" />
@@ -486,30 +482,27 @@ const projectDelete = () => {
                   <NcMenuItem
                     v-if="!isEeUI"
                     key="copy"
-                    v-e="['c:base:copy-proj-info']"
                     data-testid="nc-sidebar-base-copy-base-info"
                     @click.stop="copyProjectInfo"
                   >
-                    <GeneralIcon icon="copy" class="group-hover:text-black" />
-                    {{ $t('activity.account.projInfo') }}
+                    <div v-e="['c:base:copy-proj-info']" class="flex gap-2 items-center">
+                      <GeneralIcon icon="copy" class="group-hover:text-black" />
+                      {{ $t('activity.account.projInfo') }}
+                    </div>
                   </NcMenuItem>
 
                   <!-- ERD View -->
-                  <NcMenuItem
-                    key="erd"
-                    v-e="['c:base:erd']"
-                    data-testid="nc-sidebar-base-relations"
-                    @click="openErdView(base?.sources?.[0]!)"
-                  >
-                    <GeneralIcon icon="erd" />
-                    {{ $t('title.relations') }}
+                  <NcMenuItem key="erd" data-testid="nc-sidebar-base-relations" @click="openErdView(base?.sources?.[0]!)">
+                    <div v-e="['c:base:erd']" class="flex gap-2 items-center">
+                      <GeneralIcon icon="erd" />
+                      {{ $t('title.relations') }}
+                    </div>
                   </NcMenuItem>
 
                   <!-- Swagger: Rest APIs -->
                   <NcMenuItem
                     v-if="isUIAllowed('apiDocs')"
                     key="api"
-                    v-e="['c:base:api-docs']"
                     data-testid="nc-sidebar-base-rest-apis"
                     @click.stop="
                       () => {
@@ -518,8 +511,10 @@ const projectDelete = () => {
                       }
                     "
                   >
-                    <GeneralIcon icon="snippet" class="group-hover:text-black !max-w-3.9" />
-                    {{ $t('activity.account.swagger') }}
+                    <div v-e="['c:base:api-docs']" class="flex gap-2 items-center">
+                      <GeneralIcon icon="snippet" class="group-hover:text-black !max-w-3.9" />
+                      {{ $t('activity.account.swagger') }}
+                    </div>
                   </NcMenuItem>
                 </template>
 
@@ -533,13 +528,14 @@ const projectDelete = () => {
                 <NcMenuItem
                   v-if="isUIAllowed('baseMiscSettings')"
                   key="teamAndSettings"
-                  v-e="['c:base:settings']"
                   data-testid="nc-sidebar-base-settings"
                   class="nc-sidebar-base-base-settings"
                   @click="toggleDialog(true, 'teamAndAuth', undefined, base.id)"
                 >
-                  <GeneralIcon icon="settings" class="group-hover:text-black" />
-                  {{ $t('activity.settings') }}
+                  <div v-e="['c:base:settings']" class="flex gap-2 items-center">
+                    <GeneralIcon icon="settings" class="group-hover:text-black" />
+                    {{ $t('activity.settings') }}
+                  </div>
                 </NcMenuItem>
                 <NcMenuItem
                   v-if="isUIAllowed('baseDelete', { roles: [stringifyRolesObj(orgRoles), baseRole].join() })"
@@ -547,8 +543,10 @@ const projectDelete = () => {
                   class="!text-red-500 !hover:bg-red-50"
                   @click="projectDelete"
                 >
-                  <GeneralIcon icon="delete" class="w-4" />
-                  {{ $t('general.delete') }}
+                  <div class="flex gap-2 items-center">
+                    <GeneralIcon icon="delete" class="w-4" />
+                    {{ $t('general.delete') }}
+                  </div>
                 </NcMenuItem>
               </NcMenu>
             </template>
@@ -666,9 +664,11 @@ const projectDelete = () => {
                                   @click="isBasesOptionsOpen[source!.id!] = false"
                                 >
                                   <!-- ERD View -->
-                                  <NcMenuItem key="erd" v-e="['c:source:erd']" @click="openErdView(source)">
-                                    <GeneralIcon icon="erd" />
-                                    {{ $t('title.relations') }}
+                                  <NcMenuItem key="erd" @click="openErdView(source)">
+                                    <div v-e="['c:source:erd']" class="flex gap-2 items-center">
+                                      <GeneralIcon icon="erd" />
+                                      {{ $t('title.relations') }}
+                                    </div>
                                   </NcMenuItem>
 
                                   <DashboardTreeViewBaseOptions v-if="showBaseOption" v-model:base="base" :source="source" />
@@ -712,12 +712,8 @@ const projectDelete = () => {
         <template v-else-if="contextMenuTarget.type === 'source'"></template>
 
         <template v-else-if="contextMenuTarget.type === 'table'">
-          <NcMenuItem
-            v-if="isUIAllowed('tableRename')"
-            v-e="['c:table:rename']"
-            @click="openRenameTableDialog(contextMenuTarget.value, true)"
-          >
-            <div class="nc-base-option-item">
+          <NcMenuItem v-if="isUIAllowed('tableRename')" @click="openRenameTableDialog(contextMenuTarget.value, true)">
+            <div v-e="['c:table:rename']" class="nc-base-option-item flex gap-2 items-center">
               <GeneralIcon icon="edit" class="text-gray-700" />
               {{ $t('general.rename') }}
             </div>
@@ -725,17 +721,16 @@ const projectDelete = () => {
 
           <NcMenuItem
             v-if="isUIAllowed('tableDuplicate') && (contextMenuBase?.is_meta || contextMenuBase?.is_local)"
-            v-e="['c:table:duplicate']"
             @click="duplicateTable(contextMenuTarget.value)"
           >
-            <div class="nc-base-option-item">
+            <div v-e="['c:table:duplicate']" class="nc-base-option-item flex gap-2 items-center">
               <GeneralIcon icon="duplicate" class="text-gray-700" />
               {{ $t('general.duplicate') }}
             </div>
           </NcMenuItem>
           <NcDivider />
           <NcMenuItem v-if="isUIAllowed('table-delete')" class="!hover:bg-red-50" @click="tableDelete">
-            <div class="nc-base-option-item text-red-600">
+            <div class="nc-base-option-item flex gap-2 items-center text-red-600">
               <GeneralIcon icon="delete" />
               {{ $t('general.delete') }}
             </div>
diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index 6b45508c38..1e29a1ef5f 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -180,8 +180,10 @@ const isTableOpened = computed(() => {
               :class="{ '!rotate-180': isExpanded }"
             />
           </NcButton>
+
           <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
             <div
+              v-e="['c:table:emoji-picker']"
               class="flex items-center nc-table-icon"
               :class="{
                 'pointer-events-none': !canUserEditEmote,
@@ -190,7 +192,6 @@ const isTableOpened = computed(() => {
             >
               <LazyGeneralEmojiPicker
                 :key="table.meta?.icon"
-                v-e="['c:table:emoji-picker']"
                 :emoji="table.meta?.icon"
                 size="small"
                 :readonly="!canUserEditEmote || isMobileMode"
@@ -239,60 +240,62 @@ const isTableOpened = computed(() => {
         </span>
         <div class="flex flex-grow h-full"></div>
         <div class="flex flex-row items-center">
-          <NcDropdown
+          <div
             v-if="
               !isSharedBase &&
               (isUIAllowed('tableRename', { roles: baseRole }) || isUIAllowed('tableDelete', { roles: baseRole }))
             "
             v-e="['c:table:option']"
-            :trigger="['click']"
-            class="nc-sidebar-node-btn"
-            @click.stop
           >
-            <MdiDotsHorizontal
-              data-testid="nc-sidebar-table-context-menu"
-              class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 !text-gray-600 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)"
-            />
-
-            <template #overlay>
-              <NcMenu>
-                <NcMenuItem
-                  v-if="isUIAllowed('tableRename', { roles: baseRole })"
-                  v-e="['c:table:rename']"
-                  :data-testid="`sidebar-table-rename-${table.title}`"
-                  @click="openRenameTableDialog(table, base.sources[sourceIndex].id)"
-                >
-                  <GeneralIcon icon="edit" class="text-gray-700" />
-                  {{ $t('general.rename') }}
-                </NcMenuItem>
-
-                <NcMenuItem
-                  v-if="
-                    isUIAllowed('tableDuplicate') &&
-                    base.sources?.[sourceIndex] &&
-                    (base.sources[sourceIndex].is_meta || base.sources[sourceIndex].is_local)
-                  "
-                  v-e="['c:table:duplicate']"
-                  :data-testid="`sidebar-table-duplicate-${table.title}`"
-                  @click="duplicateTable(table)"
-                >
-                  <GeneralIcon icon="duplicate" class="text-gray-700" />
-                  {{ $t('general.duplicate') }}
-                </NcMenuItem>
-
-                <NcMenuItem
-                  v-if="isUIAllowed('tableDelete', { roles: baseRole })"
-                  v-e="['c:table:delete']"
-                  :data-testid="`sidebar-table-delete-${table.title}`"
-                  class="!text-red-500 !hover:bg-red-50"
-                  @click="isTableDeleteDialogVisible = true"
-                >
-                  <GeneralIcon icon="delete" />
-                  {{ $t('general.delete') }}
-                </NcMenuItem>
-              </NcMenu>
-            </template>
-          </NcDropdown>
+            <NcDropdown :trigger="['click']" class="nc-sidebar-node-btn" @click.stop>
+              <MdiDotsHorizontal
+                data-testid="nc-sidebar-table-context-menu"
+                class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 !text-gray-600 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)"
+              />
+
+              <template #overlay>
+                <NcMenu>
+                  <NcMenuItem
+                    v-if="isUIAllowed('tableRename', { roles: baseRole })"
+                    :data-testid="`sidebar-table-rename-${table.title}`"
+                    @click="openRenameTableDialog(table, base.sources[sourceIndex].id)"
+                  >
+                    <div v-e="['c:table:rename']" class="flex gap-2 items-center">
+                      <GeneralIcon icon="edit" class="text-gray-700" />
+                      {{ $t('general.rename') }}
+                    </div>
+                  </NcMenuItem>
+
+                  <NcMenuItem
+                    v-if="
+                      isUIAllowed('tableDuplicate') &&
+                      base.sources?.[sourceIndex] &&
+                      (base.sources[sourceIndex].is_meta || base.sources[sourceIndex].is_local)
+                    "
+                    :data-testid="`sidebar-table-duplicate-${table.title}`"
+                    @click="duplicateTable(table)"
+                  >
+                    <div v-e="['c:table:duplicate']" class="flex gap-2 items-center">
+                      <GeneralIcon icon="duplicate" class="text-gray-700" />
+                      {{ $t('general.duplicate') }}
+                    </div>
+                  </NcMenuItem>
+
+                  <NcMenuItem
+                    v-if="isUIAllowed('tableDelete', { roles: baseRole })"
+                    :data-testid="`sidebar-table-delete-${table.title}`"
+                    class="!text-red-500 !hover:bg-red-50"
+                    @click="isTableDeleteDialogVisible = true"
+                  >
+                    <div v-e="['c:table:delete']" class="flex gap-2 items-center">
+                      <GeneralIcon icon="delete" />
+                      {{ $t('general.delete') }}
+                    </div>
+                  </NcMenuItem>
+                </NcMenu>
+              </template>
+            </NcDropdown>
+          </div>
         </div>
       </div>
       <DlgTableDelete
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index 57c5fb1afb..196a296282 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -192,7 +192,6 @@ watch(isDropdownOpen, async () => {
 
 <template>
   <a-menu-item
-    v-e="['c:view:open']"
     class="nc-sidebar-node !min-h-7 !max-h-7 !mb-0.25 select-none group text-gray-700 !flex !items-center !mt-0 hover:(!bg-gray-200 !text-gray-900) cursor-pointer"
     :class="{
       '!pl-18 !xs:(pl-19.75)': isDefaultBase,
@@ -203,9 +202,12 @@ watch(isDropdownOpen, async () => {
     @click="onClick"
   >
     <div v-e="['a:view:open', { view: vModel.type }]" class="text-sm flex items-center w-full gap-1" data-testid="view-item">
-      <div class="flex min-w-6" :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`">
+      <div
+        v-e="['c:view:emoji-picker']"
+        class="flex min-w-6"
+        :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`"
+      >
         <LazyGeneralEmojiPicker
-          v-e="['c:view:emoji-picker']"
           class="nc-table-icon"
           :emoji="props.view?.meta?.icon"
           size="small"
diff --git a/packages/nc-gui/components/general/EmojiPicker.vue b/packages/nc-gui/components/general/EmojiPicker.vue
index 29f376b702..4c02c207e9 100644
--- a/packages/nc-gui/components/general/EmojiPicker.vue
+++ b/packages/nc-gui/components/general/EmojiPicker.vue
@@ -2,7 +2,6 @@
 import data from 'emoji-mart-vue-fast/data/apple.json'
 import 'emoji-mart-vue-fast/css/emoji-mart.css'
 import { Icon } from '@iconify/vue'
-
 import { EmojiIndex, Picker } from 'emoji-mart-vue-fast/src'
 
 const props = defineProps<{
@@ -21,6 +20,7 @@ const clearable = computed(() => {
 })
 
 const isOpen = ref(false)
+
 const emojiIndex = new EmojiIndex(data, {
   emojisToShowFilter: (emoji: any) => {
     if (Number(emoji.added_in) >= 14) {
diff --git a/packages/nc-gui/components/general/OpenLeftSidebarBtn.vue b/packages/nc-gui/components/general/OpenLeftSidebarBtn.vue
index 4c52a10fc8..777dc78984 100644
--- a/packages/nc-gui/components/general/OpenLeftSidebarBtn.vue
+++ b/packages/nc-gui/components/general/OpenLeftSidebarBtn.vue
@@ -11,29 +11,30 @@ const onClick = () => {
 </script>
 
 <template>
-  <NcTooltip
-    v-e="['c:leftSidebar:hideToggle']"
-    placement="topLeft"
-    hide-on-click
-    class="transition-all duration-150"
-    :class="{
-      'opacity-0 w-0 pointer-events-none': !isMobileMode && isLeftSidebarOpen,
-      'opacity-100 max-w-10': isMobileMode || !isLeftSidebarOpen,
-    }"
-  >
-    <template #title>
-      {{ isLeftSidebarOpen ? `${$t('title.hideSidebar')}` : `${$t('title.showSidebar')}` }}
-    </template>
-    <NcButton
-      :type="isMobileMode ? 'secondary' : 'text'"
-      :size="isMobileMode ? 'medium' : 'small'"
-      class="nc-sidebar-left-toggle-icon !text-gray-600 !hover:text-gray-800 w-8"
-      @click="onClick"
+  <div v-e="['c:leftSidebar:hideToggle']">
+    <NcTooltip
+      placement="topLeft"
+      hide-on-click
+      class="transition-all duration-150"
+      :class="{
+        'opacity-0 w-0 pointer-events-none': !isMobileMode && isLeftSidebarOpen,
+        'opacity-100 max-w-10': isMobileMode || !isLeftSidebarOpen,
+      }"
     >
-      <div class="flex items-center text-inherit">
-        <GeneralIcon v-if="isMobileMode" icon="menu" class="text-lg -mt-0.25" />
-        <GeneralIcon v-else icon="doubleRightArrow" class="duration-150 transition-all !text-lg -mt-0.25" />
-      </div>
-    </NcButton>
-  </NcTooltip>
+      <template #title>
+        {{ isLeftSidebarOpen ? `${$t('title.hideSidebar')}` : `${$t('title.showSidebar')}` }}
+      </template>
+      <NcButton
+        :type="isMobileMode ? 'secondary' : 'text'"
+        :size="isMobileMode ? 'medium' : 'small'"
+        class="nc-sidebar-left-toggle-icon !text-gray-600 !hover:text-gray-800 w-8"
+        @click="onClick"
+      >
+        <div class="flex items-center text-inherit">
+          <GeneralIcon v-if="isMobileMode" icon="menu" class="text-lg -mt-0.25" />
+          <GeneralIcon v-else icon="doubleRightArrow" class="duration-150 transition-all !text-lg -mt-0.25" />
+        </div>
+      </NcButton>
+    </NcTooltip>
+  </div>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index 169d016529..a3c0a5ec0e 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -5,7 +5,7 @@ import { Icon } from '@iconify/vue'
 import { ref, timeAgo, useExpandedFormStoreOrThrow, useGlobal, useRoles, watch } from '#imports'
 
 const props = defineProps<{
-  isLoading: boolean
+  loading: boolean
 }>()
 
 const { loadCommentsAndLogs, commentsAndLogs, saveComment: _saveComment, comment, updateComment } = useExpandedFormStoreOrThrow()
@@ -16,7 +16,7 @@ const commentsWrapperEl = ref<HTMLDivElement>()
 
 const { user, appInfo } = useGlobal()
 
-const isExpandedFormLoading = computed(() => props.isLoading)
+const isExpandedFormLoading = computed(() => props.loading)
 
 const tab = ref<'comments' | 'audits'>('comments')
 
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 17873474d6..1996160598 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -556,14 +556,15 @@ export default {
                   <NcDivider v-if="isUIAllowed('dataEdit') && !isNew" />
                   <NcMenuItem
                     v-if="isUIAllowed('dataEdit') && !isNew"
-                    v-e="['c:row-expand:delete']"
                     class="!text-red-500 !hover:bg-red-50"
                     @click="!isNew && onDeleteRowClick()"
                   >
-                    <component :is="iconMap.delete" data-testid="nc-expanded-form-delete" class="cursor-pointer nc-delete-row" />
-                    <span class="-ml-0.5">
-                      {{ $t('activity.deleteRecord') }}
-                    </span>
+                    <div v-e="['c:row-expand:delete']" data-testid="nc-expanded-form-delete" class="flex gap-2 items-center">
+                      <component :is="iconMap.delete" class="cursor-pointer nc-delete-row" />
+                      <span class="-ml-0.25">
+                        {{ $t('activity.deleteRecord') }}
+                      </span>
+                    </div>
                   </NcMenuItem>
                 </NcMenu>
               </template>
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index e1a6763edc..7235f2af4f 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -1471,15 +1471,10 @@ onKeyStroke('ArrowDown', onDown)
                   ></td>
                 </tr>
               </template>
-              <LazySmartsheetRow
-                v-for="(row, rowIndex) of dataRef"
-                v-show="!showSkeleton"
-                ref="rowRefs"
-                :key="rowIndex"
-                :row="row"
-              >
+              <LazySmartsheetRow v-for="(row, rowIndex) of dataRef" ref="rowRefs" :key="rowIndex" :row="row">
                 <template #default="{ state }">
                   <tr
+                    v-show="!showSkeleton"
                     class="nc-grid-row !xs:h-14"
                     :style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
                     :data-testid="`grid-row-${rowIndex}`"
@@ -1658,50 +1653,53 @@ onKeyStroke('ArrowDown', onDown)
           <NcMenu class="!rounded !py-0" @click="contextMenu = false">
             <NcMenuItem
               v-if="isEeUI && !contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)"
-              v-e="['a:row:update-bulk']"
               @click="emits('bulkUpdateDlg')"
             >
-              <component :is="iconMap.edit" />
-
-              {{ $t('title.updateSelectedRows') }}
+              <div v-e="['a:row:update-bulk']" class="flex gap-2 items-center">
+                <component :is="iconMap.edit" />
+                {{ $t('title.updateSelectedRows') }}
+              </div>
             </NcMenuItem>
 
             <NcMenuItem
               v-if="!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)"
-              v-e="['a:row:delete-bulk']"
               class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
               data-testid="nc-delete-row"
               @click="deleteSelectedRows"
             >
-              <component :is="iconMap.delete" />
-              <!-- Delete Selected Rows -->
-              {{ $t('activity.deleteSelectedRow') }}
+              <div v-e="['a:row:delete-bulk']" class="flex gap-2 items-center">
+                <component :is="iconMap.delete" />
+                <!-- Delete Selected Rows -->
+                {{ $t('activity.deleteSelectedRow') }}
+              </div>
             </NcMenuItem>
 
-            <!-- <NcMenuItem -->
-            <!-- v-if="contextMenuTarget && selectedRange.isSingleCell()" -->
-            <!-- v-e="['a:row:insert']" -->
-            <!-- class="nc-base-menu-item" -->
-            <!-- @click="addEmptyRow(contextMenuTarget.row + 1)" -->
-            <!-- > -->
-            <!-- <GeneralIcon icon="plus" /> -->
-            <!-- Insert New Row -->
-            <!-- {{ $t('activity.insertRow') }} -->
-            <!-- </NcMenuItem> -->
+            <!--            <NcMenuItem -->
+            <!--              v-if="contextMenuTarget && selectedRange.isSingleCell()" -->
+            <!--              class="nc-base-menu-item" -->
+            <!--              @click="addEmptyRow(contextMenuTarget.row + 1)" -->
+            <!--            > -->
+            <!--              <div v-e="['a:row:insert']" class="flex gap-2 items-center"> -->
+            <!--                <GeneralIcon icon="plus" /> -->
+            <!--                Insert New Row -->
+            <!--                {{ $t('activity.insertRow') }} -->
+            <!--              </div> -->
+            <!--            </NcMenuItem> -->
 
             <NcMenuItem
               v-if="contextMenuTarget"
-              v-e="['a:row:copy']"
               class="nc-base-menu-item"
               data-testid="context-menu-item-copy"
               @click="copyValue(contextMenuTarget)"
             >
-              <GeneralIcon icon="copy" />
-              <!-- Copy -->
-              {{ $t('general.copy') }}
+              <div v-e="['a:row:copy']" class="flex gap-2 items-center">
+                <GeneralIcon icon="copy" />
+                <!-- Copy -->
+                {{ $t('general.copy') }}
+              </div>
             </NcMenuItem>
 
-            <!--            Clear cell -->
+            <!-- Clear cell -->
             <NcMenuItem
               v-if="
                 contextMenuTarget &&
@@ -1709,58 +1707,64 @@ onKeyStroke('ArrowDown', onDown)
                 selectedRange.isSingleCell() &&
                 (isLinksOrLTAR(fields[contextMenuTarget.col]) || !isVirtualCol(fields[contextMenuTarget.col]))
               "
-              v-e="['a:row:clear']"
               class="nc-base-menu-item"
               @click="clearCell(contextMenuTarget)"
             >
-              <GeneralIcon icon="close" />
-              {{ $t('general.clear') }}
+              <div v-e="['a:row:clear']" class="flex gap-2 items-center">
+                <GeneralIcon icon="close" />
+                {{ $t('general.clear') }}
+              </div>
             </NcMenuItem>
 
-            <!--            Clear cell -->
+            <!-- Clear cell -->
             <NcMenuItem
               v-else-if="contextMenuTarget && hasEditPermission"
-              v-e="['a:row:clear-range']"
               class="nc-base-menu-item"
               @click="clearSelectedRangeOfCells()"
             >
-              <GeneralIcon icon="closeBox" class="text-gray-500" />
-
-              {{ $t('general.clear') }}
+              <div v-e="['a:row:clear-range']" class="flex gap-2 items-center">
+                <GeneralIcon icon="closeBox" class="text-gray-500" />
+                {{ $t('general.clear') }}
+              </div>
             </NcMenuItem>
-            <template
+
+            <NcDivider />
+            <NcMenuItem
               v-if="contextMenuTarget && !isLocked && selectedRange.isSingleCell() && isUIAllowed('commentEdit') && !isMobileMode"
+              class="nc-base-menu-item"
+              @click="commentRow(contextMenuTarget.row)"
             >
-              <NcDivider />
-              <NcMenuItem v-e="['a:row:comment']" class="nc-base-menu-item" @click="commentRow(contextMenuTarget.row)">
+              <div v-e="['a:row:comment']" class="flex gap-2 items-center">
                 <MdiMessageOutline class="h-4 w-4" />
 
                 {{ $t('general.comment') }}
-              </NcMenuItem>
-            </template>
+              </div>
+            </NcMenuItem>
+
             <template v-if="hasEditPermission">
               <NcDivider v-if="!(!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected))" />
               <NcMenuItem
                 v-if="contextMenuTarget && (selectedRange.isSingleCell() || selectedRange.isSingleRow())"
-                v-e="['a:row:delete']"
                 class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
                 @click="confirmDeleteRow(contextMenuTarget.row)"
               >
-                <GeneralIcon icon="delete" />
-                <!-- Delete Row -->
-                {{ $t('activity.deleteRow') }}
+                <div v-e="['a:row:delete']" class="flex gap-2 items-center">
+                  <GeneralIcon icon="delete" />
+                  <!-- Delete Row -->
+                  {{ $t('activity.deleteRow') }}
+                </div>
               </NcMenuItem>
-              <div v-else-if="contextMenuTarget && deleteRangeOfRows">
-                <NcMenuItem
-                  v-e="['a:row:delete']"
-                  class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
-                  @click="deleteSelectedRangeOfRows"
-                >
+              <NcMenuItem
+                v-else-if="contextMenuTarget && deleteRangeOfRows"
+                class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
+                @click="deleteSelectedRangeOfRows"
+              >
+                <div v-e="['a:row:delete']" class="flex gap-2 items-center">
                   <GeneralIcon icon="delete" class="text-gray-500 text-red-600" />
                   <!-- Delete Rows -->
                   {{ $t('activity.deleteRows') }}
-                </NcMenuItem>
-              </div>
+                </div>
+              </NcMenuItem>
             </template>
           </NcMenu>
         </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index 33812e84d0..87cdf0642d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -168,11 +168,11 @@ function openDeleteDialog() {
   <NcDropdown
     v-else
     v-model:visible="isDropdownOpen"
-    v-e="['c:breadcrumb:view-actions']"
     class="!xs:pointer-events-none nc-actions-menu-btn nc-view-context-btn"
     overlay-class-name="nc-dropdown-actions-menu"
   >
     <div
+      v-e="['c:breadcrumb:view-actions']"
       class="truncate nc-active-view-title !hover:(bg-gray-100 text-gray-800) ml-0.25 pl-1 pr-0.25 rounded-md py-1 cursor-pointer"
       :class="{
         'max-w-2/5': !isSharedBase && !isMobileMode && activeView?.is_default,