diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 8a4f6a4523..cfad2943f3 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -30,7 +30,7 @@ const { addTab } = useTabs()
 
 const { $api, $e } = useNuxtApp()
 
-const { tables, loadTables, isSharedBase } = useProject()
+const { bases, tables, loadTables, isSharedBase } = useProject()
 
 const { activeTab } = useTabs()
 
@@ -198,7 +198,8 @@ function openAirtableImportDialog() {
   }
 }
 
-function openTableCreateDialog() {
+function openTableCreateDialog(baseId?: string) {
+  if (!baseId) return
   $e('c:table:create:navdraw')
 
   const isOpen = ref(true)
@@ -206,6 +207,7 @@ function openTableCreateDialog() {
   const { close } = useDialog(resolveComponent('DlgTableCreate'), {
     'modelValue': isOpen,
     'onUpdate:modelValue': closeDialog,
+    'baseId': baseId,
   })
 
   function closeDialog() {
@@ -282,7 +284,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
           <div
             v-if="isUIAllowed('table-create')"
             class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
-            @click="openTableCreateDialog"
+            @click="openTableCreateDialog(bases[0].id)"
           >
             <MdiPlus />
 
@@ -353,72 +355,242 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
           <div v-if="tables.length" class="transition-height duration-200 overflow-hidden">
             <div :key="key" ref="menuRef" class="border-none sortable-list">
-              <div
-                v-for="table of tables"
-                :key="table.id"
-                v-e="['a:table:open']"
-                :class="[
-                  { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
-                  `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
-                ]"
-                class="nc-tree-item text-sm cursor-pointer group"
-                :data-order="table.order"
-                :data-id="table.id"
-                :data-testid="`tree-view-table-${table.title}`"
-                @click="addTableTab(table)"
-              >
-                <GeneralTooltip class="pl-5 pr-3 py-2" modifier-key="Alt">
-                  <template #title>{{ table.table_name }}</template>
-
-                  <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
-                    <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-                      <MdiDragVertical
-                        v-if="isUIAllowed('treeview-drag-n-drop')"
-                        :class="`nc-child-draggable-icon-${table.title}`"
-                        class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
-                        @click.stop.prevent
-                      />
-
-                      <component
-                        :is="icon(table)"
-                        class="nc-view-icon text-xs"
-                        :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                      />
-                    </div>
-
-                    <div class="nc-tbl-title flex-1">
-                      <GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
+              <div v-for="[index, base] of Object.entries(bases)" :key="`${base.id}-index`">
+                <div v-if="index === '0'">
+                  <div
+                    v-for="table of tables.filter((table) => table.base_id === base.id)"
+                    :key="table.id"
+                    v-e="['a:table:open']"
+                    :class="[
+                      { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
+                      `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
+                    ]"
+                    class="nc-tree-item text-sm cursor-pointer group"
+                    :data-order="table.order"
+                    :data-id="table.id"
+                    :data-testid="`tree-view-table-${table.title}`"
+                    @click="addTableTab(table)"
+                  >
+                    <GeneralTooltip class="pl-5 pr-3 py-2" modifier-key="Alt">
+                      <template #title>{{ table.table_name }}</template>
+                      <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
+                        <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
+                          <MdiDragVertical
+                            v-if="isUIAllowed('treeview-drag-n-drop')"
+                            :class="`nc-child-draggable-icon-${table.title}`"
+                            class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
+                            @click.stop.prevent
+                          />
+
+                          <component
+                            :is="icon(table)"
+                            class="nc-view-icon text-xs"
+                            :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                          />
+                        </div>
+
+                        <div class="nc-tbl-title flex-1">
+                          <GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
+                        </div>
+
+                        <a-dropdown
+                          v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
+                          :trigger="['click']"
+                          @click.stop
+                        >
+                          <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100" />
+
+                          <template #overlay>
+                            <a-menu class="!py-0 rounded text-sm">
+                              <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table)">
+                                <div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`">
+                                  {{ $t('general.rename') }}
+                                </div>
+                              </a-menu-item>
+
+                              <a-menu-item
+                                v-if="isUIAllowed('table-delete')"
+                                :data-testid="`sidebar-table-delete-${table.title}`"
+                                @click="deleteTable(table)"
+                              >
+                                <div class="nc-project-menu-item">
+                                  {{ $t('general.delete') }}
+                                </div>
+                              </a-menu-item>
+                            </a-menu>
+                          </template>
+                        </a-dropdown>
+                      </div>
+                    </GeneralTooltip>
+                  </div>
+                </div>
+                <a-collapse v-else expand-icon-position="right" :bordered="false" ghost>
+                  <a-collapse-panel :key="index">
+                    <template #header>
+                      <div v-if="index !== '0'" class="flex items-center gap-2">
+                        <MdiDatabaseOutline />
+                        {{ base.alias || '' }}
+                        ({{ base.type || '' }})
+                      </div>
+                    </template>
+                    <div
+                      v-if="isUIAllowed('table-create')"
+                      class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
+                      @click="openTableCreateDialog(base.id)"
+                    >
+                      <MdiPlus />
+
+                      <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{
+                        $t('tooltip.addTable')
+                      }}</span>
+
+                      <a-dropdown
+                        v-if="!isSharedBase"
+                        :trigger="['click']"
+                        overlay-class-name="nc-dropdown-import-menu"
+                        @click.stop
+                      >
+                        <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu" />
+
+                        <template #overlay>
+                          <a-menu class="!py-0 rounded text-sm">
+                            <!--                  Quick Import From -->
+                            <a-menu-item-group :title="$t('title.quickImportFrom')" class="!px-0 !mx-0">
+                              <a-menu-item
+                                v-if="isUIAllowed('airtableImport')"
+                                key="quick-import-airtable"
+                                @click="openAirtableImportDialog"
+                              >
+                                <div class="color-transition nc-project-menu-item group">
+                                  <MdiTableLarge class="group-hover:text-accent" />
+                                  Airtable
+                                </div>
+                              </a-menu-item>
+
+                              <a-menu-item
+                                v-if="isUIAllowed('csvImport')"
+                                key="quick-import-csv"
+                                @click="openQuickImportDialog('csv')"
+                              >
+                                <div class="color-transition nc-project-menu-item group">
+                                  <MdiFileDocumentOutline class="group-hover:text-accent" />
+                                  CSV file
+                                </div>
+                              </a-menu-item>
+
+                              <a-menu-item
+                                v-if="isUIAllowed('jsonImport')"
+                                key="quick-import-json"
+                                @click="openQuickImportDialog('json')"
+                              >
+                                <div class="color-transition nc-project-menu-item group">
+                                  <MdiCodeJson class="group-hover:text-accent" />
+                                  JSON file
+                                </div>
+                              </a-menu-item>
+
+                              <a-menu-item
+                                v-if="isUIAllowed('excelImport')"
+                                key="quick-import-excel"
+                                @click="openQuickImportDialog('excel')"
+                              >
+                                <div class="color-transition nc-project-menu-item group">
+                                  <MdiFileExcel class="group-hover:text-accent" />
+                                  Microsoft Excel
+                                </div>
+                              </a-menu-item>
+                            </a-menu-item-group>
+
+                            <a-menu-divider class="my-0" />
+
+                            <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
+                              <a
+                                v-e="['e:datasource:import-request']"
+                                href="https://github.com/nocodb/nocodb/issues/2052"
+                                target="_blank"
+                                class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
+                              >
+                                <MdiOpenInNew class="group-hover:text-accent" />
+                                <!-- Request a data source you need? -->
+                                {{ $t('labels.requestDataSource') }}
+                              </a>
+                            </a-menu-item>
+                          </a-menu>
+                        </template>
+                      </a-dropdown>
                     </div>
-
-                    <a-dropdown
-                      v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
-                      :trigger="['click']"
-                      @click.stop
+                    <div
+                      v-for="table of tables.filter((table) => table.base_id === base.id)"
+                      :key="table.id"
+                      v-e="['a:table:open']"
+                      :class="[
+                        { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
+                        `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
+                      ]"
+                      class="nc-tree-item text-sm cursor-pointer group"
+                      :data-order="table.order"
+                      :data-id="table.id"
+                      :data-testid="`tree-view-table-${table.title}`"
+                      @click="addTableTab(table)"
                     >
-                      <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100" />
-
-                      <template #overlay>
-                        <a-menu class="!py-0 rounded text-sm">
-                          <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table)">
-                            <div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`">
-                              {{ $t('general.rename') }}
-                            </div>
-                          </a-menu-item>
-
-                          <a-menu-item
-                            v-if="isUIAllowed('table-delete')"
-                            :data-testid="`sidebar-table-delete-${table.title}`"
-                            @click="deleteTable(table)"
+                      <GeneralTooltip wrapper-class="pl-5 pr-3 py-2" modifier-key="Alt">
+                        <template #title>{{ table.table_name }}</template>
+                        <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
+                          <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
+                            <MdiDragVertical
+                              v-if="isUIAllowed('treeview-drag-n-drop')"
+                              :class="`nc-child-draggable-icon-${table.title}`"
+                              class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
+                              @click.stop.prevent
+                            />
+
+                            <component
+                              :is="icon(table)"
+                              class="nc-view-icon text-xs"
+                              :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                            />
+                          </div>
+
+                          <div class="nc-tbl-title flex-1">
+                            <GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
+                          </div>
+
+                          <a-dropdown
+                            v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
+                            :trigger="['click']"
+                            @click.stop
                           >
-                            <div class="nc-project-menu-item">
-                              {{ $t('general.delete') }}
-                            </div>
-                          </a-menu-item>
-                        </a-menu>
-                      </template>
-                    </a-dropdown>
-                  </div>
-                </GeneralTooltip>
+                            <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
+
+                            <template #overlay>
+                              <a-menu class="!py-0 rounded text-sm">
+                                <a-menu-item
+                                  v-if="isUIAllowed('table-rename')"
+                                  :data-testid="`sidebar-table-rename-${table.title}`"
+                                  @click="openRenameTableDialog(table)"
+                                >
+                                  <div class="nc-project-menu-item">
+                                    {{ $t('general.rename') }}
+                                  </div>
+                                </a-menu-item>
+
+                                <a-menu-item
+                                  v-if="isUIAllowed('table-delete')"
+                                  :data-testid="`sidebar-table-delete-${table.title}`"
+                                  @click="deleteTable(table)"
+                                >
+                                  <div class="nc-project-menu-item">
+                                    {{ $t('general.delete') }}
+                                  </div>
+                                </a-menu-item>
+                              </a-menu>
+                            </template>
+                          </a-dropdown>
+                        </div>
+                      </GeneralTooltip>
+                    </div>
+                  </a-collapse-panel>
+                </a-collapse>
               </div>
             </div>
           </div>
@@ -576,4 +748,12 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 :deep(.ant-dropdown-menu-title-content) {
   @apply !p-0;
 }
+
+:deep(.ant-collapse-content-box) {
+  @apply !p-0;
+}
+
+:deep(.ant-collapse-header) {
+  @apply !border-0 !border-y-1;
+}
 </style>
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
new file mode 100644
index 0000000000..8f4d227157
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { Empty } from 'ant-design-vue'
+import type { BaseType } from 'nocodb-sdk'
+import CreateBase from './data-sources/CreateBase.vue'
+import { useNuxtApp, useProject } from '#imports'
+
+const { $api } = useNuxtApp()
+const { project } = useProject()
+
+let isLoading = $ref(false)
+let sources = $ref<BaseType[]>([])
+const newSourceTab = $ref(false)
+
+async function loadBases() {
+  try {
+    if (!project.value?.id) return
+
+    isLoading = true
+    const baseList = await $api.base.list(project.value?.id)
+    if (baseList.bases.list && baseList.bases.list.length) {
+      sources = baseList.bases.list
+    }
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isLoading = false
+  }
+}
+
+onMounted(async () => {
+  if (sources.length === 0) {
+    await loadBases()
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-row w-full">
+    <div class="flex flex-col w-full">
+      <div class="flex flex-row justify-end items-center w-full mb-4">
+        <a-button class="self-start nc-btn-new-datasource" @click="newSourceTab = !newSourceTab">
+          <div v-if="newSourceTab" class="flex items-center gap-2 text-gray-600 font-light">
+            <MdiClose class="text-lg group-hover:text-accent" />
+            Cancel
+          </div>
+          <div v-else class="flex items-center gap-2 text-gray-600 font-light">
+            <MdiDatabaseOutline class="text-lg group-hover:text-accent" />
+            New
+          </div>
+        </a-button>
+        <!--        Reload -->
+        <a-button
+          v-if="!newSourceTab"
+          v-e="['a:proj-meta:meta-data:reload']"
+          class="self-start nc-btn-metasync-reload"
+          @click="loadBases"
+        >
+          <div class="flex items-center gap-2 text-gray-600 font-light">
+            <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
+            {{ $t('general.reload') }}
+          </div>
+        </a-button>
+      </div>
+      <div v-if="newSourceTab" class="max-h-600px overflow-y-auto">
+        <CreateBase />
+      </div>
+      <div v-else class="max-h-600px overflow-y-auto">
+        <a-table
+          class="w-full"
+          size="small"
+          :custom-row="
+            (record) => ({
+              class: `nc-datasource-row nc-datasource-row-${record.table_name}`,
+            })
+          "
+          :data-source="sources ?? []"
+          :pagination="false"
+          :loading="isLoading"
+          bordered
+        >
+          <template #emptyText> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> </template>
+          <a-table-column key="type" title="Type" data-index="type" :width="180">
+            <template #default="{ text }">{{ text }}</template>
+          </a-table-column>
+          <a-table-column key="alias" title="Name" data-index="alias">
+            <template #default="{ text, record }">{{ record.is_meta ? 'BASE' : text }}</template>
+          </a-table-column>
+          <a-table-column key="action" :title="$t('labels.actions')" :width="180">
+            <template #default="{ record }">
+              <div class="flex items-center gap-2">
+                <MdiEditOutline v-e="['c:base:edit:rename']" class="nc-action-btn" />
+
+                <MdiDeleteOutline class="nc-action-btn" />
+              </div>
+            </template>
+          </a-table-column>
+        </a-table>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index db7a2bd156..c0c9f0310c 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { FunctionalComponent, SVGAttributes } from 'vue'
+import DataSources from './DataSources.vue'
 import { resolveComponent, useI18n, useNuxtApp, useUIPermission, useVModel, watch } from '#imports'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
@@ -91,6 +92,10 @@ const tabsInfo: TabGroup = {
     title: t('title.projMeta'),
     icon: MultipleTableIcon,
     subTabs: {
+      dataSources: {
+        title: 'Data Sources',
+        body: DataSources,
+      },
       metaData: {
         // Metadata
         title: t('title.metadata'),
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
new file mode 100644
index 0000000000..5cbf911edb
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -0,0 +1,598 @@
+<script lang="ts" setup>
+import { Form, Modal, message } from 'ant-design-vue'
+import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
+import {
+  CertTypes,
+  SSLUsage,
+  clientTypes,
+  computed,
+  extractSdkResponseErrorMsg,
+  fieldRequiredValidator,
+  generateUniqueName,
+  getDefaultConnectionConfig,
+  getTestDatabaseName,
+  nextTick,
+  onMounted,
+  projectTitleValidator,
+  readFile,
+  ref,
+  useApi,
+  useI18n,
+  useNuxtApp,
+  watch,
+} from '#imports'
+import { ClientType } from '~/lib'
+import { DefaultConnection, SQLiteConnection } from '~/utils'
+import type { ProjectCreateForm } from '~/utils'
+
+const { project, loadProject } = useProject()
+
+const useForm = Form.useForm
+
+const testSuccess = ref(false)
+
+const form = ref<typeof Form>()
+
+const { api } = useApi()
+
+const { $e } = useNuxtApp()
+
+const { t } = useI18n()
+
+let formState = $ref<ProjectCreateForm>({
+  title: '',
+  dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
+  inflection: {
+    inflectionColumn: 'camelize',
+    inflectionTable: 'camelize',
+  },
+  sslUse: SSLUsage.No,
+  extraParameters: [],
+})
+
+const customFormState = ref<ProjectCreateForm>({
+  title: '',
+  dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
+  inflection: {
+    inflectionColumn: 'camelize',
+    inflectionTable: 'camelize',
+  },
+  sslUse: SSLUsage.No,
+  extraParameters: [],
+})
+
+const validators = computed(() => {
+  return {
+    'title': [
+      {
+        required: true,
+        message: 'Base name is required',
+      },
+      projectTitleValidator,
+    ],
+    'extraParameters': [extraParameterValidator],
+    'dataSource.client': [fieldRequiredValidator()],
+    ...(formState.dataSource.client === ClientType.SQLITE
+      ? {
+          'dataSource.connection.connection.filename': [fieldRequiredValidator()],
+        }
+      : {
+          'dataSource.connection.host': [fieldRequiredValidator()],
+          'dataSource.connection.port': [fieldRequiredValidator()],
+          'dataSource.connection.user': [fieldRequiredValidator()],
+          'dataSource.connection.password': [fieldRequiredValidator()],
+          'dataSource.connection.database': [fieldRequiredValidator()],
+          ...([ClientType.PG, ClientType.MSSQL].includes(formState.dataSource.client)
+            ? {
+                'dataSource.searchPath.0': [fieldRequiredValidator()],
+              }
+            : {}),
+        }),
+  }
+})
+
+const { validate, validateInfos } = useForm(formState, validators)
+
+const populateName = (v: string) => {
+  formState.dataSource.connection.database = `${v.trim()}_noco`
+}
+
+const onClientChange = () => {
+  formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) }
+  populateName(formState.title)
+}
+
+const onSSLModeChange = ((mode: SSLUsage) => {
+  if (formState.dataSource.client !== ClientType.SQLITE) {
+    const connection = formState.dataSource.connection as DefaultConnection
+    switch (mode) {
+      case SSLUsage.No:
+        delete connection.ssl
+        break
+      case SSLUsage.Allowed:
+        connection.ssl = 'true'
+        break
+      default:
+        connection.ssl = {
+          ca: '',
+          cert: '',
+          key: '',
+        }
+        break
+    }
+  }
+}) as SelectHandler
+
+const updateSSLUse = () => {
+  if (formState.dataSource.client !== ClientType.SQLITE) {
+    const connection = formState.dataSource.connection as DefaultConnection
+    if (connection.ssl) {
+      if (typeof connection.ssl === 'string') {
+        formState.sslUse = SSLUsage.Allowed
+      } else {
+        formState.sslUse = SSLUsage.Preferred
+      }
+    } else {
+      formState.sslUse = SSLUsage.No
+    }
+  }
+}
+
+const addNewParam = () => {
+  formState.extraParameters.push({ key: '', value: '' })
+}
+
+const removeParam = (index: number) => {
+  formState.extraParameters.splice(index, 1)
+}
+
+const inflectionTypes = ['camelize', 'none']
+const importURL = ref('')
+const configEditDlg = ref(false)
+const importURLDlg = ref(false)
+
+const caFileInput = ref<HTMLInputElement>()
+const keyFileInput = ref<HTMLInputElement>()
+const certFileInput = ref<HTMLInputElement>()
+
+const onFileSelect = (key: CertTypes, el?: HTMLInputElement) => {
+  if (!el) return
+
+  readFile(el, (content) => {
+    if ('ssl' in formState.dataSource.connection && typeof formState.dataSource.connection.ssl === 'object')
+      formState.dataSource.connection.ssl[key] = content ?? ''
+  })
+}
+
+const sslFilesRequired = computed(
+  () => !!formState.sslUse && formState.sslUse !== SSLUsage.No && formState.sslUse !== SSLUsage.Allowed,
+)
+
+function getConnectionConfig() {
+  const extraParameters = Object.fromEntries(new Map(formState.extraParameters.map((object) => [object.key, object.value])))
+
+  const connection = {
+    ...formState.dataSource.connection,
+    ...extraParameters,
+  }
+
+  if ('ssl' in connection && connection.ssl) {
+    if (
+      formState.sslUse === SSLUsage.No ||
+      (typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => v === null || v === undefined))
+    ) {
+      delete connection.ssl
+    }
+  }
+  return connection
+}
+
+const focusInvalidInput = () => {
+  form.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus()
+}
+
+const createBase = async () => {
+  try {
+    await validate()
+  } catch (e) {
+    focusInvalidInput()
+    return
+  }
+
+  try {
+    if (!project.value?.id) return
+
+    const connection = getConnectionConfig()
+
+    const config = { ...formState.dataSource, connection }
+
+    await api.base.create(project.value?.id, {
+      alias: formState.title,
+      type: formState.dataSource.client,
+      config,
+      inflection_column: formState.inflection.inflectionColumn,
+      inflection_table: formState.inflection.inflectionTable,
+    })
+
+    $e('a:base:create:extdb')
+
+    await loadProject()
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const testConnection = async () => {
+  try {
+    await validate()
+  } catch (e) {
+    focusInvalidInput()
+    return
+  }
+
+  $e('a:base:create:extdb:test-connection', [])
+
+  try {
+    if (formState.dataSource.client === ClientType.SQLITE) {
+      testSuccess.value = true
+    } else {
+      const connection = getConnectionConfig()
+
+      connection.database = getTestDatabaseName(formState.dataSource)!
+
+      const testConnectionConfig = {
+        ...formState.dataSource,
+        connection,
+      }
+
+      const result = await api.utils.testConnection(testConnectionConfig)
+
+      if (result.code === 0) {
+        testSuccess.value = true
+
+        Modal.confirm({
+          title: t('msg.info.dbConnected'),
+          icon: null,
+          type: 'success',
+
+          okText: 'Ok & Add Base',
+          okType: 'primary',
+          cancelText: t('general.cancel'),
+          onOk: createBase,
+        })
+      } else {
+        testSuccess.value = false
+
+        message.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`)
+      }
+    }
+  } catch (e: any) {
+    testSuccess.value = false
+
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const handleImportURL = async () => {
+  if (!importURL.value || importURL.value === '') return
+
+  const connectionConfig = await api.utils.urlToConfig({ url: importURL.value })
+
+  if (connectionConfig) {
+    formState.dataSource.client = connectionConfig.client
+    formState.dataSource.connection = { ...connectionConfig.connection }
+  } else {
+    message.error(t('msg.error.invalidURL'))
+  }
+  importURLDlg.value = false
+  updateSSLUse()
+}
+
+const handleEditJSON = () => {
+  customFormState.value = { ...formState }
+  configEditDlg.value = true
+}
+
+const handleOk = () => {
+  formState = { ...customFormState.value }
+  configEditDlg.value = false
+  updateSSLUse()
+}
+
+// reset test status on config change
+watch(
+  () => formState.dataSource,
+  () => (testSuccess.value = false),
+  { deep: true },
+)
+
+// populate database name based on title
+watch(
+  () => formState.title,
+  (v) => populateName(v),
+)
+
+// select and focus title field on load
+onMounted(() => {
+  formState.title = generateUniqueName()
+  nextTick(() => {
+    // todo: replace setTimeout and follow better approach
+    setTimeout(() => {
+      const input = form.value?.$el?.querySelector('input[type=text]')
+      input.setSelectionRange(0, formState.title.length)
+      input.focus()
+    }, 500)
+  })
+})
+</script>
+
+<template>
+  <div
+    class="create-external bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+  >
+    <h1 class="prose-2xl font-bold self-center my-4">New Base</h1>
+
+    <a-form
+      ref="form"
+      :model="formState"
+      name="external-project-create-form"
+      layout="horizontal"
+      no-style
+      :label-col="{ span: 8 }"
+    >
+      <a-form-item label="Base Name" v-bind="validateInfos.title">
+        <a-input v-model:value="formState.title" class="nc-extdb-proj-name" />
+      </a-form-item>
+
+      <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
+        <a-select
+          v-model:value="formState.dataSource.client"
+          class="nc-extdb-db-type"
+          dropdown-class-name="nc-dropdown-ext-db-type"
+          @change="onClientChange"
+        >
+          <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
+            >{{ client.text }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <!-- SQLite File -->
+      <a-form-item
+        v-if="formState.dataSource.client === ClientType.SQLITE"
+        :label="$t('labels.sqliteFile')"
+        v-bind="validateInfos['dataSource.connection.connection.filename']"
+      >
+        <a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" />
+      </a-form-item>
+
+      <template v-else>
+        <!-- Host Address -->
+        <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
+          <a-input v-model:value="(formState.dataSource.connection as DefaultConnection).host" class="nc-extdb-host-address" />
+        </a-form-item>
+
+        <!-- Port Number -->
+        <a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']">
+          <a-input-number
+            v-model:value="(formState.dataSource.connection as DefaultConnection).port"
+            class="!w-full nc-extdb-host-port"
+          />
+        </a-form-item>
+
+        <!-- Username -->
+        <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
+          <a-input v-model:value="(formState.dataSource.connection as DefaultConnection).user" class="nc-extdb-host-user" />
+        </a-form-item>
+
+        <!-- Password -->
+        <a-form-item :label="$t('labels.password')">
+          <a-input-password
+            v-model:value="(formState.dataSource.connection as DefaultConnection).password"
+            class="nc-extdb-host-password"
+          />
+        </a-form-item>
+
+        <!-- Database -->
+        <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
+          <!-- Database : create if not exists -->
+          <a-input
+            v-model:value="formState.dataSource.connection.database"
+            :placeholder="$t('labels.dbCreateIfNotExists')"
+            class="nc-extdb-host-database"
+          />
+        </a-form-item>
+
+        <!-- Schema name -->
+        <a-form-item
+          v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath"
+          :label="$t('labels.schemaName')"
+          v-bind="validateInfos['dataSource.searchPath.0']"
+        >
+          <a-input v-model:value="formState.dataSource.searchPath[0]" />
+        </a-form-item>
+
+        <a-collapse ghost expand-icon-position="right" class="!mt-6">
+          <a-collapse-panel key="1">
+            <template #header>
+              <div class="flex items-center gap-2">
+                <!--                Use Connection URL -->
+                <a-button type="default" class="nc-extdb-btn-import-url" @click.stop="importURLDlg = true">
+                  {{ $t('activity.useConnectionUrl') }}
+                </a-button>
+                <span>{{ $t('title.advancedParameters') }}</span>
+              </div>
+            </template>
+            <a-form-item label="SSL mode">
+              <a-select v-model:value="formState.sslUse" dropdown-class-name="nc-dropdown-ssl-mode" @select="onSSLModeChange">
+                <a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option>
+              </a-select>
+            </a-form-item>
+
+            <a-form-item label="SSL keys">
+              <div class="flex gap-2">
+                <a-tooltip placement="top">
+                  <!-- Select .cert file -->
+                  <template #title>
+                    <span>{{ $t('tooltip.clientCert') }}</span>
+                  </template>
+
+                  <a-button :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()">
+                    {{ $t('labels.clientCert') }}
+                  </a-button>
+                </a-tooltip>
+
+                <a-tooltip placement="top">
+                  <!-- Select .key file -->
+                  <template #title>
+                    <span>{{ $t('tooltip.clientKey') }}</span>
+                  </template>
+                  <a-button :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()">
+                    {{ $t('labels.clientKey') }}
+                  </a-button>
+                </a-tooltip>
+
+                <a-tooltip placement="top">
+                  <!-- Select CA file -->
+                  <template #title>
+                    <span>{{ $t('tooltip.clientCA') }}</span>
+                  </template>
+
+                  <a-button :disabled="!sslFilesRequired" class="shadow" @click="caFileInput?.click()">
+                    {{ $t('labels.serverCA') }}
+                  </a-button>
+                </a-tooltip>
+              </div>
+            </a-form-item>
+
+            <input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.ca, caFileInput)" />
+
+            <input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.cert, certFileInput)" />
+
+            <input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" />
+
+            <a-divider />
+
+            <!--            Extra connection parameters -->
+            <a-form-item class="mb-2" :label="$t('labels.extraConnectionParameters')" v-bind="validateInfos.extraParameters">
+              <a-card>
+                <div v-for="(item, index) of formState.extraParameters" :key="index">
+                  <div class="flex py-1 items-center gap-1">
+                    <a-input v-model:value="item.key" />
+
+                    <span>:</span>
+
+                    <a-input v-model:value="item.value" />
+
+                    <MdiClose :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" />
+                  </div>
+                </div>
+                <a-button type="dashed" class="w-full caption mt-2" @click="addNewParam">
+                  <div class="flex items-center justify-center"><MdiPlus /></div>
+                </a-button>
+              </a-card>
+            </a-form-item>
+
+            <a-divider />
+
+            <a-form-item :label="$t('labels.inflection.tableName')">
+              <a-select
+                v-model:value="formState.inflection.inflectionTable"
+                dropdown-class-name="nc-dropdown-inflection-table-name"
+              >
+                <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
+              </a-select>
+            </a-form-item>
+
+            <a-form-item :label="$t('labels.inflection.columnName')">
+              <a-select
+                v-model:value="formState.inflection.inflectionColumn"
+                dropdown-class-name="nc-dropdown-inflection-column-name"
+              >
+                <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
+              </a-select>
+            </a-form-item>
+
+            <div class="flex justify-end">
+              <a-button class="!shadow-md" @click="handleEditJSON()">
+                <!-- Edit connection JSON -->
+                {{ $t('activity.editConnJson') }}
+              </a-button>
+            </div>
+          </a-collapse-panel>
+        </a-collapse>
+      </template>
+
+      <a-form-item class="flex justify-center !mt-5">
+        <div class="flex justify-center gap-2">
+          <a-button type="primary" ghost class="nc-extdb-btn-test-connection" @click="testConnection">
+            {{ $t('activity.testDbConn') }}
+          </a-button>
+
+          <a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !shadow" @click="createBase">
+            {{ $t('general.submit') }}
+          </a-button>
+        </div>
+      </a-form-item>
+    </a-form>
+
+    <a-modal
+      v-model:visible="configEditDlg"
+      :title="$t('activity.editConnJson')"
+      width="600px"
+      wrap-class-name="nc-modal-edit-connection-json"
+      @ok="handleOk"
+    >
+      <MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" />
+    </a-modal>
+
+    <!--    Use Connection URL -->
+    <a-modal
+      v-model:visible="importURLDlg"
+      :title="$t('activity.useConnectionUrl')"
+      width="600px"
+      :ok-text="$t('general.ok')"
+      :cancel-text="$t('general.cancel')"
+      wrap-class-name="nc-modal-connection-url"
+      @ok="handleImportURL"
+    >
+      <a-input v-model:value="importURL" />
+    </a-modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-collapse-header) {
+  @apply !pr-10 !-mt-4 text-right justify-end;
+}
+
+:deep(.ant-collapse-content-box) {
+  @apply !px-0;
+}
+
+:deep(.ant-form-item-explain-error) {
+  @apply !text-xs;
+}
+
+:deep(.ant-form-item) {
+  @apply mb-2;
+}
+
+:deep(.ant-form-item-with-help .ant-form-item-explain) {
+  @apply !min-h-0;
+}
+
+.create-external {
+  :deep(.ant-input-affix-wrapper),
+  :deep(.ant-input),
+  :deep(.ant-select) {
+    @apply !appearance-none border-1 border-solid rounded;
+  }
+
+  :deep(.ant-input-password) {
+    input {
+      @apply !border-none my-0;
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index e950102b36..96cb6cec16 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -4,6 +4,7 @@ import { TabType } from '~/lib'
 
 const props = defineProps<{
   modelValue: boolean
+  baseId: string
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -28,7 +29,7 @@ const { table, createTable, generateUniqueTitle, tables, project } = useTable(as
   })
 
   dialogShow.value = false
-})
+}, props.baseId)
 
 const useForm = Form.useForm
 
@@ -51,11 +52,11 @@ const validators = computed(() => {
         validator: (rule: any, value: any) => {
           return new Promise<void>((resolve, reject) => {
             let tableNameLengthLimit = 255
-            if (isMysql) {
+            if (isMysql(props.baseId)) {
               tableNameLengthLimit = 64
-            } else if (isPg) {
+            } else if (isPg(props.baseId)) {
               tableNameLengthLimit = 63
-            } else if (isMssql) {
+            } else if (isMssql(props.baseId)) {
               tableNameLengthLimit = 128
             }
             const projectPrefix = project?.value?.prefix || ''
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 2f99813c49..24fb40b834 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -66,7 +66,7 @@ const { addTab } = useTabs()
 
 const { sqlUis, project, loadTables } = useProject()
 
-const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : sqlUis.value[0])
+const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : Object.values(sqlUis.value)[0])
 
 const hasSelectColumn = ref<boolean[]>([])
 
diff --git a/packages/nc-gui/composables/useColumnCreateStore.ts b/packages/nc-gui/composables/useColumnCreateStore.ts
index a8d8d0c68a..d31ac88e16 100644
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui/composables/useColumnCreateStore.ts
@@ -36,7 +36,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
     const { $e } = useNuxtApp()
 
-    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : sqlUis.value[0])
+    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : Object.values(sqlUis.value)[0])
 
     const isEdit = computed(() => !!column?.value?.id)
 
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index 934924154d..a0982e4b66 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -15,7 +15,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     const { $api } = useNuxtApp()
     const { sqlUis } = useProject()
 
-    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : sqlUis.value[0])
+    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : Object.values(sqlUis.value)[0])
 
     const cellRefs = ref<HTMLTableDataCellElement[]>([])
 
diff --git a/packages/nc-gui/composables/useTable.ts b/packages/nc-gui/composables/useTable.ts
index b95a3c880b..3de4ddde10 100644
--- a/packages/nc-gui/composables/useTable.ts
+++ b/packages/nc-gui/composables/useTable.ts
@@ -16,7 +16,7 @@ import {
 } from '#imports'
 import { TabType } from '~/lib'
 
-export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
+export function useTable(onTableCreate?: (tableMeta: TableType) => void, baseId?: string) {
   const table = reactive<{ title: string; table_name: string; columns: string[] }>({
     title: '',
     table_name: '',
@@ -34,7 +34,7 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
   const { closeTab } = useTabs()
   const { sqlUis, project, tables } = useProject()
 
-  const sqlUi = ref(sqlUis.value[0])
+  const sqlUi = computed(() => (baseId && sqlUis.value[baseId] ? sqlUis.value[baseId] : Object.values(sqlUis.value)[0]))
 
   const createTable = async () => {
     if (!sqlUi?.value) return
@@ -49,7 +49,7 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
     })
 
     try {
-      const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
+      const tableMeta = await $api.base.tableCreate(project?.value?.id as string, baseId as string, {
         ...table,
         columns,
       })