diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index 3b95868d8d..3b17503d6b 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ColumnInj } from '#imports'
-import { EditModeInj } from '~/context'
+import { ColumnInj, EditModeInj, computed, inject, ref, watch } from '#imports'
 
 interface Props {
-  modelValue: string | null | undefined
+  modelValue?: string | null
 }
 
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const columnMeta = inject(ColumnInj, null)
+const columnMeta = inject(ColumnInj, null)!
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 let isDateInvalid = $ref(false)
 
@@ -43,7 +42,7 @@ const localState = $computed({
     }
   },
 })
-const open = ref(false)
+const open = ref<boolean>(false)
 
 const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
@@ -55,6 +54,8 @@ watch(
   },
   { flush: 'post' },
 )
+
+const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : editEnabled.value ? 'Select date' : ''))
 </script>
 
 <template>
@@ -63,7 +64,7 @@ watch(
     :bordered="false"
     class="!w-full px-1"
     :format="dateFormat"
-    :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''"
+    :placeholder="placeholder"
     :allow-clear="!editEnabled"
     :input-read-only="true"
     :dropdown-class-name="randomClass"
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
index 940fe3a4e9..039331df24 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
 import dayjs from 'dayjs'
-import { EditModeInj } from '~/context'
+import { EditModeInj, computed, inject, onClickOutside, ref, watch } from '#imports'
 
 interface Props {
-  modelValue: number | string | null | undefined
+  modelValue?: number | string | null
 }
 
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 let isYearInvalid = $ref(false)
 
@@ -41,7 +40,7 @@ const localState = $computed({
   },
 })
 
-const open = ref(false)
+const open = ref<boolean>(false)
 
 const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
@@ -53,6 +52,8 @@ watch(
   },
   { flush: 'post' },
 )
+
+const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : editEnabled.value ? 'Select year' : ''))
 </script>
 
 <template>
@@ -61,7 +62,7 @@ watch(
     picker="year"
     :bordered="false"
     class="!w-full px-1"
-    :placeholder="isYearInvalid ? 'Invalid year' : !readOnlyMode ? 'Select year' : ''"
+    :placeholder="placeholder"
     :allow-clear="!editEnabled"
     :input-read-only="true"
     :open="editEnabled ? false : open"
@@ -72,5 +73,3 @@ watch(
     <template #suffixIcon></template>
   </a-date-picker>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/general/ColorPicker.vue b/packages/nc-gui-v2/components/general/ColorPicker.vue
index 7511b0f9a9..d0d810a522 100644
--- a/packages/nc-gui-v2/components/general/ColorPicker.vue
+++ b/packages/nc-gui-v2/components/general/ColorPicker.vue
@@ -4,7 +4,7 @@ import { enumColor } from '@/utils'
 import { computed, ref, watch } from '#imports'
 
 interface Props {
-  modelValue: string | any
+  modelValue?: string | any
   colors?: string[]
   rowSize?: number
   advanced?: boolean
@@ -28,18 +28,18 @@ const vModel = computed({
   },
 })
 
-const picked = ref(props.modelValue || enumColor.light[0])
+const picked = ref<string | Record<string, any>>(props.modelValue || enumColor.light[0])
 
-const selectColor = (color: Record<string, any>) => {
-  picked.value = color.hex ? color.hex : color
-  vModel.value = color.hex ? color.hex : color
+const selectColor = (color: string | Record<string, any>) => {
+  picked.value = typeof color === 'string' ? color : color.hex ? color.hex : color
+  vModel.value = typeof color === 'string' ? color : color.hex ? color.hex : color
 }
 
 const compare = (colorA: string, colorB: string) => colorA.toLowerCase() === colorB.toLowerCase()
 
 watch(picked, (n, _o) => {
   if (!props.pickButton) {
-    vModel.value = n.hex ? n.hex : n
+    vModel.value = typeof n === 'string' ? n : n.hex ? n.hex : n
   }
 })
 </script>
@@ -48,7 +48,7 @@ watch(picked, (n, _o) => {
   <div class="color-picker">
     <div v-for="colId in Math.ceil(props.colors.length / props.rowSize)" :key="colId" class="color-picker-row">
       <button
-        v-for="(color, i) in colors.slice((colId - 1) * rowSize, colId * rowSize)"
+        v-for="(color, i) of colors.slice((colId - 1) * rowSize, colId * rowSize)"
         :key="`color-${colId}-${i}`"
         class="color-selector"
         :class="compare(picked, color) ? 'selected' : ''"
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index fe2ac2095b..13f9a376c5 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -1,18 +1,24 @@
 <script lang="ts" setup>
 import * as XLSX from 'xlsx'
-import { ExportTypes } from 'nocodb-sdk'
+// todo: export types is missing EXCEL
+// import { ExportTypes } from 'nocodb-sdk'
 import FileSaver from 'file-saver'
 import { message } from 'ant-design-vue'
-import { useNuxtApp } from '#app'
-import { useProject } from '#imports'
-import { ActiveViewInj, MetaInj } from '~/context'
-import { extractSdkResponseErrorMsg } from '~/utils'
-import MdiFlashIcon from '~icons/mdi/flash-outline'
-import MdiMenuDownIcon from '~icons/mdi/menu-down'
-import MdiDownloadIcon from '~icons/mdi/download-outline'
-import MdiUploadIcon from '~icons/mdi/upload-outline'
-import MdiHookIcon from '~icons/mdi/hook'
-import MdiViewListIcon from '~icons/mdi/view-list-outline'
+import {
+  ActiveViewInj,
+  MetaInj,
+  extractSdkResponseErrorMsg,
+  inject,
+  ref,
+  useNuxtApp,
+  useProject,
+  useUIPermission,
+} from '#imports'
+
+enum ExportTypes {
+  EXCEL = 'excel',
+  CSV = 'csv',
+}
 
 const sharedViewListDlg = ref(false)
 
@@ -22,14 +28,6 @@ const isView = false
 
 // TODO: pending for shared view
 
-// interface Props {
-//   publicViewId?: string
-//   queryParams?: Record<string, any>
-//   reqPayload?: Record<string, any>
-// }
-
-// const { publicViewId, queryParams, reqPayload } = defineProps<Props>()
-
 const { project } = useProject()
 
 const { $api } = useNuxtApp()
@@ -44,7 +42,7 @@ const quickImportDialog = ref(false)
 
 const { isUIAllowed } = useUIPermission()
 
-const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
+const exportFile = async (exportType: ExportTypes) => {
   let offset = 0
   let c = 1
   const responseType = exportType === ExportTypes.EXCEL ? 'base64' : 'blob'
@@ -114,52 +112,59 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
     <a-dropdown>
       <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-1 align-center">
-          <MdiFlashIcon />
+          <MdiFlashOutline />
+
           <!-- More -->
           <span class="!text-sm font-weight-medium">{{ $t('general.more') }}</span>
-          <MdiMenuDownIcon class="text-grey" />
+
+          <MdiMenuDown class="text-grey" />
         </div>
       </a-button>
+
       <template #overlay>
         <div class="bg-white shadow-lg !border">
           <div>
             <div v-t="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
-              <MdiDownloadIcon />
+              <MdiDownloadOutline />
               <!-- Download as CSV -->
               {{ $t('activity.downloadCSV') }}
             </div>
+
             <div v-t="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
-              <MdiDownloadIcon />
+              <MdiDownloadOutline />
               <!-- Download as XLSX -->
               {{ $t('activity.downloadExcel') }}
             </div>
+
             <div
               v-if="isUIAllowed('csvImport') && !isView"
               v-t="['a:actions:upload-csv']"
               class="nc-menu-item"
               @click="quickImportDialog = true"
             >
-              <MdiUploadIcon />
+              <MdiUploadOutline />
               <!-- Upload CSV -->
               {{ $t('activity.uploadCSV') }}
             </div>
+
             <div
               v-if="isUIAllowed('SharedViewList') && !isView"
               v-t="['a:actions:shared-view-list']"
               class="nc-menu-item"
               @click="sharedViewListDlg = true"
             >
-              <MdiViewListIcon />
+              <MdiViewListOutline />
               <!-- Shared View List -->
               {{ $t('activity.listSharedView') }}
             </div>
+
             <div
               v-if="isUIAllowed('webhook') && !isView"
               v-t="['c:actions:webhook']"
               class="nc-menu-item"
               @click="showWebhookDrawer = true"
             >
-              <MdiHookIcon />
+              <MdiHook />
               {{ $t('objects.webhooks') }}
             </div>
           </div>
@@ -168,6 +173,7 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
     </a-dropdown>
 
     <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-only="true" />
+
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
     <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">