diff --git a/packages/nc-gui/components/dlg/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index 0ab6bc3438..88621640ec 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -77,9 +77,7 @@ const syncSource = ref({
 
 const sourceSelectorRef = ref()
 
-const customSourceId = computed(() => {
-  return sourceSelectorRef.value?.customSourceId || sourceId
-})
+const sourceIdRef = ref(sourceId)
 
 const onLog = (data: { message: string }) => {
   progressRef.value?.pushProgress(data.message, 'progress')
@@ -159,7 +157,7 @@ async function createOrUpdate() {
         baseId,
         {
           operation: 'syncSourceCreate',
-          sourceId: customSourceId.value,
+          sourceId: sourceIdRef.value,
         },
         payload,
       )
@@ -221,7 +219,7 @@ async function listenForUpdates(id?: string) {
 async function loadSyncSrc() {
   const data: any = await $api.internal.getOperation(activeWorkspace.value!.id, baseId, {
     operation: 'syncSourceList',
-    sourceId: customSourceId.value,
+    sourceId: sourceIdRef.value,
   })
 
   const { list: srcs } = data
@@ -412,7 +410,7 @@ const collapseKey = ref('')
           <NcListSourceSelector
             ref="sourceSelectorRef"
             :base-id="baseId"
-            :source-id="sourceId"
+            v-model:source-id="sourceIdRef"
             :show-source-selector="showSourceSelector"
             force-layout="vertical"
           />
diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index dc476335ff..daac056455 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, toRaw, unref, watch } from '@vue/runtime-core'
+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, charsetOptionsMap, ncHasProperties } from 'nocodb-sdk'
@@ -21,8 +21,6 @@ const {
 
 const emit = defineEmits(['update:modelValue', 'back'])
 
-const sourceIdRef = ref(sourceId)
-
 // Define Monaco Editor as an async component
 const MonacoEditor = defineAsyncComponent(() => import('~/components/monaco/Editor.vue'))
 
@@ -101,14 +99,7 @@ const refMonacoEditor = ref()
 
 const sourceSelectorRef = ref()
 
-watch(
-  () => sourceSelectorRef.value?.customSourceId,
-  (newValue) => {
-    if (newValue) {
-      sourceIdRef.value = newValue
-    }
-  },
-)
+const sourceIdRef = ref(sourceId)
 
 const { clone } = useUndoRedo()
 
@@ -1046,7 +1037,7 @@ watch(
           <NcListSourceSelector
             ref="sourceSelectorRef"
             :base-id="baseId"
-            :source-id="sourceIdRef"
+            v-model:source-id="sourceIdRef"
             :show-source-selector="showSourceSelector"
             force-layout="vertical"
           />
diff --git a/packages/nc-gui/components/dlg/Table/Create.vue b/packages/nc-gui/components/dlg/Table/Create.vue
index 9718ef0799..b9b613e590 100644
--- a/packages/nc-gui/components/dlg/Table/Create.vue
+++ b/packages/nc-gui/components/dlg/Table/Create.vue
@@ -36,9 +36,7 @@ const aiPromptInputRef = ref<HTMLElement>()
 
 const sourceSelectorRef = ref()
 
-const customSourceId = computed(() => {
-  return sourceSelectorRef.value?.customSourceId || props.sourceId
-})
+const sourceIdRef = ref(props.sourceId)
 
 const workspaceStore = useWorkspace()
 
@@ -62,7 +60,7 @@ const onTableCreate = async (table: TableType) => {
 
 const { table, createTable, generateUniqueTitle, tables, base, openTable } = useTableNew({
   onTableCreate,
-  sourceId: customSourceId,
+  sourceId: sourceIdRef,
   baseId: props.baseId,
 })
 
@@ -139,7 +137,7 @@ const predictNextTables = async (): Promise<AiSuggestedTableType[]> => {
       activeTabPredictHistory.value.map(({ title }) => title),
       props.baseId,
       activeAiTab.value === AiWizardTabsType.PROMPT ? prompt.value : undefined,
-      customSourceId.value,
+      sourceIdRef.value,
     )
   )
     .filter((t) => !ncIsArrayIncludes(activeTabPredictedTables.value, t.title, 'title'))
@@ -278,7 +276,7 @@ const onAiEnter = async () => {
       undefined,
       onAiTableCreate,
       props.baseId,
-      customSourceId.value,
+      sourceIdRef.value,
     )
   }
 }
@@ -300,9 +298,7 @@ const validators = computed(() => {
         validator: (_: any, value: any) => {
           // validate duplicate alias
           return new Promise((resolve, reject) => {
-            if (
-              (tables.value || []).some((t) => t.title?.trim() === (value || '').trim() && t.source_id === customSourceId.value)
-            ) {
+            if ((tables.value || []).some((t) => t.title?.trim() === (value || '').trim() && t.source_id === sourceIdRef.value)) {
               return reject(new Error('Duplicate table alias'))
             }
             return resolve(true)
@@ -313,9 +309,9 @@ const validators = computed(() => {
         validator: (rule: any, value: any) => {
           return new Promise<void>((resolve, reject) => {
             let tableNameLengthLimit = 255
-            if (isMysql(customSourceId.value)) {
+            if (isMysql(sourceIdRef.value)) {
               tableNameLengthLimit = 64
-            } else if (isPg(customSourceId.value)) {
+            } else if (isPg(sourceIdRef.value)) {
               tableNameLengthLimit = 63
             }
             const basePrefix = base?.value?.prefix || ''
@@ -493,7 +489,7 @@ watch(_baseId, () => {
             <NcListSourceSelector
               ref="sourceSelectorRef"
               :base-id="baseId"
-              :source-id="sourceId"
+              v-model:source-id="sourceIdRef"
               :show-source-selector="showSourceSelector"
             />
           </template>
@@ -718,7 +714,7 @@ watch(_baseId, () => {
           <a-form-item
             v-if="enableDescription && !aiMode"
             v-bind="validateInfos.description"
-            :class="{ '!mb-1': isSnowflake(customSourceId), '!mb-0': !isSnowflake(customSourceId) }"
+            :class="{ '!mb-1': isSnowflake(sourceIdRef), '!mb-0': !isSnowflake(sourceIdRef) }"
           >
             <div class="flex gap-3 text-nc-content-gray h-7 mb-1 items-center justify-between">
               <span>
@@ -739,7 +735,7 @@ watch(_baseId, () => {
             />
           </a-form-item>
 
-          <template v-if="isSnowflake(customSourceId)">
+          <template v-if="isSnowflake(sourceIdRef)">
             <a-checkbox v-model:checked="table.is_hybrid" class="!flex flex-row items-center"> Hybrid Table </a-checkbox>
           </template>
         </div>
diff --git a/packages/nc-gui/components/nc/List/SourceSelector.vue b/packages/nc-gui/components/nc/List/SourceSelector.vue
index 20025bbf58..b3a572f21e 100644
--- a/packages/nc-gui/components/nc/List/SourceSelector.vue
+++ b/packages/nc-gui/components/nc/List/SourceSelector.vue
@@ -10,6 +10,8 @@ const props = withDefaults(defineProps<Props>(), {
   showSourceSelector: true,
 })
 
+const emits = defineEmits(['update:sourceId'])
+
 const { baseId } = toRefs(props)
 
 const { t } = useI18n()
@@ -18,7 +20,10 @@ const { bases } = storeToRefs(useBases())
 
 const base = computed(() => bases.value.get(baseId.value))
 
-const customSourceId = ref<string | undefined>()
+const sourceId = useVModel(props, 'sourceId', emits, {
+  defaultValue: undefined,
+  passive: true,
+})
 
 const isOpenSourceSelectDropdown = ref(false)
 
@@ -51,26 +56,30 @@ const sourceList = computed(() => {
 })
 
 const selectedSource = computed(() => {
-  if (sourceList.value.length < 2) return undefined
+  if (!sourceList.value.length) return undefined
 
-  return sourceList.value.find((source) => source.value === customSourceId.value) || sourceList.value[0]
+  return sourceList.value.find((source) => sourceId.value && source.value === sourceId.value) || sourceList.value[0]
 })
 
 onMounted(() => {
-  const newSourceId = props.sourceId || sourceList.value[0]?.value
+  const newSourceId = sourceId.value || sourceList.value[0]?.value
 
   const sourceObj = sourceList.value.find((source) => source.value === newSourceId)
 
   // Change source id only if it is default source selected initially and its not enabled
   if (sourceObj && sourceObj.ncItemDisabled && sourceObj.value === sourceList.value[0]?.value) {
-    customSourceId.value = sourceList.value.find((source) => !source.ncItemDisabled)?.value || sourceList.value[0]?.value
+    sourceId.value = sourceList.value.find((source) => !source.ncItemDisabled)?.value || sourceList.value[0]?.value
   } else {
-    customSourceId.value = newSourceId
+    sourceId.value = newSourceId
   }
 })
 
+const onUpdateValue = (value: string) => {
+  sourceId.value = value
+}
+
 defineExpose({
-  customSourceId,
+  sourceId,
   selectedSource,
   isOpenSourceSelectDropdown,
 })
@@ -107,12 +116,12 @@ defineExpose({
       <template #overlay="{ onEsc }">
         <NcList
           v-model:open="isOpenSourceSelectDropdown"
-          :value="customSourceId || selectedSource?.value || ''"
+          :value="sourceId || selectedSource?.value || ''"
           :list="sourceList"
           variant="medium"
           class="!w-auto"
           wrapper-class-name="!h-auto"
-          @update:value="customSourceId = $event as string"
+          @update:value="onUpdateValue($event as string)"
           @escape="onEsc"
         >
         </NcList>
diff --git a/packages/nc-gui/composables/useTableNew.ts b/packages/nc-gui/composables/useTableNew.ts
index 5466f57739..83193db802 100644
--- a/packages/nc-gui/composables/useTableNew.ts
+++ b/packages/nc-gui/composables/useTableNew.ts
@@ -6,7 +6,7 @@ import { generateUniqueTitle as generateTitle } from '#imports'
 export function useTableNew(param: {
   onTableCreate?: (tableMeta: TableType) => void
   baseId: string
-  sourceId?: ComputedRef<string | undefined>
+  sourceId?: Ref<string | undefined>
 }) {
   const table = reactive<{ title: string; table_name: string; description?: string; columns: string[]; is_hybrid: boolean }>({
     title: '',