diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 24452b4569..3bf9cc04bb 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -14,7 +14,7 @@ body,
 #__nuxt,
 .ant-layout,
 main {
-  @apply m-0 h-full w-full bg-white dark:(bg-black text-white);
+  @apply m-0 h-full w-full bg-white;
 }
 
 html {
@@ -36,7 +36,7 @@ nav .v-list {
 }
 
 a {
-  @apply prose text-primary underline hover:opacity-75 dark:(text-secondary) hover:(opacity-75);
+  @apply prose text-primary underline hover:opacity-75 dark:(text-secondary);
 }
 
 h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
@@ -194,7 +194,7 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
 }
 
 .scaling-btn {
-  @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
+  @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white;
 
   &::after {
     @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index c033344d42..c738bd809c 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -22,6 +22,7 @@ declare module '@vue/runtime-core' {
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    ADropdownButton: typeof import('ant-design-vue/es')['DropdownButton']
     AEmpty: typeof import('ant-design-vue/es')['Empty']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
@@ -64,6 +65,8 @@ declare module '@vue/runtime-core' {
     ATypography: typeof import('ant-design-vue/es')['Typography']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
+    BiFiletypeJson: typeof import('~icons/bi/filetype-json')['default']
+    BiFiletypeXlsx: typeof import('~icons/bi/filetype-xlsx')['default']
     CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
     CilFullscreenExit: typeof import('~icons/cil/fullscreen-exit')['default']
     ClaritySuccessLine: typeof import('~icons/clarity/success-line')['default']
@@ -105,11 +108,14 @@ declare module '@vue/runtime-core' {
     MdiClose: typeof import('~icons/mdi/close')['default']
     MdiCloseBox: typeof import('~icons/mdi/close-box')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
+    MdiCloseCircleOutline: typeof import('~icons/mdi/close-circle-outline')['default']
     MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
     MdiCodeJson: typeof import('~icons/mdi/code-json')['default']
     MdiCog: typeof import('~icons/mdi/cog')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
+    MdiCurrencyUsd: typeof import('~icons/mdi/currency-usd')['default']
+    MdiDatabase: typeof import('~icons/mdi/database')['default']
     MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
     MdiDelete: typeof import('~icons/mdi/delete')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
@@ -129,6 +135,9 @@ declare module '@vue/runtime-core' {
     MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
     MdiFileEyeOutline: typeof import('~icons/mdi/file-eye-outline')['default']
+    MdiFilePlusOutline: typeof import('~icons/mdi/file-plus-outline')['default']
+    MdiFileUploadOutline: typeof import('~icons/mdi/file-upload-outline')['default']
+    MdiFilterOutline: typeof import('~icons/mdi/filter-outline')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
     MdiFlashOutline: typeof import('~icons/mdi/flash-outline')['default']
     MdiFolder: typeof import('~icons/mdi/folder')['default']
@@ -143,18 +152,23 @@ declare module '@vue/runtime-core' {
     MdiKeyPlus: typeof import('~icons/mdi/key-plus')['default']
     MdiKeyStar: typeof import('~icons/mdi/key-star')['default']
     MdiLink: typeof import('~icons/mdi/link')['default']
+    MdiLinkVariant: typeof import('~icons/mdi/link-variant')['default']
     MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
+    MdiLoading: typeof import('~icons/mdi/loading')['default']
     MdiLogin: typeof import('~icons/mdi/login')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']
     MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
     MdiMicrosoftTeams: typeof import('~icons/mdi/microsoft-teams')['default']
+    MdiMinusCircleOutline: typeof import('~icons/mdi/minus-circle-outline')['default']
     MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
     MdiNotebookCheckOutline: typeof import('~icons/mdi/notebook-check-outline')['default']
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
+    MdiPencil: typeof import('~icons/mdi/pencil')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusBoxOutline: typeof import('~icons/mdi/plus-box-outline')['default']
+    MdiPlusCircleOutline: typeof import('~icons/mdi/plus-circle-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiPlusRoundedOutline: typeof import('~icons/mdi/plus-rounded-outline')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
@@ -180,6 +194,7 @@ declare module '@vue/runtime-core' {
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
+    PhFileCsv: typeof import('~icons/ph/file-csv')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index d7999e4251..c23e290851 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -139,7 +139,7 @@ const activeTable = computed(() => {
 
 <template>
   <div class="nc-treeview-container flex flex-col">
-    <div class="px-6 py-[9px] border-b-1 nc-filter-input">
+    <div class="px-6 py-[8.5px] border-b-1 nc-filter-input">
       <div class="flex items-center bg-gray-50 rounded relative">
         <a-input
           v-model:value="filterQuery"
diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index 10969f45a1..a62bd57e37 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -1,12 +1,20 @@
 <script setup lang="ts">
-import io from 'socket.io-client'
 import type { Socket } from 'socket.io-client'
-import { Form, message } from 'ant-design-vue'
+import io from 'socket.io-client'
 import type { Card as AntCard } from 'ant-design-vue'
-import { extractSdkResponseErrorMsg, fieldRequiredValidator } from '~/utils'
-import MdiCloseCircleOutlineIcon from '~icons/mdi/close-circle-outline'
-import MdiCurrencyUsdIcon from '~icons/mdi/currency-usd'
-import MdiLoadingIcon from '~icons/mdi/loading'
+import { Form, message } from 'ant-design-vue'
+import {
+  computed,
+  extractSdkResponseErrorMsg,
+  fieldRequiredValidator,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useNuxtApp,
+  useProject,
+  watch,
+} from '#imports'
 
 interface Props {
   modelValue: boolean
@@ -54,29 +62,21 @@ const syncSource = ref({
   },
 })
 
-const validators = computed(() => {
-  return {
-    'details.apiKey': [fieldRequiredValidator],
-    'details.syncSourceUrlOrId': [fieldRequiredValidator],
-  }
-})
+const validators = computed(() => ({
+  'details.apiKey': [fieldRequiredValidator],
+  'details.syncSourceUrlOrId': [fieldRequiredValidator],
+}))
 
 const dialogShow = computed({
-  get() {
-    return modelValue
-  },
-  set(v) {
-    emit('update:modelValue', v)
-  },
+  get: () => modelValue,
+  set: (v) => emit('update:modelValue', v),
 })
 
 const useForm = Form.useForm
 
 const { validateInfos } = useForm(syncSource, validators)
 
-const disableImportButton = computed(() => {
-  return !syncSource.value.details.apiKey || !syncSource.value.details.syncSourceUrlOrId
-})
+const disableImportButton = computed(() => !syncSource.value.details.apiKey || !syncSource.value.details.syncSourceUrlOrId)
 
 async function saveAndSync() {
   await createOrUpdate()
@@ -86,6 +86,7 @@ async function saveAndSync() {
 async function createOrUpdate() {
   try {
     const { id, ...payload } = syncSource.value
+
     if (id !== '') {
       await $fetch(`/api/v1/db/meta/syncs/${id}`, {
         baseURL,
@@ -94,13 +95,12 @@ async function createOrUpdate() {
         body: payload,
       })
     } else {
-      const data: any = await $fetch(`/api/v1/db/meta/projects/${project.value.id}/syncs`, {
+      syncSource.value = await $fetch(`/api/v1/db/meta/projects/${project.value.id}/syncs`, {
         baseURL,
         method: 'POST',
         headers: { 'xc-auth': $state.token.value as string },
         body: payload,
       })
-      syncSource.value = data
     }
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
@@ -113,7 +113,9 @@ async function loadSyncSrc() {
     method: 'GET',
     headers: { 'xc-auth': $state.token.value as string },
   })
+
   const { list: srcs } = data
+
   if (srcs && srcs[0]) {
     srcs[0].details = srcs[0].details || {}
     syncSource.value = migrateSync(srcs[0])
@@ -171,6 +173,7 @@ function migrateSync(src: any) {
     src.details.options.syncViews = src.syncViews
     delete src.syncViews
   }
+
   return src
 }
 
@@ -188,6 +191,7 @@ onMounted(async () => {
   socket = io(new URL(baseURL, window.location.href.split(/[?#]/)[0]).href, {
     extraHeaders: { 'xc-auth': $state.token.value as string },
   })
+
   socket.on('connect_error', () => {
     socket?.disconnect()
     socket = null
@@ -203,7 +207,7 @@ onMounted(async () => {
     progress.value.push(d)
 
     // FIXME: this doesn't work
-    nextTick(() => {
+    await nextTick(() => {
       ;(logRef.value?.$el as HTMLDivElement).scrollTo()
     })
 
@@ -213,6 +217,7 @@ onMounted(async () => {
       // TODO: add tab of the first table
     }
   })
+
   await loadSyncSrc()
 })
 
@@ -224,32 +229,14 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-modal
-    v-model:visible="dialogShow"
-    width="max(30vw, 600px)"
-    :mask-closable="false"
-    class="pa-2"
-    @keydown.esc="dialogShow = false"
-  >
-    <template #footer>
-      <div v-if="step === 1">
-        <a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
-        <a-button
-          key="submit"
-          v-t="['c:sync-airtable:save-and-sync']"
-          type="primary"
-          class="nc-btn-airtable-import"
-          :disabled="disableImportButton"
-          @click="saveAndSync"
-          >Import
-        </a-button>
-      </div>
-    </template>
-    <span class="ml-5 mt-5 prose-xl font-weight-bold" type="secondary" :level="5">QUICK IMPORT - AIRTABLE</span>
-    <div class="ml-5 mr-5">
+  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" class="pa-2" @keydown.esc="dialogShow = false">
+    <div class="px-5">
+      <div class="mt-5 prose-xl font-weight-bold">QUICK IMPORT - AIRTABLE</div>
+
       <div v-if="step === 1">
         <div class="mb-4">
           <span class="mr-3 pt-2 text-gray-500 text-xs">Credentials</span>
+
           <a
             href="https://docs.nocodb.com/setup-and-usages/import-airtable-to-sql-database-within-a-minute-for-free/#get-airtable-credentials"
             class="prose-sm underline text-grey text-xs"
@@ -257,6 +244,7 @@ onBeforeUnmount(() => {
             >Where to find this?
           </a>
         </div>
+
         <a-form ref="form" :model="syncSource" name="quick-import-airtable-form" layout="horizontal" class="ma-0">
           <a-form-item v-bind="validateInfos['details.apiKey']">
             <a-input-password
@@ -266,6 +254,7 @@ onBeforeUnmount(() => {
               size="large"
             />
           </a-form-item>
+
           <a-form-item v-bind="validateInfos['details.syncSourceUrlOrId']">
             <a-input
               v-model:value="syncSource.details.syncSourceUrlOrId"
@@ -274,23 +263,31 @@ onBeforeUnmount(() => {
               size="large"
             />
           </a-form-item>
-          <span class="prose-lg self-center my-4 text-gray-500">Advanced Settings</span>
+
+          <div class="prose-lg self-center my-4 text-gray-500">Advanced Settings</div>
+
           <a-divider class="mt-2 mb-5" />
+
           <div class="mt-0 my-2">
             <a-checkbox v-model:checked="syncSource.details.options.syncData">Import Data</a-checkbox>
           </div>
+
           <div class="my-2">
             <a-checkbox v-model:checked="syncSource.details.options.syncViews">Import Secondary Views</a-checkbox>
           </div>
+
           <div class="my-2">
             <a-checkbox v-model:checked="syncSource.details.options.syncRollup">Import Rollup Columns</a-checkbox>
           </div>
+
           <div class="my-2">
             <a-checkbox v-model:checked="syncSource.details.options.syncLookup">Import Lookup Columns</a-checkbox>
           </div>
+
           <div class="my-2">
             <a-checkbox v-model:checked="syncSource.details.options.syncAttachment">Import Attachment Columns</a-checkbox>
           </div>
+
           <a-tooltip placement="top">
             <template #title>
               <span>Coming Soon!</span>
@@ -298,29 +295,39 @@ onBeforeUnmount(() => {
             <a-checkbox v-model:checked="syncSource.details.options.syncFormula" disabled>Import Formula Columns</a-checkbox>
           </a-tooltip>
         </a-form>
+
         <a-divider />
+
         <div>
           <a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank">Questions / Help - Reach out here</a>
+
           <br />
+
           <div>
             This feature is currently in beta and more information can be found
             <a class="prose-sm" href="https://github.com/nocodb/nocodb/discussions/2122" target="_blank">here</a>.
           </div>
         </div>
       </div>
+
       <div v-if="step === 2">
         <div class="mb-4 prose-xl font-bold">Logs</div>
-        <a-card ref="logRef" body-style="background-color: #000000; height:400px; overflow: auto;">
+
+        <a-card ref="logRef" :body-style="{ backgroundColor: '#000000', height: '400px', overflow: 'auto' }">
           <div v-for="({ msg, status }, i) in progress" :key="i">
             <div v-if="status === 'FAILED'" class="flex items-center">
-              <MdiCloseCircleOutlineIcon class="text-red-500" />
+              <MdiCloseCircleOutline class="text-red-500" />
+
               <span class="text-red-500 ml-2">{{ msg }}</span>
             </div>
+
             <div v-else class="flex items-center">
-              <MdiCurrencyUsdIcon class="text-green-500" />
+              <MdiCurrencyUsd class="text-green-500" />
+
               <span class="text-green-500 ml-2">{{ msg }}</span>
             </div>
           </div>
+
           <div
             v-if="
               !progress ||
@@ -329,18 +336,34 @@ onBeforeUnmount(() => {
             "
             class="flex items-center"
           >
-            <MdiLoadingIcon class="text-green-500 animate-spin" />
+            <MdiLoading class="text-green-500 animate-spin" />
             <span class="text-green-500 ml-2"> Importing</span>
           </div>
         </a-card>
+
         <div class="flex justify-center items-center">
-          <a-button v-if="showGoToDashboardButton" class="mt-4" size="large" @click="dialogShow = false"
-            >Go to Dashboard</a-button
-          >
+          <a-button v-if="showGoToDashboardButton" class="mt-4" size="large" @click="dialogShow = false">
+            Go to Dashboard
+          </a-button>
         </div>
       </div>
     </div>
+
+    <template #footer>
+      <div v-if="step === 1">
+        <a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
+
+        <a-button
+          key="submit"
+          v-t="['c:sync-airtable:save-and-sync']"
+          type="primary"
+          class="nc-btn-airtable-import"
+          :disabled="disableImportButton"
+          @click="saveAndSync"
+        >
+          Import
+        </a-button>
+      </div>
+    </template>
   </a-modal>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index 3465bcf0c7..719e8f8070 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -1,24 +1,32 @@
 <script setup lang="ts">
 import { Form, message } from 'ant-design-vue'
 import type { TableType } from 'nocodb-sdk'
-import type { UploadChangeParam } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import MdiFileIcon from '~icons/mdi/file-plus-outline'
-import MdiFileUploadOutlineIcon from '~icons/mdi/file-upload-outline'
-import MdiLinkVariantIcon from '~icons/mdi/link-variant'
-import MdiCodeJSONIcon from '~icons/mdi/code-json'
-import { fieldRequiredValidator, importCsvUrlValidator, importExcelUrlValidator, importUrlValidator } from '~/utils/validation'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { ExcelTemplateAdapter, ExcelUrlTemplateAdapter, JSONTemplateAdapter, JSONUrlTemplateAdapter } from '~/utils/parsers'
-import { useProject } from '#imports'
+import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
+import {
+  ExcelTemplateAdapter,
+  ExcelUrlTemplateAdapter,
+  JSONTemplateAdapter,
+  JSONUrlTemplateAdapter,
+  computed,
+  extractSdkResponseErrorMsg,
+  fieldRequiredValidator,
+  importCsvUrlValidator,
+  importExcelUrlValidator,
+  importUrlValidator,
+  reactive,
+  ref,
+  useI18n,
+  useProject,
+  useVModel,
+} from '#imports'
 
 interface Props {
   modelValue: boolean
   importType: 'csv' | 'json' | 'excel'
-  importOnly: boolean
+  importOnly?: boolean
 }
 
-const { importType, importOnly, ...rest } = defineProps<Props>()
+const { importType, importOnly = false, ...rest } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -45,7 +53,7 @@ const templateEditorModal = ref(false)
 const useForm = Form.useForm
 
 const importState = reactive({
-  fileList: [] as Record<string, any>,
+  fileList: [] as (UploadFile & { data: string | ArrayBuffer })[],
   url: '',
   jsonEditor: {},
   parserConfig: {
@@ -61,12 +69,10 @@ const isImportTypeCsv = computed(() => importType === 'csv')
 
 const IsImportTypeExcel = computed(() => importType === 'excel')
 
-const validators = computed(() => {
-  return {
-    url: [fieldRequiredValidator, importUrlValidator, isImportTypeCsv.value ? importCsvUrlValidator : importExcelUrlValidator],
-    maxRowsToParse: [fieldRequiredValidator],
-  }
-})
+const validators = computed(() => ({
+  url: [fieldRequiredValidator, importUrlValidator, isImportTypeCsv.value ? importCsvUrlValidator : importExcelUrlValidator],
+  maxRowsToParse: [fieldRequiredValidator],
+}))
 
 const { validate, validateInfos } = useForm(importState, validators)
 
@@ -104,15 +110,14 @@ const disablePreImportButton = computed(() => {
     return !(importState.fileList.length > 0)
   } else if (activeKey.value === 'urlTab') {
     if (!validateInfos.url.validateStatus) return true
+
     return validateInfos.url.validateStatus === 'error'
   } else if (activeKey.value === 'jsonEditorTab') {
     return !jsonEditorRef.value?.isValid
   }
 })
 
-const disableImportButton = computed(() => {
-  return !templateEditorRef.value?.isValid
-})
+const disableImportButton = computed(() => !templateEditorRef.value?.isValid)
 
 const disableFormatJsonButton = computed(() => !jsonEditorRef.value?.isValid)
 
@@ -120,16 +125,19 @@ const modalWidth = computed(() => {
   if (importType === 'excel' && templateEditorModal.value) {
     return 'max(90vw, 600px)'
   }
+
   return 'max(60vw, 600px)'
 })
 
 async function handlePreImport() {
   loading.value = true
+
   if (activeKey.value === 'uploadTab') {
     await parseAndExtractData(importState.fileList[0].data, importState.fileList[0].name)
   } else if (activeKey.value === 'urlTab') {
     try {
       await validate()
+
       await parseAndExtractData(importState.url, '')
     } catch (e: any) {
       message.error(await extractSdkResponseErrorMsg(e))
@@ -137,44 +145,53 @@ async function handlePreImport() {
   } else if (activeKey.value === 'jsonEditorTab') {
     await parseAndExtractData(JSON.stringify(importState.jsonEditor), '')
   }
+
   loading.value = false
 }
 
 async function handleImport() {
   try {
     loading.value = true
+
     await templateEditorRef.value.importTemplate()
   } catch (e: any) {
     return message.error(await extractSdkResponseErrorMsg(e))
   } finally {
     loading.value = false
   }
+
   dialogShow.value = false
 }
 
-async function parseAndExtractData(val: any, name: string) {
+async function parseAndExtractData(val: string | ArrayBuffer, name: string) {
   try {
     templateData.value = null
     importData.value = null
     importColumns.value = []
-    const templateGenerator: any = getAdapter(name, val)
+
+    const templateGenerator = getAdapter(name, val)
+
     if (!templateGenerator) {
       message.error('Template Generator cannot be found!')
       return
     }
+
     await templateGenerator.init()
+
     templateGenerator.parse()
     templateData.value = templateGenerator.getTemplate()
     templateData.value.tables[0].table_name = populateUniqueTableName()
     importData.value = templateGenerator.getData()
+
     if (importOnly) importColumns.value = templateGenerator.getColumns()
+
     templateEditorModal.value = true
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
-function rejectDrop(fileList: any[]) {
+function rejectDrop(fileList: UploadFile[]) {
   fileList.map((file) => {
     return message.error(`Failed to upload file ${file.name}`)
   })
@@ -182,16 +199,31 @@ function rejectDrop(fileList: any[]) {
 
 function handleChange(info: UploadChangeParam) {
   const status = info.file.status
-  if (status !== 'uploading') {
-    const reader: any = new FileReader()
-    reader.onload = (e: any) => {
-      const target: any = importState.fileList.find((f: any) => f?.uid === info.file.uid)
-      if (target) {
-        target.data = e.target.result
+
+  if (status !== 'uploading' && status !== 'removed') {
+    const reader = new FileReader()
+
+    reader.onload = (e: ProgressEvent<FileReader>) => {
+      const target = importState.fileList.find((f) => f.uid === info.file.uid)
+
+      if (e.target && e.target.result) {
+        /** if the file was pushed into the list by `<a-upload-dragger>` we just add the data to the file */
+        if (target) {
+          target.data = e.target.result
+        } else if (!target) {
+          /** if the file was added programmatically and not with d&d, we create file infos and push it into the list */
+          importState.fileList.push({
+            ...info.file,
+            status: 'done',
+            data: e.target.result,
+          })
+        }
       }
     }
-    reader.readAsArrayBuffer(info.file.originFileObj)
+
+    reader.readAsArrayBuffer(info.file.originFileObj!)
   }
+
   if (status === 'done') {
     message.success(`Uploaded file ${info.file.name} successfully`)
   } else if (status === 'error') {
@@ -205,9 +237,11 @@ function formatJson() {
 
 function populateUniqueTableName() {
   let c = 1
+
   while (tables.value.some((t: TableType) => t.title === `Sheet${c}`)) {
     c++
   }
+
   return `Sheet${c}`
 }
 
@@ -229,23 +263,133 @@ function getAdapter(name: string, val: any) {
         return new JSONTemplateAdapter(name, val, importState.parserConfig)
     }
   }
+
   return null
 }
+
+defineExpose({
+  handleChange,
+})
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" :width="modalWidth" :mask-closable="false" @keydown.esc="dialogShow = false">
-    <span class="prose-xl font-weight-bold ml-5 mt-5 mb-5" type="secondary" :level="5">{{ importMeta.header }}</span>
+  <a-modal v-model:visible="dialogShow" :width="modalWidth" @keydown.esc="dialogShow = false">
+    <div class="px-5">
+      <div class="prose-xl font-weight-bold my-5">{{ importMeta.header }}</div>
+
+      <div class="mt-5">
+        <TemplateEditor
+          v-if="templateEditorModal"
+          ref="templateEditorRef"
+          :project-template="templateData"
+          :import-data="importData"
+          :import-columns="importColumns"
+          :import-only="importOnly"
+          :quick-import-type="importType"
+          :max-rows-to-parse="importState.parserConfig.maxRowsToParse"
+          @import="handleImport"
+        />
+
+        <a-tabs v-else v-model:activeKey="activeKey" hide-add type="editable-card" tab-position="top">
+          <a-tab-pane key="uploadTab" :closable="false">
+            <template #tab>
+              <div class="flex items-center gap-2">
+                <MdiFileUploadOutline />
+                Upload
+              </div>
+            </template>
+
+            <div class="py-6">
+              <a-upload-dragger
+                v-model:fileList="importState.fileList"
+                name="file"
+                class="nc-input-import !scrollbar-thin-dull"
+                :accept="importMeta.acceptTypes"
+                :max-count="1"
+                list-type="picture"
+                @change="handleChange"
+                @reject="rejectDrop"
+              >
+                <MdiFilePlusOutline size="large" />
+
+                <p class="ant-upload-text">Click or drag file to this area to upload</p>
+
+                <p class="ant-upload-hint">
+                  {{ importMeta.uploadHint }}
+                </p>
+              </a-upload-dragger>
+            </div>
+          </a-tab-pane>
+
+          <a-tab-pane v-if="isImportTypeJson" key="jsonEditorTab" :closable="false">
+            <template #tab>
+              <span class="flex items-center gap-2">
+                <MdiCodeJson />
+                JSON Editor
+              </span>
+            </template>
+
+            <div class="pb-3 pt-3">
+              <MonacoEditor ref="jsonEditorRef" v-model="importState.jsonEditor" class="min-h-60 max-h-80" />
+            </div>
+          </a-tab-pane>
+
+          <a-tab-pane v-else key="urlTab" :closable="false">
+            <template #tab>
+              <span class="flex items-center gap-2">
+                <MdiLinkVariant />
+                URL
+              </span>
+            </template>
+
+            <div class="pr-10 pt-5">
+              <a-form :model="importState" name="quick-import-url-form" layout="horizontal" class="mb-0">
+                <a-form-item :label="importMeta.urlInputLabel" v-bind="validateInfos.url">
+                  <a-input v-model:value="importState.url" size="large" />
+                </a-form-item>
+              </a-form>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+
+      <div v-if="!templateEditorModal">
+        <a-divider />
+
+        <div class="mb-4">
+          <span class="prose-lg">Advanced Settings</span>
+
+          <a-form-item class="mt-4 mb-2" :label="t('msg.info.footMsg')" v-bind="validateInfos.maxRowsToParse">
+            <a-input-number v-model:value="importState.parserConfig.maxRowsToParse" :min="1" :max="50000" />
+          </a-form-item>
+
+          <div v-if="isImportTypeJson" class="mt-3">
+            <a-checkbox v-model:checked="importState.parserConfig.normalizeNested">
+              <span class="caption">Flatten nested</span>
+            </a-checkbox>
+          </div>
+
+          <div v-if="isImportTypeJson" class="mt-4">
+            <a-checkbox v-model:checked="importState.parserConfig.importData">Import data</a-checkbox>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <template #footer>
       <a-button v-if="templateEditorModal" key="back" @click="templateEditorModal = false">Back</a-button>
+
       <a-button v-else key="cancel" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
+
       <a-button
         v-if="activeKey === 'jsonEditorTab' && !templateEditorModal"
         key="format"
         :disabled="disableFormatJsonButton"
         @click="formatJson"
-        >Format JSON</a-button
       >
+        Format JSON
+      </a-button>
+
       <a-button
         v-if="!templateEditorModal"
         key="pre-import"
@@ -254,101 +398,13 @@ function getAdapter(name: string, val: any) {
         :loading="loading"
         :disabled="disablePreImportButton"
         @click="handlePreImport"
-        >{{ $t('activity.import') }}
+      >
+        {{ $t('activity.import') }}
+      </a-button>
+
+      <a-button v-else key="import" type="primary" :loading="loading" :disabled="disableImportButton" @click="handleImport">
+        {{ $t('activity.import') }}
       </a-button>
-      <a-button v-else key="import" type="primary" :loading="loading" :disabled="disableImportButton" @click="handleImport">{{
-        $t('activity.import')
-      }}</a-button>
     </template>
-    <div class="ml-5 mr-5 mt-5">
-      <TemplateEditor
-        v-if="templateEditorModal"
-        ref="templateEditorRef"
-        :project-template="templateData"
-        :import-data="importData"
-        :import-columns="importColumns"
-        :import-only="importOnly"
-        :quick-import-type="importType"
-        :max-rows-to-parse="importState.parserConfig.maxRowsToParse"
-        @import="handleImport"
-      />
-      <a-tabs v-else v-model:activeKey="activeKey" hide-add type="editable-card" :tab-position="top">
-        <a-tab-pane key="uploadTab" :closable="false">
-          <template #tab>
-            <span class="flex items-center gap-2">
-              <MdiFileUploadOutlineIcon />
-              Upload
-            </span>
-          </template>
-          <div class="pr-10 pb-0 pt-5">
-            <a-upload-dragger
-              v-model:fileList="importState.fileList"
-              name="file"
-              class="nc-input-import"
-              :accept="importMeta.acceptTypes"
-              :max-count="1"
-              list-type="picture"
-              @change="handleChange"
-              @reject="rejectDrop"
-            >
-              <MdiFileIcon size="large" />
-              <p class="ant-upload-text">Click or drag file to this area to upload</p>
-              <p class="ant-upload-hint">
-                {{ importMeta.uploadHint }}
-              </p>
-            </a-upload-dragger>
-          </div>
-        </a-tab-pane>
-        <a-tab-pane v-if="isImportTypeJson" key="jsonEditorTab" :closable="false">
-          <template #tab>
-            <span class="flex items-center gap-2">
-              <MdiCodeJSONIcon />
-              JSON Editor
-            </span>
-          </template>
-          <div class="pb-3 pt-3">
-            <MonacoEditor ref="jsonEditorRef" v-model="importState.jsonEditor" class="min-h-60 max-h-80" />
-          </div>
-        </a-tab-pane>
-        <a-tab-pane v-else key="urlTab" :closable="false">
-          <template #tab>
-            <span class="flex items-center gap-2">
-              <MdiLinkVariantIcon />
-              URL
-            </span>
-          </template>
-          <div class="pr-10 pt-5">
-            <a-form :model="importState" name="quick-import-url-form" layout="horizontal" class="mb-0">
-              <a-form-item :label="importMeta.urlInputLabel" v-bind="validateInfos.url">
-                <a-input v-model:value="importState.url" size="large" />
-              </a-form-item>
-            </a-form>
-          </div>
-        </a-tab-pane>
-      </a-tabs>
-    </div>
-    <div v-if="!templateEditorModal" class="ml-5 mr-5">
-      <a-divider />
-      <div class="mb-4">
-        <span class="prose-lg">Advanced Settings</span>
-        <a-form-item class="mt-4 mb-2" :label="t('msg.info.footMsg')" v-bind="validateInfos.maxRowsToParse">
-          <a-input-number v-model:value="importState.parserConfig.maxRowsToParse" :min="1" :max="50000" />
-        </a-form-item>
-        <div v-if="isImportTypeJson" class="mt-3">
-          <a-checkbox v-model:checked="importState.parserConfig.normalizeNested">
-            <span class="caption">Flatten nested</span>
-          </a-checkbox>
-        </div>
-        <div v-if="isImportTypeJson" class="mt-4">
-          <a-checkbox v-model:checked="importState.parserConfig.importData">Import data</a-checkbox>
-        </div>
-      </div>
-    </div>
   </a-modal>
 </template>
-
-<style scoped lang="scss">
-:deep(.ant-upload-list) {
-  @apply max-h-80 overflow-auto;
-}
-</style>
diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index 596eb44adc..d1963b552d 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { Form } from 'ant-design-vue'
-import { onMounted, useProject, useTable, useTabs } from '#imports'
-import { validateTableName } from '~/utils/validation'
+import { computed, onMounted, ref, useProject, useTable, useTabs, useVModel, validateTableName } from '#imports'
 import { TabType } from '~/composables'
 
 interface Props {
-  modelValue?: boolean
+  modelValue: boolean
 }
 
 const props = defineProps<Props>()
@@ -16,6 +15,8 @@ const dialogShow = useVModel(props, 'modelValue', emit)
 
 const isAdvanceOptVisible = ref(false)
 
+const inputEl = ref<HTMLInputElement>()
+
 const { addTab } = useTabs()
 
 const { loadTables } = useProject()
@@ -28,16 +29,14 @@ const { table, createTable, generateUniqueTitle, tables, project } = useTable(as
     title: table.title,
     type: TabType.TABLE,
   })
+
   dialogShow.value = false
 })
 
-const validateDuplicateAlias = (v: string) => {
-  return (tables?.value || []).every((t) => t.title !== (v || '')) || 'Duplicate table alias'
-}
-const inputEl = ref<HTMLInputElement>()
-
 const useForm = Form.useForm
 
+const validateDuplicateAlias = (v: string) => (tables.value || []).every((t) => t.title !== (v || '')) || 'Duplicate table alias'
+
 const validators = computed(() => {
   return {
     title: [validateTableName, validateDuplicateAlias],
@@ -48,22 +47,27 @@ const { validateInfos } = useForm(table, validators)
 
 onMounted(() => {
   generateUniqueTitle()
+
   inputEl.value?.focus()
 })
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" :mask-closable="false" @keydown.esc="dialogShow = false">
+  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" @keydown.esc="dialogShow = false">
     <template #footer>
       <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
+
       <a-button key="submit" size="large" type="primary" @click="createTable()">{{ $t('general.submit') }}</a-button>
     </template>
+
     <div class="pl-10 pr-10 pt-5">
       <a-form :model="table" name="create-new-table-form" @keydown.enter="createTable">
         <!-- Create A New Table -->
         <div class="prose-xl font-bold self-center my-4">{{ $t('activity.createTable') }}</div>
+
         <!-- hint="Enter table name" -->
         <div class="mb-2">Table Name</div>
+
         <a-form-item v-bind="validateInfos.title">
           <a-input
             ref="inputEl"
@@ -73,25 +77,29 @@ onMounted(() => {
             :placeholder="$t('msg.info.enterTableName')"
           />
         </a-form-item>
+
         <div class="flex justify-end">
           <div class="pointer" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
             {{ isAdvanceOptVisible ? 'Hide' : 'Show' }} more
-            <v-icon x-small color="grey">
-              {{ isAdvanceOptVisible ? 'mdi-minus-circle-outline' : 'mdi-plus-circle-outline' }}
-            </v-icon>
+
+            <MdiMinusCircleOutline v-if="isAdvanceOptVisible" class="text-gray-500" />
+            <MdiPlusCircleOutline v-else class="text-gray-500" />
           </div>
         </div>
         <div class="nc-table-advanced-options" :class="{ active: isAdvanceOptVisible }">
           <!-- hint="Table name as saved in database" -->
           <div v-if="!project.prefix" class="mb-2">{{ $t('msg.info.tableNameInDb') }}</div>
+
           <a-form-item v-if="!project.prefix" v-bind="validateInfos.table_name">
             <a-input v-model:value="table.table_name" size="large" hide-details :placeholder="$t('msg.info.tableNameInDb')" />
           </a-form-item>
+
           <div>
             <div class="mb-5">
               <!-- Add Default Columns -->
               {{ $t('msg.info.addDefaultColumns') }}
             </div>
+
             <a-row>
               <a-col :span="6">
                 <a-tooltip placement="top">
@@ -101,12 +109,15 @@ onMounted(() => {
                   <a-checkbox v-model:checked="table.columns.id" disabled>ID</a-checkbox>
                 </a-tooltip>
               </a-col>
+
               <a-col :span="6">
                 <a-checkbox v-model:checked="table.columns.title"> title </a-checkbox>
               </a-col>
+
               <a-col :span="6">
                 <a-checkbox v-model:checked="table.columns.created_at"> created_at </a-checkbox>
               </a-col>
+
               <a-col :span="6">
                 <a-checkbox v-model:checked="table.columns.updated_at"> updated_at </a-checkbox>
               </a-col>
@@ -119,23 +130,6 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
-::v-deep {
-  .v-text-field__details {
-    padding: 0 2px !important;
-
-    .v-messages:not(.error--text) {
-      .v-messages__message {
-        color: grey;
-        font-size: 0.65rem;
-      }
-    }
-  }
-}
-
-.add-default-title {
-  font-size: 0.65rem;
-}
-
 .nc-table-advanced-options {
   max-height: 0;
   transition: 0.3s max-height;
diff --git a/packages/nc-gui-v2/components/general/Language.vue b/packages/nc-gui-v2/components/general/Language.vue
index 604c7cb5f8..68a5ce37d9 100644
--- a/packages/nc-gui-v2/components/general/Language.vue
+++ b/packages/nc-gui-v2/components/general/Language.vue
@@ -37,22 +37,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-dropdown class="select-none" :trigger="['click']">
+  <a-dropdown class="select-none color-transition" :trigger="['click']">
     <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
 
     <template #overlay>
-      <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 dark:(!bg-gray-800 !text-white)">
+      <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
         <a-menu-item
           v-for="lang of languages"
           :key="lang"
-          :class="lang === locale ? '!bg-primary/10 text-primary dark:(!bg-gray-700 !text-secondary)' : ''"
-          class="!min-h-8 group"
+          :class="lang === locale ? '!bg-primary/10 text-primary' : ''"
+          class="group"
           :value="lang"
           @click="changeLanguage(lang)"
         >
           <div
             :class="lang === locale ? '!font-semibold !text-primary' : ''"
-            class="capitalize md:(!leading-8) group-hover:(text-primary font-semibold) dark:(group-hover:text-secondary)"
+            class="nc-project-menu-item capitalize group-hover:text-pink-500"
           >
             {{ Language[lang] || lang }}
           </div>
@@ -71,3 +71,21 @@ onMounted(() => {
     </template>
   </a-dropdown>
 </template>
+
+<style scoped>
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply !mx-0;
+}
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+
+:deep(.ant-dropdown-menu-item) {
+  @apply !py-0 active:(ring ring-pink-500);
+}
+</style>
diff --git a/packages/nc-gui-v2/components/general/PreviewAs.vue b/packages/nc-gui-v2/components/general/PreviewAs.vue
index 5e1e300e7c..8214054b49 100644
--- a/packages/nc-gui-v2/components/general/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/general/PreviewAs.vue
@@ -58,7 +58,7 @@ watch(previewAs, () => window.location.reload())
     <div class="divider" />
 
     <div class="pointer flex items-center gap-4">
-      <span>Preview as :</span>
+      <span>Preview as:</span>
 
       <a-radio-group v-model:value="previewAs" name="radioGroup">
         <a-radio v-for="role of roleList" :key="role.title" class="capitalize !text-white" :value="role.title"
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index 520b5e7849..b9989c2755 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -1,13 +1,6 @@
 <script lang="ts" setup>
 import { Modal, message } from 'ant-design-vue'
-import { inject } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useNuxtApp } from '#app'
-import { ColumnInj, IsLockedInj, MetaInj, extractSdkResponseErrorMsg, useMetas } from '#imports'
-import MdiEditIcon from '~icons/mdi/pencil'
-import MdiStarIcon from '~icons/mdi/star'
-import MdiDeleteIcon from '~icons/mdi/delete-outline'
-import MdiMenuDownIcon from '~icons/mdi/menu-down'
+import { ColumnInj, IsLockedInj, MetaInj, extractSdkResponseErrorMsg, inject, useI18n, useMetas, useNuxtApp } from '#imports'
 
 const { virtual = false } = defineProps<{ virtual?: boolean }>()
 
@@ -34,8 +27,9 @@ const deleteColumn = () =>
     async onOk() {
       try {
         await $api.dbTableColumn.delete(column?.value?.id as string)
-        getMeta(meta?.value?.id as string, true)
-      } catch (e) {
+
+        await getMeta(meta?.value?.id as string, true)
+      } catch (e: any) {
         message.error(await extractSdkResponseErrorMsg(e))
       }
     },
@@ -44,8 +38,11 @@ const deleteColumn = () =>
 const setAsPrimaryValue = async () => {
   try {
     await $api.dbTableColumn.primaryColumnSet(column?.value?.id as string)
-    getMeta(meta?.value?.id as string, true)
+
+    await getMeta(meta?.value?.id as string, true)
+
     message.success('Successfully updated as primary column')
+
     $e('a:column:set-primary')
   } catch (e) {
     message.error('Failed to update primary column')
@@ -55,29 +52,31 @@ const setAsPrimaryValue = async () => {
 
 <template>
   <a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']">
-    <MdiMenuDownIcon class="h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0" />
+    <MdiMenuDown class="h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0" />
+
     <template #overlay>
       <a-menu class="shadow bg-white">
         <a-menu-item @click="emit('edit')">
           <div class="nc-column-edit nc-header-menu-item">
-            <MdiEditIcon class="text-primary" />
+            <MdiPencil class="text-primary" />
             <!-- Edit -->
             {{ $t('general.edit') }}
           </div>
         </a-menu-item>
+
         <a-menu-item v-if="!virtual" @click="setAsPrimaryValue">
           <div class="nc-column-set-primary nc-header-menu-item">
-            <MdiStarIcon class="text-primary" />
+            <MdiStar class="text-primary" />
 
             <!--       todo : tooltip -->
             <!-- Set as Primary value -->
             {{ $t('activity.setPrimary') }}
           </div>
-          <!--        <span class="caption font-weight-bold">Primary value will be shown in place of primary key</span> -->
         </a-menu-item>
+
         <a-menu-item @click="deleteColumn">
           <div class="nc-column-delete nc-header-menu-item">
-            <MdiDeleteIcon class="text-error" />
+            <MdiDeleteOutline class="text-error" />
             <!-- Delete -->
             {{ $t('general.delete') }}
           </div>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 3274d16ecd..851548b2aa 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { watchEffect } from '@vue/runtime-core'
 import type ColumnFilter from './ColumnFilter.vue'
-import { ActiveViewInj, IsLockedInj, IsPublicInj } from '~/context'
-import MdiFilterIcon from '~icons/mdi/filter-outline'
-import MdiMenuDownIcon from '~icons/mdi/menu-down'
+import { ActiveViewInj, IsLockedInj, IsPublicInj, computed, inject, ref, useGlobal, useViewFilters, watchEffect } from '#imports'
+
+const isLocked = inject(IsLockedInj, ref(false))
 
-const isLocked = inject(IsLockedInj)
 const activeView = inject(ActiveViewInj)
-const isPublic = inject(IsPublicInj)
+
+const isPublic = inject(IsPublicInj, ref(false))
 
 const { filterAutoSave } = useGlobal()
 
+const filterComp = ref<typeof ColumnFilter>()
+
 // todo: avoid duplicate api call by keeping a filter store
 const { filters, loadFilters } = useViewFilters(
   activeView,
@@ -19,17 +20,16 @@ const { filters, loadFilters } = useViewFilters(
 )
 
 const filtersLength = ref(0)
+
 watchEffect(async () => {
   if (activeView?.value) {
     await loadFilters()
-    filtersLength.value = filters?.value?.length ?? 0
+
+    filtersLength.value = filters.value.length || 0
   }
 })
-const filterComp = ref<typeof ColumnFilter>()
 
-const applyChanges = async () => {
-  await filterComp?.value?.applyChanges()
-}
+const applyChanges = async () => await filterComp.value?.applyChanges()
 </script>
 
 <template>
@@ -37,10 +37,10 @@ const applyChanges = async () => {
     <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
       <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex align-center gap-1">
-          <MdiFilterIcon />
+          <MdiFilterOutline />
           <!-- Filter -->
           <span class="text-capitalize !text-sm font-weight-medium">{{ $t('activity.filter') }}</span>
-          <MdiMenuDownIcon class="text-grey" />
+          <MdiMenuDown class="text-grey" />
         </div>
       </a-button>
     </div>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 47d2634586..a10436551e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -1,14 +1,31 @@
 <script setup lang="ts">
 import Draggable from 'vuedraggable'
-import { ActiveViewInj, FieldsInj, IsLockedInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
-import { computed, inject, useNuxtApp, useViewColumns, watch } from '#imports'
+import {
+  ActiveViewInj,
+  FieldsInj,
+  IsLockedInj,
+  IsPublicInj,
+  MetaInj,
+  ReloadViewDataHookInj,
+  computed,
+  inject,
+  ref,
+  useNuxtApp,
+  useViewColumns,
+  watch,
+} from '#imports'
 
 const meta = inject(MetaInj)!
+
 const activeView = inject(ActiveViewInj)!
+
 const reloadDataHook = inject(ReloadViewDataHookInj)!
+
 const rootFields = inject(FieldsInj)
-const isLocked = inject(IsLockedInj)
-const isPublic = inject(IsPublicInj)
+
+const isLocked = inject(IsLockedInj, ref(false))
+
+const isPublic = inject(IsPublicInj, ref(false))
 
 const { $e } = useNuxtApp()
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 211101bc4c..4175fb2b4c 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -9,7 +9,9 @@ import {
   IsLockedInj,
   IsPublicInj,
   computed,
+  inject,
   provide,
+  ref,
   toRef,
   useColumn,
   useDebounceFn,
@@ -42,11 +44,11 @@ provide(EditModeInj, useVModel(props, 'editEnabled', emit))
 
 provide(ActiveCellInj, active)
 
-const isForm = inject(IsFormInj)
+const isForm = inject(IsFormInj, ref(false))
 
-const isPublic = inject(IsPublicInj)
+const isPublic = inject(IsPublicInj, ref(false))
 
-const isLocked = inject(IsLockedInj)
+const isLocked = inject(IsLockedInj, ref(false))
 
 let changed = $ref(false)
 
diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index f7c08a01ca..0c7d6819e5 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -7,13 +7,16 @@ import {
   MetaInj,
   ReloadViewDataHookInj,
   computed,
+  createEventHook,
   extractSdkResponseErrorMsg,
   fieldRequiredValidator,
   getUIDTIcon,
+  inject,
   nextTick,
   onMounted,
   reactive,
   ref,
+  useNuxtApp,
   useProject,
   useTabs,
   useTemplateRefsList,
@@ -38,16 +41,20 @@ const { quickImportType, projectTemplate, importData, importColumns, importOnly,
 
 const emit = defineEmits(['import'])
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref({} as TableType))
 
-const columns = computed(() => meta?.value?.columns || [])
+const columns = computed(() => meta.value?.columns || [])
 
-const reloadHook = inject(ReloadViewDataHookInj)!
+const reloadHook = inject(ReloadViewDataHookInj, createEventHook())
 
 const useForm = Form.useForm
 
 const { $api } = useNuxtApp()
 
+const { addTab } = useTabs()
+
+const { sqlUi, project, loadTables } = useProject()
+
 const hasSelectColumn = ref<boolean[]>([])
 
 const expansionPanel = ref<number[]>([])
@@ -75,24 +82,14 @@ const uiTypeOptions = ref<Option[]>(
     })),
 )
 
-const data = reactive<{ title: string | null; name: string; tables: TableType[] }>({
+const srcDestMapping = ref<Record<string, any>[]>([])
+
+const data = reactive<{ title: string | null; name: string; tables: (TableType & { ref_table_name: string })[] }>({
   title: null,
   name: 'Project Name',
   tables: [],
 })
 
-const { addTab } = useTabs()
-
-const { sqlUi, project, loadTables } = useProject()
-
-onMounted(() => {
-  parseAndLoadTemplate()
-
-  nextTick(() => {
-    inputRefs.value[0]?.focus()
-  })
-})
-
 const validators = computed(() =>
   data.tables.reduce<Record<string, [typeof fieldRequiredValidator]>>((acc, table, tableIdx) => {
     acc[`tables.${tableIdx}.table_name`] = [fieldRequiredValidator]
@@ -110,10 +107,35 @@ const validators = computed(() =>
   }, {}),
 )
 
-const srcDestMapping = ref<Record<string, any>[]>([])
-
 const { validate, validateInfos } = useForm(data, validators)
 
+const isValid = computed(() => {
+  if (importOnly) {
+    for (const record of srcDestMapping.value) {
+      if (!fieldsValidation(record)) {
+        return false
+      }
+    }
+  } else {
+    for (const [_, o] of Object.entries(validateInfos)) {
+      if (o?.validateStatus) {
+        if (o.validateStatus === 'error') {
+          return false
+        }
+      }
+    }
+  }
+  return true
+})
+
+onMounted(() => {
+  parseAndLoadTemplate()
+
+  nextTick(() => {
+    inputRefs.value[0]?.focus()
+  })
+})
+
 function filterOption(input: string, option: Option) {
   return option.value.toUpperCase().includes(input.toUpperCase())
 }
@@ -121,7 +143,9 @@ function filterOption(input: string, option: Option) {
 function parseAndLoadTemplate() {
   if (projectTemplate) {
     parseTemplate(projectTemplate)
+
     expansionPanel.value = Array.from({ length: data.tables.length || 0 }, (_, i) => i)
+
     hasSelectColumn.value = Array.from({ length: data.tables.length || 0 }, () => false)
   }
 }
@@ -145,6 +169,7 @@ function parseTemplate({ tables = [], ...rest }: Props['projectTemplate']) {
       ],
     })),
   }
+
   Object.assign(data, parsedTemplate)
 }
 
@@ -166,8 +191,10 @@ function addNewColumnRow(table: Record<string, any>, uidt?: string) {
     column_name: `title${table.columns.length + 1}`,
     uidt,
   })
+
   nextTick(() => {
     const input = inputRefs.value[table.columns.length - 1]
+
     input.focus()
     input.select()
   })
@@ -194,10 +221,12 @@ function missingRequiredColumnsValidation() {
     (c: Record<string, any>) =>
       (c.pk ? !c.ai && !c.cdf : !c.cdf && c.rqd) && !srcDestMapping.value.some((r) => r.destCn === c.title),
   )
+
   if (missingRequiredColumns.length) {
     message.error(`Following columns are required : ${missingRequiredColumns.map((c) => c.title).join(', ')}`)
     return false
   }
+
   return true
 }
 
@@ -206,6 +235,7 @@ function atLeastOneEnabledValidation() {
     message.error('At least one column has to be selected')
     return false
   }
+
   return true
 }
 
@@ -252,6 +282,7 @@ function fieldsValidation(record: Record<string, any>) {
         message.error('Source data contains some invalid numbers')
         return false
       }
+
       break
     case UITypes.Checkbox:
       if (
@@ -271,16 +302,20 @@ function fieldsValidation(record: Record<string, any>) {
                 input === '1'
               )
             }
+
             return input !== 1 && input !== 0 && input !== true && input !== false
           }
+
           return false
         })
       ) {
         message.error('Source data contains some invalid boolean values')
+
         return false
       }
       break
   }
+
   return true
 }
 
@@ -288,24 +323,33 @@ async function importTemplate() {
   if (importOnly) {
     // validate required columns
     if (!missingRequiredColumnsValidation()) return
+
     // validate at least one column needs to be selected
     if (!atLeastOneEnabledValidation()) return
 
     try {
       isImporting.value = true
-      const tableName = meta?.value.title as string
+
+      const tableName = meta.value.title
+
       const data = importData[tableName]
-      const projectName = project.value.title as string
+
+      const projectName = project.value.title!
+
       const total = data.length
+
       for (let i = 0, progress = 0; i < total; i += maxRowsToParse) {
         const batchData = data.slice(i, i + maxRowsToParse).map((row: Record<string, any>) =>
           srcDestMapping.value.reduce((res: Record<string, any>, col: Record<string, any>) => {
             if (col.enabled && col.destCn) {
               const v = columns.value.find((c: Record<string, any>) => c.title === col.destCn) as Record<string, any>
+
               let input = row[col.srcCn]
+
               // parse potential boolean values
               if (v.uidt === UITypes.Checkbox) {
                 input = input.replace(/["']/g, '').toLowerCase().trim()
+
                 if (input === 'false' || input === 'no' || input === 'n') {
                   input = '0'
                 } else if (input === 'true' || input === 'yes' || input === 'y') {
@@ -325,8 +369,11 @@ async function importTemplate() {
             return res
           }, {}),
         )
+
         await $api.dbTableRow.bulkCreate('noco', projectName, tableName, batchData)
+
         importingTip.value = `Importing data to ${projectName}: ${progress}/${total} records`
+
         progress += batchData.length
       }
 
@@ -421,6 +468,7 @@ async function importTemplate() {
       }
       // reload table list
       await loadTables()
+
       addTab({
         ...tab,
         type: TabType.TABLE,
@@ -433,25 +481,6 @@ async function importTemplate() {
   }
 }
 
-const isValid = computed(() => {
-  if (importOnly) {
-    for (const record of srcDestMapping.value) {
-      if (!fieldsValidation(record)) {
-        return false
-      }
-    }
-  } else {
-    for (const [_, o] of Object.entries(validateInfos)) {
-      if (o?.validateStatus) {
-        if (o.validateStatus === 'error') {
-          return false
-        }
-      }
-    }
-  }
-  return true
-})
-
 function mapDefaultColumns() {
   srcDestMapping.value = []
   for (const col of importColumns[0]) {
@@ -645,6 +674,7 @@ onMounted(() => {
                       <mdi-key-star class="text-lg" />
                     </div>
                   </a-tooltip>
+
                   <a-tooltip v-else>
                     <template #title>
                       <!-- TODO: i18n -->
@@ -660,16 +690,17 @@ onMounted(() => {
                 </template>
               </template>
             </a-table>
-            <div class="text-center mt-5">
+
+            <div class="mt-5 flex gap-2 justify-center">
               <a-tooltip bottom>
                 <template #title>
                   <!-- TODO: i18n -->
                   <span>Add Number Column</span>
                 </template>
 
-                <a-button @click="addNewColumnRow(table, 'Number')">
+                <a-button class="group" @click="addNewColumnRow(table, 'Number')">
                   <div class="flex items-center">
-                    <mdi-numeric class="text-lg" />
+                    <mdi-numeric class="group-hover:!text-pink-500 flex text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -679,9 +710,10 @@ onMounted(() => {
                   <!-- TODO: i18n -->
                   <span>Add SingleLineText Column</span>
                 </template>
-                <a-button @click="addNewColumnRow(table, 'SingleLineText')">
+
+                <a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')">
                   <div class="flex items-center">
-                    <mdi-alpha-a class="text-lg" />
+                    <mdi-alpha-a class="group-hover:!text-pink-500 text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -691,9 +723,10 @@ onMounted(() => {
                   <!-- TODO: i18n -->
                   <span>Add LongText Column</span>
                 </template>
-                <a-button @click="addNewColumnRow(table, 'LongText')">
+
+                <a-button class="group" @click="addNewColumnRow(table, 'LongText')">
                   <div class="flex items-center">
-                    <mdi-text class="text-lg" />
+                    <mdi-text class="group-hover:!text-pink-500 text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -703,10 +736,10 @@ onMounted(() => {
                   <!-- TODO: i18n -->
                   <span>Add Other Column</span>
                 </template>
-                <a-button @click="addNewColumnRow(table, 'SingleLineText')">
-                  <div class="flex items-center">
-                    <mdi-plus class="text-lg" />
-                    Column
+
+                <a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')">
+                  <div class="flex items-center gap-1">
+                    <mdi-plus class="group-hover:!text-pink-500 text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
diff --git a/packages/nc-gui-v2/composables/index.ts b/packages/nc-gui-v2/composables/index.ts
index a242896d05..9c6f6a3010 100644
--- a/packages/nc-gui-v2/composables/index.ts
+++ b/packages/nc-gui-v2/composables/index.ts
@@ -1,4 +1,5 @@
 export * from './useApi'
+export * from './useDialog'
 export * from './useGlobal'
 export * from './useInjectionState'
 export * from './useSidebar'
diff --git a/packages/nc-gui-v2/composables/useDialog/index.ts b/packages/nc-gui-v2/composables/useDialog/index.ts
new file mode 100644
index 0000000000..79bb2e69ef
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useDialog/index.ts
@@ -0,0 +1,103 @@
+import type { DefineComponent, VNode } from '@vue/runtime-dom'
+import { isVNode, render } from '@vue/runtime-dom'
+import type { ComponentPublicInstance } from '@vue/runtime-core'
+import { isClient } from '@vueuse/core'
+import { createEventHook, h, ref, toReactive, tryOnScopeDispose, useNuxtApp, watch } from '#imports'
+
+/**
+ * Programmatically create a component and attach it to the body (or a specific mount target), like a dialog or modal.
+ * This composable is not SSR friendly - it should be used only on the client.
+ *
+ * @param componentOrVNode The component to create and attach. Can be a VNode or a component definition.
+ * @param props The props to pass to the component.
+ * @param mountTarget The target to attach the component to. Defaults to the document body
+ *
+ * @example
+ * import { useDialog } from '#imports'
+ * import DlgQuickImport from '~/components/dlg/QuickImport.vue'
+ *
+ * function openQuickImportDialog(type: string) {
+ *   // create a ref for showing/hiding the modal
+ *   const isOpen = ref(true)
+ *
+ *   const { close, vNode } = useDialog(DlgQuickImport, {
+ *     'modelValue': isOpen,
+ *     'importType': type,
+ *     'onUpdate:modelValue': closeDialog,
+ *   })
+ *
+ *   function closeDialog() {
+ *     // hide the modal
+ *     isOpen.value = false
+ *
+ *     // debounce destroying the component, so the modal transition can finish
+ *     close(1000)
+ *   }
+ * }
+ */
+export function useDialog(
+  componentOrVNode: DefineComponent<any, any, any> | VNode,
+  props: NonNullable<Parameters<typeof h>[1]> = {},
+  mountTarget?: Element | ComponentPublicInstance,
+) {
+  if (typeof document === 'undefined' || !isClient) {
+    console.warn('[useDialog]: Cannot use outside of browser!')
+  }
+
+  const closeHook = createEventHook<void>()
+  const mountedHook = createEventHook<void>()
+
+  const isMounted = $ref(false)
+
+  const domNode = document.createElement('div')
+
+  const vNodeRef = ref<VNode>()
+
+  mountTarget = mountTarget ? ('$el' in mountTarget ? (mountTarget.$el as HTMLElement) : mountTarget) : document.body
+
+  /** if specified, append vnode to mount target instead of document.body */
+  mountTarget.appendChild(domNode)
+
+  /** When props change, we want to re-render the element with the new prop values */
+  const stop = watch(
+    toReactive(props),
+    (reactiveProps) => {
+      const vNode = isVNode(componentOrVNode) ? componentOrVNode : h(componentOrVNode, reactiveProps)
+
+      vNode.appContext = useNuxtApp().vueApp._context
+
+      vNodeRef.value = vNode
+
+      render(vNode, domNode)
+
+      if (!isMounted) mountedHook.trigger()
+    },
+    { deep: true, immediate: true, flush: 'post' },
+  )
+
+  /** When calling scope is disposed, destroy component */
+  tryOnScopeDispose(close)
+
+  /** destroy component, can be debounced */
+  function close(debounce = 0) {
+    setTimeout(() => {
+      stop()
+
+      render(null, domNode)
+
+      setTimeout(() => {
+        ;(mountTarget as HTMLElement)!.removeChild(domNode)
+      }, 100)
+
+      closeHook.trigger()
+    }, debounce)
+  }
+
+  return {
+    close,
+    onClose: closeHook.on,
+    onMounted: mountedHook.on,
+    domNode,
+    vNode: vNodeRef,
+  }
+}
diff --git a/packages/nc-gui-v2/composables/useGlobal/actions.ts b/packages/nc-gui-v2/composables/useGlobal/actions.ts
index 4b0a8e0511..4302c49757 100644
--- a/packages/nc-gui-v2/composables/useGlobal/actions.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/actions.ts
@@ -1,11 +1,10 @@
 import { message } from 'ant-design-vue'
+import { Api } from 'nocodb-sdk'
 import type { Actions, State } from './types'
-import { useNuxtApp } from '#imports'
 
 export function useGlobalActions(state: State): Actions {
-  // todo replace with just `new Api()`? Would solve recursion issues
-  /** we have to use the globally injected api instance, otherwise we run into recursion as `useApi` calls `useGlobal` */
-  const { $api } = useNuxtApp()
+  /** detached api instance, will not trigger global loading */
+  const api = new Api()
 
   /** Sign out by deleting the token from localStorage */
   const signOut: Actions['signOut'] = () => {
@@ -30,7 +29,7 @@ export function useGlobalActions(state: State): Actions {
 
   /** manually try to refresh token */
   const refreshToken = async () => {
-    $api.instance
+    api.instance
       .post('/auth/refresh-token', null, {
         withCredentials: true,
       })
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 4d1372a460..8a7f27cb86 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -1,6 +1,17 @@
 import type { ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
-import { IsPublicInj, ReloadViewDataHookInj, useMetas, useNuxtApp, useUIPermission } from '#imports'
+import {
+  IsPublicInj,
+  ReloadViewDataHookInj,
+  computed,
+  inject,
+  ref,
+  useMetas,
+  useNuxtApp,
+  useSharedView,
+  useUIPermission,
+  watch,
+} from '#imports'
 import type { Filter } from '~/lib'
 
 export function useViewFilters(
@@ -17,12 +28,15 @@ export function useViewFilters(
   const _filters = ref<Filter[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
+
   const { $api } = useNuxtApp()
+
   const { isUIAllowed } = useUIPermission()
+
   const { metas } = useMetas()
 
   const filters = computed({
-    get: () => (isPublic.value ? siblingFilters || nestedFilters.value : _filters.value),
+    get: () => (isPublic.value ? siblingFilters || nestedFilters.value : _filters.value) ?? [],
     set: (value) => {
       if (isPublic.value) {
         if (siblingFilters) {
@@ -94,6 +108,7 @@ export function useViewFilters(
     // if shared or sync permission not allowed simply remove it from array
     if (isPublic.value || !isUIAllowed('filterSync')) {
       filters.value.splice(i, 1)
+
       reloadData?.()
     } else {
       if (filter.id) {
@@ -103,7 +118,9 @@ export function useViewFilters(
           // if auto-apply enabled invoke delete api and remove from array
         } else {
           await $api.dbTableFilter.delete(filter.id)
+
           reloadData?.()
+
           filters.value.splice(i, 1)
         }
         // if not synced yet remove it from array
@@ -115,11 +132,14 @@ export function useViewFilters(
 
   const saveOrUpdate = async (filter: Filter, i: number, force = false) => {
     if (isPublic.value) {
-      filters.value[i] = { ...filter } as any
+      filters.value[i] = { ...filter }
+
       filters.value = [...filters.value]
+
       return
     }
     if (!view?.value) return
+
     if (!isUIAllowed('filterSync')) {
       // skip
     } else if (!autoApply?.value && !force) {
@@ -136,12 +156,11 @@ export function useViewFilters(
         fk_parent_id: parentId,
       })) as any
     }
+
     reloadData?.()
   }
 
-  const addFilter = () => {
-    filters.value.push(placeholderFilter)
-  }
+  const addFilter = () => filters.value.push(placeholderFilter)
 
   const addFilterGroup = async () => {
     const child = placeholderFilter
@@ -150,10 +169,13 @@ export function useViewFilters(
       status: 'create',
       logical_op: 'and',
     }
+
     if (isPublic.value) placeHolderGroupFilter.children = [child]
 
     filters.value.push(placeHolderGroupFilter)
+
     const index = filters.value.length - 1
+
     await saveOrUpdate(filters.value[index], index, true)
   }
 
@@ -167,9 +189,7 @@ export function useViewFilters(
       return metas?.value?.[view?.value?.fk_model_id as string]?.columns?.length || 0
     },
     async (nextColsLength, oldColsLength) => {
-      if (nextColsLength < oldColsLength) {
-        await loadFilters()
-      }
+      if (nextColsLength < oldColsLength) await loadFilters()
     },
   )
 
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index d46b05c9bd..f60fb9e030 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -50,35 +50,35 @@ const logout = () => {
 
           <GeneralShareBaseButton />
 
-          <a-tooltip placement="bottom">
+          <a-tooltip placement="bottom" :mouse-enter-delay="1">
             <template #title> Switch language</template>
 
             <div class="flex pr-4 items-center">
-              <GeneralLanguage class="cursor-pointer text-2xl" />
+              <GeneralLanguage class="cursor-pointer text-2xl hover:text-pink-500" />
             </div>
           </a-tooltip>
 
           <template v-if="signedIn && !isSharedBase">
             <a-dropdown :trigger="['click']">
-              <MdiDotsVertical class="md:text-xl cursor-pointer nc-user-menu" @click.prevent />
+              <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-pink-500" @click.prevent />
 
               <template #overlay>
-                <a-menu class="!py-0 nc-user-menu dark:(!bg-gray-800) leading-8 !rounded">
+                <a-menu class="!py-0 dark:(!bg-gray-800) leading-8 !rounded">
                   <a-menu-item key="0" class="!rounded-t">
-                    <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
-                      <MdiAt class="mt-1 group-hover:text-success" />&nbsp;
+                    <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
+                      <MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp;
 
-                      <span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
+                      <span class="prose">{{ email }}</span>
                     </nuxt-link>
                   </a-menu-item>
 
                   <a-menu-divider class="!m-0" />
 
                   <a-menu-item key="1" class="!rounded-b">
-                    <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
-                      <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
+                    <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
+                      <MdiLogout class="group-hover:(!text-pink-500)" />&nbsp;
 
-                      <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
+                      <span class="prose">
                         {{ $t('general.signOut') }}
                       </span>
                     </div>
@@ -112,10 +112,22 @@ const logout = () => {
   @apply border-b-1;
 }
 
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply !mx-0;
+}
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
 :deep(.ant-dropdown-menu-item-group-list) {
   @apply m-0;
 }
 
+:deep(.ant-dropdown-menu-item) {
+  @apply !py-0 active:(ring ring-pink-500);
+}
+
 .nc-lang-btn {
   @apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-pink-500) hover:(ring ring-pink-500);
 
diff --git a/packages/nc-gui-v2/nuxt-shim.d.ts b/packages/nc-gui-v2/nuxt-shim.d.ts
index e771efe62a..3f6e83f8df 100644
--- a/packages/nc-gui-v2/nuxt-shim.d.ts
+++ b/packages/nc-gui-v2/nuxt-shim.d.ts
@@ -24,3 +24,10 @@ declare module '@vue/runtime-core' {
     i18n: I18n<MessageSchema, unknown, unknown, false>['global']
   }
 }
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    requiresAuth?: boolean
+    public?: boolean
+  }
+}
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index f2845b87e3..311c840305 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -32,6 +32,7 @@
       },
       "devDependencies": {
         "@antfu/eslint-config": "^0.26.0",
+        "@iconify-json/bi": "^1.1.6",
         "@iconify-json/cil": "^1.1.2",
         "@iconify-json/clarity": "^1.1.4",
         "@iconify-json/eva": "^1.1.2",
@@ -40,6 +41,7 @@
         "@iconify-json/material-symbols": "^1.1.8",
         "@iconify-json/mdi": "^1.1.25",
         "@iconify-json/mi": "^1.1.2",
+        "@iconify-json/ph": "^1.1.2",
         "@iconify-json/ri": "^1.1.3",
         "@intlify/vite-plugin-vue-i18n": "^6.0.1",
         "@nuxt/image-edge": "^1.0.0-27657146.da85542",
@@ -996,6 +998,15 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@iconify-json/bi": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@iconify-json/bi/-/bi-1.1.6.tgz",
+      "integrity": "sha512-q80o/IJN/mEwhzQG/LjmpA4S5Zk3XzHegmhseWEvu6XF/N3pc8d7a1Fv/PVE2kij06J6ugb8DTdt30BCt5Dplw==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/cil": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@iconify-json/cil/-/cil-1.1.2.tgz",
@@ -1068,6 +1079,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/ph": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ph/-/ph-1.1.2.tgz",
+      "integrity": "sha512-NuTdtt/UmuxIHS4hfdyv3BP5JiWikNkr81hFHXDScXlH0GUMdRSY/B5T9vDvbXDY/esMLFnIAXoFVDLsGinhpw==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/ri": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.3.tgz",
@@ -15955,6 +15975,15 @@
       "dev": true,
       "peer": true
     },
+    "@iconify-json/bi": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@iconify-json/bi/-/bi-1.1.6.tgz",
+      "integrity": "sha512-q80o/IJN/mEwhzQG/LjmpA4S5Zk3XzHegmhseWEvu6XF/N3pc8d7a1Fv/PVE2kij06J6ugb8DTdt30BCt5Dplw==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/cil": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@iconify-json/cil/-/cil-1.1.2.tgz",
@@ -16027,6 +16056,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/ph": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ph/-/ph-1.1.2.tgz",
+      "integrity": "sha512-NuTdtt/UmuxIHS4hfdyv3BP5JiWikNkr81hFHXDScXlH0GUMdRSY/B5T9vDvbXDY/esMLFnIAXoFVDLsGinhpw==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/ri": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.3.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index b7ae901b41..cf5ca7935b 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.26.0",
+    "@iconify-json/bi": "^1.1.6",
     "@iconify-json/cil": "^1.1.2",
     "@iconify-json/clarity": "^1.1.4",
     "@iconify-json/eva": "^1.1.2",
@@ -46,6 +47,7 @@
     "@iconify-json/material-symbols": "^1.1.8",
     "@iconify-json/mdi": "^1.1.25",
     "@iconify-json/mi": "^1.1.2",
+    "@iconify-json/ph": "^1.1.2",
     "@iconify-json/ri": "^1.1.3",
     "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@nuxt/image-edge": "^1.0.0-27657146.da85542",
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 693549d18b..3dad89b7f5 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -1,28 +1,22 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
+import { TabMetaInj, provide, ref, useDialog, useNuxtApp, useTabs, useUIPermission } from '#imports'
+import DlgTableCreate from '~/components/dlg/TableCreate.vue'
+import DlgAirtableImport from '~/components/dlg/AirtableImport.vue'
+import DlgQuickImport from '~/components/dlg/QuickImport.vue'
 import { TabType } from '~/composables'
-import { TabMetaInj, useTabs, useUIPermission } from '#imports'
 import MdiAirTableIcon from '~icons/mdi/table-large'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
 
+const { $e } = useNuxtApp()
+
 const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
 
 const { isUIAllowed } = useUIPermission()
 
-const tableCreateDialog = ref(false)
-const airtableImportDialog = ref(false)
-const quickImportDialog = ref(false)
-const importType = ref('')
-const currentMenu = ref<string[]>(['addORImport'])
-
 provide(TabMetaInj, activeTab)
 
-function openQuickImportDialog(type: string) {
-  quickImportDialog.value = true
-  importType.value = type
-}
-
 const icon = (tab: TabItem) => {
   switch (tab.type) {
     case TabType.TABLE:
@@ -33,6 +27,58 @@ const icon = (tab: TabItem) => {
       return MdiAccountGroup
   }
 }
+
+function openQuickImportDialog(type: string) {
+  $e(`a:actions:import-${type}`)
+
+  const isOpen = ref(true)
+
+  const { close } = useDialog(DlgQuickImport, {
+    'modelValue': isOpen,
+    'importType': type,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
+
+function openTableCreateDialog() {
+  $e('a:actions:create-table')
+
+  const isOpen = ref(true)
+
+  const { close } = useDialog(DlgTableCreate, {
+    'modelValue': isOpen,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
+
+function openAirtableImportDialog() {
+  $e('a:actions:import-airtable')
+
+  const isOpen = ref(true)
+
+  const { close } = useDialog(DlgAirtableImport, {
+    'modelValue': isOpen,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
 </script>
 
 <template>
@@ -43,116 +89,99 @@ const icon = (tab: TabItem) => {
           <a-tab-pane v-for="(tab, i) in tabs" :key="i">
             <template #tab>
               <div class="flex align-center gap-2">
-                <component :is="icon(tab)" class="text-sm"></component>
+                <component :is="icon(tab)" class="text-sm" />
+
                 {{ tab.title }}
               </div>
             </template>
           </a-tab-pane>
 
           <template #leftExtra>
-            <a-menu v-if="isUIAllowed('addOrImport')" v-model:selectedKeys="currentMenu" class="border-0" mode="horizontal">
-              <a-sub-menu key="addORImport">
-                <template #title>
-                  <div class="text-sm flex items-center gap-2 pt-[8px] pb-3">
-                    <MdiPlusBoxOutline />
-                    Add / Import
-                  </div>
-                </template>
-
-                <a-menu-item-group v-if="isUIAllowed('addTable')">
-                  <a-menu-item key="add-new-table" v-t="['a:actions:create-table']" @click="tableCreateDialog = true">
-                    <span class="flex items-center gap-2">
-                      <MdiTable class="text-primary" />
+            <a-dropdown v-if="isUIAllowed('addOrImport')" :trigger="['click']">
+              <div
+                class="cursor-pointer color-transition group hover:text-primary text-sm flex items-center gap-2 py-[9.5px] px-[20px]"
+              >
+                <MdiPlusBoxOutline class="group-hover:text-pink-500" />
+                Add / Import
+              </div>
+
+              <template #overlay>
+                <a-menu class="nc-add-project-menu !py-0 ml-6 rounded text-sm">
+                  <a-menu-item v-if="isUIAllowed('addTable')" key="add-new-table" @click="openTableCreateDialog">
+                    <div class="color-transition nc-project-menu-item after:(!rounded-t) group">
+                      <MdiTable class="group-hover:text-pink-500" />
                       <!-- Add new table -->
                       {{ $t('tooltip.addTable') }}
-                    </span>
-                  </a-menu-item>
-                </a-menu-item-group>
-
-                <a-menu-item-group title="QUICK IMPORT FROM">
-                  <a-menu-item
-                    v-if="isUIAllowed('airtableImport')"
-                    key="quick-import-airtable"
-                    v-t="['a:actions:import-airtable']"
-                    @click="airtableImportDialog = true"
-                  >
-                    <span class="flex items-center gap-2">
-                      <MdiTableLarge class="text-primary" />
-                      <!-- TODO: i18n -->
-                      Airtable
-                    </span>
-                  </a-menu-item>
-                  <a-menu-item
-                    v-if="isUIAllowed('csvImport')"
-                    key="quick-import-csv"
-                    v-t="['a:actions:import-csv']"
-                    @click="openQuickImportDialog('csv')"
-                  >
-                    <span class="flex items-center gap-2">
-                      <MdiFileDocumentOutline class="text-primary" />
-                      <!-- TODO: i18n -->
-                      CSV file
-                    </span>
+                    </div>
                   </a-menu-item>
 
-                  <a-menu-item
-                    v-if="isUIAllowed('jsonImport')"
-                    key="quick-import-json"
-                    v-t="['a:actions:import-json']"
-                    @click="openQuickImportDialog('json')"
-                  >
-                    <span class="flex items-center gap-2">
-                      <MdiCodeJson class="text-primary" />
-                      <!-- TODO: i18n -->
-                      JSON file
-                    </span>
-                  </a-menu-item>
-
-                  <a-menu-item
-                    v-if="isUIAllowed('excelImport')"
-                    key="quick-import-excel"
-                    v-t="['a:actions:import-excel']"
-                    @click="openQuickImportDialog('excel')"
-                  >
-                    <span class="flex items-center gap-2">
-                      <MdiFileExcel class="text-primary" />
-                      <!-- TODO: i18n -->
-                      Microsoft Excel
-                    </span>
-                  </a-menu-item>
-                </a-menu-item-group>
-
-                <a-menu-divider class="ma-0 mb-2" />
-
-                <a-menu-item
-                  v-if="isUIAllowed('importRequest')"
-                  key="add-new-table"
-                  v-t="['e:datasource:import-request']"
-                  class="ma-0 mt-3"
-                >
-                  <a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank" class="prose-sm pa-0">
-                    <span class="flex items-center gap-2">
-                      <MdiOpenInNew class="text-primary" />
+                  <a-menu-item-group title="QUICK IMPORT FROM" class="!px-0 !mx-0">
+                    <a-menu-item
+                      v-if="isUIAllowed('airtableImport')"
+                      key="quick-import-airtable"
+                      @click="openAirtableImportDialog"
+                    >
+                      <div class="color-transition nc-project-menu-item group">
+                        <MdiTableLarge class="group-hover:text-pink-500" />
+                        <!-- TODO: i18n -->
+                        Airtable
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
+                      <div class="color-transition nc-project-menu-item group">
+                        <MdiFileDocumentOutline class="group-hover:text-pink-500" />
+                        <!-- TODO: i18n -->
+                        CSV file
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
+                      <div class="color-transition nc-project-menu-item group">
+                        <MdiCodeJson class="group-hover:text-pink-500" />
+                        <!-- TODO: i18n -->
+                        JSON file
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-item
+                      v-if="isUIAllowed('excelImport')"
+                      key="quick-import-excel"
+                      @click="openQuickImportDialog('excel')"
+                    >
+                      <div class="color-transition nc-project-menu-item group">
+                        <MdiFileExcel class="group-hover:text-pink-500" />
+                        <!-- TODO: i18n -->
+                        Microsoft Excel
+                      </div>
+                    </a-menu-item>
+                  </a-menu-item-group>
+
+                  <a-menu-divider class="my-0" />
+
+                  <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
+                    <a
+                      v-t="['e:datasource:import-request']"
+                      href="https://github.com/nocodb/nocodb/issues/2052"
+                      target="_blank"
+                      class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
+                    >
+                      <MdiOpenInNew class="group-hover:text-pink-500" />
                       <!-- TODO: i18n -->
                       Request a data source you need?
-                    </span>
-                  </a>
-                </a-menu-item>
-              </a-sub-menu>
-            </a-menu>
+                    </a>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
           </template>
         </a-tabs>
       </div>
-      <div class="w-full min-h-[300px] flex-grow">
+
+      <div class="w-full min-h-[300px] flex-auto">
         <NuxtPage />
       </div>
     </div>
-
-    <DlgTableCreate v-if="tableCreateDialog" v-model="tableCreateDialog" />
-
-    <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" :import-type="importType" />
-
-    <DlgAirtableImport v-if="airtableImportDialog" v-model="airtableImportDialog" />
   </div>
 </template>
 
@@ -181,6 +210,24 @@ const icon = (tab: TabItem) => {
   }
 }
 
+.nc-add-project-menu {
+  :deep(.ant-dropdown-menu-item-group-list) {
+    @apply !mx-0;
+  }
+
+  :deep(.ant-dropdown-menu-item-group-title) {
+    @apply border-b-1;
+  }
+
+  :deep(.ant-dropdown-menu-item-group-list) {
+    @apply m-0;
+  }
+
+  :deep(.ant-dropdown-menu-item) {
+    @apply !py-0 active:(ring ring-pink-500);
+  }
+}
+
 :deep(.ant-menu-item-selected) {
   @apply text-inherit !bg-inherit;
 }
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
index 8f65f3122b..d6624356c8 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
@@ -1,3 +1,132 @@
+<script lang="ts" setup>
+import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
+import { ref, useDialog, useDropZone, useFileDialog, useNuxtApp, watch } from '#imports'
+import DlgQuickImport from '~/components/dlg/QuickImport.vue'
+
+const dropZone = ref<HTMLDivElement>()
+
+const { isOverDropZone } = useDropZone(dropZone, onDrop)
+
+const { files, open, reset } = useFileDialog()
+
+const { $e } = useNuxtApp()
+
+type QuickImportTypes = 'excel' | 'json' | 'csv'
+
+const allowedQuickImportTypes = [
+  // Excel
+  '.xls, .xlsx, .xlsm, .ods, .ots',
+
+  // CSV
+  '.csv',
+
+  // JSON
+  '.json',
+]
+
+watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles), { flush: 'post' })
+
+function onFileSelect(fileList: FileList | null) {
+  if (!fileList) return
+
+  const files = Array.from(fileList).map((file) => file)
+
+  onDrop(files)
+}
+
+function onDrop(droppedFiles: File[] | null) {
+  if (!droppedFiles) return
+
+  /** we can only handle one file per drop */
+  if (droppedFiles.length > 1) {
+    return message.error({
+      content: `Only one file can be imported at a time.`,
+      duration: 2,
+    })
+  }
+
+  let fileType: QuickImportTypes | null = null
+  const isValid = allowedQuickImportTypes.some((type) => {
+    const isAllowed = droppedFiles[0].type.replace('/', '.').endsWith(type)
+
+    if (isAllowed) {
+      fileType = type.replace('.', '') as QuickImportTypes
+    }
+
+    return isAllowed
+  })
+
+  /** Invalid file type was dropped */
+  if (!isValid) {
+    return message.error({
+      content: 'Invalid file type',
+      duration: 2,
+    })
+  }
+
+  if (fileType && isValid) {
+    openQuickImportDialog(fileType, droppedFiles[0])
+  }
+}
+
+function openQuickImportDialog(type: QuickImportTypes, file: File) {
+  $e(`a:actions:import-${type}`)
+
+  const isOpen = ref(true)
+
+  const { close, vNode } = useDialog(DlgQuickImport, {
+    'modelValue': isOpen,
+    'importType': type,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  vNode.value?.component?.exposed?.handleChange({
+    file: {
+      uid: `${type}-${file.name}-${Math.random().toString(36).substring(2)}`,
+      name: file.name,
+      type: file.type,
+      status: 'done',
+      fileName: file.name,
+      lastModified: file.lastModified,
+      size: file.size,
+      originFileObj: file,
+    },
+    event: { percent: 100 },
+  } as UploadChangeParam<UploadFile<File>>)
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+
+    reset()
+  }
+}
+</script>
+
 <template>
-  <div class="h-full w-full prose text-3xl text-gray-400 flex items-center justify-center">Welcome to NocoDB!</div>
+  <div ref="dropZone" class="h-full w-full text-gray-600 flex items-center justify-center relative">
+    <general-overlay
+      :model-value="true"
+      :class="[isOverDropZone ? 'bg-gray-300/75 border-primary shadow' : 'bg-gray-100/25 border-gray-500 cursor-pointer']"
+      inline
+      style="top: 20%; left: 20%; right: 20%; bottom: 20%"
+      class="text-3xl flex items-center justify-center gap-2 border-1 border-dashed rounded hover:border-primary"
+      @click="open"
+    >
+      <template v-if="isOverDropZone"> <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here </template>
+    </general-overlay>
+
+    <div class="flex flex-col gap-6 items-center justify-center md:w-1/2 mx-auto text-center">
+      <div class="text-3xl">Welcome to NocoDB!</div>
+
+      <div class="flex items-center flex-wrap justify-center gap-2 prose-lg leading-8">
+        To get started, either drop a <span class="flex items-center gap-2"><PhFileCsv /> CSV</span>,
+        <span class="flex items-center gap-2"><BiFiletypeJson /> JSON</span> or
+        <span class="flex items-center gap-2"><BiFiletypeXlsx /> Excel</span> file here or click the button in the top-left of
+        this page.
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/packages/nc-gui-v2/plugins/ant.ts b/packages/nc-gui-v2/plugins/ant.ts
index 6e9cc08168..b187f0be25 100644
--- a/packages/nc-gui-v2/plugins/ant.ts
+++ b/packages/nc-gui-v2/plugins/ant.ts
@@ -1,6 +1,12 @@
-import { Menu as AntMenu } from 'ant-design-vue'
-import { defineNuxtPlugin } from '#imports'
+import { Menu as AntMenu, ConfigProvider } from 'ant-design-vue'
+import { defineNuxtPlugin, themeColors } from '#imports'
 
 export default defineNuxtPlugin((nuxtApp) => {
+  ConfigProvider.config({
+    theme: {
+      primaryColor: themeColors.primary,
+    },
+  })
+
   nuxtApp.vueApp.component(AntMenu.name, AntMenu)
 })