diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
index 26093e5c08..78beeae8bd 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
@@ -2,9 +2,7 @@
 import type { SelectProps } from 'ant-design-vue'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { MetaInj, computed } from '#imports'
-import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
-import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
+import { MetaInj, computed, inject, ref, resolveComponent } from '#imports'
 
 interface Props {
   modelValue?: string
@@ -38,9 +36,12 @@ const options = computed<SelectProps['options']>(() =>
     .map((c: ColumnType) => ({
       value: c.id,
       label: c.title,
-      icon: h(isVirtualCol(c) ? VirtualCellIcon : CellIcon, {
-        columnMeta: c,
-      }),
+      icon: h(
+        isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'),
+        {
+          columnMeta: c,
+        },
+      ),
       c,
     })),
 )
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index c64aa19854..f7b7728094 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -13,12 +13,11 @@ import {
   computed,
   inject,
   ref,
+  resolveComponent,
   useNuxtApp,
   useViewColumns,
   watch,
 } from '#imports'
-import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
-import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
 
 const meta = inject(MetaInj, ref())
 
@@ -89,9 +88,9 @@ const coverImageColumnId = computed({
   get: () =>
     activeView.value?.type === ViewTypes.GALLERY ? (activeView.value?.view as GalleryType).fk_cover_image_col_id : undefined,
   set: async (val) => {
-    if (val && activeView.value.type === ViewTypes.GALLERY && activeView.value.id && activeView.value.view) {
-      await $api.dbView.galleryUpdate(activeView.value.id, {
-        ...activeView.value.view,
+    if (val && activeView.value?.type === ViewTypes.GALLERY && activeView.value?.id && activeView.value?.view) {
+      await $api.dbView.galleryUpdate(activeView.value?.id, {
+        ...activeView.value?.view,
         fk_cover_image_col_id: val,
       })
       ;(activeView.value?.view as GalleryType).fk_cover_image_col_id = val
@@ -112,7 +111,7 @@ const coverOptions = computed<SelectProps['options']>(() => {
 })
 
 const getIcon = (c: ColumnType) =>
-  h(isVirtualCol(c) ? VirtualCellIcon : CellIcon, {
+  h(isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), {
     columnMeta: c,
   })
 </script>