diff --git a/packages/nc-gui/components/cell/Currency/Editor.vue b/packages/nc-gui/components/cell/Currency/Editor.vue
index 35ac18df4783..656d7ec49c75 100644
--- a/packages/nc-gui/components/cell/Currency/Editor.vue
+++ b/packages/nc-gui/components/cell/Currency/Editor.vue
@@ -23,7 +23,7 @@ const _vModel = useVModel(props, 'modelValue', emit)
 const lastSaved = ref()
 const cellFocused = ref(false)
 
-const inputType = computed(() => (!isForm.value && !cellFocused.value ? 'text' : 'number'))
+const inputType = computed(() => (isExpandedFormOpen.value && !cellFocused.value ? 'text' : 'number'))
 
 const currencyMeta = computed(() => {
   return {
diff --git a/packages/nc-gui/components/cell/Currency/index.vue b/packages/nc-gui/components/cell/Currency/index.vue
index da564b44ac46..9156e073ca01 100644
--- a/packages/nc-gui/components/cell/Currency/index.vue
+++ b/packages/nc-gui/components/cell/Currency/index.vue
@@ -29,7 +29,7 @@ const _vModel = useVModel(props, 'modelValue', emit)
 
 const cellFocused = ref(false)
 
-const inputType = computed(() => (!isForm.value && !cellFocused.value ? 'text' : 'number'))
+const inputType = computed(() => (isExpandedFormOpen.value && !cellFocused.value ? 'text' : 'number'))
 
 const vModel = computed({
   get: () => _vModel.value,
diff --git a/packages/nc-gui/components/cell/Decimal/Editor.vue b/packages/nc-gui/components/cell/Decimal/Editor.vue
index a99827528955..ab0501c8e7c4 100644
--- a/packages/nc-gui/components/cell/Decimal/Editor.vue
+++ b/packages/nc-gui/components/cell/Decimal/Editor.vue
@@ -21,6 +21,7 @@ const readOnly = inject(ReadonlyInj, ref(false))
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 const isForm = inject(IsFormInj)!
 const isCanvasInjected = inject(IsCanvasInjectionInj, false)
+const canvasCellEventData = inject(CanvasCellEventDataInj, reactive<CanvasCellEventDataInjType>({}))
 
 const inputRef = ref<HTMLInputElement>()
 const vModel = useVModel(props, 'modelValue', emits)
@@ -30,6 +31,9 @@ const precision = computed(() => {
 })
 
 onMounted(() => {
+  if (canvasCellEventData?.keyboardKey && isSinglePrintableKey(canvasCellEventData?.keyboardKey)) {
+    vModel.value = Number(canvasCellEventData.keyboardKey)
+  }
   if (isCanvasInjected && !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value) {
     inputRef.value?.focus()
   }
diff --git a/packages/nc-gui/components/cell/Time/index.vue b/packages/nc-gui/components/cell/Time/index.vue
index 0e38a3dab540..6d3fbe6ab35c 100644
--- a/packages/nc-gui/components/cell/Time/index.vue
+++ b/packages/nc-gui/components/cell/Time/index.vue
@@ -55,7 +55,7 @@ const localState = computed({
       return undefined
     }
     let convertingValue = modelValue
-    const valueNumber: number = Number(modelValue)
+    const valueNumber = Number(modelValue)
     if (!isNaN(valueNumber)) {
       // FIXME: currently returned value is in minutes
       // so need to * 60 and need to be removed if changed to seconds
diff --git a/packages/nc-gui/components/dlg/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index 8c734e864af8..ce3fbc9f2a07 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -6,6 +6,7 @@ const { modelValue, baseId, sourceId, transition } = defineProps<{
   baseId: string
   sourceId: string
   transition?: string
+  showBackBtn?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue', 'back'])
@@ -450,7 +451,9 @@ const collapseKey = ref('')
             }
           "
         >
-          {{ $t('general.back') }}
+          <GeneralIcon v-if="showBackBtn" icon="chevronLeft" class="mr-1" />
+
+          {{ showBackBtn ? $t('general.back') : $t('general.cancel') }}
         </nc-button>
 
         <nc-button
diff --git a/packages/nc-gui/components/dlg/Base/Duplicate.vue b/packages/nc-gui/components/dlg/Base/Duplicate.vue
index 929bb231e750..c7df17cdcf73 100644
--- a/packages/nc-gui/components/dlg/Base/Duplicate.vue
+++ b/packages/nc-gui/components/dlg/Base/Duplicate.vue
@@ -77,11 +77,7 @@ const _duplicate = async () => {
     const jobData = await api.base.duplicate(props.base.id as string, {
       options: optionsToExclude.value,
       base: {
-        fk_workspace_id: isEeUI
-          ? targetWorkspace.value?.id
-            ? targetWorkspace.value.id
-            : props.base.fk_workspace_id
-          : null,
+        fk_workspace_id: isEeUI ? (targetWorkspace.value?.id ? targetWorkspace.value.id : props.base.fk_workspace_id) : null,
         type: props.base.type,
         color,
         meta: JSON.stringify({
diff --git a/packages/nc-gui/components/dlg/NocoDbImport.vue b/packages/nc-gui/components/dlg/NocoDbImport.vue
index 91fe69e6dce7..5dbafd38648c 100644
--- a/packages/nc-gui/components/dlg/NocoDbImport.vue
+++ b/packages/nc-gui/components/dlg/NocoDbImport.vue
@@ -5,6 +5,7 @@ const { modelValue, baseId, transition } = defineProps<{
   modelValue: boolean
   baseId: string
   transition?: string
+  showBackBtn?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue', 'back'])
@@ -347,7 +348,9 @@ onUnmounted(() => {
             }
           "
         >
-          {{ $t('general.back') }}
+          <GeneralIcon v-if="showBackBtn" icon="chevronLeft" class="mr-1" />
+
+          {{ showBackBtn ? $t('general.back') : $t('general.cancel') }}
         </NcButton>
         <NcButton v-else key="abort" type="danger" size="small" @click="abortListening">
           {{ $t('general.abort') }}
diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 207f0cdd2e05..f2a10951e3ba 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -2,8 +2,9 @@
 import { toRaw, unref } from '@vue/runtime-core'
 import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
 import { Upload } from 'ant-design-vue'
-import { type TableType, charsetOptions } from 'nocodb-sdk'
+import { type TableType, charsetOptions, charsetOptionsMap, ncHasProperties } from 'nocodb-sdk'
 import rfdc from 'rfdc'
+import type { ProgressMessageObjType } from '../../helpers/parsers/TemplateGenerator'
 
 interface Props {
   modelValue: boolean
@@ -12,12 +13,19 @@ interface Props {
   sourceId: string
   importDataOnly?: boolean
   transition?: string
+  showBackBtn?: boolean
 }
 
-const { importType, importDataOnly = false, baseId, sourceId, transition, ...rest } = defineProps<Props>()
+const { importType, importDataOnly = false, baseId, sourceId, transition, showBackBtn, ...rest } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue', 'back'])
 
+enum ImportTypeTabs {
+  'upload' = 'upload',
+  'uploadFromUrl' = 'uploadFromUrl',
+  'uploadJSON' = 'uploadJSON',
+}
+
 const { $api, $importWorker } = useNuxtApp()
 
 let importWorker: Worker
@@ -35,6 +43,7 @@ const isWorkerSupport = typeof Worker !== 'undefined'
 const { t } = useI18n()
 
 const progressMsg = ref('Parsing Data ...')
+const progressMsgNew = ref<Record<string, string>>({})
 
 const { tables } = storeToRefs(useBase())
 
@@ -64,6 +73,12 @@ const temporaryJson = ref({})
 
 const jsonErrorText = ref('')
 
+const activeTab = ref<ImportTypeTabs>(ImportTypeTabs.upload)
+
+const isError = ref(false)
+
+const refMonacoEditor = ref()
+
 const useForm = Form.useForm
 
 const defaultImportState = {
@@ -140,10 +155,6 @@ watch(
   { immediate: true },
 )
 
-const filterOption = (input = '', params: { key: string }) => {
-  return params.key?.toLowerCase().includes(input.toLowerCase())
-}
-
 const isPreImportFileFilled = computed(() => {
   return importState.fileList?.length > 0
 })
@@ -153,21 +164,52 @@ const isPreImportUrlFilled = computed(() => {
 })
 
 const isPreImportJsonFilled = computed(() => {
-  return JSON.stringify(importState.jsonEditor).length > 2 && !jsonErrorText.value
+  try {
+    return refMonacoEditor.value.isValid && JSON.stringify(importState.jsonEditor).length > 2
+  } catch {
+    return false
+  }
 })
 
+const localImportError = ref('')
+
+const importError = computed(() => localImportError.value ?? templateEditorRef.value?.importError ?? '')
+
+const maxFileUploadLimit = computed(() => (isImportTypeCsv.value ? 3 : 1))
+
+const hideUpload = computed(() => preImportLoading.value || importState.fileList.length >= maxFileUploadLimit.value)
+
 const disablePreImportButton = computed(() => {
-  if (isImportTypeCsv.value) {
-    return isPreImportFileFilled.value === isPreImportUrlFilled.value
-  } else if (IsImportTypeExcel.value) {
-    return isPreImportFileFilled.value === isPreImportUrlFilled.value
-  } else if (isImportTypeJson.value) {
-    return !isPreImportFileFilled.value && !isPreImportJsonFilled.value
+  if (activeTab.value === ImportTypeTabs.upload) {
+    return !isPreImportFileFilled.value
+  } else if (activeTab.value === ImportTypeTabs.uploadFromUrl) {
+    return !isPreImportUrlFilled.value
+  } else if (activeTab.value === ImportTypeTabs.uploadJSON) {
+    return !isPreImportJsonFilled.value
   }
+
+  return true
 })
 
-const isError = ref(false)
-const refMonacoEditor = ref()
+const importBtnText = computed(() => {
+  // configure field screen
+  if (templateEditorModal.value) {
+    if (importLoading.value) {
+      return importDataOnly ? t('labels.uploading') : t('labels.importing')
+    }
+
+    return importDataOnly ? t('activity.upload') : t('activity.import')
+  }
+
+  const type = isImportTypeJson.value ? t('labels.jsonCapitalized') : t('objects.files')
+
+  // upload file screen
+  if (preImportLoading.value) {
+    return importDataOnly ? `${t('labels.uploading')} ${type}` : `${t('labels.importing')} ${type}`
+  }
+
+  return importDataOnly ? `${t('activity.upload')} ${type}` : `${t('activity.import')} ${type}`
+})
 
 const disableImportButton = computed(() => !templateEditorRef.value?.isValid || isError.value)
 
@@ -176,34 +218,37 @@ let templateGenerator: CSVTemplateAdapter | JSONTemplateAdapter | ExcelTemplateA
 async function handlePreImport() {
   preImportLoading.value = true
   isParsingData.value = true
+  localImportError.value = ''
 
   if (!baseTables.value.get(baseId)) {
     await loadProjectTables(baseId)
   }
 
+  const isPreImportFileMode = isPreImportFileFilled.value && activeTab.value === ImportTypeTabs.upload
+
   if (isImportTypeCsv.value) {
-    if (isPreImportFileFilled.value) {
+    if (isPreImportFileMode) {
       await parseAndExtractData(importState.fileList as streamImportFileList)
     } else if (isPreImportUrlFilled.value) {
       try {
         await validate()
         await parseAndExtractData(importState.url)
       } catch (e: any) {
-        message.error(await extractSdkResponseErrorMsg(e))
+        localImportError.value = await extractSdkResponseErrorMsg(e)
       }
     }
   } else if (isImportTypeJson.value) {
-    if (isPreImportFileFilled.value) {
+    if (isPreImportFileMode) {
       if (isWorkerSupport && importWorker) {
         await parseAndExtractData(importState.fileList as streamImportFileList)
       } else {
         await parseAndExtractData((importState.fileList as importFileList)[0].data)
       }
-    } else {
+    } else if (isPreImportJsonFilled.value) {
       await parseAndExtractData(JSON.stringify(importState.jsonEditor))
     }
   } else if (IsImportTypeExcel) {
-    if (isPreImportFileFilled.value) {
+    if (isPreImportFileMode) {
       if (isWorkerSupport && importWorker) {
         await parseAndExtractData(importState.fileList as streamImportFileList)
       } else {
@@ -214,7 +259,7 @@ async function handlePreImport() {
         await validate()
         await parseAndExtractData(importState.url)
       } catch (e: any) {
-        message.error(await extractSdkResponseErrorMsg(e))
+        localImportError.value = await extractSdkResponseErrorMsg(e)
       }
     }
   }
@@ -224,21 +269,27 @@ async function handlePreImport() {
 }
 
 async function handleImport() {
+  localImportError.value = ''
   try {
     if (!templateGenerator && !importWorker) {
-      message.error(t('msg.error.templateGeneratorNotFound'))
+      localImportError.value = t('msg.error.templateGeneratorNotFound')
       return
     }
     importLoading.value = true
     await templateEditorRef.value.importTemplate()
+
+    templateEditorModal.value = false
+    Object.assign(importState, defaultImportState)
+    dialogShow.value = false
   } catch (e: any) {
-    return message.error(await extractSdkResponseErrorMsg(e))
+    console.log(e)
+
+    const errorMsg = await extractSdkResponseErrorMsg(e)
+    localImportError.value = errorMsg
+    return
   } finally {
     importLoading.value = false
-    templateEditorModal.value = false
-    Object.assign(importState, defaultImportState)
   }
-  dialogShow.value = false
 }
 
 function rejectDrop(fileList: UploadFile[]) {
@@ -249,6 +300,7 @@ function rejectDrop(fileList: UploadFile[]) {
 
 function handleChange(info: UploadChangeParam) {
   const status = info.file.status
+
   if (status && status !== 'uploading' && status !== 'removed') {
     if (isImportTypeCsv.value || (isWorkerSupport && importWorker)) {
       if (!importState.fileList.find((f) => f.uid === info.file.uid)) {
@@ -284,9 +336,7 @@ function handleChange(info: UploadChangeParam) {
     }
   }
 
-  if (status === 'done') {
-    message.success(`Uploaded file ${info.file.name} successfully`)
-  } else if (status === 'error') {
+  if (status === 'error') {
     message.error(`${t('msg.error.fileUploadFailed')} ${info.file.name}`)
   }
 }
@@ -312,8 +362,10 @@ function populateUniqueTableName(tn: string, draftTn: string[] = []) {
 }
 
 function getAdapter(val: any) {
+  const isPreImportFileMode = isPreImportFileFilled.value && activeTab.value === ImportTypeTabs.upload
+
   if (isImportTypeCsv.value) {
-    if (isPreImportFileFilled.value) {
+    if (isPreImportFileMode) {
       return new CSVTemplateAdapter(
         val,
         {
@@ -335,13 +387,13 @@ function getAdapter(val: any) {
       )
     }
   } else if (IsImportTypeExcel.value) {
-    if (isPreImportFileFilled.value) {
+    if (isPreImportFileMode) {
       return new ExcelTemplateAdapter(val, importState.parserConfig, undefined, undefined, unref(existingColumns))
     } else {
       return new ExcelUrlTemplateAdapter(val, importState.parserConfig, $api, undefined, undefined, unref(existingColumns))
     }
   } else if (isImportTypeJson.value) {
-    if (isPreImportFileFilled.value) {
+    if (isPreImportFileMode) {
       return new JSONTemplateAdapter(val, importState.parserConfig)
     } else {
       return new JSONTemplateAdapter(val, importState.parserConfig)
@@ -366,8 +418,14 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
   customReqArgs.onSuccess()
 }
 
+const showMaxFileLimitError = ref(false)
+
 /** check if the file size exceeds the limit */
-const beforeUpload = (file: UploadFile) => {
+const beforeUpload = (file: UploadFile, fileList: UploadFile[]) => {
+  if (importState.fileList.length + fileList.length > maxFileUploadLimit.value) {
+    showMaxFileLimitError.value = true
+  }
+
   const exceedLimit = file.size! / 1024 / 1024 > 25
   if (exceedLimit) {
     message.error(`File ${file.name} is too big. The accepted file size is less than 25MB.`)
@@ -389,7 +447,10 @@ function extractImportWorkerPayload(value: UploadFile[] | ArrayBuffer | string)
   importType = importType! ?? ImportType.CSV
 
   let importSource: ImportSource
-  if (isPreImportFileFilled.value) {
+
+  const isPreImportFileMode = isPreImportFileFilled.value && activeTab.value === ImportTypeTabs.upload
+
+  if (isPreImportFileMode) {
     importSource = ImportSource.FILE
   } else if (isPreImportUrlFilled.value && importType !== ImportType.JSON) {
     importSource = ImportSource.URL
@@ -462,7 +523,12 @@ async function parseAndExtractData(val: UploadFile[] | ArrayBuffer | string) {
               importWorker?.removeEventListener('message', handler, false)
               break
             case ImportWorkerResponse.PROGRESS:
-              progressMsg.value = payload
+              if (ncHasProperties<ProgressMessageObjType>(payload, ['title', 'value'])) {
+                progressMsgNew.value = { ...progressMsgNew.value, [payload.title]: payload?.value ?? '' }
+              } else {
+                progressMsg.value = payload
+              }
+
               break
             case ImportWorkerResponse.ERROR:
               reject(payload)
@@ -483,7 +549,7 @@ async function parseAndExtractData(val: UploadFile[] | ArrayBuffer | string) {
       templateGenerator = getAdapter(val)
 
       if (!templateGenerator) {
-        message.error(t('msg.error.templateGeneratorNotFound'))
+        localImportError.value = t('msg.error.templateGeneratorNotFound')
         return
       }
 
@@ -507,9 +573,19 @@ async function parseAndExtractData(val: UploadFile[] | ArrayBuffer | string) {
     }
 
     templateEditorModal.value = true
+    showMaxFileLimitError.value = false
   } catch (e: any) {
     console.log(e)
-    message.error(await extractSdkResponseErrorMsg(e))
+
+    /**
+     * If it is import url and it fail to send req due to cross origin or any other reason the e type will be string
+     * @example: Failed to execute 'send' on 'XMLHttpRequest': Failed to load '<url>'
+     */
+    if (typeof e === 'string' && isPreImportUrlFilled.value && activeTab.value === ImportTypeTabs.uploadFromUrl) {
+      localImportError.value = e.replace(importState.url, '').replace(/''/, '')
+    } else {
+      localImportError.value = (await extractSdkResponseErrorMsg(e)) || e?.toString()
+    }
   }
 }
 
@@ -526,10 +602,33 @@ onMounted(() => {
   importState.parserConfig.autoSelectFieldTypes = importDataOnly
 })
 
-onUnmounted(() => {
+const onCancelImport = () => {
   $importWorker.terminate()
+  Object.assign(importState, defaultImportState)
+  preImportLoading.value = false
+  importLoading.value = false
+  templateData.value = undefined
+  importData.value = undefined
+  importColumns.value = []
+
+  templateEditorModal.value = false
+  isParsingData.value = false
+  temporaryJson.value = {}
+  jsonErrorText.value = ''
+  isError.value = false
+  localImportError.value = ''
+}
+
+onUnmounted(() => {
+  onCancelImport()
 })
 
+const onClickCancel = () => {
+  dialogShow.value = false
+  emit('back')
+  onCancelImport()
+}
+
 function handleJsonChange(newValue: any) {
   try {
     temporaryJson.value = newValue
@@ -540,6 +639,11 @@ function handleJsonChange(newValue: any) {
   }
 }
 
+function handleResetImportError() {
+  localImportError.value = ''
+  templateEditorRef.value?.updateImportError?.('')
+}
+
 watch(
   () => importState.fileList,
   () => {
@@ -556,6 +660,11 @@ watch(
         }
       }, 500)
     }
+
+    // Hide max file limit error on removing file
+    if (importState.fileList.length < maxFileUploadLimit.value && showMaxFileLimitError.value) {
+      showMaxFileLimitError.value = false
+    }
   },
 )
 </script>
@@ -571,13 +680,18 @@ watch(
     :transition-name="transition"
     @keydown.esc="dialogShow = false"
   >
-    <a-spin :spinning="isParsingData" :tip="progressMsg" size="large">
+    <div
+      class="relative"
+      :class="{
+        'cursor-wait': preImportLoading || importLoading,
+      }"
+    >
       <div class="text-base font-weight-700 m-0 flex items-center gap-3">
         <GeneralIcon :icon="importMeta.icon" class="w-6 h-6" />
         {{ importMeta.header }}
         <a
           href="https://docs.nocodb.com/tables/create-table-via-import/"
-          class="!text-gray-500 prose-sm ml-auto"
+          class="!text-nc-content-gray-subtle2 text-sm font-weight-500 ml-auto"
           target="_blank"
           rel="noopener"
         >
@@ -585,7 +699,12 @@ watch(
         </a>
       </div>
 
-      <div class="mt-5">
+      <div
+        class="mt-5"
+        :class="{
+          'pointer-events-none': importLoading,
+        }"
+      >
         <LazyTemplateEditor
           v-if="templateEditorModal"
           ref="templateEditorRef"
@@ -605,205 +724,349 @@ watch(
           @change="onChange"
         />
         <div v-else>
-          <a-upload-dragger
-            v-model:fileList="importState.fileList"
-            name="file"
-            class="nc-modern-drag-import nc-input-import !scrollbar-thin-dull !py-4 !transition !rounded-lg !border-gray-200"
-            list-type="picture"
-            :accept="importMeta.acceptTypes"
-            :max-count="isImportTypeCsv ? 3 : 1"
-            :multiple="true"
-            :custom-request="customReqCbk"
-            :before-upload="beforeUpload"
-            :disabled="isImportTypeJson ? isPreImportJsonFilled && !isPreImportFileFilled : isPreImportUrlFilled"
-            @change="handleChange"
-            @reject="rejectDrop"
-          >
-            <component :is="iconMap.upload" class="w-6 h-6" />
-
-            <p class="!mt-2 text-[13px]">
-              {{ $t('msg.dropYourDocHere') }} {{ $t('general.or').toLowerCase() }}
-              <span class="text-nc-content-brand hover:underline">{{ $t('labels.browseFiles') }}</span>
-            </p>
-
-            <p class="!mt-3 text-[13px] text-gray-500">{{ $t('general.supported') }}: {{ importMeta.acceptTypes }}</p>
-
-            <p class="ant-upload-hint">
-              {{ importMeta.uploadHint }}
-            </p>
-
-            <template #itemRender="{ file, actions }">
-              <div class="flex items-center gap-4">
-                <div class="bg-gray-100 h-10 flex flex-shrink items-center justify-center rounded-lg">
-                  <CellAttachmentIconView :item="{ title: file.name, mimetype: file.type }" class="w-9 h-9" />
+          <NcTabs v-model:activeKey="activeTab" class="nc-quick-import-tabs" @update:active-key="handleResetImportError">
+            <a-tab-pane :key="ImportTypeTabs.upload" :disabled="preImportLoading" class="!h-full">
+              <template #tab>
+                <div class="flex gap-2 items-center">
+                  <span class="text-sm">{{ $t('general.upload') }} </span>
                 </div>
-                <div class="flex flex-col flex-grow min-w-[0px]">
-                  <div class="text-[14px] text-[#15171A] font-weight-500">
-                    <NcTooltip>
-                      <template #title>
-                        {{ file.name }}
+              </template>
+              <div class="relative mt-5">
+                <a-upload-dragger
+                  v-model:fileList="importState.fileList"
+                  name="file"
+                  class="nc-modern-drag-import nc-input-import !scrollbar-thin-dull !py-4 !transition !rounded-lg !border-gray-200"
+                  :class="{
+                    hidden: hideUpload,
+                  }"
+                  list-type="picture"
+                  :accept="importMeta.acceptTypes"
+                  :max-count="maxFileUploadLimit"
+                  :multiple="true"
+                  :disabled="preImportLoading"
+                  :custom-request="customReqCbk"
+                  :before-upload="beforeUpload"
+                  @change="handleChange"
+                  @reject="rejectDrop"
+                >
+                  <component :is="iconMap.upload" class="w-6 h-6" />
+
+                  <p class="!mt-2 text-[13px]">
+                    {{ $t('msg.dropYourDocHere') }} {{ $t('general.or').toLowerCase() }}
+                    <span class="text-nc-content-brand hover:underline">{{ $t('labels.browseFiles') }}</span>
+                  </p>
+
+                  <p class="!mt-3 text-[13px] text-gray-500">{{ $t('general.supported') }}: {{ importMeta.acceptTypes }}</p>
+
+                  <p class="ant-upload-hint">
+                    {{ importMeta.uploadHint }}
+                  </p>
+
+                  <template #itemRender="{ file, actions }">
+                    <div class="flex items-center gap-4">
+                      <div class="bg-gray-100 h-10 w-10 flex flex-none items-center justify-center rounded-lg">
+                        <GeneralIcon :icon="importMeta.icon" class="w-6 h-6 flex-none" />
+                      </div>
+                      <div class="flex flex-col flex-grow min-w-[0px] w-[calc(100%_-_233px)]">
+                        <div class="flex-none">
+                          <NcTooltip show-on-truncate-only class="truncate text-sm text-nc-content-gray font-weight-500">
+                            <template #title>
+                              {{ file.name }}
+                            </template>
+
+                            {{ file.name }}
+                          </NcTooltip>
+                        </div>
+
+                        <div class="text-small text-nc-content-gray-muted font-weight-500">
+                          {{ getReadableFileSize(file.size) }}
+                        </div>
+                      </div>
+                      <template v-if="!preImportLoading">
+                        <a-form-item class="flex-1 !my-0 max-w-[120px] min-w-[120px]">
+                          <NcDropdown placement="bottomRight" overlay-class-name="overflow-hidden !w-[170px]">
+                            <template #default="{ visible }">
+                              <NcButton size="small" type="secondary" class="w-[120px] children:children:w-full !text-small">
+                                <NcTooltip class="flex-none w-[85px] truncate text-left !leading-[20px]" show-on-truncate-only>
+                                  <template #title> {{ charsetOptionsMap[file.encoding]?.sortLabel ?? '' }}</template>
+
+                                  {{ charsetOptionsMap[file.encoding]?.sortLabel?.replace('Windows', 'Win') ?? '' }}
+                                </NcTooltip>
+
+                                <GeneralIcon
+                                  icon="chevronDown"
+                                  class="flex-none transform"
+                                  :class="{
+                                    'rotate-180': visible,
+                                  }"
+                                />
+                              </NcButton>
+                            </template>
+
+                            <template #overlay="{ visible, onChange: onChangeVisibility }">
+                              <NcList
+                                v-model:value="file.encoding"
+                                :open="visible"
+                                :list="charsetOptions"
+                                search-input-placeholder="Search"
+                                option-label-key="sortLabel"
+                                option-value-key="value"
+                                class="!w-full"
+                                variant="small"
+                                @update:open="onChangeVisibility"
+                              >
+                              </NcList>
+                            </template>
+                          </NcDropdown>
+                        </a-form-item>
+                        <NcButton type="text" size="xsmall" class="flex-shrink" @click="actions?.remove?.()">
+                          <GeneralIcon icon="deleteListItem" />
+                        </NcButton>
                       </template>
-                      <span class="inline-block truncate w-full">
-                        {{ file.name }}
-                      </span>
-                    </NcTooltip>
-                  </div>
-                  <div class="text-[14px] text-[#565B66] mt-1 font-weight-500">
-                    {{ getReadableFileSize(file.size) }}
-                  </div>
-                </div>
-                <a-form-item class="flex-1 !my-0 max-w-[120px] min-w-[120px]">
-                  <NcSelect
-                    v-model:value="file.encoding"
-                    :filter-option="filterOption"
-                    class="w-[120px] max-w-[120px] nc-select-shadow"
-                    show-search
-                  >
-                    <a-select-option v-for="enc of charsetOptions" :key="enc.label" :value="enc.value">
-                      <div class="w-full flex items-center gap-2">
-                        <NcTooltip class="flex-1 truncate" show-on-truncate-only>
-                          <template #title>{{ enc.label }}</template>
-                          <span>{{ enc.label }}</span>
+                      <template v-else>
+                        <NcTooltip
+                          :key="progressMsgNew[file.name] || progressMsg"
+                          class="!max-w-[120px] min-w-[120p] !leading-[18px] truncate"
+                          show-on-truncate-only
+                        >
+                          <template #title> {{ progressMsgNew[file.name] || progressMsg }}</template>
+
+                          <span class="!text-small text-nc-content-gray-muted">
+                            {{ progressMsgNew[file.name] || progressMsg }}
+                          </span>
                         </NcTooltip>
-                        <component
-                          :is="iconMap.check"
-                          v-if="file.encoding === enc.value"
-                          id="nc-selected-item-icon"
-                          class="text-nc-content-purple-medium w-4 h-4"
-                        />
-                      </div>
-                    </a-select-option>
-                  </NcSelect>
-                </a-form-item>
-                <nc-button type="text" size="xsmall" class="flex-shrink" @click="actions?.remove?.()">
-                  <GeneralIcon icon="deleteListItem" />
-                </nc-button>
+                        <GeneralLoader class="flex text-nc-content-brand" size="medium" />
+                      </template>
+                    </div>
+                  </template>
+                </a-upload-dragger>
+
+                <a-alert
+                  v-if="showMaxFileLimitError"
+                  class="!rounded-lg !bg-transparent !border-nc-border-gray-medium !p-4 !w-full !mt-5"
+                >
+                  <template #message>
+                    <div class="flex flex-row items-center gap-2 mb-1">
+                      <GeneralIcon icon="alertTriangleSolid" class="text-nc-content-orange-medium w-6 h-6" />
+                      <span class="font-weight-700 text-sm flex-1">{{ $t('msg.warning.reachedUploadLimit') }}</span>
+
+                      <NcButton size="xsmall" type="text" @click="showMaxFileLimitError = false">
+                        <GeneralIcon icon="close" class="text-nc-content-gray-subtle" />
+                      </NcButton>
+                    </div>
+                  </template>
+                  <template #description>
+                    <div class="text-nc-content-gray-muted text-small leading-5 ml-8">
+                      {{
+                        $t(
+                          `msg.warning.${
+                            maxFileUploadLimit > 1
+                              ? 'youCanOnlyUploadMaxLimitFilesAtATimePlural'
+                              : 'youCanOnlyUploadMaxLimitFilesAtATime'
+                          }`,
+                          {
+                            limit: maxFileUploadLimit,
+                            type: $t(`labels.${importType}`),
+                          },
+                        )
+                      }}
+                    </div>
+                  </template>
+                </a-alert>
               </div>
-            </template>
-          </a-upload-dragger>
-
-          <div v-if="isImportTypeJson" class="my-5">
-            <div class="flex items-end gap-2">
-              <label> Enter Json </label>
-              <div class="flex-1" />
-              <NcButton type="text" size="xsmall" class="!px-2" @click="formatJson()"> Format </NcButton>
-            </div>
-            <LazyMonacoEditor
-              ref="refMonacoEditor"
-              class="nc-import-monaco-editor h-30 !border-1 !rounded-lg !mt-2"
-              :auto-focus="false"
-              hide-minimap
-              :read-only="isPreImportFileFilled"
-              :monaco-config="{
-                lineNumbers: 'on',
-              }"
-              :model-value="temporaryJson"
-              @update:model-value="handleJsonChange($event)"
-            />
-            <a-alert v-if="jsonErrorText && !isPreImportFileFilled" type="error" class="!rounded-lg !mt-2 !border-none !p-3">
-              <template #message>
-                <div class="flex flex-row items-center gap-2 mb-2">
-                  <GeneralIcon icon="ncAlertCircleFilled" class="text-red-500 w-4 h-4" />
-                  <span class="font-weight-700 text-[14px]">Json Error</span>
+            </a-tab-pane>
+            <a-tab-pane v-if="!isImportTypeJson" :key="ImportTypeTabs.uploadFromUrl" :disabled="preImportLoading" class="!h-full">
+              <template #tab>
+                <div class="flex gap-2 items-center">
+                  <span class="text-sm">{{ $t('labels.addFromUrl') }} </span>
                 </div>
               </template>
-              <template #description>
-                <div class="text-gray-500 text-[13px] leading-5 ml-6">
-                  {{ jsonErrorText }}
+              <div class="relative mt-5 mb-1 px-1">
+                <a-form :model="importState" name="quick-import-url-form" layout="vertical" class="!my-0">
+                  <a-form-item v-bind="validateInfos.url" :required="false" class="!my-0 quick-import-url-form">
+                    <template #label>
+                      <div class="flex items-center space-x-2 w-full">
+                        <span class="flex-1 text-nc-content-gray text-sm">
+                          {{ importMeta.urlInputLabel }}
+                        </span>
+                        <template v-if="preImportLoading">
+                          <NcTooltip
+                            :key="progressMsgNew[importState.url.split('/').pop() ?? ''] || progressMsg"
+                            class="!max-w-1/2 min-w-[120p] !leading-[18px] truncate"
+                            show-on-truncate-only
+                          >
+                            <template #title>
+                              {{ progressMsgNew[importState.url.split('/').pop() ?? ''] || progressMsg }}</template
+                            >
+
+                            <span class="!text-small text-nc-content-gray-muted">
+                              {{ progressMsgNew[importState.url.split('/').pop() ?? ''] || progressMsg }}
+                            </span>
+                          </NcTooltip>
+                          <GeneralLoader class="flex text-nc-content-brand" size="medium" />
+                        </template>
+                      </div>
+                    </template>
+                    <a-input
+                      v-model:value="importState.url"
+                      class="!rounded-md"
+                      placeholder="Paste file link here..."
+                      :disabled="preImportLoading"
+                    />
+                  </a-form-item>
+                </a-form>
+              </div>
+            </a-tab-pane>
+            <a-tab-pane v-if="isImportTypeJson" :key="ImportTypeTabs.uploadJSON" :disabled="preImportLoading" class="!h-full">
+              <template #tab>
+                <div class="flex gap-2 items-center">
+                  <span class="text-sm">{{ $t('labels.enterJson') }} </span>
                 </div>
               </template>
-            </a-alert>
-          </div>
-
-          <a-form v-if="!isImportTypeJson" :model="importState" name="quick-import-url-form" layout="vertical" class="mb-0 !mt-5">
-            <a-form-item :label="importMeta.urlInputLabel" v-bind="validateInfos.url" :required="false">
-              <a-input
-                v-model:value="importState.url"
-                class="!rounded-md"
-                placeholder="Paste file link here..."
-                :disabled="isPreImportFileFilled"
-              />
-            </a-form-item>
-          </a-form>
+              <div class="relative mt-5">
+                <div class="flex items-end gap-2">
+                  <label class="text-nc-content-gray text-sm"> Enter Json </label>
+                  <div class="flex-1" />
+
+                  <template v-if="preImportLoading">
+                    <NcTooltip
+                      :key="progressMsgNew[importState.url.split('/').pop() ?? ''] || progressMsg"
+                      class="!max-w-1/2 min-w-[120p] !leading-[25px] truncate"
+                      show-on-truncate-only
+                    >
+                      <template #title> {{ progressMsgNew[importState.url.split('/').pop() ?? ''] || progressMsg }}</template>
+
+                      <span class="!text-small text-nc-content-gray-muted">
+                        {{ progressMsgNew[importState.url.split('/').pop() ?? ''] || progressMsg }}
+                      </span>
+                    </NcTooltip>
+                    <GeneralLoader class="flex text-nc-content-brand" size="medium" />
+                  </template>
+                  <NcButton v-else type="text" size="xsmall" class="!px-2" @click="formatJson()"> Format </NcButton>
+                </div>
+                <div class="resize-y overflow-y-auto h-30 min-h-30 max-h-[400px] !border-1 !rounded-lg !mt-2">
+                  <LazyMonacoEditor
+                    ref="refMonacoEditor"
+                    class="nc-import-monaco-editor h-full"
+                    :auto-focus="false"
+                    hide-minimap
+                    :monaco-config="{
+                      lineNumbers: 'on',
+                    }"
+                    :model-value="temporaryJson"
+                    @update:model-value="handleJsonChange($event)"
+                  />
+                </div>
+                <div v-if="jsonErrorText || refMonacoEditor?.error" class="text-nc-content-red-medium text-small mt-2">
+                  {{ jsonErrorText || refMonacoEditor?.error }}
+                </div>
+              </div>
+            </a-tab-pane>
+          </NcTabs>
         </div>
       </div>
 
+      <a-alert v-if="importError" class="!rounded-lg !bg-transparent !border-nc-border-gray-medium !p-4 !w-full !mt-5">
+        <template #message>
+          <div class="flex flex-row items-center gap-2 mb-1">
+            <GeneralIcon icon="ncAlertCircleFilled" class="text-nc-content-red-dark w-6 h-6" />
+            <span class="font-weight-700 text-sm flex-1">{{ $t('msg.error.importError') }}</span>
+
+            <NcButton size="xsmall" type="text" @click="handleResetImportError">
+              <GeneralIcon icon="close" class="text-nc-content-gray-subtle" />
+            </NcButton>
+          </div>
+        </template>
+        <template #description>
+          <div class="text-nc-content-gray-muted text-small leading-5 ml-8 line-clamp-3">
+            {{ importError }}
+          </div>
+        </template>
+      </a-alert>
+
       <div v-if="!templateEditorModal" class="mt-5">
-        <nc-button type="text" size="small" @click="collapseKey = !collapseKey ? 'advanced-settings' : ''">
+        <NcButton type="text" size="small" @click="collapseKey = !collapseKey ? 'advanced-settings' : ''">
           {{ $t('title.advancedSettings') }}
           <GeneralIcon
             icon="chevronDown"
             class="ml-2 !transition-all !transform"
             :class="{ '!rotate-180': collapseKey === 'advanced-settings' }"
           />
-        </nc-button>
-
-        <a-collapse v-model:active-key="collapseKey" ghost class="nc-import-collapse">
+        </NcButton>
+
+        <a-collapse
+          v-model:active-key="collapseKey"
+          ghost
+          class="nc-import-collapse"
+          :class="{
+            'pointer-events-none': preImportLoading || importLoading,
+          }"
+        >
           <a-collapse-panel key="advanced-settings">
             <a-form-item v-if="isImportTypeCsv || IsImportTypeExcel" class="!my-2 nc-dense-checkbox-container">
-              <a-checkbox v-model:checked="importState.parserConfig.firstRowAsHeaders">
+              <NcCheckbox v-model:checked="importState.parserConfig.firstRowAsHeaders">
                 <span class="caption">{{ $t('labels.firstRowAsHeaders') }}</span>
-              </a-checkbox>
+              </NcCheckbox>
             </a-form-item>
 
             <a-form-item v-if="isImportTypeJson" class="!my-2 nc-dense-checkbox-container">
-              <a-checkbox v-model:checked="importState.parserConfig.normalizeNested">
+              <NcCheckbox v-model:checked="importState.parserConfig.normalizeNested">
                 <span class="caption">{{ $t('labels.flattenNested') }}</span>
-              </a-checkbox>
+              </NcCheckbox>
             </a-form-item>
 
             <a-form-item v-if="!importDataOnly" class="!my-2 nc-dense-checkbox-container">
-              <a-checkbox v-model:checked="importState.parserConfig.shouldImportData">{{ $t('labels.importData') }} </a-checkbox>
+              <NcCheckbox v-model:checked="importState.parserConfig.shouldImportData">{{ $t('labels.importData') }} </NcCheckbox>
             </a-form-item>
           </a-collapse-panel>
         </a-collapse>
       </div>
-    </a-spin>
+    </div>
+
     <template #footer>
       <div class="flex items-center gap-2 pt-3">
-        <nc-button v-if="templateEditorModal" key="back" type="text" size="small" @click="templateEditorModal = false">
-          {{ $t('general.back') }}
-        </nc-button>
-
-        <nc-button
-          v-else
-          key="cancel"
+        <NcButton
+          v-if="templateEditorModal"
+          key="back"
           type="text"
           size="small"
-          @click="
-            () => {
-              dialogShow = false
-              emit('back')
-            }
-          "
+          :disabled="importLoading"
+          @click="templateEditorModal = false"
         >
+          <GeneralIcon icon="chevronLeft" class="mr-1" />
           {{ $t('general.back') }}
-        </nc-button>
+        </NcButton>
+
+        <NcButton v-else key="cancel" type="text" size="small" @click="onClickCancel">
+          <GeneralIcon v-if="showBackBtn" icon="chevronLeft" class="mr-1" />
+
+          {{ showBackBtn ? $t('general.back') : $t('general.cancel') }}
+        </NcButton>
 
         <div class="flex-1" />
 
-        <nc-button
+        <NcButton
           v-if="!templateEditorModal"
           key="pre-import"
           size="small"
           class="nc-btn-import"
           :loading="preImportLoading"
-          :disabled="disablePreImportButton"
+          :disabled="disablePreImportButton || preImportLoading"
           @click="handlePreImport"
         >
-          {{ importDataOnly ? $t('activity.upload') : $t('activity.import') }}
-        </nc-button>
+          {{ importBtnText }}
+        </NcButton>
 
-        <nc-button
+        <NcButton
           v-else
           key="import"
           size="small"
           :loading="importLoading"
-          :disabled="disableImportButton"
+          :disabled="disableImportButton || importLoading"
           @click="handleImport"
         >
-          {{ importDataOnly ? $t('activity.upload') : $t('activity.import') }}
-        </nc-button>
+          {{ importBtnText }}
+        </NcButton>
       </div>
     </template>
   </a-modal>
@@ -850,7 +1113,48 @@ span:has(> .nc-modern-drag-import) {
 :deep(.nc-modern-drag-import:not(.ant-upload-disabled)) {
   @apply bg-white hover:bg-gray-50;
 }
+
+:deep(.nc-modern-drag-import.hidden + .ant-upload-list) {
+  @apply !mb-0;
+}
+
 :deep(.nc-dense-checkbox-container .ant-form-item-control-input) {
   min-height: unset !important;
 }
+
+.nc-quick-import-tabs {
+  :deep(.ant-tabs-nav) {
+    @apply !pl-0;
+  }
+  :deep(.ant-tabs-tab) {
+    @apply px-0 pt-0 pb-2;
+
+    &.ant-tabs-tab-active {
+      @apply font-medium;
+    }
+  }
+
+  :deep(.ant-tabs-tab + .ant-tabs-tab) {
+    @apply ml-4;
+  }
+
+  .tab-title,
+  :deep(.ant-tabs-tab-btn) {
+    @apply px-2 text-nc-content-gray-subtle2 rounded-md hover:bg-gray-100 transition-colors;
+    span {
+      @apply text-small !leading-[24px];
+    }
+  }
+
+  :deep(.ant-tabs-tab-disabled) {
+    .ant-tabs-tab-btn,
+    .tab-title {
+      @apply text-nc-content-gray-muted hover:bg-transparent;
+    }
+  }
+
+  :deep(.quick-import-url-form label) {
+    @apply w-full;
+  }
+}
 </style>
diff --git a/packages/nc-gui/components/monaco/Editor.vue b/packages/nc-gui/components/monaco/Editor.vue
index 04ed05440639..ec7cf5b9e2e3 100644
--- a/packages/nc-gui/components/monaco/Editor.vue
+++ b/packages/nc-gui/components/monaco/Editor.vue
@@ -92,6 +92,8 @@ const vModel = computed<string>({
 
 const isValid = ref(true)
 
+const error = ref('')
+
 const root = ref<HTMLDivElement>()
 
 let editor: MonacoEditor.IStandaloneCodeEditor
@@ -108,6 +110,7 @@ const format = (space = monacoConfig.tabSize || 2) => {
 defineExpose({
   format,
   isValid,
+  error,
 })
 
 onMounted(async () => {
@@ -157,6 +160,7 @@ onMounted(async () => {
     editor.onDidChangeModelContent(async () => {
       try {
         isValid.value = true
+        error.value = ''
 
         if (disableDeepCompare || lang !== 'json') {
           vModel.value = editor.getValue()
@@ -167,7 +171,9 @@ onMounted(async () => {
         }
       } catch (e) {
         isValid.value = false
-        console.log(e)
+        const err = await extractSdkResponseErrorMsg(e)
+        error.value = err
+        console.log(err)
       }
     })
 
diff --git a/packages/nc-gui/components/nc/Dropdown.vue b/packages/nc-gui/components/nc/Dropdown.vue
index b1a6fcc84318..f82a8346e0a4 100644
--- a/packages/nc-gui/components/nc/Dropdown.vue
+++ b/packages/nc-gui/components/nc/Dropdown.vue
@@ -34,6 +34,8 @@ const autoClose = computed(() => props.autoClose)
 
 const visible = useVModel(props, 'visible', emits)
 
+const localIsVisible = ref<boolean | undefined>(props.visible)
+
 const overlayClassNameComputed = computed(() => {
   let className = 'nc-dropdown bg-white rounded-lg border-1 border-gray-200 shadow-lg'
   if (overlayClassName.value) {
@@ -57,13 +59,25 @@ onClickOutside(overlayWrapperDomRef, () => {
   visible.value = false
 })
 
-const onVisibleUpdate = (event: any) => {
+const onVisibleUpdate = (event: boolean) => {
+  localIsVisible.value = event
+
   if (visible !== undefined) {
     visible.value = event
   } else {
     emits('update:visible', event)
   }
 }
+
+watch(
+  visible,
+  (newValue) => {
+    if (newValue === localIsVisible.value) return
+
+    localIsVisible.value = visible.value
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
@@ -76,10 +90,10 @@ const onVisibleUpdate = (event: any) => {
     :overlay-style="overlayStyle"
     @update:visible="onVisibleUpdate"
   >
-    <slot />
+    <slot :visible="localIsVisible" :on-change="onVisibleUpdate" />
 
     <template #overlay>
-      <slot ref="overlayWrapperDomRef" name="overlay" />
+      <slot ref="overlayWrapperDomRef" name="overlay" :visible="localIsVisible" :on-change="onVisibleUpdate" />
     </template>
   </a-dropdown>
 </template>
diff --git a/packages/nc-gui/components/nc/List/index.vue b/packages/nc-gui/components/nc/List/index.vue
index 1dd80c7ece40..19994b98e5b6 100644
--- a/packages/nc-gui/components/nc/List/index.vue
+++ b/packages/nc-gui/components/nc/List/index.vue
@@ -50,6 +50,7 @@ export interface NcListProps {
    * @default 38
    */
   itemHeight?: number
+  variant?: 'default' | 'small' | 'medium'
   /** Custom filter function for list items */
   filterOption?: (input: string, option: NcListItemType, index: Number) => boolean
   /**
@@ -82,7 +83,7 @@ const props = withDefaults(defineProps<NcListProps>(), {
   showSelectedOption: true,
   optionValueKey: 'value',
   optionLabelKey: 'label',
-  itemHeight: 38,
+  variant: 'default',
   isMultiSelect: false,
   minItemsForSearch: 4,
   containerClassName: '',
@@ -102,6 +103,20 @@ const { optionValueKey, optionLabelKey } = props
 
 const { closeOnSelect, showSelectedOption, containerClassName, itemClassName } = toRefs(props)
 
+const itemHeight = computed(() => {
+  if (!props.itemHeight) {
+    if (props.variant === 'medium') {
+      return 30
+    }
+
+    if (props.variant === 'small') {
+      return 26
+    }
+  }
+
+  return 38
+})
+
 const slots = useSlots()
 
 const listRef = ref<HTMLDivElement>()
@@ -146,7 +161,7 @@ const {
   wrapperProps,
   scrollTo,
 } = useVirtualList(list, {
-  itemHeight: props.itemHeight + 2,
+  itemHeight: itemHeight.value + 2,
 })
 
 /**
@@ -350,6 +365,9 @@ watch(
           v-model:value="searchQuery"
           :placeholder="searchInputPlaceholder"
           class="nc-toolbar-dropdown-search-field-input !pl-2 !pr-1.5 flex-1"
+          :class="{
+            '!pt-0': variant === 'small',
+          }"
           allow-clear
           :bordered="false"
           @keydown.enter.stop="handleKeydownEnter"
@@ -375,7 +393,7 @@ watch(
               <NcTooltip
                 v-for="{ data: option, index: idx } in virtualList"
                 :key="idx"
-                class="flex items-center gap-2 nc-list-item w-full py-2 px-2 rounded-md my-[2px] first-of-type:mt-0 last-of-type:mb-0"
+                class="flex items-center gap-2 nc-list-item w-full px-2 rounded-md my-[2px] first-of-type:mt-0 last-of-type:mb-0"
                 :class="[
                   `nc-list-option-${idx}`,
                   {
@@ -385,6 +403,9 @@ watch(
                     'bg-gray-100 nc-list-option-active': !option?.ncItemDisabled && activeOptionIndex === idx,
                     'opacity-60 cursor-not-allowed': option?.ncItemDisabled,
                     'hover:bg-gray-100 cursor-pointer': !option?.ncItemDisabled,
+                    'py-2': variant === 'default',
+                    'py-[5px]': variant === 'medium',
+                    'py-[3px]': variant === 'small',
                   },
                   `${itemClassName}`,
                 ]"
diff --git a/packages/nc-gui/components/nc/Table.vue b/packages/nc-gui/components/nc/Table.vue
index f4b389553edd..ea4de9de4d31 100644
--- a/packages/nc-gui/components/nc/Table.vue
+++ b/packages/nc-gui/components/nc/Table.vue
@@ -78,26 +78,34 @@ const updateOrderBy = (field: string) => {
  * We are using 2 different table tag to make header sticky,
  * so it's imp to keep header cell and body cell width same
  */
-watch(
-  tableHeadWidth,
-  () => {
-    if (!tableHeader.value || !tableHeadWidth.value) return
+const handleUpdateCellWidth = () => {
+  if (!tableHeader.value || !tableHeadWidth.value) return
 
-    nextTick(() => {
-      const headerCells = tableHeader.value?.querySelectorAll('th > div')
+  nextTick(() => {
+    const headerCells = tableHeader.value?.querySelectorAll('th > div')
 
-      if (headerCells && headerCells.length) {
-        headerCells.forEach((el, i) => {
-          headerCellWidth.value[i] = el.getBoundingClientRect().width || undefined
-        })
-      }
-    })
+    if (headerCells && headerCells.length) {
+      headerCells.forEach((el, i) => {
+        headerCellWidth.value[i] = el.getBoundingClientRect().width || undefined
+      })
+    }
+  })
+}
+
+watch(
+  [tableHeader, tableHeadWidth],
+  () => {
+    handleUpdateCellWidth()
   },
   {
     immediate: true,
   },
 )
 
+onMounted(() => {
+  handleUpdateCellWidth()
+})
+
 useEventListener(tableWrapper, 'scroll', () => {
   const stickyHeaderCell = tableWrapper.value?.querySelector('th:nth-of-type(1)')
   const nonStickyHeaderFirstCell = tableWrapper.value?.querySelector('th:nth-of-type(2)')
diff --git a/packages/nc-gui/components/project/ImportModal.vue b/packages/nc-gui/components/project/ImportModal.vue
index a5a2abf8d45f..df66ad75d72f 100644
--- a/packages/nc-gui/components/project/ImportModal.vue
+++ b/packages/nc-gui/components/project/ImportModal.vue
@@ -12,8 +12,6 @@ const source = toRef(props, 'source')
 
 const visible = useVModel(props, 'visible', emits)
 
-const transitionName = ref<string | undefined>(undefined)
-
 const { $e } = useNuxtApp()
 
 const { isFeatureEnabled } = useBetaFeatureToggle()
@@ -24,7 +22,6 @@ async function openAirtableImportDialog(baseId?: string, sourceId?: string) {
   $e('a:actions:import-airtable')
 
   const isOpen = ref(true)
-  transitionName.value = 'dissolve'
 
   await nextTick()
   visible.value = false
@@ -34,7 +31,7 @@ async function openAirtableImportDialog(baseId?: string, sourceId?: string) {
     'baseId': baseId,
     'sourceId': sourceId,
     'onUpdate:modelValue': closeDialog,
-    'transition': 'dissolve',
+    'showBackBtn': true,
     'onBack': () => {
       visible.value = true
     },
@@ -53,7 +50,6 @@ async function openNocoDbImportDialog(baseId?: string) {
   // $e('a:actions:import-nocodb')
 
   const isOpen = ref(true)
-  transitionName.value = 'dissolve'
 
   await nextTick()
   visible.value = false
@@ -62,7 +58,7 @@ async function openNocoDbImportDialog(baseId?: string) {
     'modelValue': isOpen,
     'baseId': baseId,
     'onUpdate:modelValue': closeDialog,
-    'transition': 'dissolve',
+    'showBackBtn': true,
     'onBack': () => {
       visible.value = true
     },
@@ -81,7 +77,6 @@ async function openQuickImportDialog(type: 'csv' | 'excel' | 'json') {
   $e(`a:actions:import-${type}`)
 
   const isOpen = ref(true)
-  transitionName.value = 'dissolve'
 
   await nextTick()
   visible.value = false
@@ -92,7 +87,7 @@ async function openQuickImportDialog(type: 'csv' | 'excel' | 'json') {
     'baseId': source.value.base_id,
     'sourceId': source.value.id,
     'onUpdate:modelValue': closeDialog,
-    'transition': 'dissolve',
+    'showBackBtn': true,
     'onBack': () => {
       visible.value = true
     },
@@ -117,7 +112,7 @@ const onClick = (type: 'airtable' | 'csv' | 'excel' | 'json' | 'nocodb') => {
 </script>
 
 <template>
-  <GeneralModal v-model:visible="visible" width="448px" class="!top-[25vh]" :transition-name="transitionName">
+  <GeneralModal v-model:visible="visible" width="448px" class="!top-[25vh]">
     <div class="flex flex-col px-6 pt-6 pb-9">
       <div class="flex items-center gap-3 mb-6">
         <div class="text-base font-weight-700">{{ $t('labels.importDataFrom') }}</div>
@@ -125,27 +120,27 @@ const onClick = (type: 'airtable' | 'csv' | 'excel' | 'json' | 'nocodb') => {
       <NcMenu class="border-1 divide-y-1 nc-import-items-menu overflow-clip">
         <NcMenuItem @click="onClick('airtable')">
           <GeneralIcon icon="importAirtable" class="w-5 h-5" />
-          <span class="ml-1 text-[13px] font-weight-700"> Airtable </span>
+          <span class="ml-1 text-[13px] font-weight-700"> {{ $t('labels.airtable') }} </span>
           <GeneralIcon icon="chevronRight" class="ml-auto text-lg" />
         </NcMenuItem>
         <NcMenuItem @click="onClick('csv')">
           <GeneralIcon icon="importCsv" class="w-5 h-5" />
-          <span class="ml-1 text-[13px] font-weight-700"> CSV </span>
+          <span class="ml-1 text-[13px] font-weight-700"> {{ $t('labels.csv') }} </span>
           <GeneralIcon icon="chevronRight" class="ml-auto text-lg" />
         </NcMenuItem>
         <NcMenuItem @click="onClick('json')">
           <GeneralIcon icon="importJson" class="w-5 h-5" />
-          <span class="ml-1 text-[13px] font-weight-700"> Json </span>
+          <span class="ml-1 text-[13px] font-weight-700"> {{ $t('labels.jsonCapitalized') }} </span>
           <GeneralIcon icon="chevronRight" class="ml-auto text-lg" />
         </NcMenuItem>
         <NcMenuItem @click="onClick('excel')">
           <GeneralIcon icon="importExcel" class="w-5 h-5" />
-          <span class="ml-1 text-[13px] font-weight-700"> Excel </span>
+          <span class="ml-1 text-[13px] font-weight-700"> {{ $t('labels.excel') }} </span>
           <GeneralIcon icon="chevronRight" class="ml-auto text-lg" />
         </NcMenuItem>
         <NcMenuItem v-if="isFeatureEnabled(FEATURE_FLAG.IMPORT_FROM_NOCODB)" @click="onClick('nocodb')">
           <GeneralIcon icon="nocodb" class="w-5 h-5" />
-          <span class="ml-1 text-[13px] font-weight-700"> NocoDB </span>
+          <span class="ml-1 text-[13px] font-weight-700"> {{ $t('objects.syncData.nocodb') }} </span>
           <GeneralIcon icon="chevronRight" class="ml-auto text-lg" />
         </NcMenuItem>
         <!-- <NcMenuItem disabled>
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index 6adaa0edfd0a..25d56e8afc60 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -9,10 +9,6 @@ const props = defineProps<{
 
 const emit = defineEmits(['expandRecord', 'newRecord'])
 
-interface Attachment {
-  url: string
-}
-
 const INFINITY_SCROLL_THRESHOLD = 100
 
 const { isUIAllowed } = useRoles()
@@ -25,10 +21,6 @@ const { height } = useWindowSize()
 
 const meta = inject(MetaInj, ref())
 
-const { fields } = useViewColumnsOrThrow()
-
-const { getPossibleAttachmentSrc } = useAttachment()
-
 const { t } = useI18n()
 
 const {
@@ -54,23 +46,6 @@ const {
 
 const sideBarListRef = ref<VNodeRef | null>(null)
 
-const coverImageColumns: any = computed(() => {
-  if (!fields.value || !meta.value?.columns) return
-  return meta.value.columns.find((c) => c.uidt === UITypes.Attachment && fields.value?.find((f) => f.fk_column_id === c.id).show)
-})
-
-const attachments = (record: any): Attachment[] => {
-  const col = coverImageColumns.value
-  try {
-    if (col?.title && record.row[col.title]) {
-      return typeof record.row[col.title] === 'string' ? JSON.parse(record.row[col.title]) : record.row[col.title]
-    }
-    return []
-  } catch (e) {
-    return []
-  }
-}
-
 const pushToArray = (arr: Array<Row>, record: Row, range) => {
   arr.push({
     ...record,
@@ -552,50 +527,6 @@ onClickOutside(searchRef, toggleSearch)
                 @dragstart="dragStart($event, record)"
                 @dragover.prevent
               >
-                <template v-if="coverImageColumns" #image>
-                  <a-carousel
-                    v-if="attachments(record).length"
-                    class="gallery-carousel rounded-md !border-1 !border-gray-200 w-10 h-10"
-                    arrows
-                  >
-                    <template #customPaging>
-                      <a>
-                        <div class="pt-[12px]">
-                          <div></div>
-                        </div>
-                      </a>
-                    </template>
-
-                    <template #prevArrow>
-                      <div class="z-10 arrow">
-                        <MdiChevronLeft
-                          class="text-gray-700 w-6 h-6 absolute left-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition"
-                        />
-                      </div>
-                    </template>
-
-                    <template #nextArrow>
-                      <div class="z-10 arrow">
-                        <MdiChevronRight
-                          class="text-gray-700 w-6 h-6 absolute right-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition"
-                        />
-                      </div>
-                    </template>
-
-                    <template v-for="(attachment, index) in attachments(record)">
-                      <LazyCellAttachmentPreviewImage
-                        v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
-                        :key="`carousel-${record.row.id}-${index}`"
-                        class="h-10 !w-10 !object-contain"
-                        :srcs="getPossibleAttachmentSrc(attachment, 'tiny')"
-                      />
-                    </template>
-                  </a-carousel>
-                  <div v-else class="h-10 w-10 !flex flex-row !border-1 rounded-md !border-gray-200 items-center justify-center">
-                    <img class="object-contain w-[40px] h-[40px]" src="~assets/icons/FileIconImageBox.png" />
-                  </div>
-                </template>
-
                 <template v-if="!isRowEmpty(record, displayField)">
                   <LazySmartsheetPlainCell v-model="record.row[displayField!.title!]" :column="displayField" />
                 </template>
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
index 34dcee72a955..157ac63be6eb 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
@@ -48,7 +48,7 @@ const props = withDefaults(defineProps<Props>(), {
             record.
           </template>
         </NcTooltip>
-        <span v-if="showDate" class="text-xs font-medium leading-4 text-gray-600"
+        <span v-if="showDate" class="text-xs font-medium truncate leading-4 text-gray-600"
           >{{ fromDate }} {{ toDate ? ` - ${toDate}` : '' }}</span
         >
       </div>
diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/cells/Decimal.ts b/packages/nc-gui/components/smartsheet/grid/canvas/cells/Decimal.ts
index 3d3e0337838f..f3d44ddd0071 100644
--- a/packages/nc-gui/components/smartsheet/grid/canvas/cells/Decimal.ts
+++ b/packages/nc-gui/components/smartsheet/grid/canvas/cells/Decimal.ts
@@ -53,7 +53,8 @@ export const DecimalCellRenderer: CellRenderer = {
     if (column.readonly || column.columnObj?.readonly) return
     const columnObj = column.columnObj
     if (/^[0-9]$/.test(e.key) && columnObj.title) {
-      row.row[columnObj.title] = ''
+      // default null as to not raise error
+      row.row[columnObj.title] = null
       makeCellEditable(row, column)
       return true
     }
diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/cells/Formula.ts b/packages/nc-gui/components/smartsheet/grid/canvas/cells/Formula.ts
index 2a12ea713562..6295ce50d6ba 100644
--- a/packages/nc-gui/components/smartsheet/grid/canvas/cells/Formula.ts
+++ b/packages/nc-gui/components/smartsheet/grid/canvas/cells/Formula.ts
@@ -5,8 +5,9 @@ import {
   renderFormulaURL,
   renderIconButton,
   renderSingleLineText,
-} from '../utils/canvas';
+} from '../utils/canvas'
 import { showFieldEditWarning } from '../utils/cell'
+import { getI18n } from '../../../../../plugins/a.i18n'
 import { CheckboxCellRenderer } from './Checkbox'
 import { CurrencyRenderer } from './Currency'
 import { DateCellRenderer } from './Date'
@@ -20,8 +21,6 @@ import { SingleLineTextCellRenderer } from './SingleLineText'
 import { TimeCellRenderer } from './Time'
 import { UrlCellRenderer } from './Url'
 import { FloatCellRenderer } from './Number'
-import { LongTextCellRenderer } from './LongText'
-import { getI18n } from '../../../../../plugins/a.i18n';
 
 function getDisplayValueCellRenderer(column: ColumnType) {
   const colMeta = parseProp(column.meta)
@@ -107,7 +106,6 @@ export const FormulaCellRenderer: CellRenderer = {
       const maxWidth = width - padding * 2
       // If the field uses URL formula render it as a clickable link
       if (typeof urls === 'string') {
-        const texts = getFormulaTextSegments(urls)
         ctx.font = `${pv ? 600 : 500} 13px Manrope`
         ctx.fillStyle = pv ? '#3366FF' : textColor
         const boxes = renderFormulaURL(ctx, {
@@ -166,7 +164,7 @@ export const FormulaCellRenderer: CellRenderer = {
     const error = parseProp(colObj.colOptions)?.error ?? ''
 
     const { x, y, width, height } = getCellPosition(column, props.row.rowMeta.rowIndex!)
-    const isHovered = isBoxHovered({ x, y, width, height }, mousePosition)
+
     const baseStore = useBase()
     const { isPg } = baseStore
 
@@ -226,7 +224,7 @@ export const FormulaCellRenderer: CellRenderer = {
       }
       // If double-clicked on the cell, open the detached long text
       if (props.event?.detail === 2) {
-        openDetachedLongText({column: colObj, vModel: value})
+        openDetachedLongText({ column: colObj, vModel: value })
         return true
       }
     }
@@ -239,14 +237,14 @@ export const FormulaCellRenderer: CellRenderer = {
     return false
   },
   handleKeyDown: async (props) => {
-    const { column, value, makeCellEditable, row, openDetachedLongText } = props
+    const { column, value, openDetachedLongText } = props
 
     const colObj = column.columnObj
 
     // Todo: show inline warning
     if (props.e.key === 'Enter' || (props.e.key === ' ' && props.e.shiftKey)) {
       if (!isDrawerOrModalExist() && colObj?.colOptions?.parsed_tree?.dataType === FormulaDataTypes.STRING) {
-        openDetachedLongText({column: colObj, vModel: value})
+        openDetachedLongText({ column: colObj, vModel: value })
         return
       }
 
@@ -256,7 +254,7 @@ export const FormulaCellRenderer: CellRenderer = {
     }
   },
   async handleHover(props) {
-    const { mousePosition, getCellPosition, column, row, value } = props
+    const { mousePosition, getCellPosition, column, row } = props
     const colObj = column.columnObj
     const colMeta = parseProp(colObj.meta)
     const error = parseProp(colObj.colOptions)?.error ?? ''
@@ -276,14 +274,17 @@ export const FormulaCellRenderer: CellRenderer = {
         },
       })
     }
-    const { x, y, width} = getCellPosition(column, row.rowMeta.rowIndex!)
+    const { x, y, width } = getCellPosition(column, row.rowMeta.rowIndex!)
 
     tryShowTooltip({
       rect: {
-        x: x + width - 28, y: y + 7, width: 18, height: 18
+        x: x + width - 28,
+        y: y + 7,
+        width: 18,
+        height: 18,
       },
       mousePosition,
-      text: getI18n().global.t('tooltip.expandShiftSpace')
+      text: getI18n().global.t('tooltip.expandShiftSpace'),
     })
 
     tryShowTooltip({ rect: { x: x + 10, y, height: 25, width: 45 }, mousePosition, text: error })
diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/cells/LongText.ts b/packages/nc-gui/components/smartsheet/grid/canvas/cells/LongText.ts
index a3e82c11e9da..c7f8557c182e 100644
--- a/packages/nc-gui/components/smartsheet/grid/canvas/cells/LongText.ts
+++ b/packages/nc-gui/components/smartsheet/grid/canvas/cells/LongText.ts
@@ -1,11 +1,5 @@
 import { isAIPromptCol } from 'nocodb-sdk'
-import {
-  isBoxHovered,
-  renderIconButton,
-  renderMarkdown,
-  renderMultiLineText,
-  renderTagLabel,
-} from '../utils/canvas'
+import { isBoxHovered, renderIconButton, renderMarkdown, renderMultiLineText, renderTagLabel } from '../utils/canvas'
 import { getI18n } from '../../../../../plugins/a.i18n'
 import { AILongTextCellRenderer } from './AILongText'
 
diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/cells/index.ts b/packages/nc-gui/components/smartsheet/grid/canvas/cells/index.ts
index 79994992c2c6..ad4b8a35d044 100644
--- a/packages/nc-gui/components/smartsheet/grid/canvas/cells/index.ts
+++ b/packages/nc-gui/components/smartsheet/grid/canvas/cells/index.ts
@@ -2,6 +2,7 @@ import { type ColumnType, type TableType, UITypes, type UserType, type ViewType,
 import { renderSingleLineText, renderSpinner } from '../utils/canvas'
 import type { ActionManager } from '../loaders/ActionManager'
 import type { ImageWindowLoader } from '../loaders/ImageLoader'
+import { useDetachedLongText } from '../composables/useDetachedLongText'
 import { EmailCellRenderer } from './Email'
 import { SingleLineTextCellRenderer } from './SingleLineText'
 import { LongTextCellRenderer } from './LongText'
@@ -33,7 +34,6 @@ import { ButtonCellRenderer } from './Button'
 import { LtarCellRenderer } from './LTAR'
 import { FormulaCellRenderer } from './Formula'
 import { GenericReadOnlyRenderer } from './GenericReadonlyRenderer'
-import { useDetachedLongText } from '../composables/useDetachedLongText';
 
 const CLEANUP_INTERVAL = 1000
 
diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/components/DetachedExpandedText.vue b/packages/nc-gui/components/smartsheet/grid/canvas/components/DetachedExpandedText.vue
index 6bfca6220aa6..d44fd0e31d96 100644
--- a/packages/nc-gui/components/smartsheet/grid/canvas/components/DetachedExpandedText.vue
+++ b/packages/nc-gui/components/smartsheet/grid/canvas/components/DetachedExpandedText.vue
@@ -1,20 +1,12 @@
 <script lang="ts" setup>
-import { useDetachedLongText } from '../composables/useDetachedLongText';
-import ExpandedText from '../components/ExpandedText.vue';
+import { useDetachedLongText } from '../composables/useDetachedLongText'
+import ExpandedText from '../components/ExpandedText.vue'
 
-const { states, close } = useDetachedLongText()
-
-const shouldClose = (isVisible: boolean, i: number) => {
-  if (!isVisible) close(i)
-}
+const { states } = useDetachedLongText()
 </script>
 
 <template>
   <template v-for="(state, i) of states" :key="`expanded-text-${i}`">
-    <ExpandedText
-      v-model:model-visible="state.isOpen"
-      v-model="state.vModel"
-      :column="state.column"
-    />
+    <ExpandedText v-model:model-visible="state.isOpen" v-model="state.vModel" :column="state.column" />
   </template>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/components/ExpandedText.vue b/packages/nc-gui/components/smartsheet/grid/canvas/components/ExpandedText.vue
index b87cc69c9cfb..c0ea8f4a7a85 100644
--- a/packages/nc-gui/components/smartsheet/grid/canvas/components/ExpandedText.vue
+++ b/packages/nc-gui/components/smartsheet/grid/canvas/components/ExpandedText.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type ColumnType, handleTZ } from 'nocodb-sdk';
+import { type ColumnType, handleTZ } from 'nocodb-sdk'
 
 const props = defineProps<{
-  column: ColumnType,
-  modelVisible: boolean,
+  column: ColumnType
+  modelVisible: boolean
   modelValue: string
 }>()
 
@@ -23,32 +23,17 @@ const isDragging = ref(false)
 const isSizeUpdated = ref(false)
 const skipSizeUpdate = ref(true)
 
-const dragStart = (e: MouseEvent) => {
-  const dom = document.querySelector('.nc-long-text-expanded .ant-modal-content') as HTMLElement
-  if (!dom) return
-
-  mousePosition.value = {
-    top: e.clientY - dom.getBoundingClientRect().top,
-    left: e.clientX - dom.getBoundingClientRect().left + 16,
-  }
-
-  document.addEventListener('mousemove', onMouseMove)
-  document.addEventListener('mouseup', onMouseUp)
-  isDragging.value = true
-}
-
 const onMouseMove = (e: MouseEvent) => {
   if (!isDragging.value) return
 
   e.stopPropagation()
 
   position.value = {
-    top: e.clientY - (mousePosition.value?.top || 0) > 0
-      ? e.clientY - (mousePosition.value?.top || 0)
-      : position.value?.top || 0,
-    left: e.clientX - (mousePosition.value?.left || 0) > -16
-      ? e.clientX - (mousePosition.value?.left || 0)
-      : position.value?.left || 0,
+    top: e.clientY - (mousePosition.value?.top || 0) > 0 ? e.clientY - (mousePosition.value?.top || 0) : position.value?.top || 0,
+    left:
+      e.clientX - (mousePosition.value?.left || 0) > -16
+        ? e.clientX - (mousePosition.value?.left || 0)
+        : position.value?.left || 0,
   }
 }
 
@@ -65,15 +50,32 @@ const onMouseUp = (e: MouseEvent) => {
   document.removeEventListener('mouseup', onMouseUp)
 }
 
-watch(position, () => {
+const dragStart = (e: MouseEvent) => {
   const dom = document.querySelector('.nc-long-text-expanded .ant-modal-content') as HTMLElement
-  if (!dom || !position.value) return
+  if (!dom) return
 
-  dom.style.transform = 'none'
-  dom.style.left = `${position.value.left}px`
-  dom.style.top = `${position.value.top}px`
-}, { deep: true })
+  mousePosition.value = {
+    top: e.clientY - dom.getBoundingClientRect().top,
+    left: e.clientX - dom.getBoundingClientRect().left + 16,
+  }
 
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+  isDragging.value = true
+}
+
+watch(
+  position,
+  () => {
+    const dom = document.querySelector('.nc-long-text-expanded .ant-modal-content') as HTMLElement
+    if (!dom || !position.value) return
+
+    dom.style.transform = 'none'
+    dom.style.left = `${position.value.left}px`
+    dom.style.top = `${position.value.top}px`
+  },
+  { deep: true },
+)
 
 watch(isVisible, (open) => {
   if (!open) {
@@ -129,16 +131,14 @@ useResizeObserver(inputWrapperRef, () => {
     JSON.stringify({
       width,
       height,
-    })
+    }),
   )
 })
 
-
 const { isPg } = useBase()
 
 const result = isPg(column.value?.source_id) ? renderValue(handleTZ(modelValue.value)) : renderValue(modelValue.value)
 const urls = replaceUrlsWithLink(result)
-
 </script>
 
 <template>
@@ -176,8 +176,8 @@ const urls = replaceUrlsWithLink(result)
         </NcButton>
       </div>
       <div class="p-3 pb-0 h-full">
-
         <div
+          v-if="urls"
           ref="inputRef"
           :style="{
             resize: 'both',
@@ -185,14 +185,13 @@ const urls = replaceUrlsWithLink(result)
             width: 'min(1256px, 100vw - 124px)',
           }"
           class="nc-long-text-expanded-textarea border-1 border-gray-200 bg-gray-50 !py-1 !px-3 !text-black !transition-none !cursor-text !min-h-[210px] !rounded-lg focus:border-brand-500 disabled:!bg-gray-50 nc-longtext-scrollbar"
-          v-if="urls"
-          v-html="urls">
-        </div>
+          v-html="urls"
+        ></div>
 
         <a-textarea
           v-else
-          disabled
           ref="inputRef"
+          disabled
           :value="modelValue"
           class="nc-long-text-expanded-textarea !py-1 !px-3 !text-black !transition-none !cursor-text !min-h-[210px] !rounded-lg focus:border-brand-500 disabled:!bg-gray-50 nc-longtext-scrollbar"
           :placeholder="$t('activity.enterText')"
@@ -239,4 +238,4 @@ const urls = replaceUrlsWithLink(result)
     @apply rounded-lg;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/composables/useCanvasTable.ts b/packages/nc-gui/components/smartsheet/grid/canvas/composables/useCanvasTable.ts
index ff5a50e53e52..1f4623ea84b6 100644
--- a/packages/nc-gui/components/smartsheet/grid/canvas/composables/useCanvasTable.ts
+++ b/packages/nc-gui/components/smartsheet/grid/canvas/composables/useCanvasTable.ts
@@ -238,7 +238,11 @@ export function useCanvasTable({
           f.extra = getUserColOptions(f, baseUsers.value)
         }
 
-        const isInvalid = isColumnInvalid(f, aiIntegrations.value, isPublicView.value || !isAddingEmptyRowAllowed.value)
+        const isInvalid = isColumnInvalid(
+          f,
+          aiIntegrations.value,
+          isPublicView.value || !isDataEditAllowed.value || isSqlView.value,
+        )
 
         const sqlUi = sqlUis.value[f.source_id] ?? Object.values(sqlUis.value)[0]
 
diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/composables/useDetachedLongText.ts b/packages/nc-gui/components/smartsheet/grid/canvas/composables/useDetachedLongText.ts
index 89292e525646..c8e221711a4d 100644
--- a/packages/nc-gui/components/smartsheet/grid/canvas/composables/useDetachedLongText.ts
+++ b/packages/nc-gui/components/smartsheet/grid/canvas/composables/useDetachedLongText.ts
@@ -28,7 +28,7 @@ export function useDetachedLongText() {
   const open = (props: UseDetachedLongTextProps) => {
     states.value.push({
       isOpen: true,
-      ...props
+      ...props,
     })
     index.value = states.value.length - 1
   }
@@ -39,4 +39,4 @@ export function useDetachedLongText() {
   }
 
   return { states, open, close, onClose: closeHook.on }
-}
\ No newline at end of file
+}
diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/utils/canvas.ts b/packages/nc-gui/components/smartsheet/grid/canvas/utils/canvas.ts
index 9184218d98f5..4bcd878c26df 100644
--- a/packages/nc-gui/components/smartsheet/grid/canvas/utils/canvas.ts
+++ b/packages/nc-gui/components/smartsheet/grid/canvas/utils/canvas.ts
@@ -1295,6 +1295,7 @@ export function renderFormulaURL(
   } else if (height) {
     maxLines = Math.min(Math.floor(height / lineHeight), rowHeightTruncateLines(height)) // Calculate max lines
   }
+  const ellipsisWidth = ctx.measureText('...').width
 
   const urlRects: { x: number; y: number; width: number; height: number; url?: string }[] = []
 
@@ -1369,7 +1370,12 @@ export function renderFormulaURL(
     }
   }
 
-  function truncateText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number, ellipsis: boolean): string {
+  function truncateText(
+    ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    text: string,
+    maxWidth: number,
+    ellipsis: boolean,
+  ): string {
     let truncated = text
     if (ctx.measureText(text).width > maxWidth) {
       truncated = text.substring(0, Math.floor(text.length * (maxWidth / ctx.measureText(text).width)))
@@ -1381,14 +1387,21 @@ export function renderFormulaURL(
     return truncated
   }
 
-  function renderLine(text: string, url?: string, addEllipsis: boolean = false) {
+  function renderLine(text: string, url?: string, addEllipsis = false) {
     let finalText = text
     const lineY = currentY + currentLine * lineHeight + lineHeight * 0.8
     const availableWidth = maxWidth - (currentX - x)
 
-    if (ctx.measureText(text).width > availableWidth) {
-      finalText = truncateText(ctx, text, availableWidth, addEllipsis)
-    } else if (addEllipsis) {
+    const textWidth = ctx.measureText(text).width
+
+    if (textWidth > availableWidth) {
+      if (addEllipsis && availableWidth >= ellipsisWidth) {
+        const adjustedMaxWidth = availableWidth - ellipsisWidth // Reserve space for ellipsis
+        finalText = `${truncateText(ctx, text, adjustedMaxWidth, false)}...`
+      } else {
+        finalText = truncateText(ctx, text, availableWidth, false) // No ellipsis
+      }
+    } else if (addEllipsis && textWidth + ellipsisWidth <= availableWidth) {
       finalText += '...'
     }
 
diff --git a/packages/nc-gui/components/smartsheet/grid/canvas/utils/markdownUtils.ts b/packages/nc-gui/components/smartsheet/grid/canvas/utils/markdownUtils.ts
index 991c8d7bef2c..32095d7aa0ac 100644
--- a/packages/nc-gui/components/smartsheet/grid/canvas/utils/markdownUtils.ts
+++ b/packages/nc-gui/components/smartsheet/grid/canvas/utils/markdownUtils.ts
@@ -68,7 +68,7 @@ const markers: Marker[] = [
 
 function parseTokens(
   text: string,
-  index: number = 0,
+  index = 0,
   activeStyles: MarkdownStyle[] = [],
   expectedClosing: string | null = null,
 ): { tokens: Token[]; newIndex: number } {
diff --git a/packages/nc-gui/components/smartsheet/grid/index.vue b/packages/nc-gui/components/smartsheet/grid/index.vue
index 0499af858377..d404289e9833 100644
--- a/packages/nc-gui/components/smartsheet/grid/index.vue
+++ b/packages/nc-gui/components/smartsheet/grid/index.vue
@@ -4,8 +4,6 @@ import InfiniteTable from './InfiniteTable.vue'
 import Table from './Table.vue'
 import GroupBy from './GroupBy.vue'
 import CanvasTable from './canvas/index.vue'
-import { UseDetachedLongTextProvider } from './canvas/composables/useDetachedLongText';
-import DetachedExpandedText from './canvas/components/DetachedExpandedText.vue';
 
 const meta = inject(MetaInj, ref())
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index e026297206f9..e3bbe28e4f5a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type ColumnType, type TableType, extractFilterFromXwhere } from 'nocodb-sdk'
+import { type ColumnType, NcApiVersion, type TableType, extractFilterFromXwhere } from 'nocodb-sdk'
 import type ColumnFilter from './ColumnFilter.vue'
 
 const isLocked = inject(IsLockedInj, ref(false))
@@ -27,7 +27,12 @@ const aliasColObjMap = computed(() => {
 
 const filtersFromUrlParams = computed(() => {
   if (route.value.query?.where) {
-    return extractFilterFromXwhere(route.value.query.where as string, aliasColObjMap.value, false)
+    return extractFilterFromXwhere(
+      { api_version: NcApiVersion.V1 },
+      route.value.query.where as string,
+      aliasColObjMap.value,
+      false,
+    )
   }
 })
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index 5d88880c13d9..71790c3fb0e1 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -2,6 +2,7 @@
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
 import Draggable from 'vuedraggable'
+import { getColumnUidtByID as sortGetColumnUidtByID } from '~/utils/sortUtils'
 
 const meta = inject(MetaInj, ref())
 
@@ -84,8 +85,7 @@ const availableColumns = computed(() => {
 })
 
 const getColumnUidtByID = (key?: string) => {
-  if (!key) return ''
-  return columnByID.value[key]?.uidt || ''
+  return sortGetColumnUidtByID(key, columnByID.value)
 }
 
 const open = ref(false)
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 0dd62a8594f2..d2f3335e2d1f 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
-import { PlanLimitTypes, RelationTypes, UITypes, getEquivalentUIType, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
-
+import { PlanLimitTypes, RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
+import { getColumnUidtByID as sortGetColumnUidtByID } from '~/utils/sortUtils'
 const meta = inject(MetaInj, ref())
 const view = inject(ActiveViewInj, ref())
 const isLocked = inject(IsLockedInj, ref(false))
@@ -69,20 +69,7 @@ const availableColumns = computed(() => {
 })
 
 const getColumnUidtByID = (key?: string) => {
-  if (!key || !columnByID.value[key]) return ''
-
-  const column = columnByID.value[key]
-
-  let uidt = column.uidt
-
-  if (column.uidt === UITypes.Formula) {
-    uidt =
-      getEquivalentUIType({
-        formulaColumn: column,
-      }) || uidt
-  }
-
-  return uidt || ''
+  return sortGetColumnUidtByID(key, columnByID.value)
 }
 
 const open = ref(false)
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index 161b3e36efb6..533c5e932458 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -3,8 +3,8 @@ import { Pane, Splitpanes } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isLinksOrLTAR } from 'nocodb-sdk'
-import { UseDetachedLongTextProvider } from '../smartsheet/grid/canvas/composables/useDetachedLongText';
-import DetachedExpandedText from '../smartsheet/grid/canvas/components/DetachedExpandedText.vue';
+import { UseDetachedLongTextProvider } from '../smartsheet/grid/canvas/composables/useDetachedLongText'
+import DetachedExpandedText from '../smartsheet/grid/canvas/components/DetachedExpandedText.vue'
 
 const props = defineProps<{
   activeTab: TabItem
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index e7955a657ee1..ed9160d1eddc 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -96,8 +96,6 @@ const hasSelectColumn = ref<boolean[]>([])
 
 const expansionPanel = ref<number[]>([])
 
-const editableTn = ref<boolean[]>([])
-
 const autoInsertOption = ref<boolean>(false)
 
 const inputRefs = ref<HTMLInputElement[]>([])
@@ -106,7 +104,7 @@ const isImporting = ref(false)
 
 const importingTips = ref<Record<string, string>>({})
 
-const checkAllRecord = ref<Record<string, boolean>>({})
+const importingTableTips = ref<Record<string, number>>({})
 
 const formError = ref()
 
@@ -124,14 +122,103 @@ const data = reactive<{
 
 const validators = computed(() =>
   data.tables.reduce<Record<string, [ReturnType<typeof fieldRequiredValidator>]>>((acc: Record<string, any>, table, tableIdx) => {
-    acc[`tables.${tableIdx}.table_name`] = [validateTableName]
+    acc[`tables.${tableIdx}.table_name`] = [
+      validateTableName,
+      {
+        validator: (_rule: any, value: any) => {
+          return new Promise<void>((resolve, reject) => {
+            if (!importDataOnly && data.tables.some((item, idx) => idx !== tableIdx && item.table_name === value)) {
+              return reject(new Error(t('msg.error.duplicateTableName')))
+            }
+            resolve()
+          })
+        },
+      },
+      {
+        validator: (_rule: any, value: any) => {
+          return new Promise<void>((resolve, reject) => {
+            if (value !== value?.trim()) {
+              return reject(new Error('Table names should not have whitespace in the beginning or their end.'))
+            }
+            resolve()
+          })
+        },
+      },
+    ]
+
+    acc[`tables.${tableIdx}.columns`] = [
+      {
+        validator: (_rule: any, value: any) => {
+          return new Promise<void>((resolve, reject) => {
+            if (!importDataOnly && ncIsArray(value) && !value.some((item) => item.selected)) {
+              return reject(new Error(t('msg.error.selectAtleastOneColumn')))
+            }
+
+            resolve()
+          })
+        },
+      },
+    ]
+
     hasSelectColumn.value[tableIdx] = false
 
     table.columns?.forEach((column, columnIdx) => {
       acc[`tables.${tableIdx}.columns.${columnIdx}.title`] = [
         fieldRequiredValidator(),
-        fieldLengthValidator(),
-        reservedFieldNameValidator(),
+        {
+          validator: (_rule: any, value: any) => {
+            return new Promise<void>((resolve, reject) => {
+              const field = table.columns.find((_item, idx) => idx === columnIdx)
+
+              if (!field || !field?.selected) return resolve()
+
+              const fieldToCheck = table.columns.filter((item) => item.selected)
+              if (
+                fieldToCheck.length &&
+                table.columns.some((item, idx) => idx !== columnIdx && item.selected && item.title === value)
+              ) {
+                return reject(new Error(t('msg.error.duplicateColumnName')))
+              }
+              resolve()
+            })
+          },
+        },
+        {
+          validator: (rule: any, value: any) => {
+            return new Promise<void>((resolve, reject) => {
+              const field = table.columns.find((_item, idx) => idx === columnIdx)
+
+              if (!field || !field?.selected) return resolve()
+
+              return reservedFieldNameValidator()
+                .validator(rule, value)
+                .then(() => {
+                  resolve()
+                })
+                .catch((e) => {
+                  reject(e)
+                })
+            })
+          },
+        },
+        {
+          validator: (rule: any, value: any) => {
+            return new Promise<void>((resolve, reject) => {
+              const field = table.columns.find((_item, idx) => idx === columnIdx)
+
+              if (!field || !field?.selected) return resolve()
+
+              return fieldLengthValidator()
+                .validator(rule, value)
+                .then(() => {
+                  resolve()
+                })
+                .catch((e) => {
+                  reject(e)
+                })
+            })
+          },
+        },
       ]
       acc[`tables.${tableIdx}.columns.${columnIdx}.uidt`] = [fieldRequiredValidator()]
       if (isSelect(column)) {
@@ -147,24 +234,18 @@ const { validate, validateInfos, modelRef } = useForm(data, validators)
 
 const isValid = ref(!importDataOnly)
 
-const isAnyColumnSelectedInEachTable = computed(() => {
-  return data.tables.every((table) => table.columns.some((column) => (column as any).selected))
-})
-
-const doesAnyColumnNameHaveTrailingWhitespace = computed(() => {
-  return data.tables.some((table) => table.table_name !== table.table_name?.trim())
-})
+const importError = ref('')
 
 const formRef = ref()
 
 watch(
-  [() => srcDestMapping.value, isAnyColumnSelectedInEachTable, doesAnyColumnNameHaveTrailingWhitespace],
+  [() => srcDestMapping.value],
   () => {
     let res = true
     if (importDataOnly) {
       for (const tn of Object.keys(srcDestMapping.value)) {
         let flag = false
-        if (!atLeastOneEnabledValidation(tn)) {
+        if (atLeastOneEnabledValidation(tn)) {
           res = false
         }
         for (const record of srcDestMapping.value[tn]) {
@@ -187,21 +268,14 @@ watch(
         }
       }
     }
-    isValid.value = res && isAnyColumnSelectedInEachTable.value && !doesAnyColumnNameHaveTrailingWhitespace.value
+    isValid.value = res
   },
   { deep: true },
 )
 
-const prevEditableTn = ref<string[]>([])
-
 onMounted(() => {
   parseAndLoadTemplate()
 
-  // used to record the previous EditableTn values
-  // for checking the table duplication in current import
-  // and updating the key in importData
-  prevEditableTn.value = data.tables.map((t) => t.table_name)
-
   if (importDataOnly) {
     mapDefaultColumns()
   }
@@ -262,10 +336,6 @@ function _deleteTable(tableIdx: number) {
   data.tables.splice(tableIdx, 1)
 }
 
-function setEditableTn(tableIdx: number, val: boolean) {
-  editableTn.value[tableIdx] = val
-}
-
 function remapColNames(batchData: any[], columns: ColumnType[]) {
   const dateFormatMap: Record<number, string> = {}
   return batchData.map((data) =>
@@ -303,7 +373,7 @@ function remapColNames(batchData: any[], columns: ColumnType[]) {
   )
 }
 
-function missingRequiredColumnsValidation(tn: string) {
+function missingRequiredColumnsValidation(tn: string, showError = false) {
   const missingRequiredColumns = columns.value.filter(
     (c: Record<string, any>) =>
       (c.pk ? !c.ai && !c.cdf && !c.meta?.ag : !c.cdf && c.rqd) &&
@@ -311,19 +381,42 @@ function missingRequiredColumnsValidation(tn: string) {
   )
 
   if (missingRequiredColumns.length) {
-    message.error(`${t('msg.error.columnsRequired')} : ${missingRequiredColumns.map((c) => c.title).join(', ')}`)
-    return false
+    const error = `${t('msg.error.columnsRequired')} : ${missingRequiredColumns.map((c) => c.title).join(', ')}`
+    if (showError) {
+      message.error(error)
+    } else {
+      return error
+    }
+
+    return true
   }
 
-  return true
+  return false
 }
 
-function atLeastOneEnabledValidation(tn: string) {
+function atLeastOneEnabledValidation(tn: string, showError = false) {
   if (srcDestMapping.value[tn].filter((v: Record<string, any>) => v.enabled === true).length === 0) {
-    message.error(t('msg.error.selectAtleastOneColumn'))
-    return false
+    const err = t('msg.error.selectAtleastOneColumn')
+    if (showError) {
+      message.error(err)
+    } else {
+      return err
+    }
+
+    return true
   }
-  return true
+  return false
+}
+
+function getUnselectedFields(record: Record<string, any>, tn: string) {
+  // if it is not selected, then pass validation
+  const allRecord = srcDestMapping.value[tn]
+
+  return columns.value.filter((c) => {
+    // Exclude columns that are already mapped, except for the current record's `destCn`
+
+    return !allRecord?.some((item) => item.srcTitle !== record.srcTitle && item.destCn === c.title)
+  })
 }
 
 function fieldsValidation(record: Record<string, any>, tn: string) {
@@ -333,7 +426,7 @@ function fieldsValidation(record: Record<string, any>, tn: string) {
   }
 
   if (!record.destCn) {
-    message.error(`${t('msg.error.columnDescriptionNotFound')} ${record.srcCn}`)
+    message.error(`${t('msg.error.columnDescriptionNotFound')} ${record.srcTitle}`)
     return false
   }
 
@@ -405,20 +498,21 @@ function fieldsValidation(record: Record<string, any>, tn: string) {
 
 function updateImportTips(baseName: string, tableName: string, progress: number, total: number) {
   importingTips.value[`${baseName}-${tableName}`] = `Importing data to ${baseName} - ${tableName}: ${progress}/${total} records`
+  importingTableTips.value[tableName] = parseInt(`${(progress / total) * 100}`)
 }
 
 async function importTemplate() {
   if (importDataOnly) {
     for (const table of data.tables) {
       // validate required columns
-      if (!missingRequiredColumnsValidation(table.table_name)) return
-
-      // validate at least one column needs to be selected
-      if (!atLeastOneEnabledValidation(table.table_name)) return
+      const validationErrors = getErrorByTableName(table.table_name)
+      if (validationErrors.length) throw new Error(`${validationErrors[0]}`)
     }
 
     try {
       isImporting.value = true
+      // collapse table
+      expansionPanel.value = []
 
       const tableId = meta.value?.id
       const baseId = base.value.id!
@@ -505,7 +599,8 @@ async function importTemplate() {
       // Successfully imported table data
       message.success(t('msg.success.tableDataImported'))
     } catch (e: any) {
-      message.error(await extractSdkResponseErrorMsg(e))
+      console.log(e)
+      throw e
     } finally {
       isImporting.value = false
     }
@@ -514,12 +609,13 @@ async function importTemplate() {
     try {
       await validate()
     } catch (errorInfo) {
-      isImporting.value = false
       throw new Error('Please fill all the required values')
     }
 
     try {
       isImporting.value = true
+      // collapse table
+      expansionPanel.value = []
       // tab info to be used to show the tab after successful import
       const tab = {
         id: '',
@@ -614,6 +710,10 @@ async function importTemplate() {
           ),
         )
       }
+
+      // Successfully imported table
+      message.success(t(`msg.success.${data.tables.length > 1 ? 'tableImportedPlural' : 'tableImported'}`))
+
       // reload table list
       await loadProjectTables(base.value.id, true)
 
@@ -622,7 +722,8 @@ async function importTemplate() {
         type: TabType.TABLE,
       })
     } catch (e: any) {
-      message.error(await extractSdkResponseErrorMsg(e))
+      console.log(e)
+      throw e
     } finally {
       isImporting.value = false
     }
@@ -641,7 +742,7 @@ function mapDefaultColumns() {
   srcDestMapping.value = {}
   for (let i = 0; i < data.tables.length; i++) {
     for (const col of importColumns[i]) {
-      const o = { srcCn: col.column_name, srcTitle: col.title, destCn: '', enabled: true }
+      const o = { srcCn: col.column_name, srcTitle: col.title, destCn: undefined, enabled: true }
       if (columns.value) {
         const tableColumn = columns.value.find((c) => c.title === col.title || c.column_name === col.column_name)
         if (tableColumn) {
@@ -661,23 +762,32 @@ function mapDefaultColumns() {
 defineExpose({
   importTemplate,
   isValid,
+  importError,
+  updateImportError: (err: string) => {
+    importError.value = err
+  },
 })
 
-function handleEditableTnChange(idx: number) {
-  const oldValue = prevEditableTn.value[idx]
-  const newValue = data.tables[idx].table_name
-  if (data.tables.filter((t) => t.table_name === newValue).length > 1) {
-    message.warn('Duplicate Table Name')
-    data.tables[idx].table_name = oldValue
-  } else {
-    prevEditableTn.value[idx] = newValue
-  }
-  setEditableTn(idx, false)
+function getMappedColumns(tableName: string) {
+  return (srcDestMapping.value[tableName] || []).filter((item) => item.destCn)
+}
+
+function isAllMappedSelected(tableName: string) {
+  const cols = getMappedColumns(tableName)
+  return !!cols.length && getMappedColumns(tableName).every((item) => item.enabled)
+}
+
+function isSomeMappedSelected(tableName: string) {
+  const cols = getMappedColumns(tableName)
+
+  return cols.length && getMappedColumns(tableName).some((item) => item.destCn && item.enabled)
 }
 
 function handleCheckAllRecord(event: CheckboxChangeEvent, tableName: string) {
   const isChecked = event.target.checked
   for (const record of srcDestMapping.value[tableName]) {
+    if (!record.destCn && isChecked) continue
+
     record.enabled = isChecked
   }
 }
@@ -742,16 +852,33 @@ function toggleTableSelecteds(table: any) {
 }
 
 const currentColumnToEdit = ref('')
+const currentTableToEdit = ref<number | undefined>()
+
+const getErrorForTable = (tableIdx: number) => {
+  return (formError.value?.[`tables.${tableIdx}.table_name`] || []).concat(formError.value?.[`tables.${tableIdx}.columns`] || [])
+}
+
+function getErrorByTableName(tableName: string) {
+  const errors = []
+
+  const atLeastOneEnabledValidationErr = atLeastOneEnabledValidation(tableName)
+
+  if (atLeastOneEnabledValidationErr) {
+    errors.push(atLeastOneEnabledValidationErr)
+  }
+
+  const missingRequiredColumnsValidationErr = missingRequiredColumnsValidation(tableName)
+
+  if (missingRequiredColumnsValidationErr) {
+    errors.push(missingRequiredColumnsValidationErr)
+  }
+
+  return errors
+}
 </script>
 
 <template>
-  <a-spin :spinning="isImporting" size="large">
-    <template #tip>
-      <p v-for="(importingTip, idx) of importingTips" :key="idx" class="mt-[10px]">
-        {{ importingTip }}
-      </p>
-    </template>
-
+  <div class="relative">
     <div v-if="importDataOnly">
       <a-form :model="data" name="import-only">
         <p v-if="data.tables && quickImportType === 'excel'" class="text-center">
@@ -769,6 +896,7 @@ const currentColumnToEdit = ref('')
       >
         <template #expandIcon="{ isActive }">
           <GeneralIcon
+            v-if="!isImporting"
             icon="ncChevronDown"
             class="text-lg !-translate-y-1/2 !transition"
             :class="{ '!transform !rotate-180': isActive }"
@@ -779,80 +907,145 @@ const currentColumnToEdit = ref('')
           v-for="(table, tableIdx) of data.tables"
           :key="tableIdx"
           class="nc-import-table-box nc-upload-box !overflow-hidden"
+          :class="{
+            'pointer-events-none': isImporting,
+          }"
         >
           <template #header>
-            <span class="font-weight-500 flex items-center gap-4 truncate">
+            <div
+              class="flex items-center space-x-3 group min-h-8"
+              :class="{
+                'w-[calc(100%_-_30px)]': !isImporting,
+                'w-full': isImporting,
+              }"
+            >
               <div class="w-8 h-8 flex items-center justify-center bg-secondary rounded-md">
                 <GeneralIcon :icon="tableIcon" class="w-5 h-5" />
               </div>
-              {{ table.table_name }}
-            </span>
+              <NcTooltip :title="table.table_name" show-on-truncate-only class="flex-1 truncate">
+                <span>
+                  {{ table.table_name }}
+                </span>
+              </NcTooltip>
+              <NcTooltip v-if="!isImporting && getErrorByTableName(table.table_name).length" class="ml-2">
+                <template #title>
+                  <div v-for="(err, idx) of getErrorByTableName(table.table_name)" :key="idx" class="mb-1 last-of-type:mb-0">
+                    {{ idx > 0 ? `${idx + 1}.` : '' }} {{ err }}
+                  </div>
+                </template>
+                <NcBadge color="red" :border="false" class="w-6 flex-none">
+                  <GeneralIcon icon="ncInfo" class="text-nc-content-red-dark" />
+                </NcBadge>
+              </NcTooltip>
+              <div v-if="isImporting" class="w-[150px]">
+                <a-progress
+                  :percent="importingTableTips[meta!.id!] ?? 0"
+                  size="small"
+                  status="normal"
+                  stroke-color="#3366FF"
+                  trail-color="#F0F3FF"
+                />
+              </div>
+            </div>
           </template>
-          <div v-if="srcDestMapping" class="bg-gray-50 max-h-[310px] overflow-y-auto nc-scrollbar-thin !py-1">
+          <div v-if="srcDestMapping" class="bg-gray-50 !py-1 flex-1 flex">
             <NcTable
-              class="template-form flex-1"
+              class="template-form flex-1 max-h-[310px]"
+              header-row-class-name="relative"
               body-row-class-name="template-form-row"
               :data="srcDestMapping[table.table_name]"
               :columns="srcDestMappingColumns"
               :bordered="false"
+              header-row-height="40px"
+              row-height="40px"
             >
               <template #headerCell="{ column }">
-                <span v-if="column.key !== 'action'">
+                <NcTooltip v-if="column.key === 'source_column'">
+                  <template #title>
+                    {{
+                      isAllMappedSelected(table.table_name)
+                        ? $t('activity.deselectAllFields')
+                        : $t('tooltip.selectAllMappedFields')
+                    }}
+                  </template>
+                  <div>
+                    <NcCheckbox
+                      :indeterminate="!isAllMappedSelected(table.table_name) && isSomeMappedSelected(table.table_name)"
+                      :checked="isAllMappedSelected(table.table_name)"
+                      @change="handleCheckAllRecord($event, table.table_name)"
+                    />
+                  </div>
+                  <div class="absolute h-1 border-b bottom-0 left-3 right-3" />
+                </NcTooltip>
+
+                <span v-if="column.key !== 'action'" class="font-weight-700 text-nc-content-gray text-small">
                   {{ column.title }}
                 </span>
-                <span v-if="column.key === 'action'">
-                  <a-checkbox
-                    v-model:checked="checkAllRecord[table.table_name]"
-                    @change="handleCheckAllRecord($event, table.table_name)"
-                  />
-                </span>
               </template>
 
-              <template #bodyCell="{ column, record }">
-                <template v-if="column.key === 'source_column'">
-                  <label class="flex items-center gap-3 w-70 h-full">
-                    <a-checkbox v-model:checked="record.enabled" />
-                    <div class="flex items-center flex-grow truncate">
-                      <NcTooltip class="inline-block max-w-full truncate">
-                        <template #title>{{ record.srcTitle }}</template>
-                        {{ record.srcTitle }}
-                      </NcTooltip>
-                    </div>
-                    <GeneralIcon icon="ncArrowRight" class="w-4 h-4 flex-shrink-0 mr-1" />
+              <template #bodyCell="{ column, record, recordIndex }">
+                <div v-if="column.key === 'source_column'" class="w-full">
+                  <label class="w-full flex items-center gap-3 h-full">
+                    <NcTooltip :disabled="record.enabled || !!record.destCn">
+                      <template #title>Select NocoDB field to map</template>
+                      <NcCheckbox v-model:checked="record.enabled" :disabled="!record.destCn" />
+                    </NcTooltip>
+
+                    <NcTooltip
+                      class="inline-block flex-1 max-w-[calc(100%_-_50px)] truncate text-nc-content-gray text-sm font-weight-500"
+                      show-on-truncate-only
+                    >
+                      <template #title>{{ record.srcTitle }}</template>
+                      {{ record.srcTitle }}
+                    </NcTooltip>
+
+                    <GeneralIcon icon="ncArrowRight" class="w-4 h-4 flex-shrink-0 mr-2" />
                   </label>
-                  <div class="absolute h-1 border-t top-0 left-3 right-3 cursor-default" />
-                </template>
+                  <div v-if="recordIndex" class="absolute h-1 border-t top-0 left-3 right-3 cursor-default" />
+                </div>
 
                 <template v-else-if="column.key === 'destination_column'">
-                  <a-select
-                    v-model:value="record.destCn"
-                    class="w-full nc-upload-filter-field"
-                    show-search
-                    allow-clear
-                    :filter-option="filterOption"
-                    dropdown-class-name="nc-dropdown-filter-field"
-                  >
-                    <template #suffixIcon>
-                      <GeneralIcon icon="arrowDown" class="text-current" />
-                    </template>
-                    <a-select-option v-for="(col, i) of columns" :key="i" :value="col.title">
-                      <div class="flex items-center gap-2 w-full">
-                        <component :is="getUIDTIcon(col.uidt)" class="flex-none w-3.5 h-3.5" />
-                        <NcTooltip class="truncate flex-1" show-on-truncate-only>
-                          <template #title>
+                  <a-form-item class="!my-0 w-full">
+                    <NcSelect
+                      v-model:value="record.destCn"
+                      class="nc-field-select-input w-full nc-select-shadow !border-none"
+                      show-search
+                      allow-clear
+                      :placeholder="`-${$t('labels.multiField.selectField').toLowerCase()}-`"
+                      :filter-option="filterOption"
+                      dropdown-class-name="nc-dropdown-filter-field"
+                      @update:value="
+                        (value) => {
+                          record.enabled = !!value
+                        }
+                      "
+                    >
+                      <template #suffixIcon>
+                        <GeneralIcon icon="arrowDown" class="text-current" />
+                      </template>
+                      <a-select-option
+                        v-for="(col, i) of getUnselectedFields(record, table.table_name)"
+                        :key="i"
+                        :value="col.title"
+                      >
+                        <div class="flex items-center gap-2 w-full">
+                          <component :is="getUIDTIcon(col.uidt)" class="flex-none w-3.5 h-3.5" />
+                          <NcTooltip class="truncate flex-1" show-on-truncate-only>
+                            <template #title>
+                              {{ col.title }}
+                            </template>
                             {{ col.title }}
-                          </template>
-                          {{ col.title }}
-                        </NcTooltip>
-                        <component
-                          :is="iconMap.check"
-                          v-if="record.destCn === col.title"
-                          id="nc-selected-item-icon"
-                          class="flex-none text-primary w-4 h-4"
-                        />
-                      </div>
-                    </a-select-option>
-                  </a-select>
+                          </NcTooltip>
+                          <component
+                            :is="iconMap.check"
+                            v-if="record.destCn === col.title"
+                            id="nc-selected-item-icon"
+                            class="flex-none text-primary w-4 h-4"
+                          />
+                        </div>
+                      </a-select-option>
+                    </NcSelect>
+                  </a-form-item>
                 </template>
               </template>
             </NcTable>
@@ -862,7 +1055,7 @@ const currentColumnToEdit = ref('')
 
       <div v-if="isEeUI" class="pt-4 pb-2 px-2">
         <label class="flex">
-          <NcCheckbox v-model:checked="autoInsertOption" />
+          <NcCheckbox v-model:checked="autoInsertOption" :disabled="isImporting" />
           <span class="ml-2">{{ $t('labels.autoCreateMissingSelectionOptions') }}</span>
         </label>
       </div>
@@ -879,6 +1072,7 @@ const currentColumnToEdit = ref('')
         >
           <template #expandIcon="{ isActive }">
             <GeneralIcon
+              v-if="!isImporting"
               icon="ncChevronDown"
               class="text-lg !-translate-y-1/2 !transition"
               :class="{ '!transform !rotate-180': isActive }"
@@ -887,54 +1081,109 @@ const currentColumnToEdit = ref('')
 
           <a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx" class="nc-import-table-box !overflow-hidden">
             <template #header>
-              <a-form-item v-bind="validateInfos[`tables.${tableIdx}.table_name`]" no-style>
-                <div class="flex flex-col w-full mr-2">
-                  <div class="flex items-center">
-                    <GeneralIcon icon="table" class="w-4 h-4 mr-3" />
-                    <a-input
-                      v-model:value="table.table_name"
-                      class="!rounded-md !w-70"
-                      hide-details
-                      :bordered="true"
-                      @click.stop
-                      @blur="handleEditableTnChange(tableIdx)"
-                      @keydown.enter="handleEditableTnChange(tableIdx)"
-                      @dblclick="setEditableTn(tableIdx, true)"
-                    />
-                  </div>
+              <div
+                class="flex items-center space-x-3 nc-table-name-wrapper group min-h-6"
+                :class="{
+                  'w-[calc(100%_-_30px)]': !isImporting,
+                  'w-full': isImporting,
+                }"
+              >
+                <GeneralIcon icon="table" class="w-4 h-4" />
+                <a-form-item
+                  v-if="!isImporting && currentTableToEdit === tableIdx"
+                  v-bind="validateInfos[`tables.${tableIdx}.table_name`]"
+                  class="!flex-1 !-my-1"
+                >
+                  <a-input
+                    :ref="(el: HTMLInputElement) => el?.focus?.()"
+                    v-model:value="table.table_name"
+                    class="!rounded-md animate-sidebar-node-input-padding"
+                    hide-details
+                    :bordered="true"
+                    @click.stop
+                    @keydown.enter.prevent.stop="currentTableToEdit = undefined"
+                    @keydown.esc.prevent.stop="currentTableToEdit = undefined"
+                    @blur.prevent.stop="currentTableToEdit = undefined"
+                  />
+                </a-form-item>
+                <template v-else>
+                  <NcTooltip :title="table.table_name" show-on-truncate-only class="flex-1 truncate">
+                    <span class="nc-import-table-name" @click.stop="currentTableToEdit = tableIdx">
+                      {{ table.table_name }}
+                    </span>
+                  </NcTooltip>
+                  <NcButton
+                    v-if="!isImporting"
+                    type="text"
+                    size="xsmall"
+                    class="!hidden group-hover:!block !h-6 !w-6"
+                    @click.stop="currentTableToEdit = tableIdx"
+                  >
+                    <GeneralIcon icon="pencil" />
+                  </NcButton>
+                </template>
 
-                  <div v-if="formError?.[`tables.${tableIdx}.table_name`]" class="text-red-500 ml-3">
-                    {{ formError?.[`tables.${tableIdx}.table_name`].join('\n') }}
-                  </div>
+                <NcTooltip v-if="!isImporting && getErrorForTable(tableIdx).length" class="ml-2">
+                  <template #title>
+                    <div v-for="(err, idx) of getErrorForTable(tableIdx)" :key="idx" class="mb-1 last-of-type:mb-0">
+                      {{ idx > 0 ? `${idx + 1}.` : '' }} {{ err }}
+                    </div>
+                  </template>
+                  <NcBadge color="red" :border="false" class="w-6 flex-none">
+                    <GeneralIcon icon="ncInfo" class="text-nc-content-red-dark" />
+                  </NcBadge>
+                </NcTooltip>
+
+                <div v-if="isImporting" class="w-[150px]">
+                  <a-progress
+                    :percent="importingTableTips[table.title] ?? 0"
+                    size="small"
+                    status="normal"
+                    stroke-color="#3366FF"
+                    trail-color="#F0F3FF"
+                  />
                 </div>
-              </a-form-item>
+              </div>
             </template>
 
-            <div
-              v-if="table.columns && table.columns.length"
-              class="bg-gray-50 max-h-[310px] overflow-y-auto nc-scrollbar-thin !py-1"
-            >
+            <div v-if="table.columns && table.columns.length" class="bg-gray-50 !py-1 flex-1 flex">
               <NcTable
-                class="template-form flex-1"
+                class="template-form flex-1 max-h-[310px]"
                 body-row-class-name="template-form-row"
+                header-row-class-name="relative"
                 :data="table.columns"
                 :columns="tableColumns"
                 :bordered="false"
+                header-row-height="40px"
+                row-height="40px"
                 :pagination="table.columns.length > 50 ? { defaultPageSize: 50, position: ['bottomCenter'] } : false"
               >
-                <template #body-prepend>
-                  <tr class="nc-table-row">
-                    <td colspan="2" class="nc-table-cell pl-3 flex h-full items-center">
-                      <a-checkbox :checked="table.columns.every((it) => it.selected)" @click="toggleTableSelecteds(table)" />
-                      <span class="ml-4 font-weight-700 text-[13px]">
-                        {{ table.columns.every((it) => it.selected) ? 'Deselect' : 'Select' }} all fields
-                      </span>
-                    </td>
-                  </tr>
+                <template #headerCell="{ column }">
+                  <template v-if="column.key === 'enabled'">
+                    <NcCheckbox
+                      :indeterminate="
+                        table.columns.length &&
+                        table.columns.some((it) => it.selected) &&
+                        !table.columns.every((it) => it.selected)
+                      "
+                      :checked="table.columns.every((it) => it.selected)"
+                      @click="toggleTableSelecteds(table)"
+                    />
+                  </template>
+                  <template v-if="column.key === 'column_name'">
+                    <span class="font-weight-700 text-small text-nc-content-gray">
+                      {{
+                        table.columns.every((it) => it.selected)
+                          ? $t('activity.deselectAllFields')
+                          : $t('activity.selectAllFields')
+                      }}
+                    </span>
+                    <div class="absolute h-1 border-b bottom-0 left-3 right-3" />
+                  </template>
                 </template>
-                <template #bodyCell="{ column, record }">
+                <template #bodyCell="{ column, record, recordIndex }">
                   <template v-if="column.key === 'enabled'">
-                    <a-checkbox v-model:checked="record.selected" />
+                    <NcCheckbox v-model:checked="record.selected" />
                   </template>
                   <template v-if="column.key === 'column_name'">
                     <template v-if="`${tableIdx}-${record.column_name}` === currentColumnToEdit">
@@ -945,7 +1194,7 @@ const currentColumnToEdit = ref('')
                         <a-input
                           :ref="(el: HTMLInputElement) => {inputRefs[record.key] = el; el?.focus?.(); return el;}"
                           v-model:value="record.title"
-                          class="!rounded-md"
+                          class="!rounded-md animate-sidebar-node-input-padding !font-weight-500 !text-nc-content-gray"
                           :autofocus="true"
                           @keydown.enter.prevent.stop="currentColumnToEdit = ''"
                           @keydown.esc.prevent.stop="currentColumnToEdit = ''"
@@ -955,10 +1204,12 @@ const currentColumnToEdit = ref('')
                     </template>
                     <template v-else>
                       <div
-                        class="relative group w-full flex items-center"
+                        class="relative group w-full flex items-center min-h-6"
                         @click="currentColumnToEdit = `${tableIdx}-${record.column_name}`"
                       >
-                        <span class="font-weight-500 max-w-[300px] inline-block truncate nc-import-table-field-name">
+                        <span
+                          class="font-weight-500 text-nc-content-gray max-w-[300px] inline-block truncate nc-import-table-field-name"
+                        >
                           {{ record.title }}
                         </span>
                         <NcButton
@@ -973,11 +1224,17 @@ const currentColumnToEdit = ref('')
                     </template>
                     <NcTooltip v-if="formError?.[`tables.${tableIdx}.columns.${record.key}.title`]" class="flex">
                       <template #title>
-                        {{ formError?.[`tables.${tableIdx}.columns.${record.key}.title`].join('\n') }}
+                        <div
+                          v-for="(err, idx) of formError?.[`tables.${tableIdx}.columns.${record.key}.title`] || []"
+                          :key="idx"
+                          class="mb-1 last-of-type:mb-0"
+                        >
+                          {{ idx > 0 ? `${idx + 1}.` : '' }} {{ err }}
+                        </div>
                       </template>
-                      <GeneralIcon icon="info" class="h-4 w-4 text-red-500 flex-none" />
+                      <GeneralIcon icon="info" class="h-4 w-4 text-nc-content-red-medium flex-none ml-2" />
                     </NcTooltip>
-                    <div class="absolute h-1 border-t top-0 left-3 right-3" />
+                    <div v-if="recordIndex" class="absolute h-1 border-t top-0 left-3 right-3" />
                   </template>
                 </template>
               </NcTable>
@@ -985,32 +1242,8 @@ const currentColumnToEdit = ref('')
           </a-collapse-panel>
         </a-collapse>
       </a-form>
-      <a-alert v-if="!isAnyColumnSelectedInEachTable" type="error" class="!rounded-lg !mt-2 !border-none !p-3">
-        <template #message>
-          <div class="flex flex-row items-center gap-2 mb-3">
-            <GeneralIcon icon="ncAlertCircleFilled" class="text-red-500 w-4 h-4" />
-            <span class="font-weight-700 text-[14px]">Required</span>
-          </div>
-        </template>
-        <template #description>
-          <div class="text-gray-500 text-[13px] leading-5 ml-6">Select at least one field to continue</div>
-        </template>
-      </a-alert>
-      <a-alert v-if="doesAnyColumnNameHaveTrailingWhitespace" type="error" class="!rounded-lg !mt-2 !border-none !p-3">
-        <template #message>
-          <div class="flex flex-row items-center gap-2 mb-3">
-            <GeneralIcon icon="ncAlertCircleFilled" class="text-red-500 w-4 h-4" />
-            <span class="font-weight-700 text-[14px]">Trailing Whitespace</span>
-          </div>
-        </template>
-        <template #description>
-          <div class="text-gray-500 text-[13px] leading-5 ml-6">
-            Table names should not have whitespace in the beginning or their end.
-          </div>
-        </template>
-      </a-alert>
     </a-card>
-  </a-spin>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -1037,13 +1270,10 @@ const currentColumnToEdit = ref('')
 }
 :deep(.nc-import-table-box .ant-collapse-content-box) {
   @apply p-0;
-  .nc-table-header-row {
-    @apply hidden;
-  }
+
+  .nc-table-header-row,
   .nc-table-row {
-    border: none !important;
-    height: 40px !important;
-    position: relative;
+    @apply !border-none relative;
   }
 }
 :deep(.nc-import-table-box.nc-upload-box .ant-collapse-content-box) {
@@ -1054,7 +1284,47 @@ const currentColumnToEdit = ref('')
     }
   }
 }
-:deep(.ant-select.nc-upload-filter-field) .ant-select-selector {
-  @apply !border-gray-200 shadow-sm shadow-gray-200;
+
+:deep(.nc-table-name-wrapper .ant-form-item-explain) {
+  @apply hidden;
+}
+
+:deep(.ant-progress-outer) {
+  margin-right: calc(-2em - 16px);
+  padding-right: calc(2em + 16px);
+}
+
+:deep(.ant-progress-text) {
+  @apply text-nc-content-gray-muted;
+}
+
+:deep(.nc-field-select-input.ant-select) {
+  .ant-select-selector {
+    @apply !bg-transparent rounded-lg;
+
+    .ant-select-selection-item {
+      @apply text-nc-content-gray text-sm font-weight-500;
+    }
+  }
+
+  &:not(.ant-select-focused):hover .ant-select-selector {
+    @apply !bg-nc-bg-gray-medium;
+  }
+
+  &:not(.ant-select-disabled):not(:hover):not(.ant-select-focused) .ant-select-selector,
+  &:not(.ant-select-disabled):hover.ant-select-disabled .ant-select-selector {
+    @apply !shadow-none;
+  }
+
+  &:hover:not(.ant-select-focused):not(.ant-select-disabled) .ant-select-selector {
+    @apply shadow-none;
+  }
+  &:not(.ant-select-focused):not(.ant-select-disabled) .ant-select-selector {
+    @apply !border-transparent;
+  }
+
+  &:not(.ant-select-focused):hover .ant-select-clear {
+    @apply !bg-nc-bg-gray-medium;
+  }
 }
 </style>
diff --git a/packages/nc-gui/components/template/utils.ts b/packages/nc-gui/components/template/utils.ts
index 5171598bb792..679866d0f951 100644
--- a/packages/nc-gui/components/template/utils.ts
+++ b/packages/nc-gui/components/template/utils.ts
@@ -4,7 +4,7 @@ export const tableColumns: NcTableColumnProps[] = [
     key: 'enabled',
     padding: '0px 0px 0px 12px',
     minWidth: 0,
-    width: 64,
+    width: 34,
   },
   {
     title: 'Column Name',
diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index acf6fdecb795..781413e5a1fc 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { FormulaDataTypes, UITypes, handleTZ } from 'nocodb-sdk'
+import { FormulaDataTypes, handleTZ } from 'nocodb-sdk'
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useDetachedLongText } from '../smartsheet/grid/canvas/composables/useDetachedLongText';
+import { useDetachedLongText } from '../smartsheet/grid/canvas/composables/useDetachedLongText'
 
 provide(IsUnderFormulaInj, ref(true))
 
@@ -21,6 +21,7 @@ const result = computed(() =>
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
 const isUnderLookup = inject(IsUnderLookupInj, ref(false))
+const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
 
 const isNumber = computed(() => (column.value.colOptions as any)?.parsed_tree?.dataType === FormulaDataTypes.NUMERIC)
 
@@ -35,23 +36,12 @@ const isStringDataType = computed(() => {
   )
 })
 
+const openLongText = (event: MouseEvent) => {
+  if (!isStringDataType.value) return
 
-const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activateShowEditNonEditableFieldWarning } =
-  useShowNotEditableWarning({
-    onEnter: e => {
-      if (isStringDataType.value) {
-        openLongText(e)
-      }
-    }
-  })
-
-
-const openLongText= (event) => {
-  if (!isStringDataType.value || !active.value) return
-
-  const target = event.target as HTMLElement;
+  const target = event.target as HTMLElement
   if (target.tagName === 'A') {
-    event.stopPropagation();
+    event.stopPropagation()
     return
   }
 
@@ -61,9 +51,16 @@ const openLongText= (event) => {
   })
 }
 
-const rowHeight = inject(RowHeightInj, ref(undefined))
+const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activateShowEditNonEditableFieldWarning } =
+  useShowNotEditableWarning({
+    onEnter: (e) => {
+      if (isStringDataType.value) {
+        openLongText(e)
+      }
+    },
+  })
 
-const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
+const rowHeight = inject(RowHeightInj, ref(undefined))
 
 const isGrid = inject(IsGridInj, ref(false))
 
@@ -78,9 +75,8 @@ const updatedColumn = computed(() => {
 })
 
 const renderAsCell = computed(() => {
-  return !!(column.value.meta?.display_type)
+  return !!column.value.meta?.display_type
 })
-
 </script>
 
 <template>
@@ -95,7 +91,19 @@ const renderAsCell = computed(() => {
     </a-tooltip>
 
     <div v-else class="nc-cell-field group py-1" @dblclick="activateShowEditNonEditableFieldWarning">
-      <div v-if="urls" v-html="urls" @click="openLongText" />
+      <div
+        v-if="urls"
+        :style="{
+          'display': '-webkit-box',
+          'max-width': '100%',
+          '-webkit-line-clamp': rowHeight || 1,
+          '-webkit-box-orient': 'vertical',
+          'overflow': 'hidden',
+          'word-break': 'break-all',
+        }"
+        @click="openLongText"
+        v-html="urls"
+      />
 
       <LazyCellClampedText v-else :value="result" :lines="rowHeight" />
 
@@ -106,7 +114,11 @@ const renderAsCell = computed(() => {
         {{ $t('msg.info.computedFieldDeleteWarning') }}
       </div>
 
-      <NcTooltip v-if="isStringDataType" placement="bottom" class="nc-action-icon hidden group-hover:block absolute right-4 top-1">
+      <NcTooltip
+        v-if="isStringDataType"
+        placement="bottom"
+        class="nc-action-icon hidden group-hover:block absolute right-4 top-1"
+      >
         <template #title>{{ isExpandedFormOpen ? $t('title.expand') : $t('tooltip.expandShiftSpace') }}</template>
         <NcButton
           type="secondary"
@@ -118,6 +130,5 @@ const renderAsCell = computed(() => {
         </NcButton>
       </NcTooltip>
     </div>
-
   </div>
 </template>
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 5bd767986f08..f0d1d0f7751e 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -6,8 +6,6 @@ const { metas, getMeta } = useMetas()
 
 const column = inject(ColumnInj, ref())
 
-const meta = inject(MetaInj, ref())
-
 const cellValue = inject(CellValueInj, ref())
 
 const isGroupByLabel = inject(IsGroupByLabelInj, ref(false))
diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index 7cd2bd20948a..848d4a8c0766 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -84,7 +84,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   const currentAuditPages = ref(1)
   const mightHaveMoreAudits = ref(false)
 
-  const loadAudits = async (_rowId?: string, showLoading: boolean = true) => {
+  const loadAudits = async (_rowId?: string, showLoading = true) => {
     if (!isUIAllowed('auditListRow') || (!row.value && !_rowId)) return
 
     const rowId = _rowId ?? extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
diff --git a/packages/nc-gui/composables/useInfiniteData.ts b/packages/nc-gui/composables/useInfiniteData.ts
index 94e7554fbec0..6138bb965ede 100644
--- a/packages/nc-gui/composables/useInfiniteData.ts
+++ b/packages/nc-gui/composables/useInfiniteData.ts
@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref } from 'vue'
-import { UITypes, extractFilterFromXwhere, isAIPromptCol } from 'nocodb-sdk'
+import { NcApiVersion, UITypes, extractFilterFromXwhere, isAIPromptCol } from 'nocodb-sdk'
 import {
   type Api,
   type ColumnType,
@@ -117,7 +117,11 @@ export function useInfiniteData(args: {
   })
 
   const computedWhereFilter = computed(() => {
-    const { filters: filter } = extractFilterFromXwhere(where?.value ?? '', columnsByAlias.value)
+    const { filters: filter } = extractFilterFromXwhere(
+      { api_version: NcApiVersion.V1 },
+      where?.value ?? '',
+      columnsByAlias.value,
+    )
 
     return filter.map((f) => {
       return { ...f, value: f.value ? f.value?.toString().replace(/(^%)(.*?)(%$)/, '$2') : f.value }
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index d73b0808d8cf..4da4f19d9261 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -457,11 +457,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       }
     }
 
-    const loadChildrenList = async (
-      resetOffset: boolean = false,
-      activeState: any = undefined,
-      limit: number | undefined = undefined,
-    ) => {
+    const loadChildrenList = async (resetOffset = false, activeState: any = undefined, limit: number | undefined = undefined) => {
       if (activeState) newRowState.state = activeState
 
       try {
@@ -497,20 +493,18 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             },
           }
         } else {
-          const where = childrenListPagination.query
-            ? `(${relatedTableDisplayValueProp.value},${
-                isDateOrDateTimeCol(relatedTableDisplayValueColumn.value!) ? 'eq,exactDate' : 'like'
-              },${childrenListPagination.query})`
-            : undefined
-            ? JSON.stringify([
-                {
-                  fk_column_id: relatedTableDisplayValuePropId.value,
-                  value: childrenListPagination.query,
-                  comparison_op: isDateOrDateTimeCol(relatedTableDisplayValueColumn.value!) ? 'eq' : 'like',
-                  comparison_sub_op: isDateOrDateTimeCol(relatedTableDisplayValueColumn.value!) ? 'exactDate' : undefined,
-                },
-              ])
-            : undefined
+          let where: string | undefined
+
+          if (childrenListPagination.query) {
+            where = JSON.stringify([
+              {
+                fk_column_id: relatedTableDisplayValuePropId.value,
+                value: childrenListPagination.query,
+                comparison_op: isDateOrDateTimeCol(relatedTableDisplayValueColumn.value!) ? 'eq' : 'like',
+                comparison_sub_op: isDateOrDateTimeCol(relatedTableDisplayValueColumn.value!) ? 'exactDate' : undefined,
+              },
+            ])
+          }
 
           if (isPublic.value) {
             childrenList.value = await $api.public.dataNestedList(
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index ed0da6a18287..1bf58a84e941 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -67,7 +67,7 @@ export function useMultiSelect(
   changePage?: (page: number) => void,
   fetchChunk?: (chunkId: number) => Promise<void>,
   onActiveCellChanged?: () => void,
-  getRows?: Promise<Row[]>
+  getRows?: Promise<Row[]>,
 ) {
   const meta = ref(_meta)
 
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index 5baca2ce15b4..b68ad7c5feb3 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -1,5 +1,5 @@
 import type { FilterType, KanbanType, SortType, TableType, ViewType } from 'nocodb-sdk'
-import { ViewLockType, ViewTypes, extractFilterFromXwhere } from 'nocodb-sdk'
+import { NcApiVersion, ViewLockType, ViewTypes, extractFilterFromXwhere } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import type { SmartsheetStoreEvents } from '#imports'
 
@@ -60,7 +60,8 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
 
     const whereQueryFromUrlError = computed(() => {
       if (route.value.query.where) {
-        return extractFilterFromXwhere(route.value.query.where, aliasColObjMap.value, false)?.errors
+        return extractFilterFromXwhere({ api_version: NcApiVersion.V1 }, route.value.query.where, aliasColObjMap.value, false)
+          ?.errors
       }
     })
     const whereQueryFromUrl = computed(() => {
diff --git a/packages/nc-gui/helpers/parsers/CSVTemplateAdapter.ts b/packages/nc-gui/helpers/parsers/CSVTemplateAdapter.ts
index f443d4a35e48..ea856dfbf80d 100644
--- a/packages/nc-gui/helpers/parsers/CSVTemplateAdapter.ts
+++ b/packages/nc-gui/helpers/parsers/CSVTemplateAdapter.ts
@@ -10,6 +10,7 @@ import {
   isMultiLineTextType,
   isUrlType,
 } from './parserHelpers'
+import type { ProgressMessageType } from './TemplateGenerator'
 
 export default class CSVTemplateAdapter {
   config: Record<string, any>
@@ -25,13 +26,14 @@ export default class CSVTemplateAdapter {
   data: Record<string, any> = {}
   columnValues: Record<number, []>
   existingColumns?: ColumnType[]
+  tableNames: string[]
 
-  private progressCallback?: (msg: string) => void
+  private progressCallback?: (msg: ProgressMessageType) => void
 
   constructor(
     source: UploadFile[] | string,
     parserConfig = {},
-    progressCallback?: (msg: string) => void,
+    progressCallback?: (msg: ProgressMessageType) => void,
     existingColumns?: ColumnType[],
   ) {
     this.config = parserConfig
@@ -44,6 +46,7 @@ export default class CSVTemplateAdapter {
     this.headers = {}
     this.columnValues = {}
     this.tables = {}
+    this.tableNames = []
     this.progressCallback = progressCallback
     this.existingColumns = existingColumns
   }
@@ -219,12 +222,16 @@ export default class CSVTemplateAdapter {
     }
   }
 
-  async _parseTableData(tableIdx: number, source: (UploadFile & { encoding?: string }) | string, tn: string) {
+  async _parseTableData(tableIdx: number, source: (UploadFile & { encoding?: string }) | string, tn: string, oldTn: string) {
     return new Promise((resolve, reject) => {
       const that = this
       let steppers = 0
       if (that.config.shouldImportData) {
-        that.progress(`Processing ${tn} data`)
+        that.progress(`Processing ${oldTn} data`)
+        that.progress({
+          title: oldTn,
+          value: 'Processing...',
+        })
 
         steppers = 0
         const parseSource = (this.config.importFromURL ? (source as string) : (source as UploadFile).originFileObj)!
@@ -253,11 +260,19 @@ export default class CSVTemplateAdapter {
             }
 
             if (steppers % 1000 === 0) {
-              that.progress(`Processed ${steppers} rows of ${tn}`)
+              that.progress(`Processed ${steppers} rows of ${oldTn}`)
+              that.progress({
+                title: oldTn,
+                value: `Processed ${steppers} rows`,
+              })
             }
           },
           complete() {
-            that.progress(`Processed ${tn} data`)
+            that.progress(`Processed ${oldTn} data`)
+            that.progress({
+              title: oldTn,
+              value: `Processed`,
+            })
             resolve(true)
           },
           error(e: Error) {
@@ -274,9 +289,26 @@ export default class CSVTemplateAdapter {
     return new Promise((resolve, reject) => {
       const that = this
       let steppers = 0
-      const tn = ((this.config.importFromURL ? (source as string).split('/').pop() : (source as UploadFile).name) as string)
+
+      const oldTn = this.config.importFromURL
+        ? (source as string).split('/').pop() ?? ''
+        : ((source as UploadFile).name as string)
+
+      let tn = ((this.config.importFromURL ? (source as string).split('/').pop() : (source as UploadFile).name) as string)
         .replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g, '_')
         .trim()!
+
+      if (this.tableNames.includes(tn)) {
+        tn = generateUniqueTitle(
+          tn,
+          this.tableNames.map((t) => ({ title: t })),
+          'title',
+          '_',
+        )
+      }
+
+      this.tableNames.push(tn)
+
       this.data[tn] = []
       const parseSource = (this.config.importFromURL ? (source as string) : (source as UploadFile).originFileObj)!
       parse(parseSource, {
@@ -312,8 +344,11 @@ export default class CSVTemplateAdapter {
         async complete() {
           that.updateTemplate(tableIdx)
           that.base.tables.push(that.tables[tableIdx])
-          that.progress(`Processed ${tn} metadata`)
-          await that._parseTableData(tableIdx, source, tn)
+
+          that.progress(`Processed ${oldTn} metadata`)
+          that.progress({ title: oldTn, value: 'Processed metadata' })
+
+          await that._parseTableData(tableIdx, source, tn, oldTn)
           resolve(true)
         },
         error(e: Error) {
@@ -331,6 +366,8 @@ export default class CSVTemplateAdapter {
         (this.source as UploadFile[]).map((file: UploadFile, tableIdx: number) =>
           (async (f, idx) => {
             this.progress(`Parsing ${f.name}`)
+            this.progress({ title: f.name, value: `Parsing...` })
+
             await this._parseTableMeta(idx, f)
           })(file, tableIdx),
         ),
@@ -350,7 +387,7 @@ export default class CSVTemplateAdapter {
     return this.base
   }
 
-  progress(msg: string) {
+  progress(msg: ProgressMessageType) {
     this.progressCallback?.(msg)
   }
 }
diff --git a/packages/nc-gui/helpers/parsers/ExcelTemplateAdapter.ts b/packages/nc-gui/helpers/parsers/ExcelTemplateAdapter.ts
index 10d1c9614f84..d4b18faa644c 100644
--- a/packages/nc-gui/helpers/parsers/ExcelTemplateAdapter.ts
+++ b/packages/nc-gui/helpers/parsers/ExcelTemplateAdapter.ts
@@ -1,6 +1,6 @@
 import { type ColumnType, UITypes, getDateFormat } from 'nocodb-sdk'
 import dayjs from 'dayjs'
-import TemplateGenerator from './TemplateGenerator'
+import TemplateGenerator, { type ProgressMessageType } from './TemplateGenerator'
 import {
   extractMultiOrSingleSelectProps,
   getCheckboxValue,
@@ -38,7 +38,7 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
     data = {},
     parserConfig = {},
     xlsx: any = null,
-    progressCallback?: (msg: string) => void,
+    progressCallback?: (msg: ProgressMessageType) => void,
     existingColumns?: ColumnType[],
   ) {
     super(progressCallback)
diff --git a/packages/nc-gui/helpers/parsers/ExcelUrlTemplateAdapter.ts b/packages/nc-gui/helpers/parsers/ExcelUrlTemplateAdapter.ts
index f374f34ec808..2b9208a2bb56 100644
--- a/packages/nc-gui/helpers/parsers/ExcelUrlTemplateAdapter.ts
+++ b/packages/nc-gui/helpers/parsers/ExcelUrlTemplateAdapter.ts
@@ -1,5 +1,6 @@
 import type { Api, ColumnType } from 'nocodb-sdk'
 import ExcelTemplateAdapter from './ExcelTemplateAdapter'
+import type { ProgressMessageType } from './TemplateGenerator'
 
 export default class ExcelUrlTemplateAdapter extends ExcelTemplateAdapter {
   url: string
@@ -11,7 +12,7 @@ export default class ExcelUrlTemplateAdapter extends ExcelTemplateAdapter {
     parserConfig: Record<string, any>,
     api: Api<any>,
     xlsx: any = null,
-    progressCallback?: (msg: string) => void,
+    progressCallback?: (msg: ProgressMessageType) => void,
     existingColumns?: ColumnType[],
   ) {
     super({}, parserConfig, xlsx, progressCallback, existingColumns)
diff --git a/packages/nc-gui/helpers/parsers/JSONTemplateAdapter.ts b/packages/nc-gui/helpers/parsers/JSONTemplateAdapter.ts
index f78a8a696d9c..87c0fa80f270 100644
--- a/packages/nc-gui/helpers/parsers/JSONTemplateAdapter.ts
+++ b/packages/nc-gui/helpers/parsers/JSONTemplateAdapter.ts
@@ -1,6 +1,6 @@
 import { UITypes } from 'nocodb-sdk'
 import { getCheckboxValue, getColumnUIDTAndMetas } from './parserHelpers'
-import TemplateGenerator from './TemplateGenerator'
+import TemplateGenerator, { type ProgressMessageType } from './TemplateGenerator'
 
 const jsonTypeToUidt: Record<string, string> = {
   number: UITypes.Number,
@@ -22,7 +22,7 @@ export default class JSONTemplateAdapter extends TemplateGenerator {
   }
 
   columns: object
-  constructor(data: object, parserConfig = {}, progressCallback?: (msg: string) => void) {
+  constructor(data: object, parserConfig = {}, progressCallback?: (msg: ProgressMessageType) => void) {
     super(progressCallback)
     this.config = parserConfig
     this._jsonData = data
diff --git a/packages/nc-gui/helpers/parsers/JSONUrlTemplateAdapter.ts b/packages/nc-gui/helpers/parsers/JSONUrlTemplateAdapter.ts
index de70931b76f1..d5ecc1221682 100644
--- a/packages/nc-gui/helpers/parsers/JSONUrlTemplateAdapter.ts
+++ b/packages/nc-gui/helpers/parsers/JSONUrlTemplateAdapter.ts
@@ -1,11 +1,17 @@
 import type { Api } from 'nocodb-sdk'
 import JSONTemplateAdapter from './JSONTemplateAdapter'
+import type { ProgressMessageType } from './TemplateGenerator'
 
 export default class JSONUrlTemplateAdapter extends JSONTemplateAdapter {
   url: string
   $api: any
 
-  constructor(url: string, parserConfig: Record<string, any>, api: Api<any>, progressCallback?: (msg: string) => void) {
+  constructor(
+    url: string,
+    parserConfig: Record<string, any>,
+    api: Api<any>,
+    progressCallback?: (msg: ProgressMessageType) => void,
+  ) {
     // const { $api } = useNuxtApp()
     super({}, parserConfig, progressCallback)
     this.url = url
diff --git a/packages/nc-gui/helpers/parsers/TemplateGenerator.ts b/packages/nc-gui/helpers/parsers/TemplateGenerator.ts
index d6db07c038e8..d62fed08a19b 100644
--- a/packages/nc-gui/helpers/parsers/TemplateGenerator.ts
+++ b/packages/nc-gui/helpers/parsers/TemplateGenerator.ts
@@ -1,11 +1,11 @@
 export default class TemplateGenerator {
-  progressCallback?: (msg: string) => void
+  progressCallback?: (msg: ProgressMessageType) => void
 
-  constructor(progressCallback?: (msg: string) => void) {
+  constructor(progressCallback?: (msg: ProgressMessageType) => void) {
     this.progressCallback = progressCallback
   }
 
-  progress(msg: string) {
+  progress(msg: ProgressMessageType) {
     this.progressCallback?.(msg)
   }
 
@@ -35,3 +35,9 @@ export default class TemplateGenerator {
     throw new Error("'getData' method is not implemented")
   }
 }
+
+export interface ProgressMessageObjType {
+  title: string
+  value: string
+}
+export type ProgressMessageType = string | ProgressMessageObjType
diff --git a/packages/nc-gui/helpers/tiptap-markdown/extensions/marks/link.ts b/packages/nc-gui/helpers/tiptap-markdown/extensions/marks/link.ts
index 1c7ad0cdf4c6..7f7aa71118bc 100644
--- a/packages/nc-gui/helpers/tiptap-markdown/extensions/marks/link.ts
+++ b/packages/nc-gui/helpers/tiptap-markdown/extensions/marks/link.ts
@@ -140,6 +140,52 @@ export const Link = TiptapLink.extend<LinkOptions>({
           }
         },
       }),
+      // ✅ Remove link when typing after it
+      new Plugin({
+        appendTransaction: (transactions, oldState, newState) => {
+          try {
+            if (transactions.length !== 1) return null
+            const steps = transactions[0].steps
+            if (steps.length !== 1) return null
+
+            const step: Step = steps[0] as Step
+            const stepJson = step.toJSON()
+
+            // If this is not inserting a new character, ignore
+            if (stepJson.stepType !== 'replace' || !stepJson.slice) return null
+
+            const { selection } = oldState
+            const { $from, $to } = selection
+            const nodeBefore = $to.nodeBefore
+            const nodeAfter = $to.nodeAfter
+
+            const linkMarkType = newState.schema.marks.link
+            if (!linkMarkType) return null
+            const tr = newState.tr
+
+            // ✅ Case 1: Typing at the END of a link
+            if (nodeBefore) {
+              const linkMark = linkMarkType.isInSet(nodeBefore.marks)
+              if (linkMark) {
+                const isAtEndOfLink = !nodeAfter || !linkMarkType.isInSet(nodeAfter.marks)
+                if (isAtEndOfLink) {
+                  return tr.removeMark($to.pos, $to.pos + 1, linkMarkType)
+                }
+              }
+            }
+
+            // ✅ Case 2: Typing at the START of a link
+            if ($from.pos === 0 || (!$from.nodeBefore && nodeAfter && linkMarkType.isInSet(nodeAfter.marks))) {
+              return tr.removeMark($from.pos, $from.pos + 1, linkMarkType)
+            }
+
+            return null
+          } catch (e) {
+            console.error(e)
+            return null
+          }
+        },
+      }),
     ]
   },
 
diff --git a/packages/nc-gui/helpers/tiptap-markdown/serialize/state.ts b/packages/nc-gui/helpers/tiptap-markdown/serialize/state.ts
index 29a70100b7db..a63e1cad91f2 100644
--- a/packages/nc-gui/helpers/tiptap-markdown/serialize/state.ts
+++ b/packages/nc-gui/helpers/tiptap-markdown/serialize/state.ts
@@ -13,9 +13,9 @@ interface InlineState {
  * - handle commonmark delimiters (https://spec.commonmark.org/0.29/#left-flanking-delimiter-run)
  */
 export class MarkdownSerializerState extends BaseMarkdownSerializerState {
-  inTable: boolean = false
+  inTable = false
   public inlines: InlineState[] = []
-  public out: string = ''
+  public out = ''
 
   constructor(nodes, marks, options) {
     super(nodes, marks, options ?? {})
diff --git a/packages/nc-gui/helpers/tiptap/functionality/markdown/markdown.ts b/packages/nc-gui/helpers/tiptap/functionality/markdown/markdown.ts
index ad74b3070f9e..acfc2936a9d2 100644
--- a/packages/nc-gui/helpers/tiptap/functionality/markdown/markdown.ts
+++ b/packages/nc-gui/helpers/tiptap/functionality/markdown/markdown.ts
@@ -32,7 +32,7 @@ const strikeThroughRegex = /(?<!~)~(?!~)(.*?)(?<!~)~(?!~)/g // Matches strikethr
 export class NcMarkdownParser {
   private static instance: NcMarkdownParser | null = null
   private md: MarkdownIt
-  private openLinkOnClick: boolean = true
+  private openLinkOnClick = true
   private maxBlockTokens?: number
 
   private constructor({
@@ -120,11 +120,7 @@ export class NcMarkdownParser {
    * @param content - The markdown content to parse.
    * @param options - Optional options to initialize the parser instance dynamically.
    */
-  public static parse<T extends string>(
-    content: T,
-    options: NcMarkdownParserConstructorType = {},
-    useSingleton: boolean = false,
-  ): string {
+  public static parse<T extends string>(content: T, options: NcMarkdownParserConstructorType = {}, useSingleton = false): string {
     if (!ncIsString(content)) return content
 
     let parser: NcMarkdownParser
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 282a10446720..aaf298f7b2e5 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -987,6 +987,7 @@
     "csv": "CSV",
     "csvFile": "CSV File",
     "json": "JSON",
+    "jsonCapitalized": "Json",
     "jsonFile": "JSON File",
     "excel": "Excel",
     "microsoftExcel": "Microsoft Excel",
@@ -1068,8 +1069,8 @@
     "nocoDBBaseImported": "NocoDB Base Imported",
     "formatJson": "Format JSON",
     "autoSelectFieldTypes": "Auto-Select Field Types",
-    "firstRowAsHeaders": "Use First Record as Headers",
-    "flattenNested": "Flatten Nested",
+    "firstRowAsHeaders": "Use first record as headers",
+    "flattenNested": "Flatten nested",
     "downloadAllowed": "Download allowed",
     "weAreHiring": "We are Hiring!",
     "primaryKey": "Primary key",
@@ -1155,7 +1156,9 @@
     "fillForm": "Fill Form",
     "proceedToLink": "Proceed to link",
     "currentOwner": "Current owner",
-    "newOwner": "New owner"
+    "newOwner": "New owner",
+    "addFromUrl": "Add from URL",
+    "enterJson": "Enter JSON"
   },
   "activity": {
     "clickToResolve": "Click to resolve",
@@ -1425,6 +1428,7 @@
     "clearForm": "Clear Form",
     "addFieldFromFormView": "Add Field",
     "selectAllFields": "Select all fields",
+    "deselectAllFields": "Deselect all fields",
     "preFilledFields": {
       "title": "Enable Pre-fill",
       "default": "Default",
@@ -1492,7 +1496,8 @@
     "sourceDataIsReadonly": "Source data is readonly",
     "schemaChangeDisabledFormSqlView": "Schema editing is disabled for this SQL View.",
     "shiftSpace": "Shift + Space",
-    "expandShiftSpace": "Expand 'Shift + Space'"
+    "expandShiftSpace": "Expand 'Shift + Space'",
+    "selectAllMappedFields": "Select all mapped fields"
   },
   "placeholder": {
     "searchIcons": "Search icons",
@@ -1704,7 +1709,10 @@
         "fieldVisibility": "You cannot change visibility of a field that is being edited. Please save or discard changes first.",
         "moveEditedField": "You cannot move field that is being edited. Either save or discard changes first",
         "moveDeletedField": "You cannot move field that is deleted. Either save or discard changes first"
-      }
+      },
+      "reachedUploadLimit": "Reached upload limit",
+      "youCanOnlyUploadMaxLimitFilesAtATime": "You can only upload {limit} {type} file at a time",
+      "youCanOnlyUploadMaxLimitFilesAtATimePlural": "You can only upload {limit} {type} files at a time"
     },
     "info": {
       "inviteSent": "Invitation sent successfully",
@@ -2005,7 +2013,9 @@
       "columnVisibilityUpdateFailed": "Failed to update field visibility",
       "unsupportedCharacter": "Unsupported character: {char}",
       "unsupportedCharacters": "Unsupported characters: {char}",
-      "notSupported": "Not supported"
+      "notSupported": "Not supported",
+      "duplicateTableName": "Duplicate table name",
+      "importError": "Import Error"
     },
     "toast": {
       "exportMetadata": "Base metadata exported successfully",
@@ -2055,6 +2065,8 @@
       "embeddableHTMLCodeCopied": "Copied embeddable HTML code!",
       "userDetailsUpdated": "Successfully updated the user details",
       "tableDataImported": "Successfully imported table data",
+      "tableImported": "Successfully imported table",
+      "tableImportedPlural": "Successfully imported tables",
       "webhookUpdated": "Webhook details updated successfully",
       "webhookDeleted": "Hook deleted successfully",
       "webhookTested": "Webhook tested successfully",
diff --git a/packages/nc-gui/lang/ro.json b/packages/nc-gui/lang/ro.json
index 13f60045759c..6ccae2d8bedf 100644
--- a/packages/nc-gui/lang/ro.json
+++ b/packages/nc-gui/lang/ro.json
@@ -1094,7 +1094,7 @@
     "restApis": "API-uri REST",
     "apis": "API-uri",
     "apiSnippet": "Fragmente API",
-    "includeData": "Include date",
+    "includeData": "Include data",
     "includeRecords": "Include records",
     "baseDuplicateMessage": "Note: Audit logs & integrations will not be duplicated.",
     "includeView": "Include views",
diff --git a/packages/nc-gui/lib/acl.ts b/packages/nc-gui/lib/acl.ts
index 961c4667aa68..c8a94e956b67 100644
--- a/packages/nc-gui/lib/acl.ts
+++ b/packages/nc-gui/lib/acl.ts
@@ -37,7 +37,6 @@ const rolePermissions = {
       tableRename: true,
       tableDelete: true,
       viewCreateOrEdit: true,
-      baseReorder: true,
       orgAdminPanel: true,
       workspaceAuditList: true,
       workspaceIntegrations: true,
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index c6aad494c105..4fcf210d7b0a 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -22,9 +22,9 @@ import type { ImageWindowLoader } from '../components/smartsheet/grid/canvas/loa
 import type { SpriteLoader } from '../components/smartsheet/grid/canvas/loaders/SpriteLoader'
 import type { ActionManager } from '../components/smartsheet/grid/canvas/loaders/ActionManager'
 import type { TableMetaLoader } from '../components/smartsheet/grid/canvas/loaders/TableMetaLoader'
+import type { UseDetachedLongTextProps } from '../components/smartsheet/grid/canvas/composables/useDetachedLongText'
 import type { AuditLogsDateRange, ImportSource, ImportType, PreFilledMode, TabType } from './enums'
 import type { rolePermissions } from './acl'
-import type { UseDetachedLongTextProps } from '../components/smartsheet/grid/canvas/composables/useDetachedLongText';
 
 interface User {
   id: string
diff --git a/packages/nc-gui/nuxt.config.ts b/packages/nc-gui/nuxt.config.ts
index 7338a272f036..1a241f32a26c 100644
--- a/packages/nc-gui/nuxt.config.ts
+++ b/packages/nc-gui/nuxt.config.ts
@@ -244,7 +244,6 @@ export default defineNuxtConfig({
         '@vuelidate/core',
         '@vuelidate/validators',
         '@vueuse/integrations/useQRCode',
-        'company-email-validator',
         'crossoriginworker',
         'd3-scale',
         'dagre',
@@ -264,7 +263,6 @@ export default defineNuxtConfig({
         'markdown-it-regexp',
         'markdown-it-task-lists',
         'marked',
-        'mime-lite',
         'monaco-editor',
         'monaco-editor/esm/vs/basic-languages/javascript/javascript',
         'papaparse',
diff --git a/packages/nc-gui/pages/index.vue b/packages/nc-gui/pages/index.vue
index 1e0cc9282756..074af5884896 100644
--- a/packages/nc-gui/pages/index.vue
+++ b/packages/nc-gui/pages/index.vue
@@ -50,7 +50,6 @@ const { sharedBaseId } = useCopySharedBase()
 const isDuplicateDlgOpen = ref(false)
 
 async function handleRouteTypeIdChange() {
-  console.log('shared view', isSharedFormView.value, isSharedView.value)
   // avoid loading bases for shared views
   if (isSharedView.value) {
     return
diff --git a/packages/nc-gui/utils/sortUtils.ts b/packages/nc-gui/utils/sortUtils.ts
index ed3fae63f553..51cc3d2a4c75 100644
--- a/packages/nc-gui/utils/sortUtils.ts
+++ b/packages/nc-gui/utils/sortUtils.ts
@@ -1,4 +1,4 @@
-import { type ColumnType, type SortType, UITypes } from 'nocodb-sdk'
+import { type ColumnType, type SortType, UITypes, getEquivalentUIType } from 'nocodb-sdk'
 import dayjs from 'dayjs'
 
 export const getSortDirectionOptions = (uidt: UITypes | string, isGroupBy?: boolean) => {
@@ -223,3 +223,32 @@ export const isSortRelevantChange = (
 
   return changedFields.some((field) => sortColumnTitles.has(field))
 }
+
+export const getColumnUidtByID = (key?: string, columns?: ColumnType[] | Record<string, ColumnType>) => {
+  let columnByID: Record<string, ColumnType> = {}
+  if (!key || !columns) {
+    return ''
+  } else if (Array.isArray(columns)) {
+    columnByID = columns.reduce((obj, col) => {
+      if (col.id) {
+        obj[col.id] = col
+      }
+      return obj
+    }, {} as Record<string, ColumnType>)
+  } else {
+    columnByID = columns
+  }
+  if (!columnByID[key]) return ''
+  const column = columnByID[key]
+
+  let uidt = column.uidt
+
+  if (column.uidt === UITypes.Formula) {
+    uidt =
+      getEquivalentUIType({
+        formulaColumn: column,
+      }) || uidt
+  }
+
+  return uidt || ''
+}
diff --git a/packages/nocodb-sdk/src/lib/filterHelpers.ts b/packages/nocodb-sdk/src/lib/filterHelpers.ts
index ffc967f13958..c96fbc83f50f 100644
--- a/packages/nocodb-sdk/src/lib/filterHelpers.ts
+++ b/packages/nocodb-sdk/src/lib/filterHelpers.ts
@@ -8,6 +8,8 @@ export {
 } from '~/lib/parser/queryFilter/query-filter-lexer';
 import { extractFilterFromXwhere as parserExtract } from './filterHelpers_withparser';
 import { extractFilterFromXwhere as oldExtract } from './filterHelpers_old';
+import { NcContext } from './ncTypes';
+import { NcApiVersion } from './enums';
 
 export interface FilterParseError {
   message: string;
@@ -56,12 +58,15 @@ export function buildFilterTree(items: FilterType[]) {
 }
 
 export function extractFilterFromXwhere(
+  context: Pick<NcContext, 'api_version'>,
   str: string | string[],
   aliasColObjMap: { [columnAlias: string]: ColumnType },
   throwErrorIfInvalid = false,
   errors: FilterParseError[] = []
 ): { filters?: FilterType[]; errors?: FilterParseError[] } {
-  if (typeof str === 'string' && str.startsWith('@')) {
+  if (context.api_version === NcApiVersion.V3) {
+    return parserExtract(str, aliasColObjMap, throwErrorIfInvalid, errors);
+  } else if (typeof str === 'string' && str.startsWith('@')) {
     return parserExtract(
       str.substring(1),
       aliasColObjMap,
diff --git a/packages/nocodb-sdk/src/lib/import-export-data.ts b/packages/nocodb-sdk/src/lib/import-export-data.ts
index 13092dc4457c..3a4ab0f1f5af 100644
--- a/packages/nocodb-sdk/src/lib/import-export-data.ts
+++ b/packages/nocodb-sdk/src/lib/import-export-data.ts
@@ -34,99 +34,186 @@ export enum SupportedExportCharset {
   'iso-8859-3' = 'iso-8859-3',
 }
 
-export const charsetOptions = [
-  { label: 'Unicode (UTF-8)', value: SupportedExportCharset['utf-8'] },
-  { label: 'Arabic (ISO-8859-6)', value: SupportedExportCharset['iso-8859-6'] },
+export interface CharsetOptionsType {
+  label: string;
+  sortLabel: string;
+  value: SupportedExportCharset;
+}
+
+export const charsetOptions: CharsetOptionsType[] = [
+  {
+    label: 'Unicode (UTF-8)',
+    value: SupportedExportCharset['utf-8'],
+    sortLabel: 'UTF-8',
+  },
+  {
+    label: 'Arabic (ISO-8859-6)',
+    value: SupportedExportCharset['iso-8859-6'],
+    sortLabel: 'ISO-8859-6',
+  },
   {
     label: 'Arabic (Windows-1256)',
     value: SupportedExportCharset['windows-1256'],
+    sortLabel: 'Windows-1256',
+  },
+  {
+    label: 'Baltic (ISO-8859-4)',
+    value: SupportedExportCharset['iso-8859-4'],
+    sortLabel: 'ISO-8859-4',
   },
-  { label: 'Baltic (ISO-8859-4)', value: SupportedExportCharset['iso-8859-4'] },
   {
     label: 'Baltic (windows-1257)',
     value: SupportedExportCharset['windows-1257'],
+    sortLabel: 'Windows-1257',
   },
   {
     label: 'Celtic (ISO-8859-14)',
     value: SupportedExportCharset['iso-8859-14'],
+    sortLabel: 'ISO-8859-14',
   },
   {
     label: 'Central European (ISO-8859-2)',
     value: SupportedExportCharset['iso-8859-2'],
+    sortLabel: 'ISO-8859-2',
   },
   {
     label: 'Central European (Windows-1250)',
     value: SupportedExportCharset['windows-1250'],
+    sortLabel: 'Windows-1250',
+  },
+  {
+    label: 'Chinese, Simplified (GBK)',
+    value: SupportedExportCharset['gbk'],
+    sortLabel: 'GBK',
+  },
+  {
+    label: 'Chinese (GB18030)',
+    value: SupportedExportCharset['gb18030'],
+    sortLabel: 'GB18030',
   },
-  { label: 'Chinese, Simplified (GBK)', value: SupportedExportCharset['gbk'] },
-  { label: 'Chinese (GB18030)', value: SupportedExportCharset['gb18030'] },
   {
     label: 'Chinese Traditional (Big5)',
     value: SupportedExportCharset['big5'],
+    sortLabel: 'Big5',
+  },
+  {
+    label: 'Cyrillic (KOI8-R)',
+    value: SupportedExportCharset['koi8-r'],
+    sortLabel: 'KOI8-R',
+  },
+  {
+    label: 'Cyrillic (KOI8-U)',
+    value: SupportedExportCharset['koi8-u'],
+    sortLabel: 'KOI8-U',
   },
-  { label: 'Cyrillic (KOI8-R)', value: SupportedExportCharset['koi8-r'] },
-  { label: 'Cyrillic (KOI8-U)', value: SupportedExportCharset['koi8-u'] },
   {
     label: 'Cyrillic (ISO-8859-5)',
     value: SupportedExportCharset['iso-8859-5'],
+    sortLabel: 'ISO-8859-5',
   },
   {
     label: 'Cyrillic (Windows-1251)',
     value: SupportedExportCharset['windows-1251'],
+    sortLabel: 'Windows-1251',
   },
   {
     label: 'Cyrillic Mac OS (x-mac-cyrillic)',
     value: SupportedExportCharset['x-mac-cyrillic'],
+    sortLabel: 'x-mac-cyrillic',
+  },
+  {
+    label: 'Greek (ISO-8859-7)',
+    value: SupportedExportCharset['iso-8859-7'],
+    sortLabel: 'ISO-8859-7',
   },
-  { label: 'Greek (ISO-8859-7)', value: SupportedExportCharset['iso-8859-7'] },
   {
     label: 'Greek (Windows-1253)',
     value: SupportedExportCharset['windows-1253'],
+    sortLabel: 'Windows-1253',
+  },
+  {
+    label: 'Hebrew (ISO-8859-8)',
+    value: SupportedExportCharset['iso-8859-8'],
+    sortLabel: 'ISO-8859-8',
   },
-  { label: 'Hebrew (ISO-8859-8)', value: SupportedExportCharset['iso-8859-8'] },
   {
     label: 'Hebrew (Windows-1255)',
     value: SupportedExportCharset['windows-1255'],
+    sortLabel: 'Windows-1255',
+  },
+  {
+    label: 'Japanese (EUC-JP)',
+    value: SupportedExportCharset['euc-jp'],
+    sortLabel: 'EUC-JP',
   },
-  { label: 'Japanese (EUC-JP)', value: SupportedExportCharset['euc-jp'] },
   {
     label: 'Japanese (ISO-2022-JP)',
     value: SupportedExportCharset['iso-2022-jp'],
+    sortLabel: 'ISO-2022-JP',
+  },
+  {
+    label: 'Japanese (Shift-JIS)',
+    value: SupportedExportCharset['shift-jis'],
+    sortLabel: 'Shift-JIS',
   },
-  { label: 'Japanese (Shift-JIS)', value: SupportedExportCharset['shift-jis'] },
-  { label: 'Korean (EUC-KR)', value: SupportedExportCharset['euc-kr'] },
-  { label: 'Macintosh', value: SupportedExportCharset['macintosh'] },
+  {
+    label: 'Korean (EUC-KR)',
+    value: SupportedExportCharset['euc-kr'],
+    sortLabel: 'EUC-KR',
+  },
+  {
+    label: 'Macintosh',
+    value: SupportedExportCharset['macintosh'],
+    sortLabel: 'Macintosh',
+  }, // No parentheses
   {
     label: 'Nordic (ISO-8859-10)',
     value: SupportedExportCharset['iso-8859-10'],
+    sortLabel: 'ISO-8859-10',
   },
   {
     label: 'South-Eastern European (ISO-8859-16)',
     value: SupportedExportCharset['iso-8859-16'],
+    sortLabel: 'ISO-8859-16',
+  },
+  {
+    label: 'Thai (Windows-874)',
+    value: SupportedExportCharset['windows-874'],
+    sortLabel: 'Windows-874',
   },
-  { label: 'Thai (Windows-874)', value: SupportedExportCharset['windows-874'] },
   {
     label: 'Turkish (Windows-1254)',
     value: SupportedExportCharset['windows-1254'],
+    sortLabel: 'Windows-1254',
   },
   {
     label: 'Vietnamese (Windows-1258)',
     value: SupportedExportCharset['windows-1258'],
+    sortLabel: 'Windows-1258',
   },
   {
     label: 'Western European (ISO-8859-1)',
     value: SupportedExportCharset['iso-8859-1'],
+    sortLabel: 'ISO-8859-1',
   },
   {
     label: 'Western European (Windows-1252)',
     value: SupportedExportCharset['windows-1252'],
+    sortLabel: 'Windows-1252',
   },
   {
     label: 'Latin 3 (ISO-8859-3)',
     value: SupportedExportCharset['iso-8859-3'],
+    sortLabel: 'ISO-8859-3',
   },
 ];
 
+export const charsetOptionsMap = charsetOptions.reduce((acc, curr) => {
+  acc[curr.value] = curr;
+
+  return acc;
+}, {} as Record<string, CharsetOptionsType>);
+
 export enum CsvColumnSeparator {
   ',' = ',',
   ';' = ';',
diff --git a/packages/nocodb-sdk/src/lib/is.ts b/packages/nocodb-sdk/src/lib/is.ts
index 2306edf61283..50598cf95064 100644
--- a/packages/nocodb-sdk/src/lib/is.ts
+++ b/packages/nocodb-sdk/src/lib/is.ts
@@ -30,6 +30,45 @@ export function ncIsEmptyObject(value: any): boolean {
   return ncIsObject(value) && Object.keys(value).length === 0;
 }
 
+/**
+ * Checks whether the given value is an object and contains all the specified properties.
+ *
+ * @template T - The expected object type.
+ * @param value - The value to check.
+ * @param keys - An array of property keys that should exist in the object.
+ * @returns {value is T} - Returns `true` if `value` is an object containing all specified keys, otherwise `false`.
+ *
+ * @example
+ * ```typescript
+ * type User = { name: string; age: number };
+ *
+ * const obj = { name: "Alice", age: 25 };
+ *
+ * if (ncHasProperties<User>(obj, ["name", "age"])) {
+ *   console.log(obj.name); // ✅ TypeScript ensures obj.name is safe to access
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * const obj = { title: "Hello", value: "World" };
+ *
+ * if (ncHasProperties(obj, ["title", "value"])) {
+ *   console.log(obj["title"]); // ✅ Safe to access without explicit type
+ * }
+ * ```
+ */
+export function ncHasProperties<T extends object>(
+  value: any,
+  keys: readonly (keyof T)[]
+): value is T;
+export function ncHasProperties<T extends object = object>(
+  value: any,
+  keys: readonly string[]
+): value is T {
+  return ncIsObject(value) && keys.every((key) => key in value);
+}
+
 /**
  * Checks if a value is an array.
  *
diff --git a/packages/nocodb-sdk/src/lib/ncTypes.ts b/packages/nocodb-sdk/src/lib/ncTypes.ts
index 906b51d13e40..974b0e4ac728 100644
--- a/packages/nocodb-sdk/src/lib/ncTypes.ts
+++ b/packages/nocodb-sdk/src/lib/ncTypes.ts
@@ -1,10 +1,12 @@
 import type { Request } from 'express';
 import type { TableType, UserType } from '~/lib/Api';
+import { NcApiVersion } from './enums';
 
 export interface NcContext {
   org_id?: string;
   workspace_id: string;
   base_id: string;
+  api_version?: NcApiVersion;
 }
 
 export interface NcRequest extends Partial<Request> {
diff --git a/packages/nocodb/Dockerfile b/packages/nocodb/Dockerfile
index d41405b20b09..4b4b682db108 100644
--- a/packages/nocodb/Dockerfile
+++ b/packages/nocodb/Dockerfile
@@ -50,7 +50,7 @@ RUN echo "node-linker=hoisted" > .npmrc
 # Install production dependencies, reduce node_modules size with modclean,
 # remove sqlite deps, and add execute permission to start.sh
 RUN pnpm install --prod --shamefully-hoist \
-    && pnpm dlx modclean --patterns="default:*" --ignore="nc-lib-gui/**,dayjs/**,express-status-monitor/**,@azure/msal-node/dist/**" --run \
+    && pnpm dlx modclean --patterns="default:*" --ignore="nc-lib-gui/**,dayjs/**,express-status-monitor/**,@azure/msal-node/dist/**,@react-email/**" --run \
     && rm -rf ./node_modules/sqlite3/deps \
     && chmod +x /usr/src/appEntry/start.sh
 
diff --git a/packages/nocodb/Dockerfile.local b/packages/nocodb/Dockerfile.local
index beaeddf986e0..5ef57a500329 100644
--- a/packages/nocodb/Dockerfile.local
+++ b/packages/nocodb/Dockerfile.local
@@ -28,7 +28,7 @@ RUN echo "node-linker=hoisted" > .npmrc
 # and add execute permission to start.sh
 RUN pnpm uninstall nocodb-sdk
 RUN pnpm install --prod --shamefully-hoist --reporter=silent \
-    && pnpm dlx modclean --patterns="default:*" --ignore="nc-lib-gui/**,dayjs/**,express-status-monitor/**,@azure/msal-node/dist/**" --run  \
+    && pnpm dlx modclean --patterns="default:*" --ignore="nc-lib-gui/**,dayjs/**,express-status-monitor/**,@azure/msal-node/dist/**,@react-email/**" --run  \
     && rm -rf ./node_modules/sqlite3/deps \
     && chmod +x /usr/src/appEntry/start.sh
 
diff --git a/packages/nocodb/Dockerfile.timely b/packages/nocodb/Dockerfile.timely
index 15723e301e34..00f483b57de5 100644
--- a/packages/nocodb/Dockerfile.timely
+++ b/packages/nocodb/Dockerfile.timely
@@ -49,7 +49,7 @@ RUN echo "node-linker=hoisted" > .npmrc
 # Install production dependencies, reduce node_modules size with modclean
 # Removing sqlite deps and add execute permission to start.sh
 RUN pnpm install --prod --shamefully-hoist \
-    && pnpm dlx modclean --patterns="default:*" --ignore="nc-lib-gui/**,dayjs/**,express-status-monitor/**,@azure/msal-node/dist/**" --run  \
+    && pnpm dlx modclean --patterns="default:*" --ignore="nc-lib-gui/**,dayjs/**,express-status-monitor/**,@azure/msal-node/dist/**,@react-email/**" --run  \
     && rm -rf ./node_modules/sqlite3/deps \
     && chmod +x /usr/src/appEntry/start.sh
 
diff --git a/packages/nocodb/src/db/BaseModelSqlv2.ts b/packages/nocodb/src/db/BaseModelSqlv2.ts
index c4266884c4fd..2883091b2b74 100644
--- a/packages/nocodb/src/db/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/db/BaseModelSqlv2.ts
@@ -22,7 +22,9 @@ import {
   isVirtualCol,
   LongTextAiMetaProp,
   NcErrorType,
+  ncIsNull,
   ncIsObject,
+  ncIsUndefined,
   RelationTypes,
   UITypes,
 } from 'nocodb-sdk';
@@ -449,6 +451,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
     );
     const sorts = extractSortsObject(rest?.sort, aliasColObjMap);
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
     );
@@ -555,6 +558,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
       throwErrorIfInvalidParams,
     );
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
       throwErrorIfInvalidParams,
@@ -711,6 +715,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
       columns,
     );
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
       throwErrorIfInvalidParams,
@@ -829,6 +834,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
     );
 
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
     );
@@ -894,6 +900,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
 
         const getAlias = getAliasGenerator('__nc_gb');
         const { filters: groupFilter } = extractFilterFromXwhere(
+          this.context,
           f.where,
           aliasColObjMap,
         );
@@ -1084,7 +1091,11 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
               logical_op: 'and',
             }),
             new Filter({
-              children: extractFilterFromXwhere(where, aliasColObjMap).filters,
+              children: extractFilterFromXwhere(
+                this.context,
+                where,
+                aliasColObjMap,
+              ).filters,
               is_group: true,
               logical_op: 'and',
             }),
@@ -1200,6 +1211,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
 
         const getAlias = getAliasGenerator('__nc_gb');
         const { filters: groupFilter } = extractFilterFromXwhere(
+          this.context,
           f?.where,
           aliasColObjMap,
         );
@@ -1403,7 +1415,11 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
               logical_op: 'and',
             }),
             new Filter({
-              children: extractFilterFromXwhere(where, aliasColObjMap).filters,
+              children: extractFilterFromXwhere(
+                this.context,
+                where,
+                aliasColObjMap,
+              ).filters,
               is_group: true,
               logical_op: 'and',
             }),
@@ -1638,6 +1654,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
       for (const f of bulkFilterList) {
         const tQb = this.dbDriver(this.tnPath);
         const { filters: aggFilter } = extractFilterFromXwhere(
+          this.context,
           f.where,
           aliasColObjMap,
         );
@@ -1663,7 +1680,11 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
               logical_op: 'and',
             }),
             new Filter({
-              children: extractFilterFromXwhere(where, aliasColObjMap).filters,
+              children: extractFilterFromXwhere(
+                this.context,
+                where,
+                aliasColObjMap,
+              ).filters,
               is_group: true,
               logical_op: 'and',
             }),
@@ -1785,6 +1806,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
 
       // Apply filers from view configuration, filterArr and where parameter
       const { filters: filterObj } = extractFilterFromXwhere(
+        this.context,
         where,
         aliasColObjMap,
       );
@@ -2071,6 +2093,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
     let sorts = extractSortsObject(rest?.sort, aliasColObjMap);
 
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
     );
@@ -2369,6 +2392,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
     );
 
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
     );
@@ -2812,6 +2836,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
         );
       const aliasColObjMap = await childTable.getAliasColObjMap(this.context);
       const { filters: filterObj } = extractFilterFromXwhere(
+        this.context,
         where,
         aliasColObjMap,
       );
@@ -3038,6 +3063,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
 
     const aliasColObjMap = await childTable.getAliasColObjMap(this.context);
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
     );
@@ -3180,6 +3206,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
       );
     const aliasColObjMap = await childTable.getAliasColObjMap(this.context);
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
     );
@@ -3291,6 +3318,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
 
     const aliasColObjMap = await childTable.getAliasColObjMap(this.context);
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
     );
@@ -3386,6 +3414,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
 
     const aliasColObjMap = await childTable.getAliasColObjMap(this.context);
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
     );
@@ -3470,6 +3499,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
 
     const aliasColObjMap = await childTable.getAliasColObjMap(this.context);
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
     );
@@ -3570,6 +3600,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
       : childTable
     ).getAliasColObjMap(this.context);
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
     );
@@ -3655,6 +3686,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
 
     const aliasColObjMap = await parentTable.getAliasColObjMap(this.context);
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
     );
@@ -3738,6 +3770,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
     ).getAliasColObjMap(this.context);
 
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
     );
@@ -3807,6 +3840,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
 
     const aliasColObjMap = await parentTable.getAliasColObjMap(this.context);
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       where,
       aliasColObjMap,
     );
@@ -3866,6 +3900,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
 
     if (!onlySort) {
       const { filters: filter } = extractFilterFromXwhere(
+        this.context,
         where,
         childAliasColMap,
       );
@@ -6126,13 +6161,10 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
       const newData = [];
       const updatePkValues = [];
       const toBeUpdated = [];
-      const pkAndData: { pk: any; data: any }[] = [];
+      const pkAndData: { pk: string; data: any }[] = [];
 
       for (const d of updateDatas) {
-        const pkValues = getCompositePkValue(
-          this.model.primaryKeys,
-          this.extractPksValues(d),
-        );
+        const pkValues = this.extractPksValues(d, true);
 
         if (!pkValues) {
           if (throwExceptionIfNotExist) NcError.recordNotFound(pkValues);
@@ -6148,13 +6180,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
 
         const oldRecords = await this.chunkList({ pks: pksToRead });
         const oldRecordsMap = new Map<string, any>(
-          oldRecords.map((r) => [
-            getCompositePkValue(
-              this.model.primaryKeys,
-              this.extractPksValues(r),
-            ),
-            r,
-          ]),
+          oldRecords.map((r) => [this.extractPksValues(r, true), r]),
         );
 
         for (const { pk, data } of chunk) {
@@ -6172,10 +6198,13 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
           toBeUpdated.push({ d: data, wherePk });
 
           updatePkValues.push(
-            getCompositePkValue(this.model.primaryKeys, {
-              ...oldRecord,
-              ...data,
-            }),
+            this.extractPksValues(
+              {
+                ...oldRecord,
+                ...data,
+              },
+              true,
+            ),
           );
         }
       }
@@ -6211,7 +6240,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
 
           const updatedRecordsMap = new Map(
             updatedRecords.map((record) => [
-              getCompositePkValue(this.model.primaryKeys, record),
+              this.extractPksValues(record, true),
               record,
             ]),
           );
@@ -6378,6 +6407,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
           columns,
         );
         const { filters: filterObj } = extractFilterFromXwhere(
+          this.context,
           where,
           aliasColObjMap,
           true,
@@ -6639,6 +6669,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
         columns,
       );
       const { filters: filterObj } = extractFilterFromXwhere(
+        this.context,
         where,
         aliasColObjMap,
         true,
@@ -7361,7 +7392,12 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
   // todo: handle composite primary key
   public extractPksValues(data: any, asString = false) {
     // if data is not object return as it is
-    if (!data || typeof data !== 'object') return data;
+    if (!data || typeof data !== 'object') {
+      if (asString && !ncIsNull(data) && !ncIsUndefined(data)) {
+        return `${data}`;
+      }
+      return data;
+    }
 
     // data can be still inserted without PK
 
@@ -7377,13 +7413,16 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
             .join('___')
         : pkValues;
     } else if (this.model.primaryKey) {
-      if (typeof data === 'object')
-        return (
+      let pkValue;
+      if (typeof data === 'object') {
+        pkValue =
           data[this.model.primaryKey.title] ??
-          data[this.model.primaryKey.column_name]
-        );
+          data[this.model.primaryKey.column_name];
+      } else {
+        pkValue = data;
+      }
 
-      if (data !== undefined) return asString ? `${data}` : data;
+      if (pkValue !== undefined) return asString ? `${pkValue}` : pkValue;
     } else {
       return 'N/A';
     }
@@ -7935,6 +7974,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
       );
       let sorts = extractSortsObject(args?.sort, aliasColObjMap);
       const { filters: filterObj } = extractFilterFromXwhere(
+        this.context,
         where,
         aliasColObjMap,
       );
@@ -8096,6 +8136,7 @@ class BaseModelSqlv2 implements IBaseModelSqlV2 {
       columns,
     );
     const { filters: filterObj } = extractFilterFromXwhere(
+      this.context,
       args.where,
       aliasColObjMap,
     );
diff --git a/packages/nocodb/src/helpers/dbHelpers.ts b/packages/nocodb/src/helpers/dbHelpers.ts
index 987a943ae518..ddb9d6a9532d 100644
--- a/packages/nocodb/src/helpers/dbHelpers.ts
+++ b/packages/nocodb/src/helpers/dbHelpers.ts
@@ -19,7 +19,7 @@ export function _wherePk(
   id: unknown | unknown[],
   skipPkValidation = false,
 ) {
-  const where = {};
+  const where:Record<string, unknown> = {};
 
   // if id object is provided use as it is
   if (id && typeof id === 'object' && !Array.isArray(id)) {
diff --git a/packages/nocodb/src/helpers/populateSamplePayload.ts b/packages/nocodb/src/helpers/populateSamplePayload.ts
index 81459273ab5a..dc4c237a9f8d 100644
--- a/packages/nocodb/src/helpers/populateSamplePayload.ts
+++ b/packages/nocodb/src/helpers/populateSamplePayload.ts
@@ -310,5 +310,35 @@ async function getSampleColumnValue(
         return null;
       }
       break;
+    case UITypes.User:
+      {
+        return [
+          {
+            id: 'u8z87rijgdsrpzdrbqsw',
+            email: 'user@example.com',
+            display_name: 'User',
+            meta: {
+              icon: {
+                url: 'https://cdn.mysite.example/image/sAlPwL3wqYPg74H7TMPb.webp',
+                title: 'sAlPwL3wqYPg74H7TMPb.webp',
+                mimetype: 'image/webp',
+                size: 26662,
+                width: 270,
+                height: 370,
+                signedUrl:
+                  'https://cdn.mysite.example/image/sAlPwL3wqYPg74H7TMPb.webp',
+                data: '',
+              },
+              iconType: 'IMAGE',
+            },
+          },
+        ];
+      }
+      break;
+    case UITypes.GeoData:
+      {
+        return '51.50073334463501;-0.12462623347869291';
+      }
+      break;
   }
 }
diff --git a/tests/playwright/pages/Dashboard/Import/ImportTemplate.ts b/tests/playwright/pages/Dashboard/Import/ImportTemplate.ts
index 6d3e07ef5a0d..904204c86b38 100644
--- a/tests/playwright/pages/Dashboard/Import/ImportTemplate.ts
+++ b/tests/playwright/pages/Dashboard/Import/ImportTemplate.ts
@@ -26,8 +26,8 @@ export class ImportTemplatePage extends BasePage {
       const tableName = await this.get()
         .locator(`.ant-collapse-header`)
         .nth(i)
-        .locator('input[type="text"]')
-        .inputValue();
+        .locator('.nc-import-table-name')
+        .textContent();
       tableList.push(tableName);
     }
     return tableList;
@@ -38,7 +38,7 @@ export class ImportTemplatePage extends BasePage {
     const columnList: { type: string; name: string }[] = [];
     const tr = this.get().locator(`tr.nc-table-row:visible`);
     const rowCount = await tr.count();
-    for (let i = 1; i < rowCount; i++) {
+    for (let i = 0; i < rowCount; i++) {
       // we start from 1 because the first tr holds the select all toggle
       // replace \n and \t from innerText
       // const columnType = (await getTextExcludeIconText(tr.nth(i))).replace(/\n|\t/g, '');
diff --git a/tests/playwright/tests/db/features/expandedFormUrl.spec.ts b/tests/playwright/tests/db/features/expandedFormUrl.spec.ts
index c0c0bb193428..ce0651d722aa 100644
--- a/tests/playwright/tests/db/features/expandedFormUrl.spec.ts
+++ b/tests/playwright/tests/db/features/expandedFormUrl.spec.ts
@@ -65,9 +65,6 @@ test.describe('Expanded form URL', () => {
       await dashboard.viewSidebar.createGalleryView({
         title: 'CountryExpand',
       });
-      await viewObj.toolbar.clickFields();
-      await viewObj.toolbar.fields.click({ title: 'Cities' });
-      await viewObj.toolbar.clickFields();
     }
 
     // expand row & verify URL
@@ -98,6 +95,7 @@ test.describe('Expanded form URL', () => {
       column: 'Cities',
       title: 'Kabul',
     });
+
     await dashboard.rootPage.waitForTimeout(1000);
 
     await dashboard.expandedForm.verifyCount({ count: 2 });