diff --git a/.github/uffizzi/docker-compose.uffizzi.yml b/.github/uffizzi/docker-compose.uffizzi.yml
new file mode 100644
index 0000000000..4232733013
--- /dev/null
+++ b/.github/uffizzi/docker-compose.uffizzi.yml
@@ -0,0 +1,24 @@
+version: '3'
+
+x-uffizzi:
+  ingress:
+    service: nocodb
+    port: 8080
+
+services:
+  postgres:
+    image: postgres
+    restart: always
+    environment:
+      POSTGRES_PASSWORD: password
+      POSTGRES_USER: postgres
+      POSTGRES_DB: root_db
+  nocodb:
+    image: "${NOCODB_IMAGE}"
+    ports:
+      - "8080:8080"
+    restart: always
+    environment:
+      NC_DB: "pg://localhost:5432?u=postgres&p=password&d=root_db"
+      NC_ADMIN_EMAIL: admin@nocodb.com
+      NC_ADMIN_PASSWORD: password
diff --git a/.github/workflows/release-pr.yml b/.github/workflows/release-pr.yml
index d104e79089..80c4780c31 100644
--- a/.github/workflows/release-pr.yml
+++ b/.github/workflows/release-pr.yml
@@ -6,7 +6,8 @@ on:
     # reopened: closed pull request is reopened
     # synchronize: commit(s) pushed to the pull request
     # ready_for_review: non PR release
-    types: [opened, reopened, synchronize, ready_for_review]
+    # closed: pull request is closed, used to delete uffizzi previews
+    types: [opened, reopened, synchronize, ready_for_review, closed]
     paths:
       - "packages/nocodb-sdk/**"
       - "packages/nc-gui/**"
@@ -20,7 +21,7 @@ concurrency:
 jobs:
   # enrich tag for pr release
   set-tag:
-    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' }}
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' && github.event.action != 'closed' }}
     runs-on: 'ubuntu-latest'
     steps:
       - name: set-tag
@@ -47,7 +48,7 @@ jobs:
 
   # Build, install, publish frontend and backend to npm
   release-npm:
-    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' }}
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' && github.event.action != 'closed' }}
     needs: [set-tag]
     uses: ./.github/workflows/release-npm.yml
     with:
@@ -58,7 +59,7 @@ jobs:
 
   # Build docker image and push to docker hub
   release-docker:
-    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' }}
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' && github.event.action != 'closed' }}
     needs: [release-npm, set-tag]
     uses: ./.github/workflows/release-docker.yml
     with:
@@ -72,7 +73,7 @@ jobs:
 
   # Build executables and publish to GitHub
   release-executables:
-    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' }}
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' && github.event.action != 'closed' }}
     needs: [set-tag, release-npm]
     uses: ./.github/workflows/release-timely-executables.yml
     with:
@@ -82,7 +83,7 @@ jobs:
 
   # Add a comment for PR docker build
   leave-comment:
-    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' }}
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' && github.event.action != 'closed' }}
     runs-on: 'ubuntu-latest'
     needs: [release-docker, set-tag]
     steps:
@@ -94,9 +95,45 @@ jobs:
             docker run -d -p 8888:8080 nocodb/nocodb-timely:${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }}
             ```
 
+  # Create a preview for the pull request
+  preview-pull-request:
+    name: "Trigger Uffizzi Preview"
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' && github.event.action != 'closed' }}
+    runs-on: 'ubuntu-latest'
+    needs: [release-docker, set-tag]
+    outputs:
+      compose-file-cache-key:  ${{ env.COMPOSE_FILE_HASH }}
+    steps:
+      - name: Checkout git repo
+        uses: actions/checkout@v3
+      - name: Render Compose File
+        run: |
+          NOCODB_IMAGE=nocodb/nocodb-timely:${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }}
+          export NOCODB_IMAGE
+          # Render simple template from environment variables.
+          envsubst < .github/uffizzi/docker-compose.uffizzi.yml > docker-compose.rendered.yml
+          cat docker-compose.rendered.yml
+      - name: Upload Rendered Compose File as Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: preview-spec 
+          path: docker-compose.rendered.yml
+          retention-days: 2
+      - name: Serialize PR Event to File
+        run:  |
+          cat << EOF > event.json
+          ${{ toJSON(github.event) }} 
+          EOF
+      - name: Upload PR Event as Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: preview-spec
+          path: event.json
+          retention-days: 2
+    
   # Add a comment for PR executable build
   leave-executable-comment:
-    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' }}
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' && github.event.action != 'closed' }}
     runs-on: 'ubuntu-latest'
     needs: [release-executables, set-tag]
     steps:
@@ -129,3 +166,23 @@ jobs:
             ```
 
             For executables visit [here](https://github.com/nocodb/nocodb-timely/releases/tag/${{ needs.set-tag.outputs.current_version }}-${{ needs.set-tag.outputs.target_tag }})
+
+  # delete the uffizzi preview created off of this PR
+  delete-uffizzi-preview:
+    name: Call for Preview Deletion
+    runs-on: ubuntu-latest
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository && github.actor != 'dependabot[bot]' && github.event.pull_request.draft == false && github.base_ref == 'develop' && github.event.action == 'closed' }}
+    steps:
+      # If this PR is closing, we will not render a compose file nor pass it to the next workflow.
+      - name: Serialize PR Event to File
+        run:  |
+          cat << EOF > event.json
+          ${{ toJSON(github.event) }} 
+          
+          EOF
+      - name: Upload PR Event as Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: preview-spec
+          path: event.json
+          retention-days: 2
\ No newline at end of file
diff --git a/.github/workflows/uffizzi-preview.yml b/.github/workflows/uffizzi-preview.yml
new file mode 100644
index 0000000000..470acaa0e0
--- /dev/null
+++ b/.github/workflows/uffizzi-preview.yml
@@ -0,0 +1,88 @@
+name: Deploy Uffizzi Preview
+
+on:
+  workflow_run:
+    workflows:
+      - "PR Release"
+    types:
+      - completed
+
+jobs:
+  cache-compose-file:
+    name: Cache Compose File
+    runs-on: ubuntu-latest
+    outputs:
+      compose-file-cache-key: ${{ env.COMPOSE_FILE_HASH }}
+      pr-number: ${{ env.PR_NUMBER }}
+    steps:
+      - name: 'Download artifacts'
+        # Fetch output (zip archive) from the workflow run that triggered this workflow.
+        uses: actions/github-script@v6
+        with:
+          script: |
+            let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({
+               owner: context.repo.owner,
+               repo: context.repo.repo,
+               run_id: context.payload.workflow_run.id,
+            });
+            let matchArtifact = allArtifacts.data.artifacts.filter((artifact) => {
+              return artifact.name == "preview-spec"
+            })[0];
+            let download = await github.rest.actions.downloadArtifact({
+               owner: context.repo.owner,
+               repo: context.repo.repo,
+               artifact_id: matchArtifact.id,
+               archive_format: 'zip',
+            });
+            let fs = require('fs');
+            fs.writeFileSync(`${process.env.GITHUB_WORKSPACE}/preview-spec.zip`, Buffer.from(download.data));
+      
+      - name: 'Unzip artifact'
+        run: unzip preview-spec.zip
+      
+      - name: Read Event into ENV
+        run: |
+          echo 'EVENT_JSON<<EOF' >> $GITHUB_ENV
+          cat event.json >> $GITHUB_ENV
+          echo 'EOF' >> $GITHUB_ENV
+      
+      - name: Hash Rendered Compose File
+        id: hash
+        # If the previous workflow was triggered by a PR close event, we will not have a compose file artifact.
+        if: ${{ fromJSON(env.EVENT_JSON).action != 'closed' }}
+        run: echo "COMPOSE_FILE_HASH=$(md5sum docker-compose.rendered.yml | awk '{ print $1 }')" >> $GITHUB_ENV
+      
+      - name: Cache Rendered Compose File
+        if: ${{ fromJSON(env.EVENT_JSON).action != 'closed' }}
+        uses: actions/cache@v3
+        with:
+          path: docker-compose.rendered.yml
+          key: ${{ env.COMPOSE_FILE_HASH }}
+
+      - name: Read PR Number From Event Object
+        id: pr
+        run: echo "PR_NUMBER=${{ fromJSON(env.EVENT_JSON).number }}" >> $GITHUB_ENV
+      
+      - name: DEBUG - Print Job Outputs
+        if: ${{ runner.debug }}
+        run: |
+          echo "PR number: ${{ env.PR_NUMBER }}"
+          echo "Compose file hash: ${{ env.COMPOSE_FILE_HASH }}"
+          cat event.json
+
+  deploy-uffizzi-preview:
+    name: Use Remote Workflow to Preview on Uffizzi
+    needs:
+      - cache-compose-file
+    uses: UffizziCloud/preview-action/.github/workflows/reusable.yaml@v2
+    with:
+      # If this workflow was triggered by a PR close event, cache-key will be an empty string
+      # and this reusable workflow will delete the preview deployment.
+      compose-file-cache-key: ${{ needs.cache-compose-file.outputs.compose-file-cache-key }}
+      compose-file-cache-path: docker-compose.rendered.yml
+      server: https://app.uffizzi.com
+      pr-number: ${{ needs.cache-compose-file.outputs.pr-number }}
+    permissions:
+      contents: read
+      pull-requests: write
+      id-token: write
\ No newline at end of file
diff --git a/README.md b/README.md
index d96964efb8..b4dc25ff27 100644
--- a/README.md
+++ b/README.md
@@ -33,16 +33,6 @@ Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadshe
 
 ![All Views](https://user-images.githubusercontent.com/35857179/194825053-3aa3373d-3e0f-4b42-b3f1-42928332054a.gif)
 
-<p align="center">
-  <a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-      <img 
-      src="https://www.herokucdn.com/deploy/button.svg" 
-      width="300px"
-      alt="Deploy NocoDB to Heroku with 1-Click" 
-      />
-  </a>
-</p>
-
 <div align="center">
 
 [<img height="38" src="https://user-images.githubusercontent.com/61551451/135263434-75fe793d-42af-49e4-b964-d70920e41655.png">](markdown/readme/languages/chinese.md)
@@ -80,20 +70,6 @@ Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadshe
 
 # Quick try
 
-## 1-Click Deploy to Heroku
-
-Before doing so, make sure you have a Heroku account. By default, an add-on Heroku Postgres will be used as meta database. You can see the connection string defined in `DATABASE_URL` by navigating to Heroku App Settings and selecting Config Vars.
-
-<a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-    <img 
-    src="https://www.herokucdn.com/deploy/button.svg" 
-    width="300px"
-    alt="Deploy NocoDB to Heroku with 1-Click" 
-    />
-</a>
-
-<br/>
-
 ## NPX
 
 You can run below command if you need an interactive configuration.
@@ -226,7 +202,6 @@ Access Dashboard using : [http://localhost:8080/dashboard](http://localhost:8080
 # Table of Contents
 
 - [Quick try](#quick-try)
-  * [1-Click Deploy to Heroku](#1-click-deploy-to-heroku)
   * [NPX](#npx)
   * [Node Application](#node-application)
   * [Docker](#docker)
diff --git a/markdown/readme/languages/chinese.md b/markdown/readme/languages/chinese.md
index f8814e2f7d..3880ac417e 100644
--- a/markdown/readme/languages/chinese.md
+++ b/markdown/readme/languages/chinese.md
@@ -33,21 +33,6 @@
 
 # 快速尝试
 
-### 一键部署
-
-在部署之前，请确保你有一个 Heroku 账户。默认情况下，将使用一个附加的 Heroku Postgres 作为数据库。你可以通过访问 Heroku 应用程序设置并选择 Config Vars 来查看 DATABASE_URL 中定义的连接方式。
-
-#### Heroku
-
-<a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-    <img 
-    src="https://www.herokucdn.com/deploy/button.svg" 
-    width="300px"
-    alt="一键部署 NocoDB 到 Heroku" 
-    />
-</a>
-<br>
-
 ## NPX
 
 如果你需要一个交互式的配置，你可以运行下面的命令。
diff --git a/markdown/readme/languages/dutch.md b/markdown/readme/languages/dutch.md
index 6a0e2f6bca..ed45c20743 100644
--- a/markdown/readme/languages/dutch.md
+++ b/markdown/readme/languages/dutch.md
@@ -34,19 +34,6 @@ Draait elke MySQL, PostgreSQL, SQL Server, SQLITE & MARIADB in een Smart-Spreads
 
 # Snel proberen
 
-### 1-Click Deploy
-
-#### Heroku
-
-<a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-    <img 
-    src="https://www.herokucdn.com/deploy/button.svg" 
-    width="300px"
-    alt="Deploy NocoDB to Heroku with 1-Click" 
-    />
-</a>
-<br>
-
 ### Docker gebruiken
 
 ```bash
diff --git a/markdown/readme/languages/french.md b/markdown/readme/languages/french.md
index 2c5dda6dd0..cce007c8c8 100644
--- a/markdown/readme/languages/french.md
+++ b/markdown/readme/languages/french.md
@@ -34,18 +34,6 @@ Transformez n'importe quel MySQL, PostgreSQL, SQL Server, SQLite & Mariadb en un
 
 
 # Essayez rapidement
-### Déploiement en 1 Clic
-
-#### Heroku
-Avant de le faire, assurez-vous que vous avez un compte Heroku. Par défaut, un add-on Heroku Postgres sera utilisé comme meta database. Vous pouvez voir la string pour se connecter définie en tant que `DATABASE_URL` en naviguant dans Heroku App Settings et en sélectionnant Config Vars.
-<a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-    <img 
-    src="https://www.herokucdn.com/deploy/button.svg" 
-    width="300px"
-    alt="Deploy NocoDB to Heroku with 1-Click" 
-    />
-</a>
-<br>
 
 ### Utilisez Docker
 ```bash
diff --git a/markdown/readme/languages/german.md b/markdown/readme/languages/german.md
index 3ead650a12..2784eb794e 100644
--- a/markdown/readme/languages/german.md
+++ b/markdown/readme/languages/german.md
@@ -34,19 +34,6 @@ Verwandelt jeden MySQL, PostgreSQL, SQL Server, SQLite & MariaDB in eine Smart-T
 
 # Schneller Versuch
 
-### 1-Klick-Bereitstellung
-
-#### Heroku
-
-<a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-    <img 
-    src="https://www.herokucdn.com/deploy/button.svg" 
-    width="300px"
-    alt="Deploy NocoDB to Heroku with 1-Click" 
-    />
-</a>
-<br>
-
 ### Verwenden von Docker
 
 ```bash
diff --git a/markdown/readme/languages/indonesian.md b/markdown/readme/languages/indonesian.md
index 1e5e289f4e..db92fd3bc9 100644
--- a/markdown/readme/languages/indonesian.md
+++ b/markdown/readme/languages/indonesian.md
@@ -34,19 +34,6 @@ Mengubah MySQL, PostgreSQL, SQL Server, SQLite & MariaDB apapun menjadi spreadsh
 
 # Mulai Cepat
 
-### 1-Klik Deploy
-
-#### Heroku
-
-<a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-    <img 
-    src="https://www.herokucdn.com/deploy/button.svg" 
-    width="300px"
-    alt="Deploy NocoDB to Heroku with 1-Click" 
-    />
-</a>
-<br>
-
 ### Menggunakan Docker
 
 ```bash
diff --git a/markdown/readme/languages/italian.md b/markdown/readme/languages/italian.md
index a5321b98a4..d9a01cab86 100644
--- a/markdown/readme/languages/italian.md
+++ b/markdown/readme/languages/italian.md
@@ -31,20 +31,8 @@ Trasforma qualsiasi MySQL, PostgreSQL, SQL Server, SQLite & Mariadb in un foglio
 <p align="center">
   <a href="https://www.producthunt.com/posts/nocodb?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-nocodb" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=297536&theme=dark" alt="NocoDB - The Open Source Airtable alternative | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 </p>
-# Prova veloce
-
-### 1-Click Deploy
 
-#### Heroku
-
-<a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-    <img 
-    src="https://www.herokucdn.com/deploy/button.svg" 
-    width="300px"
-    alt="Deploy NocoDB to Heroku with 1-Click" 
-    />
-</a>
-<br>
+# Prova veloce
 
 ### Con Docker
 
diff --git a/markdown/readme/languages/japanese.md b/markdown/readme/languages/japanese.md
index 97c465b1e2..9f5dc2dd4c 100644
--- a/markdown/readme/languages/japanese.md
+++ b/markdown/readme/languages/japanese.md
@@ -34,19 +34,6 @@ MySQL、PostgreSQL、SQL Server、SQLite＆Mariadbをスマートスプレッド
 
 # クイック試し
 
-### 1-Click Deploy
-
-#### Heroku
-
-<a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-    <img 
-    src="https://www.herokucdn.com/deploy/button.svg" 
-    width="300px"
-    alt="Deploy NocoDB to Heroku with 1-Click" 
-    />
-</a>
-<br>
-
 ### Docker を使う
 
 ```bash
diff --git a/markdown/readme/languages/korean.md b/markdown/readme/languages/korean.md
index fc4d43340c..0e87dfd4dc 100644
--- a/markdown/readme/languages/korean.md
+++ b/markdown/readme/languages/korean.md
@@ -34,19 +34,6 @@ MySQL, PostgreSQL, SQL Server, SQLite, MariaDB를 똑똑한 스프레드시트
 
 # 바로 써보기
 
-### 원클릭 배포
-
-#### Heroku
-
-<a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-    <img 
-    src="https://www.herokucdn.com/deploy/button.svg" 
-    width="300px"
-    alt="NocoDB를 Heroku에 원클릭 배포하기" 
-    />
-</a>
-<br>
-
 ### Docker 사용
 
 ```bash
diff --git a/markdown/readme/languages/portuguese.md b/markdown/readme/languages/portuguese.md
index f63554eea6..e643bcc0d6 100644
--- a/markdown/readme/languages/portuguese.md
+++ b/markdown/readme/languages/portuguese.md
@@ -34,19 +34,6 @@ Transforma qualquer MySQL, PostgreSQL, SQL Server, Sqlite e MariaDB em uma plani
 
 # Experimente rápida
 
-### 1-Click Deploy
-
-#### Heroku
-
-<a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-    <img 
-    src="https://www.herokucdn.com/deploy/button.svg" 
-    width="300px"
-    alt="Deploy NocoDB to Heroku with 1-Click" 
-    />
-</a>
-<br>
-
 ### Usando o Docker.
 
 ```bash
diff --git a/markdown/readme/languages/russian.md b/markdown/readme/languages/russian.md
index 038c56bf28..51aa48597b 100644
--- a/markdown/readme/languages/russian.md
+++ b/markdown/readme/languages/russian.md
@@ -34,19 +34,6 @@
 
 # Быстрый старт
 
-### 1-Нажмите на Deploy
-
-#### Heroku
-
-<a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-    <img 
-    src="https://www.herokucdn.com/deploy/button.svg" 
-    width="300px"
-    alt="Deploy NocoDB to Heroku with 1-Click" 
-    />
-</a>
-<br>
-
 ### Используя Docker
 
 ```bash
diff --git a/markdown/readme/languages/spanish.md b/markdown/readme/languages/spanish.md
index 04d8068c6b..d70f3ba6b1 100644
--- a/markdown/readme/languages/spanish.md
+++ b/markdown/readme/languages/spanish.md
@@ -34,19 +34,6 @@ Convierte cualquier MySQL, PostgreSQL, SQL Server, SQLite y Mariadb en una hoja
 
 # Prueba rápida
 
-### Implementación en 1-Click
-
-#### Heroku
-
-<a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-    <img 
-    src="https://www.herokucdn.com/deploy/button.svg" 
-    width="300px"
-    alt="Deploy NocoDB to Heroku with 1-Click" 
-    />
-</a>
-<br>
-
 ### Usando docker
 
 ```bash
diff --git a/packages/nc-cli/package-lock.json b/packages/nc-cli/package-lock.json
index bdcd528f31..efb0fac26f 100644
--- a/packages/nc-cli/package-lock.json
+++ b/packages/nc-cli/package-lock.json
@@ -16,7 +16,7 @@
         "colors": "1.4.0",
         "download": "^8.0.0",
         "download-git-repo": "^3.0.2",
-        "express": "^4.17.1",
+        "express": "^4.18.2",
         "fs-extra": "^9.0.1",
         "glob": "^7.1.6",
         "inquirer": "^7.3.3",
@@ -1208,12 +1208,12 @@
       }
     },
     "node_modules/accepts": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
       "dependencies": {
-        "mime-types": "~2.1.24",
-        "negotiator": "0.6.2"
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
       },
       "engines": {
         "node": ">= 0.6"
@@ -2292,23 +2292,26 @@
       "dev": true
     },
     "node_modules/body-parser": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.1.tgz",
-      "integrity": "sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==",
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
       "dependencies": {
-        "bytes": "3.1.1",
+        "bytes": "3.1.2",
         "content-type": "~1.0.4",
         "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.8.1",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.9.6",
-        "raw-body": "2.4.2",
-        "type-is": "~1.6.18"
+        "on-finished": "2.4.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
       },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
       }
     },
     "node_modules/body-parser/node_modules/debug": {
@@ -2322,7 +2325,7 @@
     "node_modules/body-parser/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "node_modules/boxen": {
       "version": "4.2.0",
@@ -2488,9 +2491,9 @@
       }
     },
     "node_modules/bytes": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
-      "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
       "engines": {
         "node": ">= 0.8"
       }
@@ -2611,7 +2614,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -4321,9 +4323,9 @@
       }
     },
     "node_modules/cookie": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
-      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -4884,17 +4886,21 @@
       }
     },
     "node_modules/depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 0.8"
       }
     },
     "node_modules/destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
     },
     "node_modules/detect-file": {
       "version": "1.0.0",
@@ -5179,7 +5185,7 @@
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/electron-to-chromium": {
       "version": "1.4.38",
@@ -5229,7 +5235,7 @@
     "node_modules/encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
       "engines": {
         "node": ">= 0.8"
       }
@@ -5381,7 +5387,7 @@
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
     "node_modules/escape-string-regexp": {
       "version": "2.0.0",
@@ -5476,7 +5482,7 @@
     "node_modules/etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -5736,37 +5742,38 @@
       }
     },
     "node_modules/express": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.2.tgz",
-      "integrity": "sha512-oxlxJxcQlYwqPWKVJJtvQiwHgosH/LrLSPA+H4UxpyvSS6jC5aH+5MoHFM+KABgTOt0APue4w66Ha8jCUo9QGg==",
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
       "dependencies": {
-        "accepts": "~1.3.7",
+        "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.19.1",
+        "body-parser": "1.20.1",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.4.1",
+        "cookie": "0.5.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
-        "depd": "~1.1.2",
+        "depd": "2.0.0",
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "~1.1.2",
+        "finalhandler": "1.2.0",
         "fresh": "0.5.2",
+        "http-errors": "2.0.0",
         "merge-descriptors": "1.0.1",
         "methods": "~1.1.2",
-        "on-finished": "~2.3.0",
+        "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
-        "qs": "6.9.6",
+        "qs": "6.11.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.17.2",
-        "serve-static": "1.14.2",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
         "setprototypeof": "1.2.0",
-        "statuses": "~1.5.0",
+        "statuses": "2.0.1",
         "type-is": "~1.6.18",
         "utils-merge": "1.0.1",
         "vary": "~1.1.2"
@@ -6083,16 +6090,16 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
       "dependencies": {
         "debug": "2.6.9",
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
-        "on-finished": "~2.3.0",
+        "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "statuses": "~1.5.0",
+        "statuses": "2.0.1",
         "unpipe": "~1.0.0"
       },
       "engines": {
@@ -6110,7 +6117,7 @@
     "node_modules/finalhandler/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "node_modules/find-cache-dir": {
       "version": "2.1.0",
@@ -6495,7 +6502,7 @@
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -6585,7 +6592,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
       "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -7368,7 +7374,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
       "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -7520,18 +7525,18 @@
       "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w=="
     },
     "node_modules/http-errors": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
-      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
       "dependencies": {
-        "depd": "~1.1.2",
+        "depd": "2.0.0",
         "inherits": "2.0.4",
         "setprototypeof": "1.2.0",
-        "statuses": ">= 1.5.0 < 2",
+        "statuses": "2.0.1",
         "toidentifier": "1.0.1"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 0.8"
       }
     },
     "node_modules/http-proxy-agent": {
@@ -9270,7 +9275,7 @@
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -9664,9 +9669,9 @@
       "integrity": "sha1-eJkHjmS/PIo9cyYBs9QP8F21j6A="
     },
     "node_modules/negotiator": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -10179,7 +10184,6 @@
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
       "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -10289,9 +10293,9 @@
       }
     },
     "node_modules/on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
       "dependencies": {
         "ee-first": "1.1.1"
       },
@@ -11306,9 +11310,12 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.9.6",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
-      "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
       "engines": {
         "node": ">=0.6"
       },
@@ -11376,12 +11383,12 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.2.tgz",
-      "integrity": "sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
       "dependencies": {
-        "bytes": "3.1.1",
-        "http-errors": "1.8.1",
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "unpipe": "1.0.0"
       },
@@ -12009,23 +12016,23 @@
       }
     },
     "node_modules/send": {
-      "version": "0.17.2",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",
-      "integrity": "sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==",
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
       "dependencies": {
         "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "destroy": "~1.0.4",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
         "fresh": "0.5.2",
-        "http-errors": "1.8.1",
+        "http-errors": "2.0.0",
         "mime": "1.6.0",
         "ms": "2.1.3",
-        "on-finished": "~2.3.0",
+        "on-finished": "2.4.1",
         "range-parser": "~1.2.1",
-        "statuses": "~1.5.0"
+        "statuses": "2.0.1"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -12042,7 +12049,7 @@
     "node_modules/send/node_modules/debug/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "node_modules/serialize-error": {
       "version": "2.1.0",
@@ -12054,14 +12061,14 @@
       }
     },
     "node_modules/serve-static": {
-      "version": "1.14.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.2.tgz",
-      "integrity": "sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
       "dependencies": {
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.17.2"
+        "send": "0.18.0"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -12188,7 +12195,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -13039,11 +13045,11 @@
       }
     },
     "node_modules/statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 0.8"
       }
     },
     "node_modules/stream-events": {
@@ -13445,14 +13451,6 @@
         "readable-stream": "^3.0.1"
       }
     },
-    "node_modules/tedious/node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/tedious/node_modules/iconv-lite": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.5.2.tgz",
@@ -14776,7 +14774,7 @@
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
       "engines": {
         "node": ">= 0.8"
       }
@@ -16443,12 +16441,12 @@
       }
     },
     "accepts": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
       "requires": {
-        "mime-types": "~2.1.24",
-        "negotiator": "0.6.2"
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
       }
     },
     "acorn": {
@@ -17297,20 +17295,22 @@
       "dev": true
     },
     "body-parser": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.1.tgz",
-      "integrity": "sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==",
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
       "requires": {
-        "bytes": "3.1.1",
+        "bytes": "3.1.2",
         "content-type": "~1.0.4",
         "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.8.1",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.9.6",
-        "raw-body": "2.4.2",
-        "type-is": "~1.6.18"
+        "on-finished": "2.4.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
       },
       "dependencies": {
         "debug": {
@@ -17324,7 +17324,7 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
         }
       }
     },
@@ -17446,9 +17446,9 @@
       "dev": true
     },
     "bytes": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
-      "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="
     },
     "cache-base": {
       "version": "1.0.1",
@@ -17549,7 +17549,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -18865,9 +18864,9 @@
       "dev": true
     },
     "cookie": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
-      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
     },
     "cookie-signature": {
       "version": "1.0.6",
@@ -19309,14 +19308,14 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
     "depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
     },
     "destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
     },
     "detect-file": {
       "version": "1.0.0",
@@ -19535,7 +19534,7 @@
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "electron-to-chromium": {
       "version": "1.4.38",
@@ -19579,7 +19578,7 @@
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
     },
     "end-of-stream": {
       "version": "1.4.4",
@@ -19695,7 +19694,7 @@
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
     "escape-string-regexp": {
       "version": "2.0.0",
@@ -19767,7 +19766,7 @@
     "etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
     },
     "event-target-shim": {
       "version": "5.0.1",
@@ -19957,37 +19956,38 @@
       }
     },
     "express": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.2.tgz",
-      "integrity": "sha512-oxlxJxcQlYwqPWKVJJtvQiwHgosH/LrLSPA+H4UxpyvSS6jC5aH+5MoHFM+KABgTOt0APue4w66Ha8jCUo9QGg==",
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
       "requires": {
-        "accepts": "~1.3.7",
+        "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.19.1",
+        "body-parser": "1.20.1",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.4.1",
+        "cookie": "0.5.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
-        "depd": "~1.1.2",
+        "depd": "2.0.0",
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "~1.1.2",
+        "finalhandler": "1.2.0",
         "fresh": "0.5.2",
+        "http-errors": "2.0.0",
         "merge-descriptors": "1.0.1",
         "methods": "~1.1.2",
-        "on-finished": "~2.3.0",
+        "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
-        "qs": "6.9.6",
+        "qs": "6.11.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.17.2",
-        "serve-static": "1.14.2",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
         "setprototypeof": "1.2.0",
-        "statuses": "~1.5.0",
+        "statuses": "2.0.1",
         "type-is": "~1.6.18",
         "utils-merge": "1.0.1",
         "vary": "~1.1.2"
@@ -20237,16 +20237,16 @@
       }
     },
     "finalhandler": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
       "requires": {
         "debug": "2.6.9",
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
-        "on-finished": "~2.3.0",
+        "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "statuses": "~1.5.0",
+        "statuses": "2.0.1",
         "unpipe": "~1.0.0"
       },
       "dependencies": {
@@ -20261,7 +20261,7 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
         }
       }
     },
@@ -20561,7 +20561,7 @@
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
     },
     "from2": {
       "version": "2.3.0",
@@ -20629,7 +20629,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
       "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -21229,8 +21228,7 @@
     "has-symbols": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-      "dev": true
+      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
     },
     "has-to-string-tag-x": {
       "version": "1.4.1",
@@ -21342,14 +21340,14 @@
       "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w=="
     },
     "http-errors": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
-      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
       "requires": {
-        "depd": "~1.1.2",
+        "depd": "2.0.0",
         "inherits": "2.0.4",
         "setprototypeof": "1.2.0",
-        "statuses": ">= 1.5.0 < 2",
+        "statuses": "2.0.1",
         "toidentifier": "1.0.1"
       }
     },
@@ -22626,7 +22624,7 @@
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
     },
     "mem": {
       "version": "5.1.1",
@@ -22929,9 +22927,9 @@
       "integrity": "sha1-eJkHjmS/PIo9cyYBs9QP8F21j6A="
     },
     "negotiator": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
     },
     "neo-async": {
       "version": "2.6.2",
@@ -23343,8 +23341,7 @@
     "object-inspect": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
-      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
-      "dev": true
+      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g=="
     },
     "object-is": {
       "version": "1.1.5",
@@ -23421,9 +23418,9 @@
       }
     },
     "on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
       "requires": {
         "ee-first": "1.1.1"
       }
@@ -24164,9 +24161,12 @@
       "dev": true
     },
     "qs": {
-      "version": "6.9.6",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
-      "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ=="
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
     },
     "query-string": {
       "version": "5.1.1",
@@ -24205,12 +24205,12 @@
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
     },
     "raw-body": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.2.tgz",
-      "integrity": "sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
       "requires": {
-        "bytes": "3.1.1",
-        "http-errors": "1.8.1",
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "unpipe": "1.0.0"
       }
@@ -24682,23 +24682,23 @@
       }
     },
     "send": {
-      "version": "0.17.2",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",
-      "integrity": "sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==",
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
       "requires": {
         "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "destroy": "~1.0.4",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
         "fresh": "0.5.2",
-        "http-errors": "1.8.1",
+        "http-errors": "2.0.0",
         "mime": "1.6.0",
         "ms": "2.1.3",
-        "on-finished": "~2.3.0",
+        "on-finished": "2.4.1",
         "range-parser": "~1.2.1",
-        "statuses": "~1.5.0"
+        "statuses": "2.0.1"
       },
       "dependencies": {
         "debug": {
@@ -24712,7 +24712,7 @@
             "ms": {
               "version": "2.0.0",
               "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+              "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
             }
           }
         }
@@ -24725,14 +24725,14 @@
       "dev": true
     },
     "serve-static": {
-      "version": "1.14.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.2.tgz",
-      "integrity": "sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
       "requires": {
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.17.2"
+        "send": "0.18.0"
       }
     },
     "set-blocking": {
@@ -24830,7 +24830,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -25517,9 +25516,9 @@
       }
     },
     "statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
     },
     "stream-events": {
       "version": "1.0.5",
@@ -25827,11 +25826,6 @@
             "readable-stream": "^3.0.1"
           }
         },
-        "depd": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
-        },
         "iconv-lite": {
           "version": "0.5.2",
           "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.5.2.tgz",
@@ -26806,7 +26800,7 @@
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="
     },
     "unset-value": {
       "version": "1.0.0",
diff --git a/packages/nc-cli/package.json b/packages/nc-cli/package.json
index cceabe8ed3..6f7eef8141 100644
--- a/packages/nc-cli/package.json
+++ b/packages/nc-cli/package.json
@@ -73,7 +73,7 @@
     "colors": "1.4.0",
     "download": "^8.0.0",
     "download-git-repo": "^3.0.2",
-    "express": "^4.17.1",
+    "express": "^4.18.2",
     "fs-extra": "^9.0.1",
     "glob": "^7.1.6",
     "inquirer": "^7.3.3",
diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 1664e337f5..d48defb626 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -10,6 +10,8 @@ declare module '@vue/runtime-core' {
     AAlert: typeof import('ant-design-vue/es')['Alert']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
+    ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
+    ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACardMeta: typeof import('ant-design-vue/es')['CardMeta']
@@ -85,6 +87,8 @@ declare module '@vue/runtime-core' {
     IcTwotoneWidthFull: typeof import('~icons/ic/twotone-width-full')['default']
     IcTwotoneWidthNormal: typeof import('~icons/ic/twotone-width-normal')['default']
     LogosGoogleGmail: typeof import('~icons/logos/google-gmail')['default']
+    LogosMysqlIcon: typeof import('~icons/logos/mysql-icon')['default']
+    LogosPostgresql: typeof import('~icons/logos/postgresql')['default']
     LogosRedditIcon: typeof import('~icons/logos/reddit-icon')['default']
     LogosSwagger: typeof import('~icons/logos/swagger')['default']
     MaterialSymbolsAccountTreeRounded: typeof import('~icons/material-symbols/account-tree-rounded')['default']
@@ -144,7 +148,10 @@ declare module '@vue/runtime-core' {
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiContentSaveEdit: typeof import('~icons/mdi/content-save-edit')['default']
     MdiCurrencyUsd: typeof import('~icons/mdi/currency-usd')['default']
+    MdiDatabaseAlert: typeof import('~icons/mdi/database-alert')['default']
+    MdiDatabaseLockOutline: typeof import('~icons/mdi/database-lock-outline')['default']
     MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
+    MdiDatabasePlusOutline: typeof import('~icons/mdi/database-plus-outline')['default']
     MdiDatabaseSync: typeof import('~icons/mdi/database-sync')['default']
     MdiDelete: typeof import('~icons/mdi/delete')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
@@ -163,6 +170,8 @@ declare module '@vue/runtime-core' {
     MdiExport: typeof import('~icons/mdi/export')['default']
     MdiEyeCircleOutline: typeof import('~icons/mdi/eye-circle-outline')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
+    MdiEyeSettings: typeof import('~icons/mdi/eye-settings')['default']
+    MdiEyeSettingsOutline: typeof import('~icons/mdi/eye-settings-outline')['default']
     MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
     MdiFileEyeOutline: typeof import('~icons/mdi/file-eye-outline')['default']
@@ -176,6 +185,7 @@ declare module '@vue/runtime-core' {
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
     MdiGithub: typeof import('~icons/mdi/github')['default']
+    MdiGraphOutline: typeof import('~icons/mdi/graph-outline')['default']
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
@@ -193,6 +203,7 @@ declare module '@vue/runtime-core' {
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']
     MdiMenu: typeof import('~icons/mdi/menu')['default']
     MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
+    MdiMenuIcon: typeof import('~icons/mdi/menu-icon')['default']
     MdiMicrosoftTeams: typeof import('~icons/mdi/microsoft-teams')['default']
     MdiMinusCircleOutline: typeof import('~icons/mdi/minus-circle-outline')['default']
     MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
@@ -235,7 +246,10 @@ declare module '@vue/runtime-core' {
     MiCircleWarning: typeof import('~icons/mi/circle-warning')['default']
     PhCloudLightningDuotone: typeof import('~icons/ph/cloud-lightning-duotone')['default']
     PhFileCsv: typeof import('~icons/ph/file-csv')['default']
+    RiTeamFill: typeof import('~icons/ri/team-fill')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SimpleIconsMicrosoftsqlserver: typeof import('~icons/simple-icons/microsoftsqlserver')['default']
+    VscodeIconsFileTypeSqlite: typeof import('~icons/vscode-icons/file-type-sqlite')['default']
   }
 }
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 8819d23ce7..8ad758b8b8 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -28,9 +28,11 @@ const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
 
+const column = inject(ColumnInj)!
+
 let isDateInvalid = $ref(false)
 
-const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
+const dateFormat = isMysql(column.value.base_id) ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
 
 let localState = $computed({
   get() {
diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index f89ddf87aa..8d8d6b9831 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -135,13 +135,13 @@ useSelectedCellKeyupListener(active, (e) => {
           <a-button type="text" size="small" :onclick="clear"><div class="text-xs">Cancel</div></a-button>
 
           <a-button type="primary" size="small" :disabled="!!error || localValue === vModel">
-            <div class="text-xs" :onclick="onSave">Save</div>
+            <div class="text-xs" @click="onSave">Save</div>
           </a-button>
         </div>
       </div>
 
       <LazyMonacoEditor
-        :model-value="localValue"
+        :model-value="localValue || ''"
         class="min-w-full w-80"
         :class="{ 'expanded-editor': isExpanded, 'editor': !isExpanded }"
         :hide-minimap="true"
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 0e8ac91571..3815933e49 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -105,7 +105,7 @@ const vModel = computed({
 const selectedTitles = computed(() =>
   modelValue
     ? typeof modelValue === 'string'
-      ? isMysql
+      ? isMysql(column.value.base_id)
         ? modelValue.split(',').sort((a, b) => {
             const opa = options.value.find((el) => el.title === a)
             const opb = options.value.find((el) => el.title === b)
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index f0280bf12e..d5bd1c4479 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { EditModeInj, inject, useVModel } from '#imports'
 
 const props = defineProps<{
-  modelValue?: string | null
+  modelValue?: string | number
 }>()
 
 const emits = defineEmits(['update:modelValue'])
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 6402de2bed..23f6af1919 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -19,9 +19,11 @@ const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
 
+const column = inject(ColumnInj)!
+
 let isTimeInvalid = $ref(false)
 
-const dateFormat = isMysql.value ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
+const dateFormat = isMysql(column.value.base_id) ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
 
 const localState = $computed({
   get() {
diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 4933e7d396..63a7c1bb0f 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -47,7 +47,7 @@ onClickOutside(carouselRef, () => {
 </script>
 
 <template>
-  <general-overlay v-model="selectedImage" :z-index="1001">
+  <GeneralOverlay v-model="selectedImage" :z-index="1001">
     <template v-if="selectedImage">
       <div class="overflow-hidden p-12 text-center relative">
         <div class="text-white group absolute top-5 right-5">
@@ -101,7 +101,7 @@ onClickOutside(carouselRef, () => {
         </a-carousel>
       </div>
     </template>
-  </general-overlay>
+  </GeneralOverlay>
 </template>
 
 <style scoped>
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 8a4f6a4523..f21928d9a9 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -5,6 +5,7 @@ import Sortable from 'sortablejs'
 import GithubButton from 'vue-github-button'
 import type { VNodeRef } from '#imports'
 import {
+  ClientType,
   Empty,
   TabType,
   computed,
@@ -30,7 +31,7 @@ const { addTab } = useTabs()
 
 const { $api, $e } = useNuxtApp()
 
-const { tables, loadTables, isSharedBase } = useProject()
+const { bases, tables, loadTables, isSharedBase } = useProject()
 
 const { activeTab } = useTabs()
 
@@ -42,13 +43,17 @@ const route = useRoute()
 
 const [searchActive, toggleSearchActive] = useToggle()
 
-let key = $ref(0)
+const toggleDialog = inject(ToggleDialogInj, () => {})
 
-const menuRef = $ref<HTMLLIElement>()
+const keys = $ref<Record<string, number>>({})
+
+const activeKey = ref<string[]>([])
+
+const menuRefs = $ref<HTMLElement[] | HTMLElement>()
 
 let filterQuery = $ref('')
 
-const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.title : null))
+const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.id : null))
 
 const tablesById = $computed(() =>
   tables.value?.reduce<Record<string, TableType>>((acc, table) => {
@@ -59,17 +64,23 @@ const tablesById = $computed(() =>
 )
 
 const filteredTables = $computed(() =>
-  tables.value?.filter((table) => !filterQuery || table.title.toLowerCase().includes(filterQuery.toLowerCase())),
+  tables.value?.filter(
+    (table) => !searchActive.value || !filterQuery || table.title.toLowerCase().includes(filterQuery.toLowerCase()),
+  ),
 )
 
-let sortable: Sortable
+const sortables: Record<string, Sortable> = {}
 
 // todo: replace with vuedraggable
 const initSortable = (el: Element) => {
-  if (sortable) sortable.destroy()
-  sortable = Sortable.create(el as HTMLLIElement, {
+  const base_id = el.getAttribute('nc-base')
+  if (!base_id) return
+  if (sortables[base_id]) sortables[base_id].destroy()
+  Sortable.create(el as HTMLLIElement, {
     handle: '.nc-drag-icon',
     onEnd: async (evt) => {
+      const offset = tables.value.findIndex((table) => table.base_id === base_id)
+
       const { newIndex = 0, oldIndex = 0 } = evt
 
       const itemEl = evt.item as HTMLLIElement
@@ -99,10 +110,14 @@ const initSortable = (el: Element) => {
       }
 
       // update the order of the moved item
-      tables.value?.splice(newIndex, 0, ...tables.value?.splice(oldIndex, 1))
+      tables.value?.splice(newIndex + offset, 0, ...tables.value?.splice(oldIndex + offset, 1))
 
       // force re-render the list
-      key++
+      if (keys[base_id]) {
+        keys[base_id] = keys[base_id] + 1
+      } else {
+        keys[base_id] = 1
+      }
 
       // update the item order
       await $api.dbTable.reorder(item.id as string, {
@@ -114,8 +129,12 @@ const initSortable = (el: Element) => {
 }
 
 watchEffect(() => {
-  if (menuRef) {
-    initSortable(menuRef)
+  if (menuRefs) {
+    if (menuRefs instanceof HTMLElement) {
+      initSortable(menuRefs)
+    } else {
+      menuRefs.forEach((el) => initSortable(el))
+    }
   }
 })
 
@@ -145,7 +164,7 @@ const addTableTab = (table: TableType) => {
   addTab({ title: table.title, id: table.id, type: table.type as TabType })
 }
 
-function openRenameTableDialog(table: TableType, rightClick = false) {
+function openRenameTableDialog(table: TableType, baseId?: string, rightClick = false) {
   $e(rightClick ? 'c:table:rename:navdraw:right-click' : 'c:table:rename:navdraw:options')
 
   const isOpen = ref(true)
@@ -153,6 +172,7 @@ function openRenameTableDialog(table: TableType, rightClick = false) {
   const { close } = useDialog(resolveComponent('DlgTableRename'), {
     'modelValue': isOpen,
     'tableMeta': table,
+    'baseId': baseId || bases.value[0].id,
     'onUpdate:modelValue': closeDialog,
   })
 
@@ -163,7 +183,7 @@ function openRenameTableDialog(table: TableType, rightClick = false) {
   }
 }
 
-function openQuickImportDialog(type: string) {
+function openQuickImportDialog(type: string, baseId?: string) {
   $e(`a:actions:import-${type}`)
 
   const isOpen = ref(true)
@@ -171,6 +191,7 @@ function openQuickImportDialog(type: string) {
   const { close } = useDialog(resolveComponent('DlgQuickImport'), {
     'modelValue': isOpen,
     'importType': type,
+    'baseId': baseId || bases.value[0].id,
     'onUpdate:modelValue': closeDialog,
   })
 
@@ -181,13 +202,14 @@ function openQuickImportDialog(type: string) {
   }
 }
 
-function openAirtableImportDialog() {
+function openAirtableImportDialog(baseId?: string) {
   $e('a:actions:import-airtable')
 
   const isOpen = ref(true)
 
   const { close } = useDialog(resolveComponent('DlgAirtableImport'), {
     'modelValue': isOpen,
+    'baseId': baseId || bases.value[0].id,
     'onUpdate:modelValue': closeDialog,
   })
 
@@ -198,13 +220,14 @@ function openAirtableImportDialog() {
   }
 }
 
-function openTableCreateDialog() {
+function openTableCreateDialog(baseId?: string) {
   $e('c:table:create:navdraw')
 
   const isOpen = ref(true)
 
   const { close } = useDialog(resolveComponent('DlgTableCreate'), {
     'modelValue': isOpen,
+    'baseId': baseId || bases.value[0].id,
     'onUpdate:modelValue': closeDialog,
   })
 
@@ -217,9 +240,18 @@ function openTableCreateDialog() {
 
 const searchInputRef: VNodeRef = (vnode: typeof Input) => vnode?.$el?.focus()
 
+const beforeSearch = ref<string[]>([])
+
 const onSearchCloseIconClick = () => {
   filterQuery = ''
   toggleSearchActive(false)
+  activeKey.value = beforeSearch.value
+}
+
+const onSearchIconClick = () => {
+  beforeSearch.value = activeKey.value
+  toggleSearchActive(true)
+  activeKey.value = bases.value.filter((el) => el.enabled).map((el) => `collapse-${el.id}`)
 }
 
 const isCreateTableAllowed = computed(
@@ -249,13 +281,35 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     }
   }
 })
+
+watch(
+  activeTable,
+  (value, oldValue) => {
+    if (value) {
+      if (value !== oldValue) {
+        const fndTable = tables.value.find((el) => el.id === value)
+        if (fndTable) {
+          activeKey.value = [`collapse-${fndTable.base_id}`]
+        }
+      }
+    } else {
+      if (bases.value.filter((el) => el.enabled)[0]?.id)
+        activeKey.value = [`collapse-${bases.value.filter((el) => el.enabled)[0].id}`]
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
   <div class="nc-treeview-container flex flex-col">
     <a-dropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu">
       <div class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-col scrollbar-thin-dull" :class="{ 'mb-[20px]': isSharedBase }">
-        <div class="min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
+        <div
+          v-if="bases[0] && bases[0].enabled && !bases.slice(1).filter((el) => el.enabled)?.length"
+          class="min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer"
+          @contextmenu="setMenuContext('main')"
+        >
           <Transition name="slide-left" mode="out-in">
             <a-input
               v-if="searchActive"
@@ -268,7 +322,9 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
             <span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
               {{ $t('objects.tables') }}
 
-              <template v-if="tables?.length"> ({{ tables.length }}) </template>
+              <template v-if="tables.filter((table) => table.base_id === bases[0].id)?.length">
+                ({{ tables.filter((table) => table.base_id === bases[0].id).length }})
+              </template>
             </span>
           </Transition>
 
@@ -277,19 +333,98 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
             <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
           </Transition>
         </div>
+        <div
+          v-else
+          class="min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer"
+          @contextmenu="setMenuContext('main')"
+        >
+          <Transition name="slide-left" mode="out-in">
+            <a-input
+              v-if="searchActive"
+              :ref="searchInputRef"
+              v-model:value="filterQuery"
+              class="flex-1 rounded"
+              :placeholder="$t('placeholder.searchProjectTree')"
+            />
+
+            <span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
+              BASES
+              <template v-if="tables.filter((table) => table.base_id === bases[0].id)?.length">
+                ({{ bases.filter((el) => el.enabled).length }})
+              </template>
+            </span>
+          </Transition>
+
+          <Transition name="slide-right" mode="out-in">
+            <MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
+            <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="onSearchIconClick" />
+          </Transition>
+
+          <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
+            <Transition name="slide-right" mode="out-in">
+              <MdiDotsVertical v-if="!searchActive" class="hover:text-accent outline-0" />
+            </Transition>
+
+            <template #overlay>
+              <a-menu class="!py-0 rounded text-sm">
+                <a-menu-item-group title="Connect to new datasource" class="!px-0 !mx-0">
+                  <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL)">
+                    <div class="color-transition nc-project-menu-item group">
+                      <LogosMysqlIcon class="group-hover:text-accent" />
+                      MySQL
+                    </div>
+                  </a-menu-item>
+                  <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.PG)">
+                    <div class="color-transition nc-project-menu-item group">
+                      <LogosPostgresql class="group-hover:text-accent" />
+                      Postgres
+                    </div>
+                  </a-menu-item>
+                  <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.SQLITE)">
+                    <div class="color-transition nc-project-menu-item group">
+                      <VscodeIconsFileTypeSqlite class="group-hover:text-accent" />
+                      SQLite
+                    </div>
+                  </a-menu-item>
+                  <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MSSQL)">
+                    <div class="color-transition nc-project-menu-item group">
+                      <SimpleIconsMicrosoftsqlserver class="group-hover:text-accent" />
+                      MSSQL
+                    </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>
 
-        <div class="flex-1">
+        <div v-if="bases[0] && bases[0].enabled && !bases.slice(1).filter((el) => el.enabled)?.length" class="flex-1">
           <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"
+            class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
+            @click="openTableCreateDialog(bases[0].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" />
+              <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" />
 
               <template #overlay>
                 <a-menu class="!py-0 rounded text-sm">
@@ -298,7 +433,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     <a-menu-item
                       v-if="isUIAllowed('airtableImport')"
                       key="quick-import-airtable"
-                      @click="openAirtableImportDialog"
+                      @click="openAirtableImportDialog(bases[0].id)"
                     >
                       <div class="color-transition nc-project-menu-item group">
                         <MdiTableLarge class="group-hover:text-accent" />
@@ -306,14 +441,22 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                       </div>
                     </a-menu-item>
 
-                    <a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
+                    <a-menu-item
+                      v-if="isUIAllowed('csvImport')"
+                      key="quick-import-csv"
+                      @click="openQuickImportDialog('csv', bases[0].id)"
+                    >
                       <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')">
+                    <a-menu-item
+                      v-if="isUIAllowed('jsonImport')"
+                      key="quick-import-json"
+                      @click="openQuickImportDialog('json', bases[0].id)"
+                    >
                       <div class="color-transition nc-project-menu-item group">
                         <MdiCodeJson class="group-hover:text-accent" />
                         JSON file
@@ -323,7 +466,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     <a-menu-item
                       v-if="isUIAllowed('excelImport')"
                       key="quick-import-excel"
-                      @click="openQuickImportDialog('excel')"
+                      @click="openQuickImportDialog('excel', bases[0].id)"
                     >
                       <div class="color-transition nc-project-menu-item group">
                         <MdiFileExcel class="group-hover:text-accent" />
@@ -334,6 +477,35 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
                   <a-menu-divider class="my-0" />
 
+                  <a-menu-item-group title="Connect to new datasource" class="!px-0 !mx-0">
+                    <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL)">
+                      <div class="color-transition nc-project-menu-item group">
+                        <LogosMysqlIcon class="group-hover:text-accent" />
+                        MySQL
+                      </div>
+                    </a-menu-item>
+                    <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.PG)">
+                      <div class="color-transition nc-project-menu-item group">
+                        <LogosPostgresql class="group-hover:text-accent" />
+                        Postgres
+                      </div>
+                    </a-menu-item>
+                    <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.SQLITE)">
+                      <div class="color-transition nc-project-menu-item group">
+                        <VscodeIconsFileTypeSqlite class="group-hover:text-accent" />
+                        SQLite
+                      </div>
+                    </a-menu-item>
+                    <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MSSQL)">
+                      <div class="color-transition nc-project-menu-item group">
+                        <SimpleIconsMicrosoftsqlserver class="group-hover:text-accent" />
+                        MSSQL
+                      </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']"
@@ -351,88 +523,380 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
             </a-dropdown>
           </div>
 
-          <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)"
+          <div class="transition-height duration-200">
+            <div class="border-none sortable-list">
+              <div v-if="bases[0]" :key="`base-${bases[0].id}`">
+                <div
+                  v-if="bases[0] && bases[0].enabled"
+                  ref="menuRefs"
+                  :key="`sortable-${bases[0].id}-${bases[0].id && bases[0].id in keys ? keys[bases[0].id] : '0'}`"
+                  :nc-base="bases[0].id"
+                >
+                  <div
+                    v-for="table of tables.filter((table) => table.base_id === bases[0].id)"
+                    :key="table.id"
+                    v-e="['a:table:open']"
+                    :class="[
+                      { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
+                      `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-8 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 outline-0" />
+
+                          <template #overlay>
+                            <a-menu class="!py-0 rounded text-sm">
+                              <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table, bases[0].id)">
+                                <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>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="!tables.filter((table) => table.base_id === bases[0].id)?.length"
+            class="mt-0.5 pt-16 mx-3 flex flex-col items-center border-t-1 border-gray-50"
+          >
+            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+          </div>
+        </div>
+
+        <div v-else class="transition-height duration-200">
+          <div class="border-none sortable-list">
+            <div v-for="[index, base] of Object.entries(bases)" :key="`base-${base.id}`">
+              <a-collapse
+                v-if="base && base.enabled"
+                v-model:activeKey="activeKey"
+                :class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]"
+                expand-icon-position="right"
+                :bordered="false"
+                :accordion="!searchActive"
+                ghost
               >
-                <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') }"
-                      />
+                <a-collapse-panel :key="`collapse-${base.id}`">
+                  <template #header>
+                    <div v-if="index === '0'" class="flex items-center gap-2 text-gray-500 font-bold">
+                      <GeneralBaseLogo :base-type="base.type" />
+                      Default ({{ tables.filter((table) => table.base_id === base.id).length || '0' }})
                     </div>
-
-                    <div class="nc-tbl-title flex-1">
-                      <GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
+                    <div v-else class="flex items-center gap-2 text-gray-500 font-bold">
+                      <GeneralBaseLogo :base-type="base.type" />
+                      {{ base.alias || '' }}
+                      ({{ tables.filter((table) => table.base_id === base.id).length || '0' }})
                     </div>
+                  </template>
+                  <div
+                    v-if="index === '0' && isUIAllowed('table-create')"
+                    class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
+                    @click="openTableCreateDialog(bases[0].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 && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
+                      v-if="!isSharedBase"
                       :trigger="['click']"
+                      overlay-class-name="nc-dropdown-import-menu"
                       @click.stop
                     >
-                      <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100" />
+                      <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" />
 
                       <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>
+                          <!--                  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(bases[0].id)"
+                            >
+                              <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', bases[0].id)"
+                            >
+                              <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', bases[0].id)"
+                            >
+                              <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', bases[0].id)"
+                            >
+                              <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>
+                  <div
+                    v-else-if="isUIAllowed('table-create')"
+                    class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
+                    @click="openTableCreateDialog(base.id)"
+                  >
+                    <MdiPlus />
 
-                          <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>
+                    <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 outline-0" />
+
+                      <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(base.id)"
+                            >
+                              <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', base.id)"
+                            >
+                              <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', base.id)"
+                            >
+                              <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', base.id)"
+                            >
+                              <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>
-                </GeneralTooltip>
-              </div>
+                  <div
+                    ref="menuRefs"
+                    :key="`sortable-${base.id}-${base.id && base.id in keys ? keys[base.id] : '0'}`"
+                    :nc-base="base.id"
+                  >
+                    <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.id },
+                        `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-8 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 outline-0" />
+
+                            <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, base.id)"
+                                >
+                                  <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>
+                  </div>
+                </a-collapse-panel>
+              </a-collapse>
             </div>
           </div>
-
-          <div v-else class="mt-0.5 pt-16 mx-3 flex flex-col items-center border-t-1 border-gray-50">
-            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
-          </div>
         </div>
       </div>
 
       <template v-if="!isSharedBase" #overlay>
         <a-menu class="!py-0 rounded text-sm">
           <template v-if="contextMenuTarget.type === 'table'">
-            <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(contextMenuTarget.value, true)">
+            <a-menu-item
+              v-if="isUIAllowed('table-rename')"
+              @click="openRenameTableDialog(contextMenuTarget.value, bases[0].id, true)"
+            >
               <div class="nc-project-menu-item">
                 {{ $t('general.rename') }}
               </div>
@@ -459,7 +923,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     <a-divider class="!my-0" />
 
     <div class="flex items-start flex-col justify-start px-2 py-3 gap-2">
-      <LazyGeneralShareBaseButton
+      <LazyGeneralAddBaseButton
         class="color-transition py-1.5 px-2 text-primary font-bold cursor-pointer select-none hover:text-accent"
       />
 
@@ -527,7 +991,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 }
 
 .nc-tree-item {
-  @apply relative  cursor-pointer after:(pointer-events-none content-[''] absolute top-0 left-0  w-full h-full right-0 !bg-current transition transition-opactity duration-100 opacity-0);
+  @apply relative cursor-pointer after:(pointer-events-none content-[''] absolute top-0 left-0  w-full h-full right-0 !bg-current transition transition-opactity duration-100 opacity-0);
 }
 
 .nc-tree-item svg {
@@ -576,4 +1040,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;
+}
 </style>
diff --git a/packages/nc-gui/components/dashboard/settings/AppStore.vue b/packages/nc-gui/components/dashboard/settings/AppStore.vue
index f0d9e1ebb4..a957604c2b 100644
--- a/packages/nc-gui/components/dashboard/settings/AppStore.vue
+++ b/packages/nc-gui/components/dashboard/settings/AppStore.vue
@@ -70,96 +70,97 @@ onMounted(async () => {
 </script>
 
 <template>
-  <a-modal
-    v-model:visible="showPluginInstallModal"
-    :class="{ active: showPluginInstallModal }"
-    :closable="false"
-    centered
-    min-height="300"
-    :footer="null"
-    wrap-class-name="nc-modal-plugin-install"
-    v-bind="$attrs"
-  >
-    <LazyDashboardSettingsAppInstall
-      v-if="pluginApp && showPluginInstallModal"
-      :id="pluginApp.id"
-      @close="showPluginInstallModal = false"
-      @saved="saved()"
-    />
-  </a-modal>
-
-  <a-modal
-    v-model:visible="showPluginUninstallModal"
-    :class="{ active: showPluginUninstallModal }"
-    :closable="false"
-    width="24rem"
-    centered
-    :footer="null"
-    wrap-class-name="nc-modal-plugin-uninstall"
-  >
-    <div class="flex flex-col h-full">
-      <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
-        {{ `Click on confirm to reset ${pluginApp && pluginApp.title}` }}
-      </div>
-      <div class="flex mt-6 justify-center space-x-2">
-        <a-button @click="showPluginUninstallModal = false"> {{ $t('general.cancel') }} </a-button>
-        <a-button type="primary" danger @click="resetPlugin"> {{ $t('general.confirm') }} </a-button>
-      </div>
-    </div>
-  </a-modal>
-
-  <div class="grid grid-cols-2 gap-x-2 gap-y-4 mt-4">
-    <a-card
-      v-for="(app, i) in apps"
-      :key="i"
-      :class="`relative flex overflow-x-hidden app-item-card !shadow-sm rounded-md w-full nc-app-store-card-${app.title}`"
-      :body-style="{ width: '100%' }"
+  <div>
+    <a-modal
+      v-model:visible="showPluginInstallModal"
+      :class="{ active: showPluginInstallModal }"
+      :closable="false"
+      centered
+      min-height="300"
+      :footer="null"
+      wrap-class-name="nc-modal-plugin-install"
+      v-bind="$attrs"
     >
-      <div class="install-btn flex flex-row justify-end space-x-1">
-        <a-button v-if="app.parsedInput" size="small" type="primary" @click="showInstallPluginModal(app)">
-          <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-edit">
-            <IcRoundEdit class="pr-0.5" :height="12" />
-            Edit
-          </div>
-        </a-button>
-
-        <a-button v-if="app.parsedInput" size="small" outlined @click="showResetPluginModal(app)">
-          <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-reset">
-            <MdiCloseCircleOutline />
-            <div class="flex ml-0.5">Reset</div>
-          </div>
-        </a-button>
-
-        <a-button v-else size="small" type="primary" @click="showInstallPluginModal(app)">
-          <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-install">
-            <MdiPlus />
-            Install
-          </div>
-        </a-button>
+      <LazyDashboardSettingsAppInstall
+        v-if="pluginApp && showPluginInstallModal"
+        :id="pluginApp.id"
+        @close="showPluginInstallModal = false"
+        @saved="saved()"
+      />
+    </a-modal>
+
+    <a-modal
+      v-model:visible="showPluginUninstallModal"
+      :closable="false"
+      width="24rem"
+      centered
+      :footer="null"
+      wrap-class-name="nc-modal-plugin-uninstall"
+    >
+      <div class="flex flex-col h-full">
+        <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
+          {{ `Click on confirm to reset ${pluginApp && pluginApp.title}` }}
+        </div>
+        <div class="flex mt-6 justify-center space-x-2">
+          <a-button @click="showPluginUninstallModal = false"> {{ $t('general.cancel') }} </a-button>
+          <a-button type="primary" danger @click="resetPlugin"> {{ $t('general.confirm') }} </a-button>
+        </div>
       </div>
-
-      <div class="flex flex-row space-x-2 items-center justify-start w-full">
-        <div class="flex w-20 pl-3">
-          <img
-            v-if="app.title !== 'SMTP'"
-            class="avatar"
-            alt="logo"
-            :style="{
-              backgroundColor: app.title === 'SES' ? '#242f3e' : '',
-            }"
-            :src="app.logo"
-          />
-
-          <div v-else />
+    </a-modal>
+
+    <div class="grid grid-cols-2 gap-x-2 gap-y-4 mt-4">
+      <a-card
+        v-for="(app, i) in apps"
+        :key="i"
+        :class="`relative flex overflow-x-hidden app-item-card !shadow-sm rounded-md w-full nc-app-store-card-${app.title}`"
+        :body-style="{ width: '100%' }"
+      >
+        <div class="install-btn flex flex-row justify-end space-x-1">
+          <a-button v-if="app.parsedInput" size="small" type="primary" @click="showInstallPluginModal(app)">
+            <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-edit">
+              <IcRoundEdit class="pr-0.5" :height="12" />
+              Edit
+            </div>
+          </a-button>
+
+          <a-button v-if="app.parsedInput" size="small" outlined @click="showResetPluginModal(app)">
+            <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-reset">
+              <MdiCloseCircleOutline />
+              <div class="flex ml-0.5">Reset</div>
+            </div>
+          </a-button>
+
+          <a-button v-else size="small" type="primary" @click="showInstallPluginModal(app)">
+            <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-install">
+              <MdiPlus />
+              Install
+            </div>
+          </a-button>
         </div>
 
-        <div class="flex flex-col flex-1 w-3/5 pl-3">
-          <a-typography-title :level="5">{{ app.title }}</a-typography-title>
+        <div class="flex flex-row space-x-2 items-center justify-start w-full">
+          <div class="flex w-20 pl-3">
+            <img
+              v-if="app.title !== 'SMTP'"
+              class="avatar"
+              alt="logo"
+              :style="{
+                backgroundColor: app.title === 'SES' ? '#242f3e' : '',
+              }"
+              :src="app.logo"
+            />
+
+            <div v-else />
+          </div>
+
+          <div class="flex flex-col flex-1 w-3/5 pl-3">
+            <a-typography-title :level="5">{{ app.title }}</a-typography-title>
 
-          {{ app.description }}
+            {{ app.description }}
+          </div>
         </div>
-      </div>
-    </a-card>
+      </a-card>
+    </div>
   </div>
 </template>
 
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..30d81a867f
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -0,0 +1,426 @@
+<script setup lang="ts">
+import Draggable from 'vuedraggable'
+import type { BaseType } from 'nocodb-sdk'
+import CreateBase from './data-sources/CreateBase.vue'
+import EditBase from './data-sources/EditBase.vue'
+import Metadata from './Metadata.vue'
+import UIAcl from './UIAcl.vue'
+import Erd from './Erd.vue'
+import { ClientType, DataSourcesSubTab } from '~/lib'
+import { useNuxtApp, useProject } from '#imports'
+
+interface Props {
+  state: string
+  reload: boolean
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits(['update:state', 'update:reload', 'awaken'])
+
+const vState = useVModel(props, 'state', emits)
+const vReload = useVModel(props, 'reload', emits)
+
+const { $api, $e } = useNuxtApp()
+const { project, loadProject } = useProject()
+
+let sources = $ref<BaseType[]>([])
+let activeBaseId = $ref('')
+let metadiffbases = $ref<string[]>([])
+let clientType = $ref<ClientType>(ClientType.MYSQL)
+let isReloading = $ref(false)
+let forceAwakened = $ref(false)
+
+async function loadBases() {
+  try {
+    if (!project.value?.id) return
+
+    isReloading = true
+    vReload.value = 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 {
+    vReload.value = false
+    isReloading = false
+  }
+}
+
+async function loadMetaDiff() {
+  try {
+    if (!project.value?.id) return
+
+    metadiffbases = []
+
+    const metadiff = await $api.project.metaDiffGet(project.value?.id)
+    for (const model of metadiff) {
+      if (model.detectedChanges?.length > 0) {
+        metadiffbases.push(model.base_id)
+      }
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+const baseAction = (baseId?: string, action?: string) => {
+  if (!baseId) return
+  activeBaseId = baseId
+  vState.value = action || ''
+}
+
+const deleteBase = (base: BaseType) => {
+  $e('c:base:delete')
+
+  Modal.confirm({
+    title: `Do you want to delete '${base.alias}' project?`,
+    wrapClassName: 'nc-modal-base-delete',
+    okText: 'Yes',
+    okType: 'danger',
+    cancelText: 'No',
+    async onOk() {
+      try {
+        await $api.base.delete(base.project_id as string, base.id as string)
+
+        $e('a:base:delete')
+
+        sources.splice(sources.indexOf(base), 1)
+        await loadProject()
+      } catch (e: any) {
+        message.error(await extractSdkResponseErrorMsg(e))
+      }
+    },
+    style: 'top: 30%!important',
+  })
+}
+
+const toggleBase = async (base: BaseType, state: boolean) => {
+  try {
+    if (!state && sources.filter((src) => src.enabled).length < 2) {
+      message.info('There should be at least one enabled base!')
+      return
+    }
+    base.enabled = state
+    await $api.base.update(base.project_id as string, base.id as string, {
+      id: base.id,
+      project_id: base.project_id,
+      enabled: base.enabled,
+    })
+    await loadProject()
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const moveBase = async (e: any) => {
+  try {
+    if (e.oldIndex === e.newIndex) return
+    // sources list is mutated so we have to get the new index and mirror it to backend
+    const base = sources[e.newIndex]
+    if (base) {
+      if (!base.order) {
+        // empty update call to reorder bases (migration)
+        await $api.base.update(base.project_id as string, base.id as string, {
+          id: base.id,
+          project_id: base.project_id,
+        })
+        message.info('Bases are migrated. Please try again.')
+      } else {
+        await $api.base.update(base.project_id as string, base.id as string, {
+          id: base.id,
+          project_id: base.project_id,
+          order: e.newIndex + 1,
+        })
+      }
+    }
+    await loadProject()
+    await loadBases()
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const forceAwaken = () => {
+  forceAwakened = !forceAwakened
+  emits('awaken', forceAwakened)
+}
+
+onMounted(async () => {
+  if (sources.length === 0) {
+    await loadBases()
+    await loadMetaDiff()
+  }
+})
+
+watch(
+  () => props.reload,
+  async (reload) => {
+    if (reload && !isReloading) {
+      await loadBases()
+      await loadMetaDiff()
+    }
+  },
+)
+
+watch(
+  () => sources.length,
+  (l) => {
+    if (l > 1 && !forceAwakened) {
+      emits('awaken', false)
+    } else {
+      emits('awaken', true)
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  vState,
+  async (newState) => {
+    if (!sources.length) {
+      await loadBases()
+    }
+    switch (newState) {
+      case ClientType.MYSQL:
+        clientType = ClientType.MYSQL
+        vState.value = DataSourcesSubTab.New
+        break
+      case ClientType.PG:
+        clientType = ClientType.PG
+        vState.value = DataSourcesSubTab.New
+        break
+      case ClientType.SQLITE:
+        clientType = ClientType.SQLITE
+        vState.value = DataSourcesSubTab.New
+        break
+      case ClientType.MSSQL:
+        clientType = ClientType.MSSQL
+        vState.value = DataSourcesSubTab.New
+        break
+      case DataSourcesSubTab.New:
+        if (sources.length > 1 && !forceAwakened) {
+          vState.value = ''
+        }
+        break
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div class="flex flex-row w-full h-full">
+    <div class="flex flex-col w-full overflow-auto">
+      <div v-if="vState === ''" class="max-h-600px min-w-1200px overflow-y-auto">
+        <div class="ds-table-head">
+          <div class="ds-table-row">
+            <div class="ds-table-col ds-table-name">Name</div>
+            <div class="ds-table-col ds-table-actions">Actions</div>
+            <div class="ds-table-col ds-table-enabled cursor-pointer" @dblclick="forceAwaken">Show / Hide</div>
+          </div>
+        </div>
+        <div class="ds-table-body">
+          <Draggable :list="sources" item-key="id" handle=".ds-table-handle" @end="moveBase">
+            <template #header>
+              <div v-if="sources[0]" class="ds-table-row border-gray-200">
+                <div class="ds-table-col ds-table-name">
+                  <div class="flex items-center gap-1">
+                    <GeneralBaseLogo :base-type="sources[0].type" />
+                    BASE
+                    <span class="text-gray-400 text-xs">({{ sources[0].type }})</span>
+                  </div>
+                </div>
+
+                <div class="ds-table-col ds-table-actions">
+                  <div class="flex items-center gap-2">
+                    <a-button
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <a-tooltip v-if="metadiffbases.includes(sources[0].id as string)">
+                          <template #title>Out of sync</template>
+                          <MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" />
+                        </a-tooltip>
+                        <MdiDatabaseSync v-else class="text-lg group-hover:text-accent" />
+                        Sync Metadata
+                      </div>
+                    </a-button>
+                    <a-button
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <MdiDatabaseLockOutline class="text-lg group-hover:text-accent" />
+                        UI ACL
+                      </div>
+                    </a-button>
+                    <a-button
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(sources[0].id, DataSourcesSubTab.ERD)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <MdiGraphOutline class="text-lg group-hover:text-accent" />
+                        ERD
+                      </div>
+                    </a-button>
+                    <a-button
+                      v-if="!sources[0].is_meta"
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(sources[0].id, DataSourcesSubTab.Edit)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <MdiEditOutline class="text-lg group-hover:text-accent" />
+                        Edit
+                      </div>
+                    </a-button>
+                  </div>
+                </div>
+
+                <div class="ds-table-col ds-table-enabled">
+                  <div class="flex items-center gap-1 cursor-pointer">
+                    <a-tooltip>
+                      <template #title>
+                        <template v-if="sources[0].enabled">Hide in UI</template>
+                        <template v-else>Show in UI</template>
+                      </template>
+                      <a-switch :checked="sources[0].enabled ? true : false" @change="toggleBase(sources[0], $event)" />
+                    </a-tooltip>
+                  </div>
+                </div>
+              </div>
+            </template>
+            <template #item="{ element: base, index }">
+              <div v-if="index !== 0" class="ds-table-row border-gray-200">
+                <div class="ds-table-col ds-table-name">
+                  <MdiDragVertical v-if="sources.length > 2" small class="ds-table-handle" />
+                  <div class="flex items-center gap-1">
+                    <GeneralBaseLogo :base-type="base.type" />
+                    {{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span>
+                  </div>
+                </div>
+
+                <div class="ds-table-col ds-table-actions">
+                  <div class="flex items-center gap-2">
+                    <a-button
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(base.id, DataSourcesSubTab.Metadata)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <a-tooltip v-if="metadiffbases.includes(base.id as string)">
+                          <template #title>Out of sync</template>
+                          <MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" />
+                        </a-tooltip>
+                        <MdiDatabaseSync v-else class="text-lg group-hover:text-accent" />
+                        Sync Metadata
+                      </div>
+                    </a-button>
+                    <a-button
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(base.id, DataSourcesSubTab.UIAcl)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <MdiDatabaseLockOutline class="text-lg group-hover:text-accent" />
+                        UI ACL
+                      </div>
+                    </a-button>
+                    <a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(base.id, DataSourcesSubTab.ERD)">
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <MdiGraphOutline class="text-lg group-hover:text-accent" />
+                        ERD
+                      </div>
+                    </a-button>
+                    <a-button
+                      v-if="!base.is_meta"
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(base.id, DataSourcesSubTab.Edit)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <MdiEditOutline class="text-lg group-hover:text-accent" />
+                        Edit
+                      </div>
+                    </a-button>
+                    <a-button v-if="!base.is_meta" class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(base)">
+                      <div class="flex items-center gap-2 text-red-500 font-light">
+                        <MdiDeleteOutline class="text-lg group-hover:text-accent" />
+                        Delete
+                      </div>
+                    </a-button>
+                  </div>
+                </div>
+
+                <div class="ds-table-col ds-table-enabled">
+                  <div class="flex items-center gap-1 cursor-pointer">
+                    <a-tooltip>
+                      <template #title>
+                        <template v-if="base.enabled">Hide in UI</template>
+                        <template v-else>Show in UI</template>
+                      </template>
+                      <a-switch :checked="base.enabled ? true : false" @change="toggleBase(base, $event)" />
+                    </a-tooltip>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </Draggable>
+        </div>
+      </div>
+      <div v-else-if="vState === DataSourcesSubTab.New" class="max-h-600px overflow-y-auto">
+        <CreateBase :connection-type="clientType" @base-created="loadBases" />
+      </div>
+      <div v-else-if="vState === DataSourcesSubTab.Metadata" class="max-h-600px overflow-y-auto">
+        <Metadata :base-id="activeBaseId" @base-synced="loadBases" />
+      </div>
+      <div v-else-if="vState === DataSourcesSubTab.UIAcl" class="max-h-600px overflow-y-auto">
+        <UIAcl :base-id="activeBaseId" />
+      </div>
+      <div v-else-if="vState === DataSourcesSubTab.ERD" class="max-h-600px overflow-y-auto">
+        <Erd :base-id="activeBaseId" />
+      </div>
+      <div v-else-if="vState === DataSourcesSubTab.Edit" class="max-h-600px overflow-y-auto">
+        <EditBase :base-id="activeBaseId" @base-updated="loadBases" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.ds-table-head {
+  @apply flex items-center border-t bg-gray-100 font-bold text-gray-500;
+}
+
+.ds-table-body {
+  @apply flex flex-col;
+}
+
+.ds-table-row {
+  @apply grid grid-cols-20 border-b w-full h-full border-l border-r;
+}
+
+.ds-table-col {
+  @apply flex items-center p-3 border-r-1 mr-2 h-50px;
+}
+
+.ds-table-enabled {
+  @apply col-span-2 flex justify-center;
+}
+
+.ds-table-name {
+  @apply col-span-8;
+}
+
+.ds-table-actions {
+  @apply col-span-10;
+}
+
+.ds-table-col:last-child {
+  @apply border-r-0;
+}
+
+.ds-table-handle {
+  @apply cursor-pointer justify-self-start mr-2;
+}
+</style>
diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index e8ca1d8bd8..73025e8eef 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -1,5 +1,11 @@
+<script setup lang="ts">
+const props = defineProps<{
+  baseId: string
+}>()
+</script>
+
 <template>
   <div class="w-full h-full !p-0 h-70vh">
-    <ErdView />
+    <ErdView :base-id="props.baseId" />
   </div>
 </template>
diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index e515eb9fb2..937559eff7 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { Empty, extractSdkResponseErrorMsg, h, message, useI18n, useNuxtApp, useProject } from '#imports'
 
+const props = defineProps<{
+  baseId: string
+}>()
+
+const emit = defineEmits(['baseSynced'])
+
 const { $api } = useNuxtApp()
 
 const { project, loadTables } = useProject()
@@ -19,7 +25,7 @@ async function loadMetaDiff() {
 
     isLoading = true
     isDifferent = false
-    metadiff = await $api.project.metaDiffGet(project.value?.id)
+    metadiff = await $api.base.metaDiffGet(project.value?.id, props.baseId)
     for (const model of metadiff) {
       if (model.detectedChanges?.length > 0) {
         model.syncState = model.detectedChanges.map((el: any) => el?.msg).join(', ')
@@ -38,11 +44,12 @@ async function syncMetaDiff() {
     if (!project.value?.id || !isDifferent) return
 
     isLoading = true
-    await $api.project.metaDiffSync(project.value.id)
+    await $api.base.metaDiffSync(project.value.id, props.baseId)
     // Table metadata recreated successfully
     message.info(t('msg.info.metaDataRecreated'))
     await loadTables()
     await loadMetaDiff()
+    emit('baseSynced')
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   } finally {
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index db7a2bd156..5f563dc0b9 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import type { FunctionalComponent, SVGAttributes } from 'vue'
-import { resolveComponent, useI18n, useNuxtApp, useUIPermission, useVModel, watch } from '#imports'
+import AppStore from './AppStore.vue'
+import DataSources from './DataSources.vue'
+import Misc from './Misc.vue'
+import { DataSourcesSubTab, useI18n, useNuxtApp, useUIPermission, useVModel, watch } from '#imports'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
 import MultipleTableIcon from '~icons/mdi/table-multiple'
 import NotebookOutline from '~icons/mdi/notebook-outline'
+import FolderCog from '~icons/mdi/folder-cog'
 
 interface Props {
   modelValue: boolean
-  openKey?: string
+  openKey: string
+  dataSourcesState: string
 }
 
 interface SubTabGroup {
@@ -30,16 +35,24 @@ interface TabGroup {
 
 const props = defineProps<Props>()
 
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue', 'update:openKey', 'update:dataSourcesState'])
 
 const vModel = useVModel(props, 'modelValue', emits)
 
+const vOpenKey = useVModel(props, 'openKey', emits)
+
+const vDataState = useVModel(props, 'dataSourcesState', emits)
+
 const { isUIAllowed } = useUIPermission()
 
 const { t } = useI18n()
 
 const { $e } = useNuxtApp()
 
+const dataSourcesReload = ref(false)
+
+const dataSourcesAwakened = ref(false)
+
 const tabsInfo: TabGroup = {
   teamAndAuth: {
     title: t('title.teamAndAuth'),
@@ -68,56 +81,33 @@ const tabsInfo: TabGroup = {
       $e('c:settings:team-auth')
     },
   },
-  ...(isUIAllowed('appStore')
-    ? {
-        appStore: {
-          // App Store
-          title: t('title.appStore'),
-          icon: StoreFrontOutline,
-          subTabs: {
-            new: {
-              title: 'Apps',
-              body: resolveComponent('DashboardSettingsAppStore'),
-            },
-          },
-          onClick: () => {
-            $e('c:settings:appstore')
-          },
-        },
-      }
-    : {}),
-  projMetaData: {
-    // Project Metadata
-    title: t('title.projMeta'),
-    icon: MultipleTableIcon,
+  appStore: {
+    // App Store
+    title: t('title.appStore'),
+    icon: StoreFrontOutline,
     subTabs: {
-      metaData: {
-        // Metadata
-        title: t('title.metadata'),
-        body: resolveComponent('DashboardSettingsMetadata'),
-      },
-      acl: {
-        // UI Access Control
-        title: t('title.uiACL'),
-        body: resolveComponent('DashboardSettingsUIAcl'),
-        onClick: () => {
-          $e('c:table:ui-acl')
-        },
-      },
-      erd: {
-        title: t('title.erdView'),
-        body: resolveComponent('DashboardSettingsErd'),
-        onClick: () => {
-          $e('c:settings:erd')
-        },
+      new: {
+        title: 'Apps',
+        body: AppStore,
       },
-      misc: {
-        title: t('general.misc'),
-        body: resolveComponent('DashboardSettingsMisc'),
+    },
+    onClick: () => {
+      $e('c:settings:appstore')
+    },
+  },
+  dataSources: {
+    // Data Sources
+    title: 'Data Sources',
+    icon: MultipleTableIcon,
+    subTabs: {
+      dataSources: {
+        title: 'Data Sources',
+        body: DataSources,
       },
     },
     onClick: () => {
-      $e('c:settings:proj-metadata')
+      vDataState.value = ''
+      $e('c:settings:data-sources')
     },
   },
   audit: {
@@ -135,29 +125,47 @@ const tabsInfo: TabGroup = {
       $e('c:settings:audit')
     },
   },
+  projectSettings: {
+    // Project Settings
+    title: 'Project Settings',
+    icon: FolderCog,
+    subTabs: {
+      misc: {
+        // Misc
+        title: 'Misc',
+        body: Misc,
+      },
+    },
+    onClick: () => {
+      $e('c:settings:project-settings')
+    },
+  },
 }
 const firstKeyOfObject = (obj: object) => Object.keys(obj)[0]
 
 // Array of keys of tabs which are selected. In our case will be only one.
-let selectedTabKeys = $ref<string[]>([firstKeyOfObject(tabsInfo)])
+const selectedTabKeys = $computed<string[]>({
+  get: () => [Object.keys(tabsInfo).find((key) => key === vOpenKey.value) || firstKeyOfObject(tabsInfo)],
+  set: (value) => {
+    vOpenKey.value = value[0]
+  },
+})
+
 const selectedTab = $computed(() => tabsInfo[selectedTabKeys[0]])
 
 let selectedSubTabKeys = $ref<string[]>([firstKeyOfObject(selectedTab.subTabs)])
 const selectedSubTab = $computed(() => selectedTab.subTabs[selectedSubTabKeys[0]])
 
+const handleAwaken = (val: boolean) => {
+  dataSourcesAwakened.value = val
+}
+
 watch(
   () => selectedTabKeys[0],
   (newTabKey) => {
     selectedSubTabKeys = [firstKeyOfObject(tabsInfo[newTabKey].subTabs)]
   },
 )
-
-watch(
-  () => props.openKey,
-  (nextOpenKey) => {
-    selectedTabKeys = [Object.keys(tabsInfo).find((key) => key === nextOpenKey) || firstKeyOfObject(tabsInfo)]
-  },
-)
 </script>
 
 <template>
@@ -210,7 +218,12 @@ watch(
 
       <!-- Sub Tabs -->
       <a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500">
-        <a-menu v-model:selectedKeys="selectedSubTabKeys" :open-keys="[]" mode="horizontal">
+        <a-menu
+          v-if="selectedTabKeys[0] !== 'dataSources'"
+          v-model:selectedKeys="selectedSubTabKeys"
+          :open-keys="[]"
+          mode="horizontal"
+        >
           <a-menu-item
             v-for="(tab, key) of selectedTab.subTabs"
             :key="key"
@@ -220,8 +233,59 @@ watch(
             {{ tab.title }}
           </a-menu-item>
         </a-menu>
+        <div v-else>
+          <div class="flex items-center">
+            <a-breadcrumb class="w-full cursor-pointer">
+              <a-breadcrumb-item v-if="vDataState !== ''" @click="vDataState = ''">
+                <a class="!no-underline">Data Sources</a>
+              </a-breadcrumb-item>
+              <a-breadcrumb-item v-else @click="vDataState = ''">Data Sources</a-breadcrumb-item>
+              <a-breadcrumb-item v-if="vDataState !== ''">{{ vDataState }}</a-breadcrumb-item>
+            </a-breadcrumb>
+            <div v-if="vDataState === ''" class="flex flex-row justify-end items-center w-full gap-1">
+              <a-button
+                v-if="dataSourcesAwakened"
+                class="self-start nc-btn-new-datasource"
+                @click="vDataState = DataSourcesSubTab.New"
+              >
+                <div v-if="vDataState === ''" class="flex items-center gap-2 text-primary font-light">
+                  <MdiDatabasePlusOutline class="text-lg group-hover:text-accent" />
+                  New
+                </div>
+              </a-button>
+              <!--        Reload -->
+              <a-button
+                v-e="['a:proj-meta:data-sources:reload']"
+                class="self-start nc-btn-metasync-reload"
+                @click="dataSourcesReload = true"
+              >
+                <div class="flex items-center gap-2 text-gray-600 font-light">
+                  <MdiReload :class="{ 'animate-infinite animate-spin !text-success': dataSourcesReload }" />
+                  {{ $t('general.reload') }}
+                </div>
+              </a-button>
+            </div>
+          </div>
+          <a-divider style="margin: 10px 0" />
+        </div>
 
-        <component :is="selectedSubTab?.body" class="px-2 py-6" :data-testid="`nc-settings-subtab-${selectedSubTab.title}`" />
+        <div class="h-[600px]">
+          <component
+            :is="selectedSubTab?.body"
+            v-if="selectedSubTabKeys[0] === 'dataSources'"
+            v-model:state="vDataState"
+            v-model:reload="dataSourcesReload"
+            class="px-2 pb-2"
+            :data-testid="`nc-settings-subtab-${selectedSubTab.title}`"
+            @awaken="handleAwaken"
+          />
+          <component
+            :is="selectedSubTab?.body"
+            v-else
+            class="px-2 py-6"
+            :data-testid="`nc-settings-subtab-${selectedSubTab.title}`"
+          />
+        </div>
       </a-layout-content>
     </a-layout>
   </a-modal>
diff --git a/packages/nc-gui/components/dashboard/settings/UIAcl.vue b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
index 4b27998175..3aafc67104 100644
--- a/packages/nc-gui/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
@@ -13,6 +13,10 @@ import {
   viewIcons,
 } from '#imports'
 
+const props = defineProps<{
+  baseId: string
+}>()
+
 const { t } = useI18n()
 
 const { $api, $e } = useNuxtApp()
@@ -32,8 +36,9 @@ const searchInput = $ref('')
 const filteredTables = computed(() =>
   tables.filter(
     (el) =>
-      (typeof el?._ptn === 'string' && el._ptn.toLowerCase().includes(searchInput.toLowerCase())) ||
-      (typeof el?.title === 'string' && el.title.toLowerCase().includes(searchInput.toLowerCase())),
+      el?.base_id === props.baseId &&
+      ((typeof el?._ptn === 'string' && el._ptn.toLowerCase().includes(searchInput.toLowerCase())) ||
+        (typeof el?.title === 'string' && el.title.toLowerCase().includes(searchInput.toLowerCase()))),
   ),
 )
 
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..af1562ebd1
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -0,0 +1,615 @@
+<script lang="ts" setup>
+import { Form, Modal, message } from 'ant-design-vue'
+import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
+import type { ProjectCreateForm } from '#imports'
+import {
+  CertTypes,
+  ClientType,
+  DefaultConnection,
+  SQLiteConnection,
+  SSLUsage,
+  clientTypes,
+  computed,
+  extractSdkResponseErrorMsg,
+  fieldRequiredValidator,
+  generateUniqueName,
+  getDefaultConnectionConfig,
+  getTestDatabaseName,
+  nextTick,
+  onMounted,
+  projectTitleValidator,
+  readFile,
+  ref,
+  useApi,
+  useI18n,
+  useNuxtApp,
+  watch,
+} from '#imports'
+
+const { connectionType } = defineProps<{ connectionType: ClientType }>()
+
+const emit = defineEmits(['baseCreated'])
+
+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()
+
+const toggleDialog = inject(ToggleDialogInj, () => {})
+
+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()
+    emit('baseCreated')
+    message.success('Base created!')
+    toggleDialog(true, 'dataSources', '')
+  } 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,
+          style: 'top: 30%!important',
+        })
+      } 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(async () => {
+  formState.title = await 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)
+  })
+})
+
+watch(
+  () => connectionType,
+  (v) => {
+    formState.dataSource.client = v
+    onClientChange()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div class="create-base max-w-800px mx-auto bg-white relative flex flex-col justify-center gap-2 w-full p-8">
+    <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-base {
+  :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/dashboard/settings/data-sources/EditBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
new file mode 100644
index 0000000000..c22b1eb751
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
@@ -0,0 +1,612 @@
+<script lang="ts" setup>
+import type { BaseType } from 'nocodb-sdk'
+import { Form, Modal, message } from 'ant-design-vue'
+import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
+import type { ProjectCreateForm } from '#imports'
+import {
+  CertTypes,
+  ClientType,
+  DefaultConnection,
+  SQLiteConnection,
+  SSLUsage,
+  clientTypes,
+  computed,
+  extractSdkResponseErrorMsg,
+  fieldRequiredValidator,
+  getDefaultConnectionConfig,
+  getTestDatabaseName,
+  onMounted,
+  projectTitleValidator,
+  readFile,
+  ref,
+  useApi,
+  useI18n,
+  useNuxtApp,
+  watch,
+} from '#imports'
+
+const props = defineProps<{
+  baseId: string
+}>()
+
+const emit = defineEmits(['baseUpdated'])
+
+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()
+
+const toggleDialog = inject(ToggleDialogInj, () => {})
+
+const 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.value.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.value.dataSource.client)
+            ? {
+                'dataSource.searchPath.0': [fieldRequiredValidator()],
+              }
+            : {}),
+        }),
+  }
+})
+
+const { validate, validateInfos } = useForm(formState, validators)
+
+const onClientChange = () => {
+  formState.value.dataSource = { ...getDefaultConnectionConfig(formState.value.dataSource.client) }
+}
+
+const onSSLModeChange = ((mode: SSLUsage) => {
+  if (formState.value.dataSource.client !== ClientType.SQLITE) {
+    const connection = formState.value.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.value.dataSource.client !== ClientType.SQLITE) {
+    const connection = formState.value.dataSource.connection as DefaultConnection
+    if (connection.ssl) {
+      if (typeof connection.ssl === 'string') {
+        formState.value.sslUse = SSLUsage.Allowed
+      } else {
+        formState.value.sslUse = SSLUsage.Preferred
+      }
+    } else {
+      formState.value.sslUse = SSLUsage.No
+    }
+  }
+}
+
+const addNewParam = () => {
+  formState.value.extraParameters.push({ key: '', value: '' })
+}
+
+const removeParam = (index: number) => {
+  formState.value.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.value.dataSource.connection && typeof formState.value.dataSource.connection.ssl === 'object')
+      formState.value.dataSource.connection.ssl[key] = content ?? ''
+  })
+}
+
+const sslFilesRequired = computed(
+  () => !!formState.value.sslUse && formState.value.sslUse !== SSLUsage.No && formState.value.sslUse !== SSLUsage.Allowed,
+)
+
+function getConnectionConfig() {
+  const extraParameters = Object.fromEntries(new Map(formState.value.extraParameters.map((object) => [object.key, object.value])))
+
+  const connection = {
+    ...formState.value.dataSource.connection,
+    ...extraParameters,
+  }
+
+  if ('ssl' in connection && connection.ssl) {
+    if (
+      formState.value.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 editBase = async () => {
+  try {
+    await validate()
+  } catch (e) {
+    focusInvalidInput()
+    return
+  }
+
+  try {
+    if (!project.value?.id) return
+
+    const connection = getConnectionConfig()
+
+    const config = { ...formState.value.dataSource, connection }
+
+    await api.base.update(project.value?.id, props.baseId, {
+      alias: formState.value.title,
+      type: formState.value.dataSource.client,
+      config,
+      inflection_column: formState.value.inflection.inflectionColumn,
+      inflection_table: formState.value.inflection.inflectionTable,
+    })
+
+    $e('a:base:edit:extdb')
+
+    await loadProject()
+    emit('baseUpdated')
+    message.success('Base updated!')
+    toggleDialog(true, 'dataSources', '')
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const testConnection = async () => {
+  try {
+    await validate()
+  } catch (e) {
+    focusInvalidInput()
+    return
+  }
+
+  $e('a:base:edit:extdb:test-connection', [])
+
+  try {
+    if (formState.value.dataSource.client === ClientType.SQLITE) {
+      testSuccess.value = true
+    } else {
+      const connection = getConnectionConfig()
+
+      connection.database = getTestDatabaseName(formState.value.dataSource)!
+
+      const testConnectionConfig = {
+        ...formState.value.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 & Edit Base',
+          okType: 'primary',
+          cancelText: t('general.cancel'),
+          onOk: editBase,
+          style: 'top: 30%!important',
+        })
+      } 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.value.dataSource.client = connectionConfig.client
+    formState.value.dataSource.connection = { ...connectionConfig.connection }
+  } else {
+    message.error(t('msg.error.invalidURL'))
+  }
+  importURLDlg.value = false
+  updateSSLUse()
+}
+
+const handleEditJSON = () => {
+  customFormState.value = formState.value
+  configEditDlg.value = true
+}
+
+const handleOk = () => {
+  formState.value = customFormState.value
+  configEditDlg.value = false
+  updateSSLUse()
+}
+
+// reset test status on config change
+watch(
+  () => formState.value.dataSource,
+  () => (testSuccess.value = false),
+  { deep: true },
+)
+
+// load base config
+onMounted(async () => {
+  if (project.value?.id) {
+    const definedParameters = ['host', 'port', 'user', 'password', 'database']
+
+    const activeBase = (await api.base.read(project.value?.id, props.baseId)) as BaseType
+
+    const tempParameters = Object.entries(activeBase.config.connection)
+      .filter(([key]) => !definedParameters.includes(key))
+      .map(([key, value]) => ({ key: key as string, value: value as string }))
+
+    formState.value = {
+      title: activeBase.alias || '',
+      dataSource: activeBase.config,
+      inflection: {
+        inflectionColumn: activeBase.inflection_column,
+        inflectionTable: activeBase.inflection_table,
+      },
+      extraParameters: tempParameters,
+      sslUse: SSLUsage.No,
+    }
+    updateSSLUse()
+  }
+})
+</script>
+
+<template>
+  <div class="edit-base max-w-800px mx-auto bg-white relative flex flex-col justify-center gap-2 w-full p-8">
+    <h1 class="prose-2xl font-bold self-center my-4">Edit 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="editBase">
+            {{ $t('general.submit') }}
+          </a-button>
+        </div>
+      </a-form-item>
+      <div class="w-full flex items-center mt-2 text-[#e65100]">
+        <MdiWarning class="mr-1" />
+        Please make sure database you are trying to connect is valid! This operation can cause schema loss!!
+      </div>
+    </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;
+}
+
+.edit-base {
+  :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/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index a91f37d1ce..12cd859e98 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -18,8 +18,9 @@ import {
   watch,
 } from '#imports'
 
-const { modelValue } = defineProps<{
+const { modelValue, baseId } = defineProps<{
   modelValue: boolean
+  baseId: string
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -100,7 +101,7 @@ async function createOrUpdate() {
         body: payload,
       })
     } else {
-      syncSource.value = await $fetch(`/api/v1/db/meta/projects/${project.value.id}/syncs`, {
+      syncSource.value = await $fetch(`/api/v1/db/meta/projects/${project.value.id}/syncs/${baseId}`, {
         baseURL,
         method: 'POST',
         headers: { 'xc-auth': $state.token.value as string },
@@ -113,7 +114,7 @@ async function createOrUpdate() {
 }
 
 async function loadSyncSrc() {
-  const data: any = await $fetch(`/api/v1/db/meta/projects/${project.value.id}/syncs`, {
+  const data: any = await $fetch(`/api/v1/db/meta/projects/${project.value.id}/syncs/${baseId}`, {
     baseURL,
     method: 'GET',
     headers: { 'xc-auth': $state.token.value as string },
diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index fd8bdd188b..8f3f1bad79 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -27,6 +27,7 @@ import type { importFileList, streamImportFileList } from '~/lib'
 interface Props {
   modelValue: boolean
   importType: 'csv' | 'json' | 'excel'
+  baseId: string
   importDataOnly?: boolean
 }
 
@@ -364,6 +365,7 @@ const beforeUpload = (file: UploadFile) => {
             :import-data-only="importDataOnly"
             :quick-import-type="importType"
             :max-rows-to-parse="importState.parserConfig.maxRowsToParse"
+            :base-id="baseId"
             class="nc-quick-import-template-editor"
             @import="handleImport"
           />
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/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue
index f395295e2b..212f02e3cb 100644
--- a/packages/nc-gui/components/dlg/TableRename.vue
+++ b/packages/nc-gui/components/dlg/TableRename.vue
@@ -21,9 +21,10 @@ import {
 interface Props {
   modelValue?: boolean
   tableMeta: TableType
+  baseId: string
 }
 
-const { tableMeta, ...props } = defineProps<Props>()
+const { tableMeta, baseId, ...props } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue', 'updated'])
 
@@ -57,11 +58,11 @@ const validators = computed(() => {
         validator: (rule: any, value: any) => {
           return new Promise<void>((resolve, reject) => {
             let tableNameLengthLimit = 255
-            if (isMysql) {
+            if (isMysql(baseId)) {
               tableNameLengthLimit = 64
-            } else if (isPg) {
+            } else if (isPg(baseId)) {
               tableNameLengthLimit = 63
-            } else if (isMssql) {
+            } else if (isMssql(baseId)) {
               tableNameLengthLimit = 128
             }
             const projectPrefix = project?.value?.prefix || ''
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 16fff82885..6d5be40fdb 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -4,7 +4,7 @@ import { UITypes } from 'nocodb-sdk'
 import type { ERDConfig } from './utils'
 import { reactive, ref, useMetas, useProject, watch } from '#imports'
 
-const { table } = defineProps<{ table?: TableType }>()
+const props = defineProps<{ table?: TableType; baseId?: string }>()
 
 const { tables: projectTables } = useProject()
 
@@ -18,7 +18,7 @@ const config = reactive<ERDConfig>({
   showPkAndFk: true,
   showViews: false,
   showAllColumns: true,
-  singleTableMode: !!table,
+  singleTableMode: !!props.table,
   showMMTables: false,
   showJunctionTableNames: false,
 })
@@ -34,14 +34,13 @@ const loadMetaOfTablesNotInMetas = async (localTables: TableType[]) => {
 }
 
 const populateTables = async () => {
-  let localTables: TableType[]
-
-  if (table) {
+  let localTables: TableType[] = []
+  if (props.table) {
     // if table is provided only get the table and its related tables
     localTables = projectTables.value.filter(
       (t) =>
-        t.id === table.id ||
-        table.columns?.find(
+        t.id === props.table.id ||
+        props.table.columns?.find(
           (column) =>
             column.uidt === UITypes.LinkToAnotherRecord &&
             (column.colOptions as LinkToAnotherRecordType)?.fk_related_model_id === t.id,
@@ -59,7 +58,7 @@ const populateTables = async () => {
         config.showMMTables ||
         (!config.showMMTables && !t.mm) ||
         // Show mm table if it's the selected table
-        t.id === table?.id,
+        t.id === props.table?.id,
     )
     .filter((t) => config.singleTableMode || (!config.showViews && t.type !== 'view') || config.showViews)
 
@@ -76,6 +75,8 @@ watch(config, populateTables, {
   deep: true,
 })
 
+const filteredTables = computed(() => tables.value.filter((t) => !props.baseId || t.base_id === props.baseId))
+
 watch(
   () => config.showAllColumns,
   () => {
@@ -87,7 +88,7 @@ watch(
 <template>
   <div class="w-full" style="height: inherit" :class="[`nc-erd-vue-flow${config.singleTableMode ? '-single-table' : ''}`]">
     <div class="relative h-full">
-      <LazyErdFlow :tables="tables" :config="config">
+      <LazyErdFlow :tables="filteredTables" :config="config">
         <GeneralOverlay v-model="isLoading" inline class="bg-gray-300/50">
           <div class="h-full w-full flex flex-col justify-center items-center">
             <a-spin size="large" />
diff --git a/packages/nc-gui/components/general/AddBaseButton.vue b/packages/nc-gui/components/general/AddBaseButton.vue
new file mode 100644
index 0000000000..4f43a7be1b
--- /dev/null
+++ b/packages/nc-gui/components/general/AddBaseButton.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const { isUIAllowed } = useUIPermission()
+
+const { t } = useI18n()
+
+const toggleDialog = inject(ToggleDialogInj, () => {})
+</script>
+
+<template>
+  <div
+    v-if="isUIAllowed('settings')"
+    class="flex items-center w-full pl-3 hover:(text-primary bg-primary bg-opacity-5)"
+    @click="toggleDialog(true)"
+  >
+    <div>
+      <div class="flex items-center space-x-1">
+        <RiTeamFill class="mr-1 nc-new-base" />
+        <div>{{ t('title.teamAndSettings') }}</div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui/components/general/BaseLogo.vue b/packages/nc-gui/components/general/BaseLogo.vue
new file mode 100644
index 0000000000..aad12fa922
--- /dev/null
+++ b/packages/nc-gui/components/general/BaseLogo.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import LogosMysqlIcon from '~icons/logos/mysql-icon'
+import LogosPostgresql from '~icons/logos/postgresql'
+import VscodeIconsFileTypeSqlite from '~icons/vscode-icons/file-type-sqlite'
+import SimpleIconsMicrosoftsqlserver from '~icons/simple-icons/microsoftsqlserver'
+import MdiDatabaseOutline from '~icons/mdi/database-outline'
+
+const { baseType } = defineProps<{ baseType?: string }>()
+
+const baseIcon = computed(() => {
+  switch (baseType) {
+    case ClientType.MYSQL:
+      return LogosMysqlIcon
+    case ClientType.PG:
+      return LogosPostgresql
+    case ClientType.SQLITE:
+      return VscodeIconsFileTypeSqlite
+    case ClientType.MSSQL:
+      return SimpleIconsMicrosoftsqlserver
+    default:
+      return MdiDatabaseOutline
+  }
+})
+</script>
+
+<template>
+  <component :is="baseIcon" />
+</template>
diff --git a/packages/nc-gui/components/general/ShareBaseButton.vue b/packages/nc-gui/components/general/ShareBaseButton.vue
index b010809848..3d9088e684 100644
--- a/packages/nc-gui/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui/components/general/ShareBaseButton.vue
@@ -37,13 +37,16 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 </script>
 
 <template>
-  <div class="flex items-center w-full pl-3 hover:(text-primary bg-primary bg-opacity-5)" @click="showUserModal = true">
+  <div class="flex items-center h-full" @click="showUserModal = true">
     <div v-if="isShareBaseAllowed">
-      <div class="flex items-center space-x-1">
-        <MdiAccountPlusOutline class="mr-1 nc-share-base" />
-
-        <div>{{ $t('activity.inviteTeam') }}</div>
-      </div>
+      <a-tooltip placement="left">
+        <template #title>
+          <span class="text-xs">{{ $t('activity.inviteTeam') }}</span>
+        </template>
+        <div class="flex items-center space-x-1 cursor-pointer">
+          <MdiAccountPlusOutline class="mr-1 nc-share-base text-gray-300 hover:text-accent" />
+        </div>
+      </a-tooltip>
     </div>
 
     <LazyTabsAuthUserManagementUsersModal :show="showUserModal" @closed="showUserModal = false" />
diff --git a/packages/nc-gui/components/general/Tooltip.vue b/packages/nc-gui/components/general/Tooltip.vue
index ea5b8a963b..ab9800aa03 100644
--- a/packages/nc-gui/components/general/Tooltip.vue
+++ b/packages/nc-gui/components/general/Tooltip.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onKeyStroke } from '@vueuse/core'
 import type { CSSProperties } from '@vue/runtime-dom'
-import { controlledRef, ref, useElementHover, watch } from '#imports'
+import { controlledRef, ref, useAttrs, useElementHover, watch } from '#imports'
 
 interface Props {
   // Key to be pressed on hover to trigger the tooltip
@@ -23,6 +23,8 @@ const showTooltip = controlledRef(false, {
 
 const isHovering = useElementHover(() => el.value)
 
+const attrs = useAttrs()
+
 const isKeyPressed = ref(false)
 
 onKeyStroke(
@@ -73,6 +75,11 @@ watch([isHovering, () => modifierKey, () => disabled], ([hovering, key, isDisabl
     showTooltip.value = true
   }
 })
+
+const divStyles = $computed(() => ({
+  style: attrs.style as CSSProperties,
+  class: attrs.class as string,
+}))
 </script>
 
 <template>
@@ -81,7 +88,7 @@ watch([isHovering, () => modifierKey, () => disabled], ([hovering, key, isDisabl
       <slot name="title" />
     </template>
 
-    <div ref="el" class="w-full" :class="$attrs.class" :style="$attrs.style">
+    <div ref="el" class="w-full" v-bind="divStyles">
       <slot />
     </div>
   </a-tooltip>
diff --git a/packages/nc-gui/components/smartsheet/ApiSnippet.vue b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
index 8699e22300..43fc44653e 100644
--- a/packages/nc-gui/components/smartsheet/ApiSnippet.vue
+++ b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
@@ -172,13 +172,8 @@ watch($$(activeLang), (newLang) => {
             hide-minimap
           />
 
-          <div v-if="activeLang.clients" class="flex flex-row w-full justify-end space-x-3 mt-4 uppercase">
-            <a-select
-              v-if="activeLang"
-              v-model:value="selectedClient"
-              style="width: 6rem"
-              dropdown-class-name="nc-dropdown-snippet-active-lang"
-            >
+          <div v-if="activeLang?.clients" class="flex flex-row w-full justify-end space-x-3 mt-4 uppercase">
+            <a-select v-model:value="selectedClient" style="width: 6rem" dropdown-class-name="nc-dropdown-snippet-active-lang">
               <a-select-option v-for="(client, i) in activeLang?.clients" :key="i" class="!w-full uppercase" :value="client">
                 {{ client }}
               </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 753b92c374..a64d08d1b4 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -82,7 +82,9 @@ const isLocked = inject(IsLockedInj, ref(false))
 
 const { currentRow } = useSmartsheetRowStoreOrThrow()
 
-const { sqlUi } = useProject()
+const { sqlUis } = useProject()
+
+const sqlUi = ref(column.value?.base_id ? sqlUis.value[column.value?.base_id] : Object.values(sqlUis.value)[0])
 
 const abstractType = computed(() => column.value && sqlUi.value.getAbstractType(column.value))
 
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index e83e2ab88d..0bcddde8d4 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -92,6 +92,7 @@ const contextMenu = computed({
   },
 })
 
+const routeQuery = $computed(() => route.query as Record<string, string>)
 const contextMenuTarget = ref<{ row: number; col: number } | null>(null)
 const expandedFormDlg = ref(false)
 const expandedFormRow = ref<Row>()
@@ -226,7 +227,6 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
         switch (e.key) {
           case 'ArrowUp':
             e.preventDefault()
-            $e('c:shortcut', { key: 'CTRL + ArrowUp' })
             selectedCell.row = 0
             selectedCell.col = selectedCell.col ?? 0
             scrollToCell?.()
@@ -234,7 +234,6 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
             return true
           case 'ArrowDown':
             e.preventDefault()
-            $e('c:shortcut', { key: 'CTRL + ArrowDown' })
             selectedCell.row = data.value.length - 1
             selectedCell.col = selectedCell.col ?? 0
             scrollToCell?.()
@@ -242,7 +241,6 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
             return true
           case 'ArrowRight':
             e.preventDefault()
-            $e('c:shortcut', { key: 'CTRL + ArrowRight' })
             selectedCell.row = selectedCell.row ?? 0
             selectedCell.col = fields.value?.length - 1
             scrollToCell?.()
@@ -250,7 +248,6 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
             return true
           case 'ArrowLeft':
             e.preventDefault()
-            $e('c:shortcut', { key: 'CTRL + ArrowLeft' })
             selectedCell.row = selectedCell.row ?? 0
             selectedCell.col = 0
             scrollToCell?.()
@@ -365,7 +362,7 @@ function expandForm(row: Row, state?: Record<string, any>, fromToolbar = false)
   if (rowId) {
     router.push({
       query: {
-        ...route.query,
+        ...routeQuery,
         rowId,
       },
     })
@@ -569,13 +566,13 @@ onBeforeUnmount(() => {
 
 const expandedFormOnRowIdDlg = computed({
   get() {
-    return !!route.query.rowId
+    return !!routeQuery.rowId
   },
   set(val) {
     if (!val)
       router.push({
         query: {
-          ...route.query,
+          ...routeQuery,
           rowId: undefined,
         },
       })
@@ -903,11 +900,11 @@ const closeAddColumnDropdown = () => {
     <Suspense>
       <LazySmartsheetExpandedForm
         v-if="expandedFormOnRowIdDlg"
-        :key="route.query.rowId"
+        :key="routeQuery.rowId"
         v-model="expandedFormOnRowIdDlg"
         :row="{ row: {}, oldRow: {}, rowMeta: {} }"
         :meta="meta"
-        :row-id="route.query.rowId"
+        :row-id="routeQuery.rowId"
         :view="view"
       />
     </Suspense>
diff --git a/packages/nc-gui/components/smartsheet/VirtualCell.vue b/packages/nc-gui/components/smartsheet/VirtualCell.vue
index dcf44f2c06..dad0b33311 100644
--- a/packages/nc-gui/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/VirtualCell.vue
@@ -24,7 +24,7 @@ import { NavigateDir } from '~/lib'
 const props = defineProps<{
   column: ColumnType
   modelValue: any
-  row: Row
+  row?: Row
   active?: boolean
 }>()
 
diff --git a/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue b/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue
index c08f496f7a..31a04ba1cd 100644
--- a/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { UITypes } from 'nocodb-sdk'
-import { computed, useColumnCreateStoreOrThrow, useProject, useVModel } from '#imports'
+import { computed, useColumnCreateStoreOrThrow, useVModel } from '#imports'
 
 const props = defineProps<{
   value: any
@@ -10,9 +10,7 @@ const emit = defineEmits(['update:value'])
 
 const vModel = useVModel(props, 'value', emit)
 
-const { sqlUi } = useProject()
-
-const { onAlter, onDataTypeChange, validateInfos } = useColumnCreateStoreOrThrow()
+const { onAlter, onDataTypeChange, validateInfos, sqlUi } = useColumnCreateStoreOrThrow()
 
 // todo: 2nd argument of `getDataTypeListForUiType` is missing!
 const dataTypes = computed(() => sqlUi.value.getDataTypeListForUiType(vModel.value as { uidt: UITypes }, '' as any))
diff --git a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
index 7af7079e32..07a7d606f3 100644
--- a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
@@ -49,14 +49,12 @@ const validators = {
   ],
 }
 
-const { setAdditionalValidations, validateInfos } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, validateInfos, isPg } = useColumnCreateStoreOrThrow()
 
 setAdditionalValidations({
   ...validators,
 })
 
-const { isPg } = useProject()
-
 const currencyList = currencyCodes || []
 
 const currencyLocaleList = currencyLocales() || []
@@ -64,7 +62,7 @@ const currencyLocaleList = currencyLocales() || []
 const isMoney = computed(() => vModel.value.dt === 'money')
 
 const message = computed(() => {
-  if (isMoney.value && isPg) return "PostgreSQL 'money' type has own currency settings"
+  if (isMoney.value && isPg.value) return "PostgreSQL 'money' type has own currency settings"
   return ''
 })
 
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue b/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
index bc8bb78b1c..188de23c98 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
@@ -4,7 +4,7 @@ import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
 import { MetaInj, inject, ref, toRef, useProvideColumnCreateStore } from '#imports'
 
 interface Props {
-  column?: ColumnType & { meta: any }
+  column?: ColumnType
   columnPosition?: Pick<ColumnReqType, 'column_order'>
 }
 
diff --git a/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue b/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue
index 1ccb069b43..c55bc8ec85 100644
--- a/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue
@@ -2,8 +2,8 @@
 import type { Ref } from 'vue'
 import type { ListItem as AntListItem } from 'ant-design-vue'
 import jsep from 'jsep'
-import type { ColumnType } from 'nocodb-sdk'
-import { UITypes, jsepCurlyHook } from 'nocodb-sdk'
+import type { ColumnType, FormulaType } from 'nocodb-sdk'
+import { UITypes, jsepCurlyHook, substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
 import {
   MetaInj,
   NcAutocompleteTree,
@@ -604,7 +604,16 @@ function scrollToSelectedOption() {
 }
 
 // set default value
-vModel.value.formula_raw = (column?.value?.colOptions as Record<string, any>)?.formula_raw || ''
+if ((column.value?.colOptions as any)?.formula_raw) {
+  vModel.value.formula_raw =
+    substituteColumnIdWithAliasInFormula(
+      (column.value?.colOptions as FormulaType)?.formula,
+      meta?.value?.columns as ColumnType[],
+      (column.value?.colOptions as any)?.formula_raw,
+    ) || ''
+} else {
+  vModel.value.formula_raw = ''
+}
 
 // set additional validations
 setAdditionalValidations({
diff --git a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
index 9596c76b0f..f137ed3edd 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
@@ -14,9 +14,9 @@ const vModel = useVModel(props, 'value', emit)
 
 const meta = $(inject(MetaInj, ref()))
 
-const { setAdditionalValidations, validateInfos, onDataTypeChange } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, validateInfos, onDataTypeChange, sqlUi } = useColumnCreateStoreOrThrow()
 
-const { tables, sqlUi } = $(useProject())
+const { tables } = $(useProject())
 
 setAdditionalValidations({
   childId: [{ required: true, message: 'Required' }],
@@ -44,8 +44,10 @@ const refTables = $computed(() => {
     return []
   }
 
-  return tables.filter((t) => t.type === ModelTypes.TABLE)
+  return tables.filter((t) => t.type === ModelTypes.TABLE && t.base_id === meta?.base_id)
 })
+
+const filterOption = (value: string, option: { key: string }) => option.key.toLowerCase().includes(value.toLowerCase())
 </script>
 
 <template>
@@ -66,11 +68,11 @@ const refTables = $computed(() => {
         <a-select
           v-model:value="vModel.childId"
           show-search
-          :filter-option="(value, option) => option.key.toLowerCase().includes(value.toLowerCase())"
+          :filter-option="filterOption"
           dropdown-class-name="nc-dropdown-ltar-child-table"
           @change="onDataTypeChange"
         >
-          <a-select-option v-for="table in refTables" :key="table.title" :value="table.id">
+          <a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
             {{ table.title }}
           </a-select-option>
         </a-select>
@@ -96,7 +98,7 @@ const refTables = $computed(() => {
             dropdown-class-name="nc-dropdown-on-update"
             @change="onDataTypeChange"
           >
-            <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
+            <a-select-option v-for="(option, i) of onUpdateDeleteOptions" :key="i" :value="option">
               {{ option }}
             </a-select-option>
           </a-select>
@@ -110,7 +112,7 @@ const refTables = $computed(() => {
             dropdown-class-name="nc-dropdown-on-delete"
             @change="onDataTypeChange"
           >
-            <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
+            <a-select-option v-for="(option, i) of onUpdateDeleteOptions" :key="i" :value="option">
               {{ option }}
             </a-select-option>
           </a-select>
diff --git a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
index 1bb039bc7d..0667cc7b9f 100644
--- a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
+import { getRelationName } from './utils'
 import { MetaInj, inject, ref, useColumnCreateStoreOrThrow, useMetas, useProject, useVModel } from '#imports'
 
 const props = defineProps<{
@@ -27,36 +28,28 @@ setAdditionalValidations({
 if (!vModel.value.fk_relation_column_id) vModel.value.fk_relation_column_id = null
 if (!vModel.value.fk_lookup_column_id) vModel.value.fk_lookup_column_id = null
 
-const relationNames = {
-  mm: 'Many To Many',
-  hm: 'Has Many',
-  bt: 'Belongs To',
-}
-
 const refTables = $computed(() => {
-  if (!tables || !tables.length) {
+  if (!tables || !tables.length || !meta || !meta.columns) {
     return []
   }
 
-  return meta?.columns
-    ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
-    .map((c: ColumnType) => ({
-      col: c.colOptions,
-      column: c,
-      ...tables.find((t) => t.id === (c.colOptions as LinkToAnotherRecordType).fk_related_model_id),
+  const _refTables = meta.columns
+    .filter((column) => column.uidt === UITypes.LinkToAnotherRecord && !column.system && column.base_id === meta?.base_id)
+    .map((column) => ({
+      col: column.colOptions,
+      column,
+      ...tables.find((table) => table.id === (column.colOptions as LinkToAnotherRecordType).fk_related_model_id),
     }))
-    .filter((table: any) => table.col.fk_related_model_id === table.id && !table.mm)
+    .filter((table) => (table.col as LinkToAnotherRecordType)?.fk_related_model_id === table.id && !table.mm)
+  return _refTables as Required<TableType & { column: ColumnType; col: Required<LinkToAnotherRecordType> }>[]
 })
 
-const columns = $computed(() => {
-  const selectedTable = refTables?.find((t) => t.column.id === vModel.value.fk_relation_column_id)
+const columns = $computed<ColumnType[]>(() => {
+  const selectedTable = refTables.find((t) => t.column.id === vModel.value.fk_relation_column_id)
   if (!selectedTable?.id) {
     return []
   }
-
-  return metas[selectedTable.id].columns.filter((c: any) => {
-    return !(isSystemColumn(c) || c.uidt === UITypes.QrCode)
-  })
+  return metas[selectedTable.id].columns.filter((c: ColumnType) => !isSystemColumn(c))
 })
 </script>
 
@@ -69,11 +62,11 @@ const columns = $computed(() => {
           dropdown-class-name="!w-64 nc-dropdown-relation-table"
           @change="onDataTypeChange"
         >
-          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
+          <a-select-option v-for="(table, i) of refTables" :key="i" :value="table.col.fk_column_id">
             <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
               <div class="font-semibold text-xs">{{ table.column.title }}</div>
               <div class="text-[0.65rem] text-gray-600">
-                {{ relationNames[table.col.type] }} {{ table.title || table.table_name }}
+                {{ getRelationName(table.col.type) }} {{ table.title || table.table_name }}
               </div>
             </div>
           </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue b/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
index be08672d7a..ecab893a65 100644
--- a/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
@@ -25,10 +25,7 @@ const { setAdditionalValidations, validateInfos, column } = useColumnCreateStore
 const columnsAllowedAsQrValue = computed<SelectProps['options']>(() => {
   return fields.value
     ?.filter(
-      (el) =>
-        el.fk_column_id &&
-        // AllowedColumnTypesForQrCode.map((el) => el.toString()).includes(metaColumnById.value[el.fk_column_id].uidt),
-        AllowedColumnTypesForQrCode.includes(metaColumnById.value[el.fk_column_id].uidt as UITypes),
+      (el) => el.fk_column_id && AllowedColumnTypesForQrCode.includes(metaColumnById.value[el.fk_column_id].uidt as UITypes),
     )
     .map((field) => {
       return {
diff --git a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
index 362008f9ff..20e1a54333 100644
--- a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
+import { getRelationName } from './utils'
 import { MetaInj, inject, ref, useColumnCreateStoreOrThrow, useMetas, useProject, useVModel } from '#imports'
 
 const props = defineProps<{
@@ -24,11 +26,6 @@ setAdditionalValidations({
   rollup_function: [{ required: true, message: 'Required' }],
 })
 
-const relationNames = {
-  mm: 'Many To Many',
-  hm: 'Has Many',
-}
-
 const aggrFunctionsList = [
   { text: 'count', value: 'count' },
   { text: 'min', value: 'min' },
@@ -45,19 +42,24 @@ if (!vModel.value.fk_rollup_column_id) vModel.value.fk_rollup_column_id = null
 if (!vModel.value.rollup_function) vModel.value.rollup_function = null
 
 const refTables = $computed(() => {
-  if (!tables || !tables.length) {
+  if (!tables || !tables.length || !meta || !meta.columns) {
     return []
   }
 
-  return (
-    meta?.columns
-      ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && c.colOptions.type !== 'bt' && !c.system)
-      .map((c) => ({
-        col: c.colOptions,
-        column: c,
-        ...tables.find((t) => t.id === (c.colOptions as any)?.fk_related_model_id),
-      })) ?? []
-  )
+  const _refTables = meta.columns
+    .filter(
+      (c) =>
+        c.uidt === UITypes.LinkToAnotherRecord &&
+        (c.colOptions as LinkToAnotherRecordType).type !== 'bt' &&
+        !c.system &&
+        c.base_id === meta?.base_id,
+    )
+    .map((c) => ({
+      col: c.colOptions,
+      column: c,
+      ...tables.find((t) => t.id === (c.colOptions as any)?.fk_related_model_id),
+    }))
+  return _refTables as Required<TableType & { column: ColumnType; col: Required<LinkToAnotherRecordType> }>[]
 })
 
 const columns = $computed(() => {
@@ -67,7 +69,7 @@ const columns = $computed(() => {
     return []
   }
 
-  return metas[selectedTable.id].columns.filter((c: any) => !isVirtualCol(c.uidt) && !isSystemColumn(c))
+  return metas[selectedTable.id].columns.filter((c: ColumnType) => !isVirtualCol(c.uidt as UITypes) && !isSystemColumn(c))
 })
 </script>
 
@@ -80,11 +82,11 @@ const columns = $computed(() => {
           dropdown-class-name="!w-64 nc-dropdown-relation-table"
           @change="onDataTypeChange"
         >
-          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
+          <a-select-option v-for="(table, i) of refTables" :key="i" :value="table.col.fk_column_id">
             <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
               <div class="font-semibold text-xs">{{ table.column.title }}</div>
               <div class="text-[0.65rem] text-gray-600">
-                ({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})
+                ({{ getRelationName(table.col.type) }} {{ table.title || table.table_name }})
               </div>
             </div>
           </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
index 8ddefd56a2..c7169640dc 100644
--- a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
@@ -11,9 +11,7 @@ const emit = defineEmits(['update:value'])
 
 const vModel = useVModel(props, 'value', emit)
 
-const { isPg, isMysql } = useProject()
-
-const { setAdditionalValidations, validateInfos } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, validateInfos, isPg, isMysql } = useColumnCreateStoreOrThrow()
 
 let options = $ref<any[]>([])
 
diff --git a/packages/nc-gui/components/smartsheet/column/utils.ts b/packages/nc-gui/components/smartsheet/column/utils.ts
new file mode 100644
index 0000000000..6a6a253c8b
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/column/utils.ts
@@ -0,0 +1,9 @@
+const relationNames = {
+  mm: 'Many To Many',
+  hm: 'Has Many',
+  bt: 'Belongs To',
+} as const
+
+export function getRelationName(type: string) {
+  return relationNames[type as keyof typeof relationNames]
+}
diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index 08d4757a48..6cb89e6438 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -2,7 +2,12 @@
 import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
 import { ColumnInj, IsFormInj, IsKanbanInj, inject, provide, ref, toRef, useUIPermission } from '#imports'
 
-const props = defineProps<{ column: ColumnType & { meta: any }; required?: boolean | number; hideMenu?: boolean }>()
+interface Props {
+  column: ColumnType
+  required?: boolean | number
+  hideMenu?: boolean
+}
+const props = defineProps<Props>()
 
 const hideMenu = toRef(props, 'hideMenu')
 
diff --git a/packages/nc-gui/components/smartsheet/header/CellIcon.ts b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
index d550bdf77c..240689f238 100644
--- a/packages/nc-gui/components/smartsheet/header/CellIcon.ts
+++ b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
@@ -19,6 +19,7 @@ import {
   isJSON,
   isPercent,
   isPhoneNumber,
+  isPrimaryKey,
   isRating,
   isSet,
   isSingleSelect,
@@ -118,7 +119,9 @@ export default defineComponent({
 
     const column = inject(ColumnInj, columnMeta)
 
-    const { sqlUi } = useProject()
+    const { sqlUis } = useProject()
+
+    const sqlUi = ref(column.value?.base_id ? sqlUis.value[column.value?.base_id] : Object.values(sqlUis.value)[0])
 
     const abstractType = computed(() => column.value && sqlUi.value.getAbstractType(column.value))
 
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
index da12c52f3b..7283d420ab 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
@@ -124,7 +124,7 @@ const closeAddColumnDropdown = () => {
       <span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
     </a-tooltip>
 
-    <span v-if="isVirtualColRequired(column, meta.columns) || required" class="text-red-500">&nbsp;*</span>
+    <span v-if="isVirtualColRequired(column, meta?.columns || []) || required" class="text-red-500">&nbsp;*</span>
 
     <template v-if="!hideMenu">
       <div class="flex-1" />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue b/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
index bde75f2511..7a3f3a35a4 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-import { IsLockedInj, IsPublicInj, useKanbanViewStoreOrThrow, useMenuCloseOnEsc } from '#imports'
+import {
+  IsKanbanInj,
+  IsLockedInj,
+  IsPublicInj,
+  inject,
+  provide,
+  ref,
+  useKanbanViewStoreOrThrow,
+  useMenuCloseOnEsc,
+  useUIPermission,
+} from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue b/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
index 7c2826673a..ba0f44136d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
@@ -14,6 +14,7 @@ import {
   useI18n,
   useNuxtApp,
   useProject,
+  useSharedView,
   useSmartsheetStoreOrThrow,
   useUIPermission,
 } from '#imports'
@@ -38,6 +39,8 @@ const selectedView = inject(ActiveViewInj, ref())
 
 const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
 
+const { exportFile: sharedViewExportFile } = useSharedView()
+
 const isLocked = inject(IsLockedInj)
 
 const showWebhookDrawer = ref(false)
@@ -58,7 +61,6 @@ const exportFile = async (exportType: ExportTypes) => {
     while (!isNaN(offset) && offset > -1) {
       let res
       if (isPublicView.value) {
-        const { exportFile: sharedViewExportFile } = useSharedView()
         res = await sharedViewExportFile(fields.value, offset, exportType, responseType)
       } else {
         res = await $api.dbViewRow.export(
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 7d0440a3e5..6e56d64f81 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { TableType } from 'nocodb-sdk'
 import {
   ActiveViewInj,
   ReloadViewDataHookInj,
@@ -25,9 +26,9 @@ const searchDropdown = ref(null)
 onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
 
 const columns = computed(() =>
-  meta.value?.columns?.map((c) => ({
-    value: c.id,
-    label: c.title,
+  (meta.value as TableType)?.columns?.map((column) => ({
+    value: column.id,
+    label: column.title,
   })),
 )
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index c49310ea12..ce48d10fd0 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -40,6 +40,11 @@ const columnByID = computed(() =>
   }, {} as Record<string, ColumnType>),
 )
 
+const getColumnUidtByID = (key?: string) => {
+  if (!key) return ''
+  return columnByID.value[key]?.uidt || ''
+}
+
 watch(
   () => view.value?.id,
   (viewId) => {
@@ -74,7 +79,7 @@ useMenuCloseOnEsc(open)
         data-testid="nc-sorts-menu"
       >
         <div v-if="sorts?.length" class="sort-grid mb-2" @click.stop>
-          <template v-for="(sort, i) in sorts || []" :key="i">
+          <template v-for="(sort, i) of sorts" :key="i">
             <MdiCloseBox class="nc-sort-item-remove-btn text-grey self-center" small @click.stop="deleteSort(sort, i)" />
 
             <LazySmartsheetToolbarFieldListAutoCompleteDropdown
@@ -95,7 +100,7 @@ useMenuCloseOnEsc(open)
               @select="saveOrUpdate(sort, i)"
             >
               <a-select-option
-                v-for="(option, j) in getSortDirectionOptions(columnByID[sort.fk_column_id]?.uidt)"
+                v-for="(option, j) of getSortDirectionOptions(getColumnUidtByID(sort.fk_column_id))"
                 :key="j"
                 :value="option.value"
               >
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index 999ab2efc5..d182980b12 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -4,6 +4,7 @@ import {
   IsLockedInj,
   IsPublicInj,
   extractSdkResponseErrorMsg,
+  getViewIcon,
   inject,
   message,
   ref,
@@ -13,7 +14,6 @@ import {
   useProject,
   useSmartsheetStoreOrThrow,
   useUIPermission,
-  viewIcons,
 } from '#imports'
 import { LockType } from '~/lib'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
@@ -30,9 +30,11 @@ const isView = false
 
 const { $api, $e } = useNuxtApp()
 
-const selectedView = inject(ActiveViewInj)
+const { isSqlView } = useSmartsheetStoreOrThrow()
+
+const selectedView = inject(ActiveViewInj, ref())
 
-const isLocked = inject(IsLockedInj)
+const isLocked = inject(IsLockedInj, ref(false))
 
 const showWebhookDrawer = ref(false)
 
@@ -47,7 +49,7 @@ const { isUIAllowed } = useUIPermission()
 const { isSharedBase } = useProject()
 
 const Icon = computed(() => {
-  switch (selectedView?.value.lock_type) {
+  switch (selectedView.value?.lock_type) {
     case LockType.Personal:
       return MdiAccountIcon
     case LockType.Locked:
@@ -58,10 +60,12 @@ const Icon = computed(() => {
   }
 })
 
+const lockType = $computed(() => (selectedView.value?.lock_type as LockType) || LockType.Collaborative)
+
 async function changeLockType(type: LockType) {
   $e('a:grid:lockmenu', { lockType: type })
 
-  if (!selectedView?.value) return
+  if (!selectedView.value) return
 
   if (type === 'personal') {
     // Coming soon
@@ -79,8 +83,6 @@ async function changeLockType(type: LockType) {
   }
 }
 
-const { isSqlView } = useSmartsheetStoreOrThrow()
-
 const open = ref(false)
 
 useMenuCloseOnEsc(open)
@@ -92,9 +94,9 @@ useMenuCloseOnEsc(open)
       <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-2 items-center">
           <component
-            :is="viewIcons[selectedView?.type].icon"
+            :is="getViewIcon(selectedView?.type)?.icon"
             class="nc-view-icon group-hover:hidden"
-            :style="{ color: viewIcons[selectedView?.type].color }"
+            :style="{ color: getViewIcon(selectedView?.type)?.color }"
           />
 
           <span class="!text-sm font-weight-normal">
@@ -117,7 +119,7 @@ useMenuCloseOnEsc(open)
             >
               <template #title>
                 <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
-                  <LazySmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
+                  <LazySmartsheetToolbarLockType hide-tick :type="lockType" />
 
                   <MaterialSymbolsChevronRightRounded
                     class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
diff --git a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
index 1110093cec..e5333c988a 100644
--- a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
@@ -88,152 +88,158 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal
-    v-model:visible="showNewTokenModal"
-    :class="{ active: showNewTokenModal }"
-    :closable="false"
-    width="28rem"
-    centered
-    :footer="null"
-    wrap-class-name="nc-modal-generate-token"
-  >
-    <div class="relative flex flex-col h-full">
-      <a-button type="text" class="!absolute top-0 right-0 rounded-md -mt-2 -mr-3" @click="showNewTokenModal = false">
-        <template #icon>
-          <MaterialSymbolsCloseRounded class="flex mx-auto" />
-        </template>
-      </a-button>
-
-      <!-- Generate Token -->
-      <div class="flex flex-row justify-center w-full -mt-1 mb-3">
-        <a-typography-title :level="5">{{ $t('title.generateToken') }}</a-typography-title>
-      </div>
+  <div>
+    <a-modal
+      v-model:visible="showNewTokenModal"
+      :class="{ active: showNewTokenModal }"
+      :closable="false"
+      width="28rem"
+      centered
+      :footer="null"
+      wrap-class-name="nc-modal-generate-token"
+    >
+      <div class="relative flex flex-col h-full">
+        <a-button type="text" class="!absolute top-0 right-0 rounded-md -mt-2 -mr-3" @click="showNewTokenModal = false">
+          <template #icon>
+            <MaterialSymbolsCloseRounded class="flex mx-auto" />
+          </template>
+        </a-button>
 
-      <!-- Description -->
-      <a-form
-        ref="form"
-        :model="selectedTokenData"
-        name="basic"
-        layout="vertical"
-        class="flex flex-col justify-center space-y-6"
-        no-style
-        autocomplete="off"
-        @finish="generateToken"
-      >
-        <a-input v-model:value="selectedTokenData.description" :placeholder="$t('labels.description')" />
-
-        <!-- Generate -->
-        <div class="flex flex-row justify-center">
-          <a-button type="primary" html-type="submit">
-            {{ $t('general.generate') }}
-          </a-button>
+        <!-- Generate Token -->
+        <div class="flex flex-row justify-center w-full -mt-1 mb-3">
+          <a-typography-title :level="5">{{ $t('title.generateToken') }}</a-typography-title>
         </div>
-      </a-form>
-    </div>
-  </a-modal>
-
-  <a-modal
-    v-model:visible="showDeleteTokenModal"
-    :class="{ active: showDeleteTokenModal }"
-    :closable="false"
-    width="28rem"
-    centered
-    :footer="null"
-    wrap-class-name="nc-modal-delete-token"
-  >
-    <div class="flex flex-col h-full">
-      <div class="flex flex-row justify-center mt-2 text-center w-full text-base">This action will remove this API Token</div>
-
-      <div class="flex mt-6 justify-center space-x-2">
-        <a-button @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }} </a-button>
-        <a-button type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }} </a-button>
-      </div>
-    </div>
-  </a-modal>
-
-  <div class="flex flex-col px-10 mt-6">
-    <div class="flex flex-row justify-end">
-      <div class="flex flex-row space-x-1">
-        <a-button size="middle" type="text" @click="loadApiTokens()">
-          <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
-            <MdiReload class="text-gray-500" />
-            <div class="text-gray-500">{{ $t('general.reload') }}</div>
-          </div>
-        </a-button>
 
-        <!--        Add New Token -->
-        <a-button size="middle" type="primary" ghost @click="openNewTokenModal">
-          <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
-            <MdiPlus />
-            <div>{{ $t('activity.newToken') }}</div>
+        <!-- Description -->
+        <a-form
+          ref="form"
+          :model="selectedTokenData"
+          name="basic"
+          layout="vertical"
+          class="flex flex-col justify-center space-y-6"
+          no-style
+          autocomplete="off"
+          @finish="generateToken"
+        >
+          <a-input v-model:value="selectedTokenData.description" :placeholder="$t('labels.description')" />
+
+          <!-- Generate -->
+          <div class="flex flex-row justify-center">
+            <a-button type="primary" html-type="submit">
+              {{ $t('general.generate') }}
+            </a-button>
           </div>
-        </a-button>
+        </a-form>
       </div>
-    </div>
-
-    <div v-if="tokensInfo" class="w-full flex flex-col mt-2 px-1">
-      <div class="flex flex-row border-b-1 text-gray-600 text-xs pb-2 pt-2">
-        <div class="flex w-4/10 pl-2">{{ $t('labels.description') }}</div>
-        <div class="flex w-4/10 justify-center">{{ $t('labels.token') }}</div>
-        <div class="flex w-2/10 justify-end pr-2">{{ $t('labels.action') }}</div>
+    </a-modal>
+
+    <a-modal
+      v-model:visible="showDeleteTokenModal"
+      :closable="false"
+      width="28rem"
+      centered
+      :footer="null"
+      wrap-class-name="nc-modal-delete-token"
+    >
+      <div class="flex flex-col h-full">
+        <div class="flex flex-row justify-center mt-2 text-center w-full text-base">This action will remove this API Token</div>
+
+        <div class="flex mt-6 justify-center space-x-2">
+          <a-button @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }} </a-button>
+          <a-button type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }} </a-button>
+        </div>
       </div>
+    </a-modal>
+
+    <div class="flex flex-col px-10 mt-6">
+      <div class="flex flex-row justify-end">
+        <div class="flex flex-row space-x-1">
+          <a-button size="middle" type="text" @click="loadApiTokens()">
+            <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
+              <MdiReload class="text-gray-500" />
+              <div class="text-gray-500">{{ $t('general.reload') }}</div>
+            </div>
+          </a-button>
 
-      <div v-for="(item, index) in tokensInfo" :key="index" class="flex flex-col">
-        <div class="flex flex-row border-b-1 items-center px-2 py-2">
-          <div class="flex flex-row w-4/10 flex-wrap overflow-ellipsis">
-            {{ item.description }}
-          </div>
+          <!--        Add New Token -->
+          <a-button size="middle" type="primary" ghost @click="openNewTokenModal">
+            <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
+              <MdiPlus />
+              <div>{{ $t('activity.newToken') }}</div>
+            </div>
+          </a-button>
+        </div>
+      </div>
 
-          <div class="flex w-4/10 justify-center flex-wrap overflow-ellipsis">
-            <span v-if="item.show">{{ item.token }}</span>
-            <span v-else>****************************************</span>
-          </div>
+      <div v-if="tokensInfo" class="w-full flex flex-col mt-2 px-1">
+        <div class="flex flex-row border-b-1 text-gray-600 text-xs pb-2 pt-2">
+          <div class="flex w-4/10 pl-2">{{ $t('labels.description') }}</div>
+          <div class="flex w-4/10 justify-center">{{ $t('labels.token') }}</div>
+          <div class="flex w-2/10 justify-end pr-2">{{ $t('labels.action') }}</div>
+        </div>
 
-          <div class="flex flex-row w-2/10 justify-end">
-            <a-tooltip placement="bottom">
-              <template #title>
-                <span v-if="item.show"> {{ $t('general.hide') }} </span>
-                <span v-else> {{ $t('general.show') }} </span>
-              </template>
-
-              <a-button type="text" class="!rounded-md" @click="item.show = !item.show">
-                <template #icon>
-                  <MaterialSymbolsVisibilityOff v-if="item.show" class="flex mx-auto h-[1.1rem]" />
-                  <MaterialSymbolsVisibility v-else class="flex mx-auto h-[1rem]" />
+        <div v-for="(item, index) in tokensInfo" :key="index" class="flex flex-col">
+          <div class="flex flex-row border-b-1 items-center px-2 py-2">
+            <div class="flex flex-row w-4/10 flex-wrap overflow-ellipsis">
+              {{ item.description }}
+            </div>
+
+            <div class="flex w-4/10 justify-center flex-wrap overflow-ellipsis">
+              <span v-if="item.show">{{ item.token }}</span>
+              <span v-else>****************************************</span>
+            </div>
+
+            <div class="flex flex-row w-2/10 justify-end">
+              <a-tooltip placement="bottom">
+                <template #title>
+                  <span v-if="item.show"> {{ $t('general.hide') }} </span>
+                  <span v-else> {{ $t('general.show') }} </span>
                 </template>
-              </a-button>
-            </a-tooltip>
 
-            <a-tooltip placement="bottom">
-              <template #title> {{ $t('general.copy') }} </template>
+                <a-button type="text" class="!rounded-md" @click="item.show = !item.show">
+                  <template #icon>
+                    <MaterialSymbolsVisibilityOff v-if="item.show" class="flex mx-auto h-[1.1rem]" />
+                    <MaterialSymbolsVisibility v-else class="flex mx-auto h-[1rem]" />
+                  </template>
+                </a-button>
+              </a-tooltip>
 
-              <a-button type="text" class="!rounded-md" @click="copyToken(item.token)">
-                <template #icon>
-                  <MdiContentCopy class="flex mx-auto h-[1rem]" />
-                </template>
-              </a-button>
-            </a-tooltip>
-
-            <a-dropdown :trigger="['click']" class="flex" placement="bottomRight" overlay-class-name="nc-dropdown-api-token-mgmt">
-              <div class="flex flex-row items-center">
-                <a-button type="text" class="!px-0">
-                  <div class="flex flex-row items-center h-[1.2rem]">
-                    <IcBaselineMoreVert />
-                  </div>
+              <a-tooltip placement="bottom">
+                <template #title> {{ $t('general.copy') }} </template>
+
+                <a-button type="text" class="!rounded-md" @click="copyToken(item.token)">
+                  <template #icon>
+                    <MdiContentCopy class="flex mx-auto h-[1rem]" />
+                  </template>
                 </a-button>
-              </div>
-
-              <template #overlay>
-                <a-menu>
-                  <a-menu-item>
-                    <div class="flex flex-row items-center py-3 h-[1rem]" @click="openDeleteModal(item)">
-                      <MdiDeleteOutline class="flex" />
-                      <div class="text-xs pl-2">{{ $t('general.remove') }}</div>
+              </a-tooltip>
+
+              <a-dropdown
+                :trigger="['click']"
+                class="flex"
+                placement="bottomRight"
+                overlay-class-name="nc-dropdown-api-token-mgmt"
+              >
+                <div class="flex flex-row items-center">
+                  <a-button type="text" class="!px-0">
+                    <div class="flex flex-row items-center h-[1.2rem]">
+                      <IcBaselineMoreVert />
                     </div>
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
+                  </a-button>
+                </div>
+
+                <template #overlay>
+                  <a-menu>
+                    <a-menu-item>
+                      <div class="flex flex-row items-center py-3 h-[1rem]" @click="openDeleteModal(item)">
+                        <MdiDeleteOutline class="flex" />
+                        <div class="text-xs pl-2">{{ $t('general.remove') }}</div>
+                      </div>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/nc-gui/components/tabs/auth/UserManagement.vue b/packages/nc-gui/components/tabs/auth/UserManagement.vue
index de04d7e274..21eae314ae 100644
--- a/packages/nc-gui/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/UserManagement.vue
@@ -174,7 +174,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
 
   <div v-else class="flex flex-col w-full px-6">
     <LazyTabsAuthUserManagementUsersModal
-      :key="showUserModal"
+      :key="`${showUserModal}`"
       :show="showUserModal"
       :selected-user="selectedUser"
       @closed="showUserModal = false"
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index 24976c0bd8..0fa1d2fc81 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -21,7 +21,7 @@ import { ProjectRole } from '~/lib'
 
 interface Props {
   show: boolean
-  selectedUser?: User
+  selectedUser?: User | null
 }
 
 interface Users {
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index ca5943a4fb..770109fd9a 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -30,7 +30,8 @@ import {
 } from '#imports'
 import { TabType } from '~/lib'
 
-const { quickImportType, projectTemplate, importData, importColumns, importDataOnly, maxRowsToParse } = defineProps<Props>()
+const { quickImportType, projectTemplate, importData, importColumns, importDataOnly, maxRowsToParse, baseId } =
+  defineProps<Props>()
 
 const emit = defineEmits(['import'])
 
@@ -45,6 +46,7 @@ interface Props {
   importColumns: any[]
   importDataOnly: boolean
   maxRowsToParse: number
+  baseId: string
 }
 
 interface Option {
@@ -64,7 +66,9 @@ const { $api } = useNuxtApp()
 
 const { addTab } = useTabs()
 
-const { sqlUi, project, loadTables } = useProject()
+const { sqlUis, project, loadTables } = useProject()
+
+const sqlUi = ref(sqlUis.value[baseId] || Object.values(sqlUis.value)[0])
 
 const hasSelectColumn = ref<boolean[]>([])
 
@@ -395,7 +399,7 @@ async function importTemplate() {
     try {
       isImporting.value = true
 
-      const tableName = meta.value?.title
+      const tableId = meta.value?.id
       const projectName = project.value.title!
 
       await Promise.all(
@@ -427,15 +431,17 @@ async function importTemplate() {
                         input = null
                       }
                     } else if (v.uidt === UITypes.Date) {
-                      input = parseStringDate(input, v.meta.date_format)
+                      if (input) {
+                        input = parseStringDate(input, v.meta.date_format)
+                      }
                     }
                     res[col.destCn] = input
                   }
                   return res
                 }, {}),
               )
-              await $api.dbTableRow.bulkCreate('noco', projectName, tableName!, batchData)
-              updateImportTips(projectName, tableName!, progress, total)
+              await $api.dbTableRow.bulkCreate('noco', projectName, tableId!, batchData)
+              updateImportTips(projectName, tableId!, progress, total)
               progress += batchData.length
             }
           })(key),
@@ -495,24 +501,24 @@ async function importTemplate() {
             }
           }
         }
-
-        const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
+        const createdTable = await $api.base.tableCreate(project?.value?.id as string, baseId as string, {
           table_name: table.table_name,
           // leave title empty to get a generated one based on table_name
           title: '',
           columns: table.columns || [],
         })
-        table.title = tableMeta.title
+        table.id = createdTable.id
+        table.title = createdTable.title
 
         // open the first table after import
         if (tab.id === '' && tab.title === '') {
-          tab.id = tableMeta.id as string
-          tab.title = tableMeta.title as string
+          tab.id = createdTable.id as string
+          tab.title = createdTable.title as string
         }
 
         // set primary value
-        if (tableMeta?.columns?.[0]?.id) {
-          await $api.dbTableColumn.primaryColumnSet(tableMeta.columns[0].id as string)
+        if (createdTable?.columns?.[0]?.id) {
+          await $api.dbTableColumn.primaryColumnSet(createdTable.columns[0].id as string)
         }
       }
       // bulk insert data
@@ -532,7 +538,7 @@ async function importTemplate() {
                 for (let i = 0; i < data.length; i += offset) {
                   updateImportTips(projectName, tableMeta.title, progress, total)
                   const batchData = remapColNames(data.slice(i, i + offset), tableMeta.columns)
-                  await $api.dbTableRow.bulkCreate('noco', projectName, tableMeta.title, batchData)
+                  await $api.dbTableRow.bulkCreate('noco', projectName, tableMeta.id, batchData)
                   progress += batchData.length
                 }
                 updateImportTips(projectName, tableMeta.title, total, total)
@@ -693,7 +699,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
                   size="large"
                   hide-details
                   :bordered="false"
-                  @click="$event.stopPropagation()"
+                  @click.stop
                   @blur="handleEditableTnChange(tableIdx)"
                   @keydown.enter="handleEditableTnChange(tableIdx)"
                 />
@@ -749,14 +755,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
               <template #bodyCell="{ column, record }">
                 <template v-if="column.key === 'column_name'">
                   <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
-                    <a-input
-                      :ref="
-                        (el) => {
-                          inputRefs[record.key] = el
-                        }
-                      "
-                      v-model:value="record.column_name"
-                    />
+                    <a-input :ref="(el: HTMLInputElement) => (inputRefs[record.key] = el)" v-model:value="record.column_name" />
                   </a-form-item>
                 </template>
 
diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index f0afb25e59..87e39e2458 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -10,7 +10,7 @@ const cellValue = inject(CellValueInj)
 
 const { isPg } = useProject()
 
-const result = computed(() => (isPg.value ? handleTZ(cellValue?.value) : cellValue?.value))
+const result = computed(() => (isPg(column.value.base_id) ? handleTZ(cellValue?.value) : cellValue?.value))
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
 
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 24e73d3dfc..8dabf9d4cb 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { ColumnType } from 'nocodb-sdk'
+import type { Row } from '~/lib'
 import {
   ColumnInj,
   Empty,
@@ -27,7 +28,7 @@ const isForm = inject(IsFormInj, ref(false))
 
 const isPublic = inject(IsPublicInj, ref(false))
 
-const column = inject(ColumnInj)
+const column = inject(ColumnInj, ref())
 
 const readonly = inject(ReadonlyInj, ref(false))
 
@@ -81,6 +82,8 @@ const expandedFormDlg = ref(false)
 
 const expandedFormRow = ref()
 
+const colTitle = $computed(() => column.value?.title || '')
+
 /** reload children list whenever cell value changes and list is visible */
 watch(
   () => props.cellValue,
@@ -88,6 +91,12 @@ watch(
     if (!isNew.value && vModel.value) loadChildrenList()
   },
 )
+
+const onClick = (row: Row) => {
+  if (readonly.value) return
+  expandedFormRow.value = row
+  expandedFormDlg.value = true
+}
 </script>
 
 <template>
@@ -119,25 +128,19 @@ watch(
           @click="emit('attachRecord')"
         >
           <div class="flex items-center gap-1">
-            <MdiLinkVariantRemove class="text-xs" type="primary" @click="unlinkRow(row)" />
+            <MdiLinkVariant class="text-xs" type="primary" />
             Link to '{{ relatedTableMeta.title }}'
           </div>
         </a-button>
       </div>
 
-      <template v-if="(isNew && state?.[column?.title]?.length) || childrenList?.pageInfo?.totalRows">
+      <template v-if="(isNew && state?.[colTitle]?.length) || childrenList?.pageInfo?.totalRows">
         <div class="flex-1 overflow-auto min-h-0 scrollbar-thin-dull px-12 cursor-pointer">
           <a-card
-            v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
+            v-for="(row, i) of childrenList?.list ?? state?.[colTitle] ?? []"
             :key="i"
             class="!my-4 hover:(!bg-gray-200/50 shadow-md)"
-            @click="
-              () => {
-                if (readonly) return
-                expandedFormRow = row
-                expandedFormDlg = true
-              }
-            "
+            @click="onClick(row)"
           >
             <div class="flex items-center">
               <div class="flex-1 overflow-hidden min-w-0">
@@ -169,7 +172,7 @@ watch(
             v-model:page-size="childrenListPagination.size"
             class="mt-2 mx-auto"
             size="small"
-            :total="childrenList.pageInfo.totalRows"
+            :total="childrenList?.pageInfo.totalRows"
             show-less-items
           />
         </div>
diff --git a/packages/nc-gui/components/webhook/List.vue b/packages/nc-gui/components/webhook/List.vue
index 8c9900c035..a07507f15c 100644
--- a/packages/nc-gui/components/webhook/List.vue
+++ b/packages/nc-gui/components/webhook/List.vue
@@ -52,7 +52,7 @@ onMounted(() => {
 <template>
   <div class="">
     <div class="mb-2">
-      <div class="float-left font-bold text-xl mt-2 mb-4">{{ meta.title }} : Webhooks</div>
+      <div class="float-left font-bold text-xl mt-2 mb-4">{{ meta?.title }} : Webhooks</div>
 
       <a-button
         v-e="['c:webhook:add']"
diff --git a/packages/nc-gui/composables/useColumnCreateStore.ts b/packages/nc-gui/composables/useColumnCreateStore.ts
index c86fe2aa4f..4a23f1e013 100644
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui/composables/useColumnCreateStore.ts
@@ -2,6 +2,7 @@ import clone from 'just-clone'
 import type { ColumnReqType, ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
+import type { RuleObject } from 'ant-design-vue/es/form'
 import {
   Form,
   computed,
@@ -20,10 +21,13 @@ const useForm = Form.useForm
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
+interface ValidationsObj {
+  [key: string]: RuleObject[]
+}
+
 const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
   (meta: Ref<TableType | undefined>, column: Ref<ColumnType | undefined>) => {
-    const { sqlUi } = useProject()
-
+    const { sqlUis, isMysql: isMysqlFunc, isPg: isPgFunc, isMssql: isMssqlFunc } = useProject()
     const { $api } = useNuxtApp()
 
     const { getMeta } = useMetas()
@@ -32,14 +36,22 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
     const { $e } = useNuxtApp()
 
-    const isEdit = computed(() => !!column.value?.id)
+    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : Object.values(sqlUis.value)[0])
+
+    const isEdit = computed(() => !!column?.value?.id)
+
+    const isMysql = computed(() => isMysqlFunc(meta.value?.base_id ? meta.value?.base_id : Object.keys(sqlUis.value)[0]))
+
+    const isPg = computed(() => isPgFunc(meta.value?.base_id ? meta.value?.base_id : Object.keys(sqlUis.value)[0]))
+
+    const isMssql = computed(() => isMssqlFunc(meta.value?.base_id ? meta.value?.base_id : Object.keys(sqlUis.value)[0]))
 
     const idType = null
 
-    const additionalValidations = ref<Record<string, any>>({})
+    const additionalValidations = ref<ValidationsObj>({})
 
-    const setAdditionalValidations = (validations: Record<string, any>) => {
-      additionalValidations.value = validations
+    const setAdditionalValidations = (validations: ValidationsObj) => {
+      additionalValidations.value = { ...additionalValidations.value, ...validations }
     }
 
     const formState = ref<Record<string, any>>({
@@ -267,6 +279,9 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       isEdit,
       column,
       sqlUi,
+      isMssql,
+      isPg,
+      isMysql,
     }
   },
 )
diff --git a/packages/nc-gui/composables/useExpandedFormDetached/index.ts b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
index 2aef11da08..2e75a723da 100644
--- a/packages/nc-gui/composables/useExpandedFormDetached/index.ts
+++ b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
@@ -4,7 +4,7 @@ import type { Row } from '~/lib'
 
 interface UseExpandedFormDetachedProps {
   'isOpen'?: boolean
-  'row': Row | null
+  'row': Row
   'state'?: Record<string, any> | null
   'meta': TableType
   'loadRow'?: boolean
diff --git a/packages/nc-gui/composables/useGlobal/state.ts b/packages/nc-gui/composables/useGlobal/state.ts
index 9aecfb5c24..abd75a133f 100644
--- a/packages/nc-gui/composables/useGlobal/state.ts
+++ b/packages/nc-gui/composables/useGlobal/state.ts
@@ -84,8 +84,10 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     set: (val) => (storage.value.token = val),
   })
 
+  const config = useRuntimeConfig()
+
   const appInfo = ref<AppInfo>({
-    ncSiteUrl: BASE_FALLBACK_URL,
+    ncSiteUrl: config.public.ncBackendUrl || BASE_FALLBACK_URL,
     authType: 'jwt',
     connectToExternalDB: false,
     defaultLimit: 0,
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index 3e7ad5a304..902718719e 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -94,7 +94,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     }
 
     const relatedTablePrimaryValueProp = computed(() => {
-      return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+      return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title || ''
     })
 
     const relatedTablePrimaryKeyProps = computed(() => {
diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 478aa51b17..5f97cc7434 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -1,4 +1,4 @@
-import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk'
+import type { BaseType, OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import { SqlUiFactory } from 'nocodb-sdk'
 import { isString } from '@vueuse/core'
 import {
@@ -35,14 +35,16 @@ const [setup, use] = useInjectionState(() => {
   const projectLoadedHook = createEventHook<ProjectType>()
 
   const project = ref<ProjectType>({})
-
+  const bases = computed<BaseType[]>(() => project.value?.bases || [])
   const tables = ref<TableType[]>([])
 
   const projectMetaInfo = ref<ProjectMetaInfo | undefined>()
 
   const lastOpenedViewMap = ref<Record<string, string>>({})
 
-  const projectId = computed(() => route.params.projectId as string)
+  let forcedProjectId: string | undefined
+
+  const projectId = computed(() => forcedProjectId || (route.params.projectId as string))
 
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
@@ -55,15 +57,35 @@ const [setup, use] = useInjectionState(() => {
     }
   })
 
-  const projectBaseType = $computed(() => project.value?.bases?.[0]?.type || ClientType.MYSQL)
+  const sqlUis = computed(() => {
+    const temp: Record<string, any> = {}
+    for (const base of bases.value) {
+      if (base.id) {
+        temp[base.id] = SqlUiFactory.create({ client: base.type }) as Exclude<
+          ReturnType<typeof SqlUiFactory['create']>,
+          typeof OracleUi
+        >
+      }
+    }
+    return temp
+  })
 
-  const sqlUi = computed(
-    () => SqlUiFactory.create({ client: projectBaseType }) as Exclude<ReturnType<typeof SqlUiFactory['create']>, typeof OracleUi>,
-  )
+  function getBaseType(baseId?: string) {
+    return bases.value.find((base) => base.id === baseId)?.type || ClientType.MYSQL
+  }
+
+  function isMysql(baseId?: string) {
+    return ['mysql', ClientType.MYSQL].includes(getBaseType(baseId))
+  }
+
+  function isMssql(baseId?: string) {
+    return getBaseType(baseId) === 'mssql'
+  }
+
+  function isPg(baseId?: string) {
+    return getBaseType(baseId) === 'pg'
+  }
 
-  const isMysql = computed(() => ['mysql', ClientType.MYSQL].includes(projectBaseType))
-  const isMssql = computed(() => projectBaseType === 'mssql')
-  const isPg = computed(() => projectBaseType === 'pg')
   const isSharedBase = computed(() => projectType === 'base')
 
   async function loadProjectMetaInfo(force?: boolean) {
@@ -78,11 +100,14 @@ const [setup, use] = useInjectionState(() => {
         includeM2M: includeM2M.value,
       })
 
-      if (tablesResponse.list) tables.value = tablesResponse.list
+      if (tablesResponse.list) {
+        tables.value = tablesResponse.list.filter((table) => bases.value.find((base) => base.id === table.base_id)?.enabled)
+      }
     }
   }
 
-  async function loadProject(withTheme = true) {
+  async function loadProject(withTheme = true, forcedId?: string) {
+    if (forcedId) forcedProjectId = forcedId
     if (projectType === 'base') {
       try {
         const baseData = await api.public.sharedBaseGet(route.params.projectId as string)
@@ -151,6 +176,7 @@ const [setup, use] = useInjectionState(() => {
 
   return {
     project,
+    bases,
     tables,
     loadProjectRoles,
     loadProject,
@@ -159,7 +185,7 @@ const [setup, use] = useInjectionState(() => {
     isMysql,
     isMssql,
     isPg,
-    sqlUi,
+    sqlUis,
     isSharedBase,
     loadProjectMetaInfo,
     projectMetaInfo,
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 036b2fd02f..e3f371c987 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -43,6 +43,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
   const { metas, setMeta } = useMetas()
 
+  const { loadProject } = useProject()
+
   const { t } = useI18n()
 
   const formState = ref<Record<string, any>>({})
@@ -84,6 +86,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
       await setMeta(viewMeta.model)
 
+      await loadProject(true, viewMeta.project_id)
+
       const relatedMetas = { ...viewMeta.relatedMetas }
 
       Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
diff --git a/packages/nc-gui/composables/useSharedView.ts b/packages/nc-gui/composables/useSharedView.ts
index c28df9ac7e..b0ddc867db 100644
--- a/packages/nc-gui/composables/useSharedView.ts
+++ b/packages/nc-gui/composables/useSharedView.ts
@@ -17,6 +17,8 @@ export function useSharedView() {
 
   const { appInfo } = $(useGlobal())
 
+  const { loadProject } = useProject()
+
   const appInfoDefaultLimit = appInfo.defaultLimit || 25
 
   const paginationData = useState<PaginatedType>('paginationData', () => ({ page: 1, pageSize: appInfoDefaultLimit }))
@@ -71,6 +73,8 @@ export function useSharedView() {
 
     await setMeta(viewMeta.model)
 
+    await loadProject(true, viewMeta.project_id)
+
     const relatedMetas = { ...viewMeta.relatedMetas }
     Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
   }
@@ -103,7 +107,7 @@ export function useSharedView() {
     const page = paginationData.value.page || 1
     const pageSize = paginationData.value.pageSize || appInfoDefaultLimit
 
-    const data = await $api.public.groupedDataList(
+    return await $api.public.groupedDataList(
       sharedView.value.uuid!,
       columnId,
       {
@@ -118,7 +122,6 @@ export function useSharedView() {
         },
       },
     )
-    return data
   }
 
   const exportFile = async (
@@ -126,7 +129,7 @@ export function useSharedView() {
     offset: number,
     type: ExportTypes.EXCEL | ExportTypes.CSV,
     responseType: 'base64' | 'blob',
-    { sortsArr, filtersArr }: { sortsArr: SortType[]; filtersArr: FilterType[] },
+    { sortsArr, filtersArr }: { sortsArr: SortType[]; filtersArr: FilterType[] } = { sortsArr: [], filtersArr: [] },
   ) => {
     return await $api.public.csvExport(sharedView.value!.uuid!, type, {
       format: responseType,
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index b4de1ce736..a0982e4b66 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -13,8 +13,9 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     initialFilters?: Ref<FilterType[]>,
   ) => {
     const { $api } = useNuxtApp()
+    const { sqlUis } = useProject()
 
-    const { sqlUi } = useProject()
+    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : Object.values(sqlUis.value)[0])
 
     const cellRefs = ref<HTMLTableDataCellElement[]>([])
 
@@ -47,7 +48,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     })
 
     const isSqlView = computed(() => (meta.value as TableType)?.type === 'view')
-    const sorts = ref<SortType[]>(unref(initialSorts) ?? [])
+    const sorts = ref<Required<SortType>[]>((unref(initialSorts) as Required<SortType>[]) ?? [])
     const nestedFilters = ref<FilterType[]>(unref(initialFilters) ?? [])
 
     return {
diff --git a/packages/nc-gui/composables/useTable.ts b/packages/nc-gui/composables/useTable.ts
index dbe2a05bad..6b9368c0c3 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: '',
@@ -32,8 +32,9 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
   const { loadTables } = useProject()
 
   const { closeTab } = useTabs()
+  const { sqlUis, project, tables } = useProject()
 
-  const { sqlUi, project, tables } = useProject()
+  const sqlUi = computed(() => (baseId && sqlUis.value[baseId] ? sqlUis.value[baseId] : Object.values(sqlUis.value)[0]))
 
   const createTable = async () => {
     if (!sqlUi?.value) return
@@ -48,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,
       })
@@ -62,7 +63,7 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
   watch(
     () => table.title,
     (title) => {
-      table.table_name = `${project?.value?.prefix || ''}${title}`
+      table.table_name = `${title}`
     },
   )
 
diff --git a/packages/nc-gui/composables/useTabs.ts b/packages/nc-gui/composables/useTabs.ts
index cf7c3492d4..d08b322ec8 100644
--- a/packages/nc-gui/composables/useTabs.ts
+++ b/packages/nc-gui/composables/useTabs.ts
@@ -17,7 +17,7 @@ const [setup, use] = useInjectionState(() => {
 
   const router = useRouter()
 
-  const { tables } = useProject()
+  const { bases, tables } = useProject()
 
   const projectType = $computed(() => route.params.projectType as string)
 
@@ -29,14 +29,22 @@ const [setup, use] = useInjectionState(() => {
       if (routeName.startsWith('projectType-projectId-index-index-type-title-viewTitle') && tables.value.length) {
         const tab: TabItem = { type: route.params.type as TabType, title: route.params.title as string }
 
-        const currentTable = tables.value.find((t) => t.title === tab.title)
+        const currentTable = tables.value.find((t) => t.id === tab.title || t.title === tab.title)
 
         if (!currentTable) return -1
 
+        const currentBase = bases.value.find((b) => b.id === currentTable.base_id)
+
         tab.id = currentTable.id
 
         let index = tabs.value.findIndex((t) => t.id === tab.id)
 
+        tab.title = currentTable.title
+
+        // append base alias to tab title if duplicate titles exist on other bases
+        if (tables.value.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
+          tab.title = `${tab.title}${currentBase?.alias ? ` (${currentBase.alias})` : ``}`
+
         if (index === -1) {
           tab.sortsState = tab.sortsState || new Map()
           tab.filterState = tab.filterState || new Map()
@@ -81,6 +89,13 @@ const [setup, use] = useInjectionState(() => {
     }
     // if tab not found add it
     else {
+      const currentTable = tables.value.find((t) => t.id === tabMeta.id || t.title === tabMeta.id)
+      const currentBase = bases.value.find((b) => b.id === currentTable?.base_id)
+
+      // append base alias to tab title if duplicate titles exist on other bases
+      if (tables.value.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
+        tabMeta.title = `${tabMeta.title}${currentBase?.alias ? ` (${currentBase.alias})` : ``}`
+
       tabs.value = [...(tabs.value || []), tabMeta]
       activeTabIndex.value = tabs.value.length - 1
     }
@@ -111,13 +126,9 @@ const [setup, use] = useInjectionState(() => {
   function navigateToTab(tab: TabItem) {
     switch (tab.type) {
       case TabType.TABLE:
-        return navigateTo(
-          `/${projectType}/${route.params.projectId}/table/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`,
-        )
+        return navigateTo(`/${projectType}/${route.params.projectId}/table/${tab?.id}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
       case TabType.VIEW:
-        return navigateTo(
-          `/${projectType}/${route.params.projectId}/view/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`,
-        )
+        return navigateTo(`/${projectType}/${route.params.projectId}/view/${tab?.id}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
       case TabType.AUTH:
         return navigateTo(`/${projectType}/${route.params.projectId}/auth`)
     }
@@ -131,10 +142,10 @@ const [setup, use] = useInjectionState(() => {
 
       Object.assign(tab, newTabItemProps)
 
-      if (isActive && tab.title)
+      if (isActive && tab.id)
         router.replace({
           params: {
-            title: tab.title,
+            title: tab.id,
           },
         })
     }
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 5cbff053fa..83bd827ecd 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -31,3 +31,4 @@ export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injecti
 export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('shared-view-password-injection')
 export const CellUrlDisableOverlayInj: InjectionKey<Ref<boolean>> = Symbol('cell-url-disable-url')
 export const DropZoneRef: InjectionKey<Ref<Element | undefined>> = Symbol('drop-zone-ref')
+export const ToggleDialogInj: InjectionKey<Function> = Symbol('toggle-dialog-injection')
diff --git a/packages/nc-gui/lang/de.json b/packages/nc-gui/lang/de.json
index 20b037afbf..7304e360f8 100644
--- a/packages/nc-gui/lang/de.json
+++ b/packages/nc-gui/lang/de.json
@@ -16,7 +16,7 @@
     "cancel": "Abbrechen",
     "submit": "Übertragen",
     "create": "Erstellen",
-    "duplicate": "Duplicate",
+    "duplicate": "Duplizieren",
     "insert": "Einfügen",
     "delete": "Löschen",
     "update": "Aktualisieren",
@@ -69,12 +69,12 @@
     "betaNote": "Diese Funktion befindet sich derzeit in der Beta.",
     "moreInfo": "Mehr Informationen können hier gefunden werden",
     "logs": "Protokolle",
-    "groupingField": "Grouping Field",
-    "insertAfter": "Insert After",
-    "insertBefore": "Insert Before",
-    "hideField": "Hide Field",
-    "sortAsc": "Sort Ascending",
-    "sortDesc": "Sort Descending"
+    "groupingField": "Gruppierungsfeld",
+    "insertAfter": "danach einfügen",
+    "insertBefore": "davor einfügen",
+    "hideField": "Feld ausblenden",
+    "sortAsc": "Aufsteigend sortieren",
+    "sortDesc": "Absteigend sortieren"
   },
   "objects": {
     "project": "Projekt",
@@ -205,10 +205,10 @@
     "quickImport": "Schnell Importieren",
     "advancedSettings": "Erweiterte Einstellungen",
     "codeSnippet": "Code Ausschnitt",
-    "keyboardShortcut": "Keyboard Shortcuts"
+    "keyboardShortcut": "Tastenkürzel"
   },
   "labels": {
-    "createdBy": "Created By",
+    "createdBy": "Erstellt von",
     "notifyVia": "Benachrichtigen mit",
     "projName": "Projektname",
     "tableName": "Tabellenname",
@@ -247,8 +247,8 @@
     "created": "Erstellt",
     "sqlOutput": "SQL-Ausgabe",
     "addOption": "Option hinzufügen",
-    "qrCodeValueColumn": "Column with QR code value",
-    "qrCodeValueTooLong": "Too many characters for a QR code",
+    "qrCodeValueColumn": "Spalte mit QR-Code",
+    "qrCodeValueTooLong": "Zu viele Zeichen für einen QR-Code",
     "aggregateFunction": "Globale Funktion",
     "dbCreateIfNotExists": "Datenbank: Erstellen, falls nicht vorhanden",
     "clientKey": "Client-Schlüssel",
@@ -291,24 +291,24 @@
     "importAttachmentColumns": "Import Attachment Columns",
     "importFormulaColumns": "Import Formula Columns",
     "noData": "Keine Daten",
-    "goToDashboard": "Go to Dashboard",
-    "importing": "Importing",
+    "goToDashboard": "Zum Dashboard gehen",
+    "importing": "Wird importiert",
     "flattenNested": "Flatten Nested",
     "downloadAllowed": "Download erlaubt",
     "weAreHiring": "Wir stellen ein!",
     "primaryKey": "Primärschlüssel",
     "hasMany": "hat viele",
     "belongsTo": "gehört zu",
-    "manyToMany": "have many to many relation",
-    "extraConnectionParameters": "Extra connection parameters",
+    "manyToMany": "haben M:N-Beziehnungen",
+    "extraConnectionParameters": "Zusätzliche Verbindungsparameter",
     "commentsOnly": "Nur Kommentare",
     "documentation": "Dokumentation",
     "subscribeNewsletter": "Abonnieren Sie unseren wöchentlichen Newsletter",
-    "signUpWithGoogle": "Sign up with Google",
-    "signInWithGoogle": "Sign in with Google",
+    "signUpWithGoogle": "Mit Google anmelden",
+    "signInWithGoogle": "Mit Google einloggen",
     "agreeToTos": "Mit Ihrer Anmeldung stimmen Sie den allgemeinen Nutzungsbedingungen zu",
     "welcomeToNc": "Willkommen bei NocoDB!",
-    "inviteOnlySignup": "Allow signup only using invite url"
+    "inviteOnlySignup": "Anmeldung nur über Einladungs-URL zulassen"
   },
   "activity": {
     "createProject": "Projekt erstellen",
@@ -353,7 +353,7 @@
     "invite": "Einladen",
     "inviteMore": "Mehr einladen",
     "inviteTeam": "Team einladen",
-    "inviteUser": "Invite User",
+    "inviteUser": "Benutzer einladen",
     "inviteToken": "Token einladen",
     "newUser": "Neuer Benutzer",
     "editUser": "Benutzer bearbeiten",
@@ -376,8 +376,8 @@
     "setPrimary": "Als Primärwert festlegen",
     "addRow": "Neue Zeile hinzufügen",
     "saveRow": "Zeile speichern",
-    "saveAndExit": "Save & Exit",
-    "saveAndStay": "Save & Stay",
+    "saveAndExit": "Speichern & Verlassen",
+    "saveAndStay": "Speichern & Bleiben",
     "insertRow": "Neue Zeile einfügen",
     "deleteRow": "Zeile löschen",
     "deleteSelectedRow": "Ausgewählte Zeilen löschen",
@@ -421,9 +421,9 @@
     "editConnJson": "Verbindung JSON bearbeiten",
     "sponsorUs": "Sponsor uns",
     "sendEmail": "E-MAIL SENDEN",
-    "addUserToProject": "Add user to project",
-    "getApiSnippet": "Get API Snippet",
-    "clearCell": "Clear cell",
+    "addUserToProject": "Benutzer zum Projekt hinzufügen",
+    "getApiSnippet": "zeige API Snippet",
+    "clearCell": "Zelle leeren",
     "addFilterGroup": "Add Filter Group",
     "linkRecord": "Link record",
     "addNewRecord": "Add new record",
@@ -492,7 +492,7 @@
     "defaultValue": "Standardwert",
     "filterByEmail": "Filtern nach E-Mail",
     "filterQuery": "Filter-Abfrage",
-    "selectField": "Select field"
+    "selectField": "Feld wählen"
   },
   "msg": {
     "warning": {
@@ -668,13 +668,13 @@
       "rowUpdateFailed": "Row update failed",
       "deleteRowFailed": "Fehler beim Löschen der Zeile",
       "setFormDataFailed": "Failed to set form data",
-      "formViewUpdateFailed": "Failed to update form view",
-      "tableNameRequired": "Table name is required",
-      "nameShouldStartWithAnAlphabetOr_": "Name should start with an alphabet or _",
-      "followingCharactersAreNotAllowed": "Following characters are not allowed",
-      "columnNameRequired": "Column name is required",
+      "formViewUpdateFailed": "Fehler beim Aktualisieren der Formularansicht",
+      "tableNameRequired": "Tabellenname ist erforderlich",
+      "nameShouldStartWithAnAlphabetOr_": "Name muss mit einem Buchstaben oder _ beginnen",
+      "followingCharactersAreNotAllowed": "Folgende Zeichen sind nicht erlaubt",
+      "columnNameRequired": "Spaltenname ist erforderlich",
       "projectNameExceeds50Characters": "Projektname überschreitet 50 Zeichen",
-      "projectNameCannotStartWithSpace": "Project name cannot start with space",
+      "projectNameCannotStartWithSpace": "Projektname darf nicht mit einem Leerzeichen beginnen",
       "requiredField": "Pflichtfeld",
       "ipNotAllowed": "IP nicht erlaubt",
       "targetFileIsNotAnAcceptedFileType": "Target file is not an accepted file type",
diff --git a/packages/nc-gui/lang/fr.json b/packages/nc-gui/lang/fr.json
index 8af806bd15..f9b4a99fa9 100644
--- a/packages/nc-gui/lang/fr.json
+++ b/packages/nc-gui/lang/fr.json
@@ -248,7 +248,7 @@
     "sqlOutput": "Sortie SQL",
     "addOption": "Ajouter une option",
     "qrCodeValueColumn": "Column with QR code value",
-    "qrCodeValueTooLong": "Too many characters for a QR code",
+    "qrCodeValueTooLong": "Trop de caractères pour un code QR",
     "aggregateFunction": "Fonction agrégée",
     "dbCreateIfNotExists": "Base de données : la créer si elle n'existe pas",
     "clientKey": "Clé client",
@@ -276,11 +276,11 @@
     "childColumn": "Colonne enfant",
     "onUpdate": "Mise à jour en cours",
     "onDelete": "Suppression en cours",
-    "account": "Account",
+    "account": "Compte",
     "language": "Language",
     "primaryColor": "Primary Color",
     "accentColor": "Accent Color",
-    "customTheme": "Custom Theme",
+    "customTheme": "Thème personnalisé",
     "requestDataSource": "Request a data source you need?",
     "apiKey": "Clé d'API",
     "sharedBase": "Shared Base",
@@ -304,8 +304,8 @@
     "commentsOnly": "Comments only",
     "documentation": "Documentation",
     "subscribeNewsletter": "Subscribe to our weekly newsletter",
-    "signUpWithGoogle": "Sign up with Google",
-    "signInWithGoogle": "Sign in with Google",
+    "signUpWithGoogle": "S’enregistrer avec Google",
+    "signInWithGoogle": "Se connecter avec Google",
     "agreeToTos": "By signing up, you agree to the Terms of Service",
     "welcomeToNc": "Welcome to NocoDB!",
     "inviteOnlySignup": "Allow signup only using invite url"
diff --git a/packages/nc-gui/lang/ja.json b/packages/nc-gui/lang/ja.json
index c07195ef1c..a9cab22389 100644
--- a/packages/nc-gui/lang/ja.json
+++ b/packages/nc-gui/lang/ja.json
@@ -16,7 +16,7 @@
     "cancel": "キャンセル",
     "submit": "送信",
     "create": "作成",
-    "duplicate": "Duplicate",
+    "duplicate": "複製",
     "insert": "挿入",
     "delete": "削除",
     "update": "更新",
@@ -56,25 +56,25 @@
     "notification": "通知",
     "reference": "リファレンス",
     "function": "関数",
-    "confirm": "Confirm",
-    "generate": "Generate",
-    "copy": "Copy",
+    "confirm": "確認",
+    "generate": "生成",
+    "copy": "コピー",
     "misc": "Miscellaneous",
     "lock": "Lock",
     "unlock": "Unlock",
-    "credentials": "Credentials",
-    "help": "Help",
+    "credentials": "認証情報",
+    "help": "ヘルプ",
     "questions": "Questions",
     "reachOut": "Reach out here",
-    "betaNote": "This feature is currently in beta.",
+    "betaNote": "この機能はまだベータ版です",
     "moreInfo": "More information can be found here",
-    "logs": "Logs",
-    "groupingField": "Grouping Field",
-    "insertAfter": "Insert After",
-    "insertBefore": "Insert Before",
+    "logs": "ログ",
+    "groupingField": "グループ フィールド",
+    "insertAfter": "後に挿入",
+    "insertBefore": "前に挿入",
     "hideField": "Hide Field",
-    "sortAsc": "Sort Ascending",
-    "sortDesc": "Sort Descending"
+    "sortAsc": "昇順",
+    "sortDesc": "降順"
   },
   "objects": {
     "project": "プロジェクト",
@@ -113,7 +113,7 @@
       "orgLevelCreator": "Organization Level Creator",
       "orgLevelViewer": "Organization Level Viewer"
     },
-    "sqlVIew": "SQL View"
+    "sqlVIew": "SQL ビュー"
   },
   "datatype": {
     "ID": "ID",
@@ -195,17 +195,17 @@
     "headLogin": "ログイン | NocoDB",
     "resetPassword": "パスワードをリセットする",
     "teamAndSettings": "チームと設定",
-    "apiDocs": "API Docs",
-    "importFromAirtable": "Import From Airtable",
-    "generateToken": "Generate Token",
+    "apiDocs": "API ドキュメント",
+    "importFromAirtable": "Airtable からインポート",
+    "generateToken": "トークンを生成",
     "APIsAndSupport": "APIとサポート",
-    "helpCenter": "Help center",
-    "swaggerDocumentation": "Swagger Documentation",
+    "helpCenter": "ヘルプセンター",
+    "swaggerDocumentation": "Swagger ドキュメント",
     "quickImportFrom": "Quick Import From",
     "quickImport": "Quick Import",
-    "advancedSettings": "Advanced Settings",
-    "codeSnippet": "Code Snippet",
-    "keyboardShortcut": "Keyboard Shortcuts"
+    "advancedSettings": "詳細設定",
+    "codeSnippet": "コードスニペット",
+    "keyboardShortcut": "キーボードショートカット"
   },
   "labels": {
     "createdBy": "Created By",
@@ -226,7 +226,7 @@
     "port": "ポート番号",
     "username": "ユーザー名",
     "password": "パスワード",
-    "schemaName": "Schema name",
+    "schemaName": "スキーマ名",
     "database": "データベース",
     "action": "アクション",
     "actions": "アクション",
@@ -266,7 +266,7 @@
       "bookDemo": "デモを予約",
       "getAnswered": "あなたの質問に回答しましょう",
       "joinDiscord": "Discord に参加",
-      "joinCommunity": "Join NocoDB Community",
+      "joinCommunity": "NocoDB のコミュニティに参加",
       "joinReddit": "/r/NocoDB に参加",
       "followNocodb": "NocoDB をフォロー"
     },
@@ -278,11 +278,11 @@
     "onDelete": "削除中",
     "account": "アカウント",
     "language": "言語",
-    "primaryColor": "Primary Color",
-    "accentColor": "Accent Color",
-    "customTheme": "Custom Theme",
+    "primaryColor": "プライマリカラー",
+    "accentColor": "アクセントカラー",
+    "customTheme": "カスタムテーマ",
     "requestDataSource": "Request a data source you need?",
-    "apiKey": "API Key",
+    "apiKey": "API キー",
     "sharedBase": "Shared Base",
     "importData": "Import Data",
     "importSecondaryViews": "Import Secondary Views",
@@ -290,25 +290,25 @@
     "importLookupColumns": "Import Lookup Columns",
     "importAttachmentColumns": "Import Attachment Columns",
     "importFormulaColumns": "Import Formula Columns",
-    "noData": "No Data",
-    "goToDashboard": "Go to Dashboard",
-    "importing": "Importing",
-    "flattenNested": "Flatten Nested",
+    "noData": "データがありません",
+    "goToDashboard": "ダッシュボードに移動",
+    "importing": "インポート中",
+    "flattenNested": "入れ子を平坦化",
     "downloadAllowed": "ダウンロードを許可",
     "weAreHiring": "We are Hiring!",
-    "primaryKey": "Primary key",
+    "primaryKey": "プライマリーキー",
     "hasMany": "has many",
     "belongsTo": "belongs to",
     "manyToMany": "have many to many relation",
     "extraConnectionParameters": "Extra connection parameters",
-    "commentsOnly": "Comments only",
-    "documentation": "Documentation",
-    "subscribeNewsletter": "Subscribe to our weekly newsletter",
-    "signUpWithGoogle": "Sign up with Google",
-    "signInWithGoogle": "Sign in with Google",
-    "agreeToTos": "By signing up, you agree to the Terms of Service",
-    "welcomeToNc": "Welcome to NocoDB!",
-    "inviteOnlySignup": "Allow signup only using invite url"
+    "commentsOnly": "コメントのみ",
+    "documentation": "ドキュメント",
+    "subscribeNewsletter": "週刊ニュースレターを購読する",
+    "signUpWithGoogle": "Googleでログイン",
+    "signInWithGoogle": "Googleでログイン",
+    "agreeToTos": "サインアップすることで、利用規約に同意するものとみなされます。",
+    "welcomeToNc": "NocoDB へようこそ！",
+    "inviteOnlySignup": "招待URL からのサインアップのみ許可"
   },
   "activity": {
     "createProject": "プロジェクトを作成",
@@ -336,7 +336,7 @@
     "translate": "翻訳に協力する",
     "account": {
       "authToken": "Auth Tokenをコピー",
-      "swagger": "Swagger: REST APIs",
+      "swagger": "Swagger: REST API",
       "projInfo": "プロジェクト情報をコピー",
       "themes": "テーマ"
     },
@@ -353,14 +353,14 @@
     "invite": "招待",
     "inviteMore": "さらに招待",
     "inviteTeam": "チームへ招待",
-    "inviteUser": "Invite User",
+    "inviteUser": "ユーザーを招待",
     "inviteToken": "招待用トークン",
     "newUser": "ユーザーを作成",
     "editUser": "ユーザーを編集",
     "deleteUser": "プロジェクトからユーザーを削除",
     "resendInvite": "招待用メールを再送信",
     "copyInviteURL": "招待用 URL をコピー",
-    "copyPasswordResetURL": "Copy password reset URL",
+    "copyPasswordResetURL": "パスワードリセット URL をコピー",
     "newRole": "新しいロール",
     "reloadRoles": "ロールをリロード",
     "nextPage": "次のページ",
@@ -376,13 +376,13 @@
     "setPrimary": "プライマリ値として設定",
     "addRow": "行を追加",
     "saveRow": "行を保存",
-    "saveAndExit": "Save & Exit",
-    "saveAndStay": "Save & Stay",
+    "saveAndExit": "保存して終了",
+    "saveAndStay": "保存して続ける",
     "insertRow": "行を挿入",
     "deleteRow": "行を削除",
     "deleteSelectedRow": "選択行を削除",
     "importExcel": "エクセルファイルをインポート",
-    "importCSV": "Import CSV",
+    "importCSV": "CSV のインポート",
     "downloadCSV": "CSVをダウンロード",
     "downloadExcel": "XLSXをダウンロード",
     "uploadCSV": "CSVをアップロード",
@@ -421,21 +421,21 @@
     "editConnJson": "コネクション JSON を編集",
     "sponsorUs": "スポンサーになる",
     "sendEmail": "メールを送信",
-    "addUserToProject": "Add user to project",
+    "addUserToProject": "ユーザーをプロジェクトに追加",
     "getApiSnippet": "APIスニペットを取得",
-    "clearCell": "Clear cell",
+    "clearCell": "セルをクリア",
     "addFilterGroup": "フィルターグループを追加",
-    "linkRecord": "Link record",
-    "addNewRecord": "Add new record",
-    "useConnectionUrl": "Use Connection URL",
+    "linkRecord": "レコードをリンク",
+    "addNewRecord": "レコードを追加",
+    "useConnectionUrl": "接続 URL を使用",
     "toggleCommentsDraw": "Toggle comments draw",
-    "expandRecord": "Expand Record",
-    "deleteRecord": "Delete Record",
+    "expandRecord": "レコードを展開",
+    "deleteRecord": "レコードを削除",
     "erd": {
-      "showColumns": "Show Columns",
-      "showPkAndFk": "Show Primary and Foreign Keys",
-      "showSqlViews": "Show SQL Views",
-      "showMMTables": "Show Many to Many tables",
+      "showColumns": "列を表示",
+      "showPkAndFk": "プライマリキーと外部キーを表示",
+      "showSqlViews": "SQL ビューを表示",
+      "showMMTables": "多対多のテーブルを表示",
       "showJunctionTableNames": "Show Junction Table Names"
     },
     "kanban": {
@@ -492,20 +492,20 @@
     "defaultValue": "デフォルト値",
     "filterByEmail": "メールアドレスでフィルタ",
     "filterQuery": "クエリを入力",
-    "selectField": "Select field"
+    "selectField": "フィールドを選択"
   },
   "msg": {
     "warning": {
       "nonEditableFields": {
-        "computedFieldUnableToClear": "Warning: Computed field - unable to clear text",
-        "qrFieldsCannotBeDirectlyChanged": "Warning: QR fields cannot be directly changed."
+        "computedFieldUnableToClear": "警告: 計算フィールド - テキストをクリアできません",
+        "qrFieldsCannotBeDirectlyChanged": "警告：QRコードフィールドは直接変更できません。"
       }
     },
     "info": {
-      "pasteNotSupported": "Paste operation is not supported on the active cell",
+      "pasteNotSupported": "現在アクティブなセルでは貼り付けはサポートされていません",
       "roles": {
-        "orgCreator": "Creator can create new projects and access any invited project.",
-        "orgViewer": "Viewer is not allowed to create new projects but they can access any invited project."
+        "orgCreator": "「作成者」は新しいプロジェクトを作成でき、かつ招待されたプロジェクトにもアクセスできます。",
+        "orgViewer": "ビューアーは新規プロジェクトを作成することはできませんが、招待されたプロジェクトにアクセスできます。"
       },
       "footerInfo": "1ページあたりの行数",
       "upload": "アップロードするファイルを選択してください",
@@ -600,29 +600,29 @@
         "credentials": "Where to find this?"
       },
       "import": {
-        "clickOrDrag": "Click or drag file to this area to upload"
+        "clickOrDrag": "この領域をクリック、またはファイルをドラッグしてアップロード"
       },
-      "metaDataRecreated": "Table metadata recreated successfully",
-      "invalidCredentials": "Invalid credentials",
+      "metaDataRecreated": "テーブルメタデータを再作成しました",
+      "invalidCredentials": "不正な認証情報です",
       "downloadingMoreFiles": "Downloading more files",
-      "copiedToClipboard": "Copied to clipboard",
-      "requriedFieldsCantBeMoved": "Required field can't be moved",
-      "updateNotAllowedWithoutPK": "Update not allowed for table which doesn't have primary key",
-      "autoIncFieldNotEditable": "Auto increment field is not editable",
-      "editingPKnotSupported": "Editing primary key not supported",
-      "deletedCache": "Deleted cache successfully",
-      "cacheEmpty": "Cache is empty",
-      "exportedCache": "Exported Cache Successfully",
-      "valueAlreadyInList": "This value is already in the list",
-      "noColumnsToUpdate": "No columns to update",
-      "tableDeleted": "Deleted table successfully",
+      "copiedToClipboard": "クリップボードにコピーしました",
+      "requriedFieldsCantBeMoved": "必須フィールドは移動できません",
+      "updateNotAllowedWithoutPK": "プライマリキーを持たないテーブルは更新できません",
+      "autoIncFieldNotEditable": "オートインクリメントフィールドは編集できません",
+      "editingPKnotSupported": "プライマリキーは編集できません",
+      "deletedCache": "キャッシュをクリアしました",
+      "cacheEmpty": "キャッシュは空です",
+      "exportedCache": "キャッシュをエクスポートしました",
+      "valueAlreadyInList": "この値は既にリストにあります",
+      "noColumnsToUpdate": "更新するカラムはありません",
+      "tableDeleted": "テーブルを削除しました",
       "generatePublicShareableReadonlyBase": "Generate publicly shareable readonly base",
-      "deleteViewConfirmation": "Are you sure you want to delete this view?",
-      "deleteTableConfirmation": "Do you want to delete the table",
+      "deleteViewConfirmation": "このビューを本当に削除しますか？",
+      "deleteTableConfirmation": "テーブルを削除しますか？",
       "showM2mTables": "Show M2M Tables",
       "deleteKanbanStackConfirmation": "スタックを削除すると、`{stackToBeDeleted}`から選択肢`{groupingField}`も削除されます。レコードは未分類スタックに移動します。",
-      "computedFieldEditWarning": "Computed field: contents are read-only. Use column edit menu to reconfigure",
-      "computedFieldDeleteWarning": "Computed field: contents are read-only. Unable to clear content."
+      "computedFieldEditWarning": "計算フィールド: コンテンツは読み取り専用です。列編集メニューを使用して再設定してください。",
+      "computedFieldDeleteWarning": "計算フィールド: コンテンツは読み取り専用です。コンテンツを消去できません。"
     },
     "error": {
       "searchProject": "{search} の検索結果が見つかりませんでした",
@@ -638,53 +638,53 @@
         "passwdRequired": "パスワードが必要です",
         "passwdLength": "パスワードは8文字以上にしてください",
         "passwdMismatch": "パスワードが一致していません",
-        "completeRuleSet": "At least 8 characters with one Uppercase, one number and one special character",
-        "atLeast8Char": "At least 8 characters",
-        "atLeastOneUppercase": "One Uppercase letter",
-        "atLeastOneNumber": "One Number",
-        "atLeastOneSpecialChar": "One special character",
-        "allowedSpecialCharList": "Allowed special character list"
+        "completeRuleSet": "英大文字、数字、記号をそれぞれ１文字以上含みかつ 8 文字以上",
+        "atLeast8Char": "8 文字以上",
+        "atLeastOneUppercase": "英大文字 1 文字",
+        "atLeastOneNumber": "数字 1 文字",
+        "atLeastOneSpecialChar": "記号 1 文字",
+        "allowedSpecialCharList": "利用できる記号の一覧"
       },
-      "invalidURL": "Invalid URL",
-      "internalError": "Some internal error occurred",
-      "templateGeneratorNotFound": "Template Generator cannot be found!",
-      "fileUploadFailed": "Failed to upload file",
-      "primaryColumnUpdateFailed": "Failed to update primary column",
-      "formDescriptionTooLong": "Data too long for Form Description",
-      "columnsRequired": "Following columns are required",
-      "selectAtleastOneColumn": "At least one column has to be selected",
-      "columnDescriptionNotFound": "Cannot find the destination column for",
+      "invalidURL": "無効なURL",
+      "internalError": "内部エラーが発生しました",
+      "templateGeneratorNotFound": "テンプレートジェネレーターが見つかりません！",
+      "fileUploadFailed": "ファイルのアップロードに失敗しました",
+      "primaryColumnUpdateFailed": "プライマリカラムの更新に失敗しました",
+      "formDescriptionTooLong": "フォームの説明が長すぎます",
+      "columnsRequired": "以下のカラムが必要です",
+      "selectAtleastOneColumn": "少なくとも1つのカラムを選択してください",
+      "columnDescriptionNotFound": "次の宛先カラムが見つかりません：",
       "duplicateMappingFound": "Duplicate mapping found, please remove one of the mapping",
       "nullValueViolatesNotNull": "Null value violates not-null constraint",
-      "sourceHasInvalidNumbers": "Source data contains some invalid numbers",
-      "sourceHasInvalidBoolean": "Source data contains some invalid boolean values",
+      "sourceHasInvalidNumbers": "ソースデータに無効な数値が含まれています",
+      "sourceHasInvalidBoolean": "ソースデータに無効なブール値が含まれています",
       "invalidForm": "Invalid Form",
-      "formValidationFailed": "Form validation failed",
-      "youHaveBeenSignedOut": "You have been signed out",
-      "failedToLoadList": "Failed to load list",
+      "formValidationFailed": "入力内容に誤りがあります",
+      "youHaveBeenSignedOut": "サインアウトしました",
+      "failedToLoadList": "リストの読み込みに失敗しました",
       "failedToLoadChildrenList": "Failed to load children list",
-      "deleteFailed": "Delete failed",
-      "unlinkFailed": "Unlink failed",
+      "deleteFailed": "削除に失敗しました",
+      "unlinkFailed": "リンク解除に失敗しました",
       "rowUpdateFailed": "行の更新に失敗",
       "deleteRowFailed": "行の削除に失敗",
       "setFormDataFailed": "Failed to set form data",
       "formViewUpdateFailed": "Failed to update form view",
-      "tableNameRequired": "Table name is required",
-      "nameShouldStartWithAnAlphabetOr_": "Name should start with an alphabet or _",
-      "followingCharactersAreNotAllowed": "Following characters are not allowed",
-      "columnNameRequired": "Column name is required",
-      "projectNameExceeds50Characters": "Project name exceeds 50 characters",
-      "projectNameCannotStartWithSpace": "Project name cannot start with space",
-      "requiredField": "Required field",
-      "ipNotAllowed": "IP not allowed",
+      "tableNameRequired": "テーブル名が必要です",
+      "nameShouldStartWithAnAlphabetOr_": "名前はアルファベットまたは_で始まる必要があります",
+      "followingCharactersAreNotAllowed": "以下の文字種は使用できません",
+      "columnNameRequired": "列名が必要です",
+      "projectNameExceeds50Characters": "プロジェクト名が50文字を超えています",
+      "projectNameCannotStartWithSpace": "プロジェクト名の先頭にはスペースは利用できません",
+      "requiredField": "必須フィールド",
+      "ipNotAllowed": "IPアドレスが許可されていません",
       "targetFileIsNotAnAcceptedFileType": "Target file is not an accepted file type",
       "theAcceptedFileTypeIsCsv": "The accepted file type is .csv",
       "theAcceptedFileTypesAreXlsXlsxXlsmOdsOts": "The accepted file types are .xls, .xlsx, .xlsm, .ods, .ots",
-      "parameterKeyCannotBeEmpty": "Parameter key cannot be empty",
-      "duplicateParameterKeysAreNotAllowed": "Duplicate parameter keys are not allowed",
-      "fieldRequired": "{value} cannot be empty.",
-      "projectNotAccessible": "Project not accessible",
-      "copyToClipboardError": "Failed to copy to clipboard"
+      "parameterKeyCannotBeEmpty": "パラメータキーは空にできません",
+      "duplicateParameterKeysAreNotAllowed": "パラメータキーの重複は許可されていません",
+      "fieldRequired": "{value} を空にすることはできません。",
+      "projectNotAccessible": "このプロジェクトにはアクセスできません",
+      "copyToClipboardError": "クリップボードへのコピーに失敗しました"
     },
     "toast": {
       "exportMetadata": "プロジェクトメタデータは正常にエクスポートされました",
@@ -704,39 +704,39 @@
       "futureRelease": "近日公開！"
     },
     "success": {
-      "columnDuplicated": "Column duplicated successfully",
-      "updatedUIACL": "Updated UI ACL for tables successfully",
-      "pluginUninstalled": "Plugin uninstalled successfully",
-      "pluginSettingsSaved": "Plugin settings saved successfully",
-      "pluginTested": "Successfully tested plugin settings",
-      "tableRenamed": "Table renamed successfully",
-      "viewDeleted": "View deleted successfully",
+      "columnDuplicated": "カラムを複製しました",
+      "updatedUIACL": "テーブルの UI ACL を更新しました",
+      "pluginUninstalled": "プラグインをアンインストールしました",
+      "pluginSettingsSaved": "プラグインの設定を保存しました",
+      "pluginTested": "プラグイン設定のテストに成功しました",
+      "tableRenamed": "テーブル名を変更しました",
+      "viewDeleted": "ビューを削除しました",
       "primaryColumnUpdated": "Successfully updated as primary column",
-      "tableDataExported": "Successfully exported all table data",
-      "updated": "Successfully updated",
-      "sharedViewDeleted": "Deleted shared view successfully",
-      "userDeleted": "User deleted successfully",
-      "viewRenamed": "View renamed successfully",
-      "tokenGenerated": "Token generated successfully",
-      "tokenDeleted": "Token deleted successfully",
-      "userAddedToProject": "Successfully added user to project",
-      "userAdded": "Successfully added user",
-      "userDeletedFromProject": "Successfully deleted user from project",
-      "inviteEmailSent": "Invite Email sent successfully",
-      "inviteURLCopied": "Invite URL copied to clipboard",
-      "passwordResetURLCopied": "Password reset URL copied to clipboard",
+      "tableDataExported": "テーブルの全データをエクスポートしました",
+      "updated": "正常に更新されました",
+      "sharedViewDeleted": "共有ビューを削除しました",
+      "userDeleted": "ユーザを削除しました",
+      "viewRenamed": "ビュー名を変更しました",
+      "tokenGenerated": "トークンを生成しました",
+      "tokenDeleted": "トークンを削除しました",
+      "userAddedToProject": "プロジェクトにユーザーを追加しました",
+      "userAdded": "ユーザーを追加しました",
+      "userDeletedFromProject": "プロジェクトからユーザーを削除しました",
+      "inviteEmailSent": "招待メールを送信しました",
+      "inviteURLCopied": "招待 URL をクリップボードにコピーしました",
+      "passwordResetURLCopied": "パスワードリセット URL をクリップボードにコピーしました",
       "shareableURLCopied": "Copied shareable base URL to clipboard!",
-      "embeddableHTMLCodeCopied": "Copied embeddable HTML code!",
-      "userDetailsUpdated": "Successfully updated the user details",
-      "tableDataImported": "Successfully imported table data",
-      "webhookUpdated": "Webhook details updated successfully",
+      "embeddableHTMLCodeCopied": "埋め込み用 HTML をコピーしました",
+      "userDetailsUpdated": "ユーザーの詳細を更新しました",
+      "tableDataImported": "テーブルへデータをインポートしました",
+      "webhookUpdated": "Webhook の詳細を更新しました",
       "webhookDeleted": "Hook deleted successfully",
-      "webhookTested": "Webhook tested successfully",
+      "webhookTested": "Webhook のテストに成功しました",
       "columnUpdated": "列が更新されました",
-      "columnCreated": "Column created",
-      "passwordChanged": "Password changed successfully. Please login again.",
-      "settingsSaved": "Settings saved successfully",
-      "roleUpdated": "Role updated successfully"
+      "columnCreated": "列を作成しました",
+      "passwordChanged": "パスワードが変更されました。もう一度ログインしてください。",
+      "settingsSaved": "設定を保存しました",
+      "roleUpdated": "ロールを更新しました"
     }
   }
 }
diff --git a/packages/nc-gui/lang/ru.json b/packages/nc-gui/lang/ru.json
index 0f896804ca..6d859b2666 100644
--- a/packages/nc-gui/lang/ru.json
+++ b/packages/nc-gui/lang/ru.json
@@ -16,7 +16,7 @@
     "cancel": "Отмена",
     "submit": "Отправить",
     "create": "Создать",
-    "duplicate": "Duplicate",
+    "duplicate": "Копировать",
     "insert": "Вставить",
     "delete": "Удалить",
     "update": "Обновить",
@@ -56,25 +56,25 @@
     "notification": "Уведомление",
     "reference": "Ссылка",
     "function": "Функция",
-    "confirm": "Confirm",
+    "confirm": "Подтвердить",
     "generate": "Generate",
-    "copy": "Copy",
-    "misc": "Miscellaneous",
-    "lock": "Lock",
-    "unlock": "Unlock",
-    "credentials": "Credentials",
-    "help": "Help",
-    "questions": "Questions",
+    "copy": "Копировать",
+    "misc": "Прочее",
+    "lock": "Блокировать",
+    "unlock": "Разблокировать",
+    "credentials": "Учетные данные",
+    "help": "Помощь",
+    "questions": "Вопросы",
     "reachOut": "Reach out here",
-    "betaNote": "This feature is currently in beta.",
-    "moreInfo": "More information can be found here",
-    "logs": "Logs",
-    "groupingField": "Grouping Field",
-    "insertAfter": "Insert After",
-    "insertBefore": "Insert Before",
-    "hideField": "Hide Field",
-    "sortAsc": "Sort Ascending",
-    "sortDesc": "Sort Descending"
+    "betaNote": "Эта функция еще на стадии бета-версии.",
+    "moreInfo": "Больше информации можно найти здесь",
+    "logs": "Журналы",
+    "groupingField": "Поле группировки",
+    "insertAfter": "Вставить после",
+    "insertBefore": "Вставить перед",
+    "hideField": "Скрыть поле",
+    "sortAsc": "По Возрастанию",
+    "sortDesc": "По убыванию"
   },
   "objects": {
     "project": "Проект",
@@ -110,10 +110,10 @@
       "editor": "Редактор",
       "commenter": "Комментатор",
       "viewer": "Просмотр",
-      "orgLevelCreator": "Organization Level Creator",
-      "orgLevelViewer": "Organization Level Viewer"
+      "orgLevelCreator": "Уровень Создатель",
+      "orgLevelViewer": "Уровень Читатель"
     },
-    "sqlVIew": "SQL View"
+    "sqlVIew": "Просмотр SQL"
   },
   "datatype": {
     "ID": "Идентификатор",
@@ -194,21 +194,21 @@
     "headCreateProject": "Создать проект |. NOCODB",
     "headLogin": "Войти |. NOCODB",
     "resetPassword": "Сбросить пароль",
-    "teamAndSettings": "Team & Settings",
-    "apiDocs": "API Docs",
-    "importFromAirtable": "Import From Airtable",
-    "generateToken": "Generate Token",
+    "teamAndSettings": "Команда и настройки",
+    "apiDocs": "Документация API",
+    "importFromAirtable": "Импортировать из Airtable",
+    "generateToken": "Создать Токен",
     "APIsAndSupport": "APIs & Support",
-    "helpCenter": "Help center",
-    "swaggerDocumentation": "Swagger Documentation",
-    "quickImportFrom": "Quick Import From",
-    "quickImport": "Quick Import",
-    "advancedSettings": "Advanced Settings",
+    "helpCenter": "Центр поддержки",
+    "swaggerDocumentation": "Документация Swagger",
+    "quickImportFrom": "Быстрый импорт из",
+    "quickImport": "Быстрый импорт",
+    "advancedSettings": "Расширенные настройки",
     "codeSnippet": "Code Snippet",
-    "keyboardShortcut": "Keyboard Shortcuts"
+    "keyboardShortcut": "Горячие клавиши"
   },
   "labels": {
-    "createdBy": "Created By",
+    "createdBy": "Автор",
     "notifyVia": "Уведомлять через",
     "projName": "Название проекта",
     "tableName": "Название таблицы",
@@ -226,7 +226,7 @@
     "port": "Номер порта",
     "username": "Имя пользователя",
     "password": "Пароль",
-    "schemaName": "Schema name",
+    "schemaName": "Имя схемы",
     "database": "База данных",
     "action": "Действие",
     "actions": "Действия",
@@ -247,8 +247,8 @@
     "created": "Созданный",
     "sqlOutput": "Вывод SQL",
     "addOption": "Добавить настройку",
-    "qrCodeValueColumn": "Column with QR code value",
-    "qrCodeValueTooLong": "Too many characters for a QR code",
+    "qrCodeValueColumn": "Столбец с QR-кодом",
+    "qrCodeValueTooLong": "Слишком много символов для QR-кода",
     "aggregateFunction": "Агрегатная функция",
     "dbCreateIfNotExists": "База данных: создать, если не существует",
     "clientKey": "Ключ клиента",
@@ -266,7 +266,7 @@
       "bookDemo": "Забронировать бесплатное демо",
       "getAnswered": "Получите ответы на ваши вопросы",
       "joinDiscord": "Присоединиться к",
-      "joinCommunity": "Join NocoDB Community",
+      "joinCommunity": "Присоединяйтесь к сообществу NocoDB",
       "joinReddit": "Присоединиться /r/NocoDB",
       "followNocodb": "Следите за NocoDB"
     },
@@ -276,11 +276,11 @@
     "childColumn": "Дочерний столбец",
     "onUpdate": "При обновлении",
     "onDelete": "При удалении",
-    "account": "Account",
-    "language": "Language",
-    "primaryColor": "Primary Color",
+    "account": "Учётная запись",
+    "language": "Язык",
+    "primaryColor": "Основной цвет",
     "accentColor": "Accent Color",
-    "customTheme": "Custom Theme",
+    "customTheme": "Пользовательская тема",
     "requestDataSource": "Request a data source you need?",
     "apiKey": "API Key",
     "sharedBase": "Shared Base",
@@ -429,12 +429,12 @@
     "addNewRecord": "Add new record",
     "useConnectionUrl": "Use Connection URL",
     "toggleCommentsDraw": "Toggle comments draw",
-    "expandRecord": "Expand Record",
-    "deleteRecord": "Delete Record",
+    "expandRecord": "Развернуть запись",
+    "deleteRecord": "Удалить запись",
     "erd": {
-      "showColumns": "Show Columns",
+      "showColumns": "Показать колонки",
       "showPkAndFk": "Show Primary and Foreign Keys",
-      "showSqlViews": "Show SQL Views",
+      "showSqlViews": "Показать SQL представления",
       "showMMTables": "Show Many to Many tables",
       "showJunctionTableNames": "Show Junction Table Names"
     },
@@ -442,7 +442,7 @@
       "collapseStack": "Collapse Stack",
       "deleteStack": "Delete Stack",
       "stackedBy": "Stacked By",
-      "chooseGroupingField": "Choose a Grouping Field",
+      "chooseGroupingField": "Выберите поле группировки",
       "addOrEditStack": "Add / Edit Stack"
     }
   },
@@ -492,20 +492,20 @@
     "defaultValue": "Значение по умолчанию",
     "filterByEmail": "Фильтр по электронной почте",
     "filterQuery": "Filter query",
-    "selectField": "Select field"
+    "selectField": "Выбрать поле"
   },
   "msg": {
     "warning": {
       "nonEditableFields": {
-        "computedFieldUnableToClear": "Warning: Computed field - unable to clear text",
-        "qrFieldsCannotBeDirectlyChanged": "Warning: QR fields cannot be directly changed."
+        "computedFieldUnableToClear": "Предупреждение: Вычисляемое поле - невозможно очистить текст",
+        "qrFieldsCannotBeDirectlyChanged": "Внимание: QR-поля не могут быть изменены напрямую."
       }
     },
     "info": {
-      "pasteNotSupported": "Paste operation is not supported on the active cell",
+      "pasteNotSupported": "Операция Вставки не поддерживается в выделенной ячейке",
       "roles": {
         "orgCreator": "Creator can create new projects and access any invited project.",
-        "orgViewer": "Viewer is not allowed to create new projects but they can access any invited project."
+        "orgViewer": "Читателю не может создавать новые проекты, но может получить доступ к любому проекту по приглашению."
       },
       "footerInfo": "Строк на страницу",
       "upload": "Выберите файл для загрузки",
@@ -597,25 +597,25 @@
       "addDefaultColumns": "Добавьте столбцы по умолчанию",
       "tableNameInDb": "Название таблицы как сохранено в базе данных",
       "airtable": {
-        "credentials": "Where to find this?"
+        "credentials": "Где найти это?"
       },
       "import": {
-        "clickOrDrag": "Click or drag file to this area to upload"
+        "clickOrDrag": "Нажмите или перетащите файл в эту область для загрузки"
       },
-      "metaDataRecreated": "Table metadata recreated successfully",
-      "invalidCredentials": "Invalid credentials",
+      "metaDataRecreated": "Метаданные таблицы успешно воссозданы",
+      "invalidCredentials": "Неверные учетные данные",
       "downloadingMoreFiles": "Downloading more files",
-      "copiedToClipboard": "Copied to clipboard",
-      "requriedFieldsCantBeMoved": "Required field can't be moved",
-      "updateNotAllowedWithoutPK": "Update not allowed for table which doesn't have primary key",
+      "copiedToClipboard": "Скопировано в буфер",
+      "requriedFieldsCantBeMoved": "Обязательное поле не может быть перемещено",
+      "updateNotAllowedWithoutPK": "Обновление не разрешено для таблицы, которая не имеет первичного ключа",
       "autoIncFieldNotEditable": "Auto increment field is not editable",
-      "editingPKnotSupported": "Editing primary key not supported",
-      "deletedCache": "Deleted cache successfully",
-      "cacheEmpty": "Cache is empty",
+      "editingPKnotSupported": "Редактирование первичного ключа не поддерживается",
+      "deletedCache": "Очистка кэша завершена",
+      "cacheEmpty": "Кэш пуст",
       "exportedCache": "Exported Cache Successfully",
-      "valueAlreadyInList": "This value is already in the list",
-      "noColumnsToUpdate": "No columns to update",
-      "tableDeleted": "Deleted table successfully",
+      "valueAlreadyInList": "Это значение уже есть в списке",
+      "noColumnsToUpdate": "Нет столбцов для обновления",
+      "tableDeleted": "Таблица успешно удалена",
       "generatePublicShareableReadonlyBase": "Generate publicly shareable readonly base",
       "deleteViewConfirmation": "Are you sure you want to delete this view?",
       "deleteTableConfirmation": "Do you want to delete the table",
diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index 163b0e66a1..776aadbcee 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -85,3 +85,12 @@ export enum SmartsheetStoreEvents {
   FIELD_RELOAD = 'field-reload',
   FIELD_ADD = 'field-add',
 }
+
+export enum DataSourcesSubTab {
+  New = 'New',
+  Metadata = 'Metadata',
+  ERD = 'ERD',
+  UIAcl = 'UI ACL',
+  Misc = 'Misc',
+  Edit = 'Edit',
+}
diff --git a/packages/nc-gui/nuxt.config.ts b/packages/nc-gui/nuxt.config.ts
index afba37c6ba..0778081d12 100644
--- a/packages/nc-gui/nuxt.config.ts
+++ b/packages/nc-gui/nuxt.config.ts
@@ -129,6 +129,8 @@ export default defineNuxtConfig({
               'ph',
               'ri',
               'system-uicons',
+              'vscode-icons',
+              'simple-icons',
             ],
           }),
         ],
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index 4274614d42..c4a1c9ac9a 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -9,6 +9,7 @@
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@ckpack/vue-color": "^1.2.0",
+        "@types/file-saver": "^2.0.5",
         "@vue-flow/additional-components": "^1.2.0",
         "@vue-flow/core": "^1.3.0",
         "@vuelidate/core": "^2.0.0-alpha.44",
@@ -56,7 +57,9 @@
         "@iconify-json/mi": "^1.1.2",
         "@iconify-json/ph": "^1.1.2",
         "@iconify-json/ri": "^1.1.3",
+        "@iconify-json/simple-icons": "^1.1.29",
         "@iconify-json/system-uicons": "^1.1.4",
+        "@iconify-json/vscode-icons": "^1.1.14",
         "@intlify/vite-plugin-vue-i18n": "^6.0.1",
         "@nuxt/image-edge": "^1.0.0-27657146.da85542",
         "@types/axios": "^0.14.0",
@@ -1174,6 +1177,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/simple-icons": {
+      "version": "1.1.29",
+      "resolved": "https://registry.npmjs.org/@iconify-json/simple-icons/-/simple-icons-1.1.29.tgz",
+      "integrity": "sha512-uP4fKlNoh9IuVTf1e1bl0TWZs+IDE19zCpKLNy+bKmJL5F9zOPwiIMqSsg4KRPXSdoZ2x7lTtt9BrO/O/3Phyg==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/system-uicons": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@iconify-json/system-uicons/-/system-uicons-1.1.4.tgz",
@@ -1183,6 +1195,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/vscode-icons": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@iconify-json/vscode-icons/-/vscode-icons-1.1.14.tgz",
+      "integrity": "sha512-we1er6h6WNDuV/dNSey/f4RDea5DILfDPCM7QN32EkjINr3ggAh7JhfTuQPP9A5lUQkjq5Xu2BpLyiz+E0Yd8w==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.1.0.tgz",
@@ -3021,6 +3042,11 @@
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
       "dev": true
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ=="
+    },
     "node_modules/@types/form-data": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
@@ -18408,6 +18434,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/simple-icons": {
+      "version": "1.1.29",
+      "resolved": "https://registry.npmjs.org/@iconify-json/simple-icons/-/simple-icons-1.1.29.tgz",
+      "integrity": "sha512-uP4fKlNoh9IuVTf1e1bl0TWZs+IDE19zCpKLNy+bKmJL5F9zOPwiIMqSsg4KRPXSdoZ2x7lTtt9BrO/O/3Phyg==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/system-uicons": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@iconify-json/system-uicons/-/system-uicons-1.1.4.tgz",
@@ -18417,6 +18452,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/vscode-icons": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@iconify-json/vscode-icons/-/vscode-icons-1.1.14.tgz",
+      "integrity": "sha512-we1er6h6WNDuV/dNSey/f4RDea5DILfDPCM7QN32EkjINr3ggAh7JhfTuQPP9A5lUQkjq5Xu2BpLyiz+E0Yd8w==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify/types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.1.0.tgz",
@@ -19714,6 +19758,11 @@
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
       "dev": true
     },
+    "@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ=="
+    },
     "@types/form-data": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index ab0ed240b7..5046a80816 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -41,6 +41,7 @@
     "ant-design-vue": "^3.2.11",
     "d3-scale": "^4.0.2",
     "dagre": "^0.8.5",
+    "@types/file-saver": "^2.0.5",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
     "httpsnippet": "^2.0.0",
@@ -79,7 +80,9 @@
     "@iconify-json/mi": "^1.1.2",
     "@iconify-json/ph": "^1.1.2",
     "@iconify-json/ri": "^1.1.3",
+    "@iconify-json/simple-icons": "^1.1.29",
     "@iconify-json/system-uicons": "^1.1.4",
+    "@iconify-json/vscode-icons": "^1.1.14",
     "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@nuxt/image-edge": "^1.0.0-27657146.da85542",
     "@types/axios": "^0.14.0",
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 983090343d..0bb3f2972f 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -59,7 +59,9 @@ const { isOpen, toggle, toggleHasSidebar } = useSidebar('nc-left-sidebar', { has
 
 const dialogOpen = ref(false)
 
-const openDialogKey = ref<string>()
+const openDialogKey = ref<string>('')
+
+const dataSourcesState = ref<string>('')
 
 const dropdownOpen = ref(false)
 
@@ -73,11 +75,14 @@ const logout = () => {
   navigateTo('/signin')
 }
 
-function toggleDialog(value?: boolean, key?: string) {
+function toggleDialog(value?: boolean, key?: string, dsState?: string) {
   dialogOpen.value = value ?? !dialogOpen.value
-  openDialogKey.value = key
+  openDialogKey.value = key || ''
+  dataSourcesState.value = dsState || ''
 }
 
+provide(ToggleDialogInj, toggleDialog)
+
 const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color?: string) => {
   switch (mode) {
     case 'swatch': {
@@ -234,7 +239,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 </script>
 
 <template>
-  <NuxtLayout id="content">
+  <NuxtLayout>
     <template #sidebar>
       <a-layout-sider
         ref="sidebar"
@@ -559,12 +564,16 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
           </div>
         </div>
 
-        <LazyDashboardTreeView />
+        <LazyDashboardTreeView @create-base-dlg="toggleDialog(true, 'dataSources')" />
       </a-layout-sider>
     </template>
 
     <div>
-      <LazyDashboardSettingsModal v-model="dialogOpen" :open-key="openDialogKey" />
+      <LazyDashboardSettingsModal
+        v-model:model-value="dialogOpen"
+        v-model:open-key="openDialogKey"
+        v-model:data-sources-state="dataSourcesState"
+      />
 
       <NuxtPage :page-key="$route.params.projectId" />
 
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index a2f5ab7d0a..8b5d7709d2 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -75,6 +75,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
           </div>
         </div>
 
+        <LazyGeneralShareBaseButton />
         <LazyGeneralFullScreen class="nc-fullscreen-icon" />
       </div>
 
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index e931dbbc37..3902c279a5 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -84,9 +84,10 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                   <div>
                     <LazySmartsheetVirtualCell
                       v-if="isVirtualCol(field)"
+                      :model-value="null"
                       class="mt-0 nc-input"
                       :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                      :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                      :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
                       :column="field"
                     />
 
@@ -95,7 +96,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                       v-model="formState[field.title]"
                       class="nc-input"
                       :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                      :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                      :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
                       :column="field"
                       :edit-enabled="true"
                     />
diff --git a/packages/nc-gui/pages/[projectType]/gallery/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/gallery/[viewId]/index.vue
index d4e4e9852a..d76cb8ac11 100644
--- a/packages/nc-gui/pages/[projectType]/gallery/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/gallery/[viewId]/index.vue
@@ -26,7 +26,7 @@ try {
 </script>
 
 <template>
-  <NuxtLayout id="content" class="flex" name="shared-view">
+  <NuxtLayout class="flex" name="shared-view">
     <div v-if="showPassword">
       <LazySharedViewAskPassword v-model="showPassword" />
     </div>
diff --git a/packages/nc-gui/pages/[projectType]/kanban/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/kanban/[viewId]/index.vue
index a87164c96b..6271f585e3 100644
--- a/packages/nc-gui/pages/[projectType]/kanban/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/kanban/[viewId]/index.vue
@@ -26,7 +26,7 @@ try {
 </script>
 
 <template>
-  <NuxtLayout id="content" class="flex" name="shared-view">
+  <NuxtLayout class="flex" name="shared-view">
     <div v-if="showPassword">
       <LazySharedViewAskPassword v-model="showPassword" />
     </div>
diff --git a/packages/nc-gui/pages/[projectType]/view/[viewId].vue b/packages/nc-gui/pages/[projectType]/view/[viewId].vue
index 0801ea6c89..c91c203d28 100644
--- a/packages/nc-gui/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/view/[viewId].vue
@@ -26,7 +26,7 @@ try {
 </script>
 
 <template>
-  <NuxtLayout id="content" class="flex" name="shared-view">
+  <NuxtLayout class="flex" name="shared-view">
     <div v-if="showPassword">
       <LazySharedViewAskPassword v-model="showPassword" />
     </div>
diff --git a/packages/nc-gui/pages/forgot-password.vue b/packages/nc-gui/pages/forgot-password.vue
index ac73a718d1..b2a419980b 100644
--- a/packages/nc-gui/pages/forgot-password.vue
+++ b/packages/nc-gui/pages/forgot-password.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { RuleObject } from 'ant-design-vue/es/form'
 import { definePageMeta, reactive, ref, useApi, useI18n, validateEmail } from '#imports'
 
 definePageMeta({
@@ -25,13 +26,13 @@ const formRules = {
     {
       validator: (_: unknown, v: string) => {
         return new Promise((resolve, reject) => {
-          if (validateEmail(v)) return resolve(true)
+          if (validateEmail(v)) return resolve()
           reject(new Error(t('msg.error.signUpRules.emailInvalid')))
         })
       },
       message: t('msg.error.signUpRules.emailInvalid'),
     },
-  ],
+  ] as RuleObject[],
 }
 
 async function resetPassword() {
diff --git a/packages/nc-gui/pages/index/apps.vue b/packages/nc-gui/pages/index/apps.vue
index 6780d02668..0e01a34033 100644
--- a/packages/nc-gui/pages/index/apps.vue
+++ b/packages/nc-gui/pages/index/apps.vue
@@ -7,6 +7,8 @@ definePageMeta({
   allowedRoles: [Role.Super],
   title: 'title.appStore',
 })
+
+useSidebar('nc-left-sidebar', { hasSidebar: false })
 </script>
 
 <template>
diff --git a/packages/nc-gui/pages/index/index/[projectId].vue b/packages/nc-gui/pages/index/index/[projectId].vue
index 76ea91250b..a90fb781d7 100644
--- a/packages/nc-gui/pages/index/index/[projectId].vue
+++ b/packages/nc-gui/pages/index/index/[projectId].vue
@@ -2,6 +2,7 @@
 import type { Form } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import type { VNodeRef } from '@vue/runtime-core'
+import type { RuleObject } from 'ant-design-vue/es/form'
 import {
   extractSdkResponseErrorMsg,
   message,
@@ -25,7 +26,7 @@ const nameValidationRules = [
     message: 'Project name is required',
   },
   projectTitleValidator,
-]
+] as RuleObject[]
 
 const form = ref<typeof Form>()
 
diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index f612c417b1..58ae4ea4c1 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
+import type { DefaultConnection, ProjectCreateForm } from '#imports'
 import {
   CertTypes,
+  ClientType,
   Form,
   Modal,
   SSLUsage,
@@ -25,8 +27,6 @@ import {
   useSidebar,
   watch,
 } from '#imports'
-import { ClientType } from '~/lib'
-import type { DefaultConnection, ProjectCreateForm } from '~/utils'
 
 const useForm = Form.useForm
 
diff --git a/packages/nc-gui/pages/index/index/create.vue b/packages/nc-gui/pages/index/index/create.vue
index ace4e213fc..c7af4dc174 100644
--- a/packages/nc-gui/pages/index/index/create.vue
+++ b/packages/nc-gui/pages/index/index/create.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Form } from 'ant-design-vue'
+import type { RuleObject } from 'ant-design-vue/es/form'
 import type { VNodeRef } from '@vue/runtime-core'
 import {
   extractSdkResponseErrorMsg,
@@ -25,7 +26,7 @@ const nameValidationRules = [
     message: 'Project name is required',
   },
   projectTitleValidator,
-]
+] as RuleObject[]
 
 const form = ref<typeof Form>()
 
diff --git a/packages/nc-gui/pages/projects/index.vue b/packages/nc-gui/pages/projects/index.vue
index c7d2c924b6..d17df47054 100644
--- a/packages/nc-gui/pages/projects/index.vue
+++ b/packages/nc-gui/pages/projects/index.vue
@@ -2,8 +2,7 @@
 import { Modal, message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { useI18n } from 'vue-i18n'
-import { navigateTo } from '#app'
-import { extractSdkResponseErrorMsg } from '~/utils'
+import { extractSdkResponseErrorMsg, navigateTo, useNuxtApp, useRoute } from '#imports'
 import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
 import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
 import MdiPlus from '~icons/mdi/plus'
diff --git a/packages/nc-gui/pages/projects/index/index.vue b/packages/nc-gui/pages/projects/index/index.vue
index a8f531c96e..22870ff48d 100644
--- a/packages/nc-gui/pages/projects/index/index.vue
+++ b/packages/nc-gui/pages/projects/index/index.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { ProjectType } from 'nocodb-sdk'
-import { navigateTo } from '#app'
-import { useColors } from '#imports'
+import { navigateTo, useColors, useNuxtApp } from '#imports'
 import MdiMenuDown from '~icons/mdi/menu-down'
 import MdiDeleteOutline from '~icons/mdi/delete-outline'
 import MdiPlus from '~icons/mdi/plus'
@@ -25,9 +24,9 @@ const openProject = async (project: ProjectType) => {
   $e('a:project:open', { count: projects.length })
 }
 
-const formatTitle = (title: string) =>
+const formatTitle = (title?: string) =>
   title
-    .split(' ')
+    ?.split(' ')
     .map((w) => w[0])
     .slice(0, 2)
     .join('')
diff --git a/packages/nc-gui/pages/signup/[[token]].vue b/packages/nc-gui/pages/signup/[[token]].vue
index 8cb723f895..8a92da1ccd 100644
--- a/packages/nc-gui/pages/signup/[[token]].vue
+++ b/packages/nc-gui/pages/signup/[[token]].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { validatePassword } from 'nocodb-sdk'
+import type { RuleObject } from 'ant-design-vue/es/form'
 import {
   definePageMeta,
   navigateTo,
@@ -44,24 +45,24 @@ const formRules = {
     {
       validator: (_: unknown, v: string) => {
         return new Promise((resolve, reject) => {
-          if (!v?.length || validateEmail(v)) return resolve(true)
+          if (!v?.length || validateEmail(v)) return resolve()
           reject(new Error(t('msg.error.signUpRules.emailInvalid')))
         })
       },
       message: t('msg.error.signUpRules.emailInvalid'),
     },
-  ],
+  ] as RuleObject[],
   password: [
     {
       validator: (_: unknown, v: string) => {
         return new Promise((resolve, reject) => {
           const { error, valid } = validatePassword(v)
-          if (valid) return resolve(true)
+          if (valid) return resolve()
           reject(new Error(error))
         })
       },
     },
-  ],
+  ] as RuleObject[],
 }
 
 async function signUp() {
diff --git a/packages/nc-gui/utils/parsers/parserHelpers.ts b/packages/nc-gui/utils/parsers/parserHelpers.ts
index b0759389b6..36986b3007 100644
--- a/packages/nc-gui/utils/parsers/parserHelpers.ts
+++ b/packages/nc-gui/utils/parsers/parserHelpers.ts
@@ -21,7 +21,7 @@ const booleanOptions = [
 const aggBooleanOptions: any = booleanOptions.reduce((obj, o) => ({ ...obj, ...o }), {})
 
 const getColVal = (row: any, col?: number) => {
-  return row && col ? row[col] : row
+  return row && col !== undefined ? row[col] : row
 }
 
 export const isCheckboxType: any = (values: [], col?: number) => {
diff --git a/packages/nc-gui/utils/projectCreateUtils.ts b/packages/nc-gui/utils/projectCreateUtils.ts
index 94133d5bbd..112ad19ab7 100644
--- a/packages/nc-gui/utils/projectCreateUtils.ts
+++ b/packages/nc-gui/utils/projectCreateUtils.ts
@@ -1,6 +1,6 @@
 import { ClientType } from '~/lib'
 
-export interface ProjectCreateForm {
+interface ProjectCreateForm {
   title: string
   dataSource: {
     client: ClientType
@@ -15,7 +15,7 @@ export interface ProjectCreateForm {
   extraParameters: { key: string; value: string }[]
 }
 
-export interface DefaultConnection {
+interface DefaultConnection {
   host: string
   database: string
   user: string
@@ -24,7 +24,7 @@ export interface DefaultConnection {
   ssl?: Record<CertTypes, string> | 'no-verify' | 'true'
 }
 
-export interface SQLiteConnection {
+interface SQLiteConnection {
   client: ClientType.SQLITE
   database: string
   connection: {
@@ -187,4 +187,4 @@ enum CertTypes {
   key = 'key',
 }
 
-export { SSLUsage, CertTypes }
+export { SSLUsage, CertTypes, ProjectCreateForm, DefaultConnection, SQLiteConnection }
diff --git a/packages/nc-gui/utils/sortUtils.ts b/packages/nc-gui/utils/sortUtils.ts
index 234cf98a17..7d2ccca8c6 100644
--- a/packages/nc-gui/utils/sortUtils.ts
+++ b/packages/nc-gui/utils/sortUtils.ts
@@ -1,6 +1,6 @@
 import { UITypes } from 'nocodb-sdk'
 
-export const getSortDirectionOptions = (uidt: UITypes) => {
+export const getSortDirectionOptions = (uidt: UITypes | string) => {
   switch (uidt) {
     case UITypes.Year:
     case UITypes.Number:
diff --git a/packages/nc-gui/utils/viewUtils.ts b/packages/nc-gui/utils/viewUtils.ts
index e197e766ed..d373f8378d 100644
--- a/packages/nc-gui/utils/viewUtils.ts
+++ b/packages/nc-gui/utils/viewUtils.ts
@@ -1,5 +1,5 @@
 import { ViewTypes } from 'nocodb-sdk'
-import { themeV2Colors } from '~/utils'
+import { themeV2Colors } from '#imports'
 
 import MdiGridIcon from '~icons/mdi/grid-large'
 import MdiFormIcon from '~icons/mdi/form-select'
@@ -41,3 +41,9 @@ export function applyLanguageDirection(dir: typeof rtl | typeof ltr) {
 export function applyNonSelectable() {
   document.body.classList.add('non-selectable')
 }
+
+export const getViewIcon = (key?: string | number) => {
+  if (!key) return
+
+  return viewIcons[key]
+}
diff --git a/packages/nc-gui/web-types.json b/packages/nc-gui/web-types.json
index 701777a464..1c688f9ad4 100644
--- a/packages/nc-gui/web-types.json
+++ b/packages/nc-gui/web-types.json
@@ -13,6 +13,10 @@
         {
           "name": "t",
           "description": "I18n directive"
+        },
+        {
+          "name": "xc-ver-resize",
+          "description": "Resize directive"
         }
       ]
     }
diff --git a/packages/noco-docs/content/en/getting-started/installation.md b/packages/noco-docs/content/en/getting-started/installation.md
index f019870064..a23eb4fcaa 100644
--- a/packages/noco-docs/content/en/getting-started/installation.md
+++ b/packages/noco-docs/content/en/getting-started/installation.md
@@ -14,18 +14,6 @@ Simple installation - takes about three minutes!
     
 ## Quick try
 
-### Heroku
-
-Before doing so, make sure you have a Heroku account. By default, an add-on Heroku Postgres will be used as meta database. You can see the connection string defined in `DATABASE_URL` by navigating to Heroku App Settings and selecting Config Vars.
-
-<a href="https://heroku.com/deploy?template=https://github.com/nocodb/nocodb-seed-heroku">
-    <img 
-    src="https://www.herokucdn.com/deploy/button.svg" 
-    width="300px"
-    alt="Deploy NocoDB to Heroku with 1-Click" 
-    />
-</a>
-
 ### Docker
 
 If you are a Docker user, you may try this way!
@@ -466,7 +454,7 @@ It is mandatory to configure `NC_DB` environment variables for production usecas
 | NC_DB                              | Yes       | See our database URLs                                                                                                   | A local SQLite will be created in root folder                                                  |   |
 | NC_DB_JSON                         | Yes       | Can be used instead of `NC_DB` and value should be valid knex connection JSON                                           |                                                                                                |   |
 | NC_DB_JSON_FILE                    | Yes       | Can be used instead of `NC_DB` and value should be a valid path to knex connection JSON                                 |                                                                                                |   |
-| DATABASE_URL                       | No        | JDBC URL Format. Can be used instead of NC_DB. Used in 1-Click Heroku deployment                                        |                                                                                                |   |
+| DATABASE_URL                       | No        | JDBC URL Format. Can be used instead of NC_DB.                                         |                                                                                                |   |
 | DATABASE_URL_FILE                  | No        | Can be used instead of DATABASE_URL: path to file containing JDBC URL Format.                                           |                                                                                                |   |
 | NC_AUTH_JWT_SECRET                 | Yes       | JWT secret used for auth and storing other secrets                                                                      | A Random secret will be generated                                                              |   |
 | PORT                               | No        | For setting app running port                                                                                            | `8080`                                                                                         |   |
@@ -486,7 +474,6 @@ It is mandatory to configure `NC_DB` environment variables for production usecas
 | NC_GOOGLE_CLIENT_ID                | No        | Google client id to enable google authentication                                                                        |                                                                                                |   |
 | NC_GOOGLE_CLIENT_SECRET            | No        | Google client secret to enable google authentication                                                                    |                                                                                                |   |
 | NC_MIGRATIONS_DISABLED             | No        | Disable NocoDB migration                                                                                                |                                                                                                |   |
-| NC_ONE_CLICK                       | No        | Used for Heroku one-click deployment                                                                                    |                                                                                                |   |
 | NC_MIN                             | No        | If set to any non-empty string the default splash screen(initial welcome animation) and matrix screensaver will disable |                                                                                                |   |
 | NC_SENTRY_DSN                      | No        | For Sentry monitoring                                                                                                   |                                                                                                |   |
 | NC_REDIS_URL                       | No        | Custom Redis URL. Example: `redis://:authpassword@127.0.0.1:6380/4`                                                     | Meta data will be stored in memory                                                             |   |
@@ -526,7 +513,4 @@ It is mandatory to configure `NC_DB` environment variables for production usecas
 
 ### Using NPX
 
-<youtube id="v6Nn75P1p7I"></youtube>
-
-### Heroku Deployment
-<youtube id="WB7yYXfhocY"></youtube>
+<youtube id="v6Nn75P1p7I"></youtube>
\ No newline at end of file
diff --git a/packages/noco-docs/content/en/getting-started/upgrading.md b/packages/noco-docs/content/en/getting-started/upgrading.md
index e1f6d75685..84b628abb9 100644
--- a/packages/noco-docs/content/en/getting-started/upgrading.md
+++ b/packages/noco-docs/content/en/getting-started/upgrading.md
@@ -1,6 +1,6 @@
 ---
 title: 'Upgrading'
-description: 'Upgrading NocoDB : Docker, Node, Heroku and Homebrew!'
+description: 'Upgrading NocoDB : Docker, Node and Homebrew!'
 position: 20
 category: 'Getting started'
 menuTitle: 'Upgrading'
@@ -60,44 +60,6 @@ npm uninstall nocodb
 npm install --save nocodb
 ```
 
-## Heroku
-
-### Using the Heroku CLI login
-
-```bash
-heroku container:login
-docker pull nocodb/nocodb:latest
-docker tag nocodb/nocodb:latest registry.heroku.com/<HEROKU_APP_NAME>/web
-docker push registry.heroku.com/<HEROKU_APP_NAME>/web
-heroku container:release -a <HEROKU_APP_NAME> web
-```
-
-#### On Apple M1 Chipset 
-
-> Please make sure you change Docker's default architecture to `linux/amd64` by running the following command _before_ executing the aforementioned steps
-> 
-> ```export DOCKER_DEFAULT_PLATFORM=linux/amd64```
->
-> More details can be found [here](https://medium.com/geekculture/from-apple-silicon-to-heroku-docker-registry-without-swearing-36a2f59b30a3). 
-
-### Using GitHub
-
-Fork the [nocodb-seed-heroku repository](https://github.com/nocodb/nocodb-seed-heroku) to your GitHub account.
-Login to Heroku, go to your NocoDB app, and head to the "Deploy" tab.
-Select "GitHub" in the "Deployment method" section.
-
-In the "Connect to GitHub" section, search for your forked nocodb-seed-heroku repo. Connect to it:
-
-![image](https://user-images.githubusercontent.com/55474996/143479577-e8bdc1f0-99d1-4072-8d95-4879cc54ddb2.png)
-
-In the "Automatic deploys" section, select "Enable Automatic Deploys":
-
-![image](https://user-images.githubusercontent.com/55474996/143479705-b5280199-aa31-40db-a5aa-7586eb918c01.png)
-
-Head back to your forked nocodb-seed-heroku repo on your GitHub account. Edit one of your files and make a simple modification (example, add some random characters to the readme.md) and commit the change directly to the main branch.
-
-This will trigger the Heroku deployment. Your app should now be updated to the latest release of NocoDB.
-
 ## Homebrew
 
 Run following commands to upgrade Homebrew Nocodb version.
diff --git a/packages/noco-docs/package-lock.json b/packages/noco-docs/package-lock.json
index 8d7e5b58a7..b649a13567 100644
--- a/packages/noco-docs/package-lock.json
+++ b/packages/noco-docs/package-lock.json
@@ -12676,9 +12676,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.10.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
-      "integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "dependencies": {
         "side-channel": "^1.0.4"
       },
@@ -26779,9 +26779,9 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
     },
     "qs": {
-      "version": "6.10.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
-      "integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "requires": {
         "side-channel": "^1.0.4"
       }
diff --git a/packages/nocodb-sdk/.cspell.json b/packages/nocodb-sdk/.cspell.json
index 59c785dd42..f122c09e5f 100644
--- a/packages/nocodb-sdk/.cspell.json
+++ b/packages/nocodb-sdk/.cspell.json
@@ -31,4 +31,4 @@
     "tsconfig.json",
     "node_modules/**"
   ]
-}
+} 
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 56e72d2705..375375a358 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -84,6 +84,8 @@ export interface BaseType {
   updated_at?: any;
   inflection_column?: string;
   inflection_table?: string;
+  order?: number;
+  enabled?: boolean;
 }
 
 export interface BaseReqType {
@@ -106,8 +108,8 @@ export interface BaseListType {
 
 export interface TableType {
   id?: string;
-  fk_project_id?: string;
-  fk_base_id?: string;
+  project_id?: string;
+  base_id?: string;
   table_name: string;
   title: string;
   type?: string;
@@ -121,7 +123,6 @@ export interface TableType {
   columns?: ColumnType[];
   columnsById?: object;
   slug?: string;
-  project_id?: string;
   mm?: boolean | number;
 }
 
@@ -1892,6 +1893,194 @@ export class Api<
         ...params,
       }),
   };
+  base = {
+    /**
+     * @description Read project base details
+     *
+     * @tags Base
+     * @name Read
+     * @summary Base read
+     * @request GET:/api/v1/db/meta/projects/{projectId}/bases/{baseId}
+     * @response `200` `object` OK
+     */
+    read: (projectId: string, baseId: string, params: RequestParams = {}) =>
+      this.request<object, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/bases/${baseId}`,
+        method: 'GET',
+        format: 'json',
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name Delete
+     * @summary Base delete
+     * @request DELETE:/api/v1/db/meta/projects/{projectId}/bases/{baseId}
+     * @response `200` `void` OK
+     */
+    delete: (projectId: string, baseId: string, params: RequestParams = {}) =>
+      this.request<void, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/bases/${baseId}`,
+        method: 'DELETE',
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name Update
+     * @summary Base update
+     * @request PATCH:/api/v1/db/meta/projects/{projectId}/bases/{baseId}
+     * @response `200` `void` OK
+     */
+    update: (
+      projectId: string,
+      baseId: string,
+      data: any,
+      params: RequestParams = {}
+    ) =>
+      this.request<void, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/bases/${baseId}`,
+        method: 'PATCH',
+        body: data,
+        type: ContentType.Json,
+        ...params,
+      }),
+
+    /**
+     * @description Get project base list
+     *
+     * @tags Base
+     * @name List
+     * @summary Base list
+     * @request GET:/api/v1/db/meta/projects/{projectId}/bases/
+     * @response `200` `object` OK
+     */
+    list: (projectId: string, params: RequestParams = {}) =>
+      this.request<object, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/bases/`,
+        method: 'GET',
+        format: 'json',
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name Create
+     * @summary Base create
+     * @request POST:/api/v1/db/meta/projects/{projectId}/bases/
+     * @response `200` `BaseType` OK
+     */
+    create: (
+      projectId: string,
+      data: BaseType & {
+        external?: boolean;
+      },
+      params: RequestParams = {}
+    ) =>
+      this.request<BaseType, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/bases/`,
+        method: 'POST',
+        body: data,
+        type: ContentType.Json,
+        format: 'json',
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name TableList
+     * @request GET:/api/v1/db/meta/projects/{projectId}/{baseId}/tables
+     * @response `200` `TableListType`
+     */
+    tableList: (
+      projectId: string,
+      baseId: string,
+      query?: {
+        page?: number;
+        pageSize?: number;
+        sort?: string;
+        includeM2M?: boolean;
+      },
+      params: RequestParams = {}
+    ) =>
+      this.request<TableListType, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/${baseId}/tables`,
+        method: 'GET',
+        query: query,
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name TableCreate
+     * @request POST:/api/v1/db/meta/projects/{projectId}/{baseId}/tables
+     * @response `200` `TableType` OK
+     */
+    tableCreate: (
+      projectId: string,
+      baseId: string,
+      data: TableReqType,
+      params: RequestParams = {}
+    ) =>
+      this.request<TableType, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/${baseId}/tables`,
+        method: 'POST',
+        body: data,
+        type: ContentType.Json,
+        format: 'json',
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name MetaDiffSync
+     * @request POST:/api/v1/db/meta/projects/{projectId}/meta-diff/{baseId}
+     * @response `200` `any` OK
+     */
+    metaDiffSync: (
+      projectId: string,
+      baseId: string,
+      params: RequestParams = {}
+    ) =>
+      this.request<any, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/meta-diff/${baseId}`,
+        method: 'POST',
+        format: 'json',
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name MetaDiffGet
+     * @request GET:/api/v1/db/meta/projects/{projectId}/meta-diff/{baseId}
+     * @response `200` `any` OK
+     */
+    metaDiffGet: (
+      projectId: string,
+      baseId: string,
+      params: RequestParams = {}
+    ) =>
+      this.request<any, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/meta-diff/${baseId}`,
+        method: 'GET',
+        format: 'json',
+        ...params,
+      }),
+  };
   dbTable = {
     /**
      * No description
diff --git a/packages/nocodb-sdk/src/lib/columnRules/QrCodeRules.ts b/packages/nocodb-sdk/src/lib/columnRules/QrCodeRules.ts
index 1d02ae702f..bf2e1f77e1 100644
--- a/packages/nocodb-sdk/src/lib/columnRules/QrCodeRules.ts
+++ b/packages/nocodb-sdk/src/lib/columnRules/QrCodeRules.ts
@@ -7,4 +7,6 @@ export const AllowedColumnTypesForQrCode = [
   UITypes.PhoneNumber,
   UITypes.URL,
   UITypes.Email,
+  UITypes.Decimal,
+  UITypes.Number,
 ];
diff --git a/packages/nocodb-sdk/src/lib/formulaHelpers.ts b/packages/nocodb-sdk/src/lib/formulaHelpers.ts
index 237e1ac4af..94f22b79b5 100644
--- a/packages/nocodb-sdk/src/lib/formulaHelpers.ts
+++ b/packages/nocodb-sdk/src/lib/formulaHelpers.ts
@@ -19,7 +19,10 @@ export const jsepCurlyHook = {
           context.index += 1;
           env.node = {
             type: jsep.IDENTIFIER,
-            name: nodes.map((node) => node.name).join(' '),
+            // column name with space would break it down to jsep.IDENTIFIER + jsep.LITERAL
+            // either take node.name for jsep.IDENTIFIER
+            // or take node.value for jsep.LITERAL
+            name: nodes.map((node) => node.name || node.value).join(' '),
           };
           return env.node;
         } else {
diff --git a/packages/nocodb/README.md b/packages/nocodb/README.md
index b348b6d25c..7318eee241 100644
--- a/packages/nocodb/README.md
+++ b/packages/nocodb/README.md
@@ -4,19 +4,18 @@
 
 Even though this package is a backend project, you can still visit the dashboard as it includes ``nc-lib-gui``. 
 
-```
-
+```sh
 npm install
 npm run watch:run
 # open localhost:8080/dashboard in browser
 ```
 
-As ``nc-lib-gui`` is hosted in npm registry, for local development, you should run ``nc-gui`` separately. 
+As ``nc-lib-gui`` is hosted in the npm registry, for local development, you should run ``nc-gui`` separately. 
 
-If you wish to combine the frontend and backend together in your local devlopment environment, you may use ``packages/nc-lib-gui`` as a local depenedency by updating the ``packages/nocodb/package.json`` to 
+If you wish to combine the frontend and backend together in your local development environment, you may use ``packages/nc-lib-gui`` as a local dependency by updating the ``packages/nocodb/package.json`` to 
 
 ```json
 "nc-lib-gui": "file:../nc-lib-gui"
 ```
 
-In this case, whenever there is any changes made in frontend, you need to run ``npm run build:copy`` under ``packages/nc-gui/``.
+In this case, whenever there are any changes made in the frontend, you need to run ``npm run build:copy`` under ``packages/nc-gui/``.
diff --git a/packages/nocodb/package-lock.json b/packages/nocodb/package-lock.json
index 4d65271a41..6efa3fe845 100644
--- a/packages/nocodb/package-lock.json
+++ b/packages/nocodb/package-lock.json
@@ -63,7 +63,7 @@
         "multer": "^1.4.2",
         "mysql2": "^2.2.5",
         "nanoid": "^3.1.20",
-        "nc-help": "0.2.79",
+        "nc-help": "0.2.82",
         "nc-lib-gui": "0.100.2",
         "nc-plugin": "0.1.2",
         "ncp": "^2.0.0",
@@ -477,11 +477,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
-      "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
+      "version": "7.20.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz",
+      "integrity": "sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.11"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -728,6 +728,11 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@ioredis/commands": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
+      "integrity": "sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg=="
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz",
@@ -3031,14 +3036,14 @@
       "dev": true
     },
     "node_modules/bull": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/bull/-/bull-4.9.0.tgz",
-      "integrity": "sha512-yiaSb41dywjIhJ3i1mczjQGDmM6pLIoM1Ea0Gcf5HKDxOoEzL5i9XEEKW7fbsj7u083UEOnQ4gSWfbWIUDO6JQ==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/bull/-/bull-4.10.2.tgz",
+      "integrity": "sha512-xa65xtWjQsLqYU/eNaXxq9VRG8xd6qNsQEjR7yjYuae05xKrzbVMVj2QgrYsTMmSs/vsqJjHqHSRRiW1+IkGXQ==",
       "dependencies": {
         "cron-parser": "^4.2.1",
         "debuglog": "^1.0.0",
         "get-port": "^5.1.1",
-        "ioredis": "^4.28.5",
+        "ioredis": "^5.0.0",
         "lodash": "^4.17.21",
         "msgpackr": "^1.5.2",
         "p-timeout": "^3.2.0",
@@ -3046,7 +3051,38 @@
         "uuid": "^8.3.0"
       },
       "engines": {
-        "node": ">=10.1"
+        "node": ">=12"
+      }
+    },
+    "node_modules/bull/node_modules/denque": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
+      "integrity": "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/bull/node_modules/ioredis": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.2.4.tgz",
+      "integrity": "sha512-qIpuAEt32lZJQ0XyrloCRdlEdUUNGG9i0UOk6zgzK6igyudNWqEBxfH6OlbnOOoBBvr1WB02mm8fR55CnikRng==",
+      "dependencies": {
+        "@ioredis/commands": "^1.1.1",
+        "cluster-key-slot": "^1.1.0",
+        "debug": "^4.3.4",
+        "denque": "^2.0.1",
+        "lodash.defaults": "^4.2.0",
+        "lodash.isarguments": "^3.1.0",
+        "redis-errors": "^1.2.0",
+        "redis-parser": "^3.0.0",
+        "standard-as-callback": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ioredis"
       }
     },
     "node_modules/bullmq": {
@@ -10589,9 +10625,9 @@
       }
     },
     "node_modules/nc-help": {
-      "version": "0.2.79",
-      "resolved": "https://registry.npmjs.org/nc-help/-/nc-help-0.2.79.tgz",
-      "integrity": "sha512-r5lzCJE6OGA32KFhNm2uZdt+KtCGNZNTVJztjLnMPKTzHqHxM6+IqrNohOdwdW2b4qMu2LTM+gXloYacbLY6Qg==",
+      "version": "0.2.82",
+      "resolved": "https://registry.npmjs.org/nc-help/-/nc-help-0.2.82.tgz",
+      "integrity": "sha512-R/jGDhMt4qEA17Hev6XbJHSkNm2W+n2vkilUMhOK/oBvFtG/2Vf9fsTdBanFW6ZY7y7Tdhi5BFTVvGtx/CRlrw==",
       "dependencies": {
         "@rudderstack/rudder-sdk-node": "^1.1.3",
         "axios": "^0.21.1",
@@ -12801,9 +12837,9 @@
       "dev": true
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "node_modules/regex-not": {
       "version": "1.0.2",
@@ -13241,9 +13277,9 @@
       }
     },
     "node_modules/safe-stable-stringify": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.0.tgz",
-      "integrity": "sha512-eehKHKpab6E741ud7ZIMcXhKcP6TSIezPkNZhy5U8xC6+VvrRdUA2tMgxGxaGl4cz7c2Ew5+mg5+wNB16KQqrA==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.1.tgz",
+      "integrity": "sha512-dVHE6bMtS/bnL2mwualjc6IxEv1F+OCUpA46pKUj6F8uDbUM0jCCulPqRNPSnWwGNKx5etqMjZYdXtrm5KJZGA==",
       "engines": {
         "node": ">=10"
       }
@@ -18010,11 +18046,11 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
-      "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
+      "version": "7.20.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz",
+      "integrity": "sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.11"
       }
     },
     "@bitauth/libauth": {
@@ -18208,6 +18244,11 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@ioredis/commands": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
+      "integrity": "sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg=="
+    },
     "@jridgewell/resolve-uri": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz",
@@ -20092,19 +20133,42 @@
       "dev": true
     },
     "bull": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/bull/-/bull-4.9.0.tgz",
-      "integrity": "sha512-yiaSb41dywjIhJ3i1mczjQGDmM6pLIoM1Ea0Gcf5HKDxOoEzL5i9XEEKW7fbsj7u083UEOnQ4gSWfbWIUDO6JQ==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/bull/-/bull-4.10.2.tgz",
+      "integrity": "sha512-xa65xtWjQsLqYU/eNaXxq9VRG8xd6qNsQEjR7yjYuae05xKrzbVMVj2QgrYsTMmSs/vsqJjHqHSRRiW1+IkGXQ==",
       "requires": {
         "cron-parser": "^4.2.1",
         "debuglog": "^1.0.0",
         "get-port": "^5.1.1",
-        "ioredis": "^4.28.5",
+        "ioredis": "^5.0.0",
         "lodash": "^4.17.21",
         "msgpackr": "^1.5.2",
         "p-timeout": "^3.2.0",
         "semver": "^7.3.2",
         "uuid": "^8.3.0"
+      },
+      "dependencies": {
+        "denque": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
+          "integrity": "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw=="
+        },
+        "ioredis": {
+          "version": "5.2.4",
+          "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.2.4.tgz",
+          "integrity": "sha512-qIpuAEt32lZJQ0XyrloCRdlEdUUNGG9i0UOk6zgzK6igyudNWqEBxfH6OlbnOOoBBvr1WB02mm8fR55CnikRng==",
+          "requires": {
+            "@ioredis/commands": "^1.1.1",
+            "cluster-key-slot": "^1.1.0",
+            "debug": "^4.3.4",
+            "denque": "^2.0.1",
+            "lodash.defaults": "^4.2.0",
+            "lodash.isarguments": "^3.1.0",
+            "redis-errors": "^1.2.0",
+            "redis-parser": "^3.0.0",
+            "standard-as-callback": "^2.1.0"
+          }
+        }
       }
     },
     "bullmq": {
@@ -26004,9 +26068,9 @@
       "integrity": "sha512-3AryS9uwa5NfISLxMciUonrH7YfXp+nlahB9T7girXIsLQrmwX4MdnuKs32akduCOGpKmjTJSWmATULbuMkbfw=="
     },
     "nc-help": {
-      "version": "0.2.79",
-      "resolved": "https://registry.npmjs.org/nc-help/-/nc-help-0.2.79.tgz",
-      "integrity": "sha512-r5lzCJE6OGA32KFhNm2uZdt+KtCGNZNTVJztjLnMPKTzHqHxM6+IqrNohOdwdW2b4qMu2LTM+gXloYacbLY6Qg==",
+      "version": "0.2.82",
+      "resolved": "https://registry.npmjs.org/nc-help/-/nc-help-0.2.82.tgz",
+      "integrity": "sha512-R/jGDhMt4qEA17Hev6XbJHSkNm2W+n2vkilUMhOK/oBvFtG/2Vf9fsTdBanFW6ZY7y7Tdhi5BFTVvGtx/CRlrw==",
       "requires": {
         "@rudderstack/rudder-sdk-node": "^1.1.3",
         "axios": "^0.21.1",
@@ -27717,9 +27781,9 @@
       "dev": true
     },
     "regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "regex-not": {
       "version": "1.0.2",
@@ -28050,9 +28114,9 @@
       }
     },
     "safe-stable-stringify": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.0.tgz",
-      "integrity": "sha512-eehKHKpab6E741ud7ZIMcXhKcP6TSIezPkNZhy5U8xC6+VvrRdUA2tMgxGxaGl4cz7c2Ew5+mg5+wNB16KQqrA=="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.1.tgz",
+      "integrity": "sha512-dVHE6bMtS/bnL2mwualjc6IxEv1F+OCUpA46pKUj6F8uDbUM0jCCulPqRNPSnWwGNKx5etqMjZYdXtrm5KJZGA=="
     },
     "safer-buffer": {
       "version": "2.1.2",
diff --git a/packages/nocodb/package.json b/packages/nocodb/package.json
index af6b535349..a421d41fe6 100644
--- a/packages/nocodb/package.json
+++ b/packages/nocodb/package.json
@@ -103,7 +103,7 @@
     "multer": "^1.4.2",
     "mysql2": "^2.2.5",
     "nanoid": "^3.1.20",
-    "nc-help": "0.2.79",
+    "nc-help": "0.2.82",
     "nc-lib-gui": "0.100.2",
     "nc-plugin": "0.1.2",
     "ncp": "^2.0.0",
diff --git a/packages/nocodb/src/lib/db/sql-client/lib/sqlite/SqliteClient.ts b/packages/nocodb/src/lib/db/sql-client/lib/sqlite/SqliteClient.ts
index 115e5e7d03..ccced13ce2 100644
--- a/packages/nocodb/src/lib/db/sql-client/lib/sqlite/SqliteClient.ts
+++ b/packages/nocodb/src/lib/db/sql-client/lib/sqlite/SqliteClient.ts
@@ -19,6 +19,8 @@ class SqliteClient extends KnexClient {
   private _version: any;
 
   constructor(connectionConfig) {
+    // sqlite does not support inserting default values and knex fires a warning without this flag
+    connectionConfig.connection.useNullAsDefault = true;
     super(connectionConfig);
     this.sqlClient = knex(connectionConfig.connection);
     this.queries = queries;
diff --git a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/CustomKnex.ts b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/CustomKnex.ts
index 526f954df6..b114d11526 100644
--- a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/CustomKnex.ts
+++ b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/CustomKnex.ts
@@ -988,6 +988,11 @@ function parseNestedCondition(obj, qb, pKey?, table?, tableAlias?) {
 type CustomKnex = Knex;
 
 function CustomKnex(arg: string | Knex.Config<any> | any): CustomKnex {
+  // sqlite does not support inserting default values and knex fires a warning without this flag
+  if (arg?.client === 'sqlite3') {
+    arg.useNullAsDefault = true;
+  }
+
   const kn: any = knex(arg);
 
   const knexRaw = kn.raw;
diff --git a/packages/nocodb/src/lib/meta/MetaAPILogger.ts b/packages/nocodb/src/lib/meta/MetaAPILogger.ts
index 8531e96c44..88aac02eec 100644
--- a/packages/nocodb/src/lib/meta/MetaAPILogger.ts
+++ b/packages/nocodb/src/lib/meta/MetaAPILogger.ts
@@ -11,7 +11,6 @@ export default class MetaAPILogger {
       connection: {
         filename: 'noco_log.db',
       },
-      useNullAsDefault: true,
     });
   }
 
diff --git a/packages/nocodb/src/lib/meta/NcMetaIOImpl.ts b/packages/nocodb/src/lib/meta/NcMetaIOImpl.ts
index e2b3e87a0c..578afa059f 100644
--- a/packages/nocodb/src/lib/meta/NcMetaIOImpl.ts
+++ b/packages/nocodb/src/lib/meta/NcMetaIOImpl.ts
@@ -77,10 +77,6 @@ export default class NcMetaIOImpl extends NcMetaIO {
   constructor(app: Noco, config: NcConfig, trx = null) {
     super(app, config);
 
-    if (this.config?.meta?.db?.client === 'sqlite3') {
-      this.config.meta.db.useNullAsDefault = true;
-    }
-
     if (this.config?.meta?.db) {
       this.connection = trx || XKnex(this.config?.meta?.db);
     } else {
diff --git a/packages/nocodb/src/lib/meta/api/baseApis.ts b/packages/nocodb/src/lib/meta/api/baseApis.ts
new file mode 100644
index 0000000000..3dce021dc8
--- /dev/null
+++ b/packages/nocodb/src/lib/meta/api/baseApis.ts
@@ -0,0 +1,391 @@
+import { Request, Response } from 'express';
+import Project from '../../models/Project';
+import { BaseListType, ModelTypes, UITypes } from 'nocodb-sdk';
+import { PagedResponseImpl } from '../helpers/PagedResponse';
+import { syncBaseMigration } from '../helpers/syncMigration';
+import { IGNORE_TABLES } from '../../utils/common/BaseApiBuilder';
+import Column from '../../models/Column';
+import Model from '../../models/Model';
+import NcHelp from '../../utils/NcHelp';
+import Base from '../../models/Base';
+import NcConnectionMgrv2 from '../../utils/common/NcConnectionMgrv2';
+import getTableNameAlias, { getColumnNameAlias } from '../helpers/getTableName';
+import LinkToAnotherRecordColumn from '../../models/LinkToAnotherRecordColumn';
+import ncMetaAclMw from '../helpers/ncMetaAclMw';
+import { Tele } from 'nc-help';
+import getColumnUiType from '../helpers/getColumnUiType';
+import mapDefaultPrimaryValue from '../helpers/mapDefaultPrimaryValue';
+import { extractAndGenerateManyToManyRelations } from './metaDiffApis';
+import { metaApiMetrics } from '../helpers/apiMetrics';
+
+export async function baseGet(
+  req: Request<any, any, any>,
+  res: Response<Base>
+) {
+  const base = await Base.get(req.params.baseId);
+
+  base.config = base.getConnectionConfig();
+
+  res.json(base);
+}
+
+export async function baseUpdate(
+  req: Request<any, any, any>,
+  res: Response<any>
+) {
+  const baseBody = req.body;
+  const project = await Project.getWithInfo(req.params.projectId);
+  const base = await Base.updateBase(req.params.baseId,
+    {
+      ...baseBody,
+      type: baseBody.config?.client,
+      projectId: project.id,
+      id: req.params.baseId,
+    }
+  );
+
+  delete base.config;
+
+  Tele.emit('evt', {
+    evt_type: 'base:updated'
+  });
+
+  res.json(base);
+}
+
+export async function baseList(
+  req: Request<any, any, any>,
+  res: Response<BaseListType>,
+  next
+) {
+  try {
+    const bases = await Base.list({ projectId: req.params.projectId });
+
+    res // todo: pagination
+      .json({
+          bases: new PagedResponseImpl(bases, {
+            count: bases.length,
+            limit: bases.length,
+          })
+        }
+      );
+  } catch (e) {
+    console.log(e);
+    next(e);
+  }
+}
+
+export async function baseDelete(
+  req: Request<any, any, any>,
+  res: Response<any>
+) {
+  const base = await Base.get(req.params.baseId);
+  const result = await base.delete();
+  Tele.emit('evt', { evt_type: 'base:deleted' });
+  res.json(result);
+}
+
+async function baseCreate(req: Request<any, any>, res) {
+  // type | base | projectId
+  const baseBody = req.body;
+  const project = await Project.getWithInfo(req.params.projectId);
+  const base = await Base.createBase({
+    ...baseBody,
+    type: baseBody.config?.client,
+    projectId: project.id,
+  });
+
+  await syncBaseMigration(project, base);
+
+  const info = await populateMeta(base, project);
+  
+  Tele.emit('evt_api_created', info);
+
+  delete base.config;
+
+  Tele.emit('evt', {
+    evt_type: 'base:created'
+  });
+
+  res.json(base);
+}
+
+async function populateMeta(base: Base, project: Project): Promise<any> {
+  const info = {
+    type: 'rest',
+    apiCount: 0,
+    tablesCount: 0,
+    relationsCount: 0,
+    viewsCount: 0,
+    client: base?.getConnectionConfig()?.client,
+    timeTaken: 0,
+  };
+
+  const t = process.hrtime();
+  const sqlClient = NcConnectionMgrv2.getSqlClient(base);
+  let order = 1;
+  const models2: { [tableName: string]: Model } = {};
+
+  const virtualColumnsInsert = [];
+
+  /* Get all relations */
+  const relations = (await sqlClient.relationListAll())?.data?.list;
+
+  info.relationsCount = relations.length;
+
+  let tables = (await sqlClient.tableList())?.data?.list
+    ?.filter(({ tn }) => !IGNORE_TABLES.includes(tn))
+    ?.map((t) => {
+      t.order = ++order;
+      t.title = getTableNameAlias(t.tn, project.prefix, base);
+      t.table_name = t.tn;
+      return t;
+    });
+
+
+  /* filter based on prefix */
+  if (base.is_meta && project?.prefix) {
+    tables = tables.filter((t) => {
+      return t?.tn?.startsWith(project?.prefix);
+    });
+  }
+  
+
+  info.tablesCount = tables.length;
+
+  tables.forEach((t) => {
+    t.title = getTableNameAlias(t.tn, project.prefix, base);
+  });
+
+  relations.forEach((r) => {
+    r.title = getTableNameAlias(r.tn, project.prefix, base);
+    r.rtitle = getTableNameAlias(r.rtn, project.prefix, base);
+  });
+
+  // await this.syncRelations();
+
+  const tableMetasInsert = tables.map((table) => {
+    return async () => {
+      /* filter relation where this table is present */
+      const tableRelations = relations.filter(
+        (r) => r.tn === table.tn || r.rtn === table.tn
+      );
+
+      const columns: Array<
+        Omit<Column, 'column_name' | 'title'> & {
+          cn: string;
+          system?: boolean;
+        }
+      > = (await sqlClient.columnList({ tn: table.tn }))?.data?.list;
+
+      const hasMany =
+        table.type === 'view'
+          ? []
+          : tableRelations.filter((r) => r.rtn === table.tn);
+      const belongsTo =
+        table.type === 'view'
+          ? []
+          : tableRelations.filter((r) => r.tn === table.tn);
+
+      mapDefaultPrimaryValue(columns);
+
+      // add vitual columns
+      const virtualColumns = [
+        ...hasMany.map((hm) => {
+          return {
+            uidt: UITypes.LinkToAnotherRecord,
+            type: 'hm',
+            hm,
+            title: `${hm.title} List`,
+          };
+        }),
+        ...belongsTo.map((bt) => {
+          // find and mark foreign key column
+          const fkColumn = columns.find((c) => c.cn === bt.cn);
+          if (fkColumn) {
+            fkColumn.uidt = UITypes.ForeignKey;
+            fkColumn.system = true;
+          }
+
+          return {
+            uidt: UITypes.LinkToAnotherRecord,
+            type: 'bt',
+            bt,
+            title: `${bt.rtitle}`,
+          };
+        }),
+      ];
+
+      // await Model.insert(project.id, base.id, meta);
+
+      /* create nc_models and its rows if it doesn't exists  */
+      models2[table.table_name] = await Model.insert(project.id, base.id, {
+        table_name: table.tn || table.table_name,
+        title: table.title,
+        type: table.type || 'table',
+        order: table.order,
+      });
+
+      // table crud apis
+      info.apiCount += 5;
+
+      let colOrder = 1;
+
+      for (const column of columns) {
+        await Column.insert({
+          uidt: column.uidt || getColumnUiType(base, column),
+          fk_model_id: models2[table.tn].id,
+          ...column,
+          title: getColumnNameAlias(column.cn, base),
+          column_name: column.cn,
+          order: colOrder++,
+        });
+      }
+      virtualColumnsInsert.push(async () => {
+        const columnNames = {};
+        for (const column of virtualColumns) {
+          // generate unique name if there is any duplicate column name
+          let c = 0;
+          while (`${column.title}${c || ''}` in columnNames) {
+            c++;
+          }
+          column.title = `${column.title}${c || ''}`;
+          columnNames[column.title] = true;
+
+          const rel = column.hm || column.bt;
+
+          const rel_column_id = (await models2?.[rel.tn]?.getColumns())?.find(
+            (c) => c.column_name === rel.cn
+          )?.id;
+
+          const tnId = models2?.[rel.tn]?.id;
+
+          const ref_rel_column_id = (
+            await models2?.[rel.rtn]?.getColumns()
+          )?.find((c) => c.column_name === rel.rcn)?.id;
+
+          const rtnId = models2?.[rel.rtn]?.id;
+
+          try {
+            await Column.insert<LinkToAnotherRecordColumn>({
+              project_id: project.id,
+              db_alias: base.id,
+              fk_model_id: models2[table.tn].id,
+              cn: column.cn,
+              title: column.title,
+              uidt: column.uidt,
+              type: column.hm ? 'hm' : column.mm ? 'mm' : 'bt',
+              // column_id,
+              fk_child_column_id: rel_column_id,
+              fk_parent_column_id: ref_rel_column_id,
+              fk_index_name: rel.fkn,
+              ur: rel.ur,
+              dr: rel.dr,
+              order: colOrder++,
+              fk_related_model_id: column.hm ? tnId : rtnId,
+              system: column.system,
+            });
+
+            // nested relations data apis
+            info.apiCount += 5;
+          } catch (e) {
+            console.log(e);
+          }
+        }
+      });
+    };
+  });
+
+  /* handle xc_tables update in parallel */
+  await NcHelp.executeOperations(tableMetasInsert, base.type);
+  await NcHelp.executeOperations(virtualColumnsInsert, base.type);
+  await extractAndGenerateManyToManyRelations(Object.values(models2));
+
+  let views: Array<{ order: number; table_name: string; title: string }> = (
+    await sqlClient.viewList()
+  )?.data?.list
+    // ?.filter(({ tn }) => !IGNORE_TABLES.includes(tn))
+    ?.map((v) => {
+      v.order = ++order;
+      v.table_name = v.view_name;
+      v.title = getTableNameAlias(v.view_name, project.prefix, base);
+      return v;
+    });
+
+  /* filter based on prefix */
+  if (base.is_meta && project?.prefix) {
+    views = tables.filter((t) => {
+      return t?.tn?.startsWith(project?.prefix);
+    });
+  }
+
+  info.viewsCount = views.length;
+
+  const viewMetasInsert = views.map((table) => {
+    return async () => {
+      const columns = (await sqlClient.columnList({ tn: table.table_name }))
+        ?.data?.list;
+
+      /* create nc_models and its rows if it doesn't exists  */
+      models2[table.table_name] = await Model.insert(project.id, base.id, {
+        table_name: table.table_name,
+        title: getTableNameAlias(table.table_name, project.prefix, base),
+        // todo: sanitize
+        type: ModelTypes.VIEW,
+        order: table.order,
+      });
+
+      let colOrder = 1;
+
+      // view apis
+      info.apiCount += 2;
+
+      for (const column of columns) {
+        await Column.insert({
+          fk_model_id: models2[table.table_name].id,
+          ...column,
+          title: getColumnNameAlias(column.cn, base),
+          order: colOrder++,
+          uidt: getColumnUiType(base, column),
+        });
+      }
+    };
+  });
+
+  await NcHelp.executeOperations(viewMetasInsert, base.type);
+
+  const t1 = process.hrtime(t);
+  const t2 = t1[0] + t1[1] / 1000000000;
+
+  (info as any).timeTaken = t2.toFixed(1);
+
+  return info;
+}
+
+export default (router) => {
+  router.get(
+    '/api/v1/db/meta/projects/:projectId/bases/:baseId',
+    metaApiMetrics,
+    ncMetaAclMw(baseGet, 'baseGet')
+  );
+  router.patch(
+    '/api/v1/db/meta/projects/:projectId/bases/:baseId',
+    metaApiMetrics,
+    ncMetaAclMw(baseUpdate, 'baseUpdate')
+  );
+  router.delete(
+    '/api/v1/db/meta/projects/:projectId/bases/:baseId',
+    metaApiMetrics,
+    ncMetaAclMw(baseDelete, 'baseDelete')
+  );
+  router.post(
+    '/api/v1/db/meta/projects/:projectId/bases',
+    metaApiMetrics,
+    ncMetaAclMw(baseCreate, 'baseCreate')
+  );
+  router.get(
+    '/api/v1/db/meta/projects/:projectId/bases',
+    metaApiMetrics,
+    ncMetaAclMw(baseList, 'baseList')
+  );
+};
diff --git a/packages/nocodb/src/lib/meta/api/dataApis/helpers.ts b/packages/nocodb/src/lib/meta/api/dataApis/helpers.ts
index b68a10f1d3..2a9398fab0 100644
--- a/packages/nocodb/src/lib/meta/api/dataApis/helpers.ts
+++ b/packages/nocodb/src/lib/meta/api/dataApis/helpers.ts
@@ -24,7 +24,6 @@ export async function getViewAndModelFromRequestByAliasOrId(
 
   const model = await Model.getByAliasOrId({
     project_id: project.id,
-    base_id: project.bases?.[0]?.id,
     aliasOrId: req.params.tableName,
   });
   const view =
@@ -58,7 +57,10 @@ export async function extractXlsxData(view: View, req: Request) {
   });
 
   const { offset, dbRows, elapsed } = await getDbRows(baseModel, view, req);
-  const data = XLSX.utils.json_to_sheet(dbRows);
+
+  const fields = req.query.fields as string[];
+
+  const data = XLSX.utils.json_to_sheet(dbRows, { header: fields });
 
   return { offset, dbRows, elapsed, data };
 }
diff --git a/packages/nocodb/src/lib/meta/api/dataApis/oldDataApis.ts b/packages/nocodb/src/lib/meta/api/dataApis/oldDataApis.ts
index cff7dc0534..5df008eb8a 100644
--- a/packages/nocodb/src/lib/meta/api/dataApis/oldDataApis.ts
+++ b/packages/nocodb/src/lib/meta/api/dataApis/oldDataApis.ts
@@ -108,7 +108,6 @@ async function getViewAndModelFromRequest(req) {
   const project = await Project.getWithInfo(req.params.projectId);
   const model = await Model.getByAliasOrId({
     project_id: project.id,
-    base_id: project.bases?.[0]?.id,
     aliasOrId: req.params.tableName,
   });
   const view =
diff --git a/packages/nocodb/src/lib/meta/api/index.ts b/packages/nocodb/src/lib/meta/api/index.ts
index 39085584db..ba154978d8 100644
--- a/packages/nocodb/src/lib/meta/api/index.ts
+++ b/packages/nocodb/src/lib/meta/api/index.ts
@@ -3,6 +3,7 @@ import orgLicenseApis from './orgLicenseApis';
 import orgTokenApis from './orgTokenApis';
 import orgUserApis from './orgUserApis';
 import projectApis from './projectApis';
+import baseApis from './baseApis';
 import tableApis from './tableApis';
 import columnApis from './columnApis';
 import { Router } from 'express';
@@ -60,6 +61,7 @@ const jobs: { [id: string]: { last_message: any } } = {};
 export default function (router: Router, server) {
   initStrategies(router);
   projectApis(router);
+  baseApis(router);
   utilApis(router);
 
   if (process.env['PLAYWRIGHT_TEST'] === 'true') {
diff --git a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
index 3257881ae4..7f31c60534 100644
--- a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
+++ b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
@@ -42,6 +42,7 @@ const applyChangesPriorityOrder = [
 type MetaDiff = {
   title?: string;
   table_name: string;
+  base_id: string;
   type: ModelTypes;
   detectedChanges: Array<MetaDiffChange>;
 };
@@ -120,7 +121,7 @@ async function getMetaDiff(
   const tableList: Array<{ tn: string }> = (
     await sqlClient.tableList()
   )?.data?.list?.filter((t) => {
-    if (project?.prefix) {
+    if (project?.prefix && base.is_meta) {
       return t.tn?.startsWith(project?.prefix);
     }
     return true;
@@ -157,6 +158,7 @@ async function getMetaDiff(
     if (oldMetaIdx === -1) {
       changes.push({
         table_name: table.tn,
+        base_id: base.id,
         type: ModelTypes.TABLE,
         detectedChanges: [
           {
@@ -175,6 +177,7 @@ async function getMetaDiff(
     const tableProp: MetaDiff = {
       title: oldMeta.title,
       table_name: table.tn,
+      base_id: base.id,
       type: ModelTypes.TABLE,
       detectedChanges: [],
     };
@@ -245,6 +248,7 @@ async function getMetaDiff(
   for (const model of oldTableMetas) {
     changes.push({
       table_name: model.table_name,
+      base_id: base.id,
       type: ModelTypes.TABLE,
       detectedChanges: [
         {
@@ -417,7 +421,7 @@ async function getMetaDiff(
       return v;
     })
     .filter((t) => {
-      if (project?.prefix) {
+      if (project?.prefix && base.is_meta) {
         return t.tn?.startsWith(project?.prefix);
       }
       return true;
@@ -430,6 +434,7 @@ async function getMetaDiff(
     if (oldMetaIdx === -1) {
       changes.push({
         table_name: view.tn,
+        base_id: base.id,
         type: ModelTypes.VIEW,
         detectedChanges: [
           {
@@ -448,6 +453,7 @@ async function getMetaDiff(
     const tableProp: MetaDiff = {
       title: oldMeta.title,
       table_name: view.tn,
+      base_id: base.id,
       type: ModelTypes.VIEW,
       detectedChanges: [],
     };
@@ -514,6 +520,7 @@ async function getMetaDiff(
   for (const model of oldViewMetas) {
     changes.push({
       table_name: model.table_name,
+      base_id: base.id,
       type: ModelTypes.TABLE,
       detectedChanges: [
         {
@@ -532,18 +539,229 @@ async function getMetaDiff(
 
 export async function metaDiff(req, res) {
   const project = await Project.getWithInfo(req.params.projectId);
-  const base = project.bases[0];
+  let changes = []
+  for (const base of project.bases) {
+    try {
+      // @ts-ignore
+      const sqlClient = NcConnectionMgrv2.getSqlClient(base);
+      changes = changes.concat(await getMetaDiff(sqlClient, project, base));
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  res.json(changes);
+}
+
+export async function baseMetaDiff(req, res) {
+  const project = await Project.getWithInfo(req.params.projectId);
+  const base = await Base.get(req.params.baseId);
+  let changes = []
 
-  // @ts-ignore
   const sqlClient = NcConnectionMgrv2.getSqlClient(base);
-  const changes = await getMetaDiff(sqlClient, project, base);
+  changes = await getMetaDiff(sqlClient, project, base);
 
   res.json(changes);
 }
 
 export async function metaDiffSync(req, res) {
   const project = await Project.getWithInfo(req.params.projectId);
-  const base = project.bases[0];
+  for (const base of project.bases) {
+    const virtualColumnInsert: Array<() => Promise<void>> = [];
+
+    // @ts-ignore
+    const sqlClient = NcConnectionMgrv2.getSqlClient(base);
+    const changes = await getMetaDiff(sqlClient, project, base);
+  
+    /* Get all relations */
+    // const relations = (await sqlClient.relationListAll())?.data?.list;
+  
+    for (const { table_name, detectedChanges } of changes) {
+      // reorder changes to apply relation remove changes
+      // before column remove to avoid foreign key constraint error
+      detectedChanges.sort((a, b) => {
+        return (
+          applyChangesPriorityOrder.indexOf(b.type) -
+          applyChangesPriorityOrder.indexOf(a.type)
+        );
+      });
+      
+      for (const change of detectedChanges) {
+        switch (change.type) {
+          case MetaDiffType.TABLE_NEW:
+            {
+              const columns = (
+                await sqlClient.columnList({ tn: table_name })
+              )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
+  
+              mapDefaultPrimaryValue(columns);
+  
+              const model = await Model.insert(project.id, base.id, {
+                table_name: table_name,
+                title: getTableNameAlias(table_name, base.is_meta ? project.prefix : '', base),
+                type: ModelTypes.TABLE,
+              });
+  
+              for (const column of columns) {
+                await Column.insert({
+                  uidt: getColumnUiType(base, column),
+                  fk_model_id: model.id,
+                  ...column,
+                  title: getColumnNameAlias(column.column_name, base),
+                });
+              }
+            }
+            break;
+          case MetaDiffType.VIEW_NEW:
+            {
+              const columns = (
+                await sqlClient.columnList({ tn: table_name })
+              )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
+  
+              mapDefaultPrimaryValue(columns);
+  
+              const model = await Model.insert(project.id, base.id, {
+                table_name: table_name,
+                title: getTableNameAlias(table_name, project.prefix, base),
+                type: ModelTypes.VIEW,
+              });
+  
+              for (const column of columns) {
+                await Column.insert({
+                  uidt: getColumnUiType(base, column),
+                  fk_model_id: model.id,
+                  ...column,
+                  title: getColumnNameAlias(column.column_name, base),
+                });
+              }
+            }
+            break;
+          case MetaDiffType.TABLE_REMOVE:
+          case MetaDiffType.VIEW_REMOVE:
+            {
+              await change.model.delete();
+            }
+            break;
+          case MetaDiffType.TABLE_COLUMN_ADD:
+          case MetaDiffType.VIEW_COLUMN_ADD:
+            {
+              const columns = (
+                await sqlClient.columnList({ tn: table_name })
+              )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
+              const column = columns.find((c) => c.cn === change.cn);
+              column.uidt = getColumnUiType(base, column);
+              //todo: inflection
+              column.title = getColumnNameAlias(column.cn, base);
+              await Column.insert({ fk_model_id: change.id, ...column });
+            }
+            // update old
+            // populateParams.tableNames.push({ tn });
+            // populateParams.oldMetas[tn] = oldMetas.find(m => m.tn === tn);
+  
+            break;
+          case MetaDiffType.TABLE_COLUMN_TYPE_CHANGE:
+          case MetaDiffType.VIEW_COLUMN_TYPE_CHANGE:
+            {
+              const columns = (
+                await sqlClient.columnList({ tn: table_name })
+              )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
+              const column = columns.find((c) => c.cn === change.cn);
+              const metaFact = ModelXcMetaFactory.create(
+                { client: base.type },
+                {}
+              );
+              column.uidt = metaFact.getUIDataType(column);
+              column.title = change.column.title;
+              await Column.update(change.column.id, column);
+            }
+            break;
+          case MetaDiffType.TABLE_COLUMN_REMOVE:
+          case MetaDiffType.VIEW_COLUMN_REMOVE:
+            await change.column.delete();
+            break;
+          case MetaDiffType.TABLE_RELATION_REMOVE:
+          case MetaDiffType.TABLE_VIRTUAL_M2M_REMOVE:
+            await change.column.delete();
+            break;
+          case MetaDiffType.TABLE_RELATION_ADD:
+            {
+              virtualColumnInsert.push(async () => {
+                const parentModel = await Model.getByIdOrName({
+                  project_id: base.project_id,
+                  base_id: base.id,
+                  table_name: change.rtn,
+                });
+                const childModel = await Model.getByIdOrName({
+                  project_id: base.project_id,
+                  base_id: base.id,
+                  table_name: change.tn,
+                });
+                const parentCol = await parentModel
+                  .getColumns()
+                  .then((cols) => cols.find((c) => c.column_name === change.rcn));
+                const childCol = await childModel
+                  .getColumns()
+                  .then((cols) => cols.find((c) => c.column_name === change.cn));
+  
+                await Column.update(childCol.id, {
+                  ...childCol,
+                  uidt: UITypes.ForeignKey,
+                  system: true,
+                });
+  
+                if (change.relationType === RelationTypes.BELONGS_TO) {
+                  const title = getUniqueColumnAliasName(
+                    childModel.columns,
+                    `${parentModel.title || parentModel.table_name}`
+                  );
+                  await Column.insert<LinkToAnotherRecordColumn>({
+                    uidt: UITypes.LinkToAnotherRecord,
+                    title,
+                    fk_model_id: childModel.id,
+                    fk_related_model_id: parentModel.id,
+                    type: RelationTypes.BELONGS_TO,
+                    fk_parent_column_id: parentCol.id,
+                    fk_child_column_id: childCol.id,
+                    virtual: false,
+                  });
+                } else if (change.relationType === RelationTypes.HAS_MANY) {
+                  const title = getUniqueColumnAliasName(
+                    childModel.columns,
+                    `${childModel.title || childModel.table_name} List`
+                  );
+                  await Column.insert<LinkToAnotherRecordColumn>({
+                    uidt: UITypes.LinkToAnotherRecord,
+                    title,
+                    fk_model_id: parentModel.id,
+                    fk_related_model_id: childModel.id,
+                    type: RelationTypes.HAS_MANY,
+                    fk_parent_column_id: parentCol.id,
+                    fk_child_column_id: childCol.id,
+                    virtual: false,
+                  });
+                }
+              });
+            }
+            break;
+        }
+      }
+    }
+  
+    await NcHelp.executeOperations(virtualColumnInsert, base.type);
+  
+    // populate m2m relations
+    await extractAndGenerateManyToManyRelations(await base.getModels());
+  }
+
+  Tele.emit('evt', { evt_type: 'metaDiff:synced' });
+
+  res.json({ msg: 'success' });
+}
+
+export async function baseMetaDiffSync(req, res) {
+  const project = await Project.getWithInfo(req.params.projectId);
+  const base = await Base.get(req.params.baseId);
+
   const virtualColumnInsert: Array<() => Promise<void>> = [];
 
   // @ts-ignore
@@ -554,15 +772,6 @@ export async function metaDiffSync(req, res) {
   // const relations = (await sqlClient.relationListAll())?.data?.list;
 
   for (const { table_name, detectedChanges } of changes) {
-    // reorder changes to apply relation remove changes
-    // before column remove to avoid foreign key constraint error
-    detectedChanges.sort((a, b) => {
-      return (
-        applyChangesPriorityOrder.indexOf(b.type) -
-        applyChangesPriorityOrder.indexOf(a.type)
-      );
-    });
-
     for (const change of detectedChanges) {
       switch (change.type) {
         case MetaDiffType.TABLE_NEW:
@@ -575,7 +784,7 @@ export async function metaDiffSync(req, res) {
 
             const model = await Model.insert(project.id, base.id, {
               table_name: table_name,
-              title: getTableNameAlias(table_name, project.prefix, base),
+              title: getTableNameAlias(table_name, base.is_meta ? project.prefix : '', base),
               type: ModelTypes.TABLE,
             });
 
@@ -729,7 +938,7 @@ export async function metaDiffSync(req, res) {
   // populate m2m relations
   await extractAndGenerateManyToManyRelations(await base.getModels());
 
-  Tele.emit('evt', { evt_type: 'metaDiff:synced' });
+  Tele.emit('evt', { evt_type: 'baseMetaDiff:synced' });
 
   res.json({ msg: 'success' });
 }
@@ -875,4 +1084,14 @@ router.post(
   metaApiMetrics,
   ncMetaAclMw(metaDiffSync, 'metaDiffSync')
 );
+router.get(
+  '/api/v1/db/meta/projects/:projectId/meta-diff/:baseId',
+  metaApiMetrics,
+  ncMetaAclMw(baseMetaDiff, 'baseMetaDiff')
+);
+router.post(
+  '/api/v1/db/meta/projects/:projectId/meta-diff/:baseId',
+  metaApiMetrics,
+  ncMetaAclMw(baseMetaDiffSync, 'baseMetaDiffSync')
+);
 export default router;
diff --git a/packages/nocodb/src/lib/meta/api/modelVisibilityApis.ts b/packages/nocodb/src/lib/meta/api/modelVisibilityApis.ts
index 68f95e928b..59b7006f71 100644
--- a/packages/nocodb/src/lib/meta/api/modelVisibilityApis.ts
+++ b/packages/nocodb/src/lib/meta/api/modelVisibilityApis.ts
@@ -3,7 +3,6 @@ import ModelRoleVisibility from '../../models/ModelRoleVisibility';
 import { Router } from 'express';
 import { Tele } from 'nc-help';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
-import Project from '../../models/Project';
 import { metaApiMetrics } from '../helpers/apiMetrics';
 async function xcVisibilityMetaSetAll(req, res) {
   Tele.emit('evt', { evt_type: 'uiAcl:updated' });
@@ -49,13 +48,12 @@ export async function xcVisibilityMetaGet(
   const roles = ['owner', 'creator', 'viewer', 'editor', 'commenter', 'guest'];
 
   const defaultDisabled = roles.reduce((o, r) => ({ ...o, [r]: false }), {});
-  const project = await Project.getWithInfo(projectId);
-
+  
   let models =
     _models ||
     (await Model.list({
       project_id: projectId,
-      base_id: project?.bases?.[0]?.id,
+      base_id: undefined,
     }));
 
   models = includeM2M ? models : (models.filter((t) => !t.mm) as Model[]);
diff --git a/packages/nocodb/src/lib/meta/api/projectApis.ts b/packages/nocodb/src/lib/meta/api/projectApis.ts
index c710b468fa..e2f07a1147 100644
--- a/packages/nocodb/src/lib/meta/api/projectApis.ts
+++ b/packages/nocodb/src/lib/meta/api/projectApis.ts
@@ -138,7 +138,6 @@ async function projectCreate(req: Request<any, any>, res) {
               connection: {
                 filename: `${toolDir}/nc_minimal_dbs/${projectTitle}_${dbId}.db`,
               },
-              useNullAsDefault: true,
             },
           },
           inflection_column: 'camelize',
@@ -452,15 +451,12 @@ async function populateMeta(base: Base, project: Project): Promise<any> {
   return info;
 }
 
-export async function projectInfoGet(req, res) {
-  const project = await Project.getWithInfo(req.params.projectId);
+export async function projectInfoGet(_req, res) {
   res.json({
     Node: process.version,
     Arch: process.arch,
     Platform: process.platform,
     Docker: isDocker(),
-    Database: project.bases?.[0]?.type,
-    ProjectOnRootDB: !!project?.is_meta,
     RootDB: Noco.getConfig()?.meta?.db?.client,
     PackageVersion: packageVersion,
   });
@@ -469,22 +465,25 @@ export async function projectInfoGet(req, res) {
 export async function projectCost(req, res) {
   let cost = 0;
   const project = await Project.getWithInfo(req.params.projectId);
-  const sqlClient = NcConnectionMgrv2.getSqlClient(project.bases[0]);
-  const userCount = await ProjectUser.getUsersCount(req.query);
-  const recordCount = (await sqlClient.totalRecords())?.data.TotalRecords;
-
-  if (recordCount > 100000) {
-    // 36,000 or $79/user/month
-    cost = Math.max(36000, 948 * userCount);
-  } else if (recordCount > 50000) {
-    // $36,000 or $50/user/month
-    cost = Math.max(36000, 600 * userCount);
-  } else if (recordCount > 10000) {
-    // $240/user/yr
-    cost = Math.min(240 * userCount, 36000);
-  } else if (recordCount > 1000) {
-    // $120/user/yr
-    cost = Math.min(120 * userCount, 36000);
+  
+  for (const base of project.bases) {
+    const sqlClient = NcConnectionMgrv2.getSqlClient(base);
+    const userCount = await ProjectUser.getUsersCount(req.query);
+    const recordCount = (await sqlClient.totalRecords())?.data.TotalRecords;
+
+    if (recordCount > 100000) {
+      // 36,000 or $79/user/month
+      cost = Math.max(36000, 948 * userCount);
+    } else if (recordCount > 50000) {
+      // $36,000 or $50/user/month
+      cost = Math.max(36000, 600 * userCount);
+    } else if (recordCount > 10000) {
+      // $240/user/yr
+      cost = Math.min(240 * userCount, 36000);
+    } else if (recordCount > 1000) {
+      // $120/user/yr
+      cost = Math.min(120 * userCount, 36000);
+    }
   }
 
   Tele.event({
diff --git a/packages/nocodb/src/lib/meta/api/publicApis/publicDataExportApis.ts b/packages/nocodb/src/lib/meta/api/publicApis/publicDataExportApis.ts
index 6d56f2f393..530504c9b7 100644
--- a/packages/nocodb/src/lib/meta/api/publicApis/publicDataExportApis.ts
+++ b/packages/nocodb/src/lib/meta/api/publicApis/publicDataExportApis.ts
@@ -32,7 +32,9 @@ async function exportExcel(req: Request, res: Response) {
 
   const { offset, dbRows, elapsed } = await getDbRows(model, view, req);
 
-  const data = XLSX.utils.json_to_sheet(dbRows);
+  const fields = req.query.fields as string[];
+
+  const data = XLSX.utils.json_to_sheet(dbRows, { header: fields });
   const wb = XLSX.utils.book_new();
   XLSX.utils.book_append_sheet(wb, data, view.title);
   const buf = XLSX.write(wb, { type: 'base64', bookType: 'xlsx' });
diff --git a/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts b/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
index 58eacc7495..8f607b3bf6 100644
--- a/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
+++ b/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
@@ -214,7 +214,7 @@ export default async (
   }
 
   function getRootDbType() {
-    return ncCreatedProjectSchema?.bases[0]?.type;
+    return ncCreatedProjectSchema?.bases.find((el) => el.id === syncDB.baseId)?.type;
   }
 
   // base mapping table
@@ -312,7 +312,7 @@ export default async (
   // @ts-ignore
   async function nc_DumpTableSchema() {
     console.log('[');
-    const ncTblList = await api.dbTable.list(ncCreatedProjectSchema.id);
+    const ncTblList = await api.base.tableList(ncCreatedProjectSchema.id, syncDB.baseId);
     for (let i = 0; i < ncTblList.list.length; i++) {
       const ncTbl = await api.dbTable.read(ncTblList.list[i].id);
       console.log(JSON.stringify(ncTbl, null, 2));
@@ -611,11 +611,12 @@ export default async (
     for (let idx = 0; idx < tables.length; idx++) {
       logBasic(`:: [${idx + 1}/${tables.length}] ${tables[idx].title}`);
 
-      logDetailed(`NC API: dbTable.create ${tables[idx].title}`);
+      logDetailed(`NC API: base.tableCreate ${tables[idx].title}`);
 
       let _perfStart = recordPerfStart();
-      const table: any = await api.dbTable.create(
+      const table: any = await api.base.tableCreate(
         ncCreatedProjectSchema.id,
+        syncDB.baseId,
         tables[idx]
       );
       recordPerfStats(_perfStart, 'dbTable.create');
@@ -2171,6 +2172,7 @@ export default async (
     } else {
       await nocoGetProject(syncDB.projectId);
       syncDB.projectName = ncCreatedProjectSchema?.title;
+      syncDB.baseId = syncDB.baseId || ncCreatedProjectSchema.bases[0].id;
       logDetailed('Getting existing project meta');
     }
 
@@ -2228,8 +2230,8 @@ export default async (
       try {
         // await nc_DumpTableSchema();
         const _perfStart = recordPerfStart();
-        const ncTblList = await api.dbTable.list(ncCreatedProjectSchema.id);
-        recordPerfStats(_perfStart, 'dbTable.list');
+        const ncTblList = await api.base.tableList(ncCreatedProjectSchema.id, syncDB.baseId);
+        recordPerfStats(_perfStart, 'base.tableList');
 
         logBasic('Reading Records...');
 
@@ -2385,6 +2387,7 @@ export interface AirtableSyncConfig {
   authToken: string;
   projectName?: string;
   projectId?: string;
+  baseId?: string;
   apiKey: string;
   shareId: string;
   options: {
diff --git a/packages/nocodb/src/lib/meta/api/sync/importApis.ts b/packages/nocodb/src/lib/meta/api/sync/importApis.ts
index e1a56cf3a1..5b3d05bcb9 100644
--- a/packages/nocodb/src/lib/meta/api/sync/importApis.ts
+++ b/packages/nocodb/src/lib/meta/api/sync/importApis.ts
@@ -111,6 +111,7 @@ export default (
         id: req.params.syncId,
         ...(syncSource?.details || {}),
         projectId: syncSource.project_id,
+        baseId: syncSource.base_id,
         authToken: token,
         baseURL,
       });
diff --git a/packages/nocodb/src/lib/meta/api/sync/syncSourceApis.ts b/packages/nocodb/src/lib/meta/api/sync/syncSourceApis.ts
index 48549044f1..f261c0cebd 100644
--- a/packages/nocodb/src/lib/meta/api/sync/syncSourceApis.ts
+++ b/packages/nocodb/src/lib/meta/api/sync/syncSourceApis.ts
@@ -4,17 +4,21 @@ import SyncSource from '../../../models/SyncSource';
 import { Tele } from 'nc-help';
 import { PagedResponseImpl } from '../../helpers/PagedResponse';
 import ncMetaAclMw from '../../helpers/ncMetaAclMw';
+import Project from '../../../models/Project';
 
 export async function syncSourceList(req: Request, res: Response) {
   // todo: pagination
-  res.json(new PagedResponseImpl(await SyncSource.list(req.params.projectId)));
+  res.json(new PagedResponseImpl(await SyncSource.list(req.params.projectId, req.params.baseId)));
 }
 
 export async function syncCreate(req: Request, res: Response) {
   Tele.emit('evt', { evt_type: 'webhooks:created' });
+  const project = await Project.getWithInfo(req.params.projectId);
+  
   const sync = await SyncSource.insert({
     ...req.body,
     fk_user_id: (req as any).user.id,
+    base_id: req.params.baseId ? req.params.baseId : project.bases[0].id,
     project_id: req.params.projectId,
   });
   res.json(sync);
@@ -41,6 +45,14 @@ router.post(
   '/api/v1/db/meta/projects/:projectId/syncs',
   ncMetaAclMw(syncCreate, 'syncSourceCreate')
 );
+router.get(
+  '/api/v1/db/meta/projects/:projectId/syncs/:baseId',
+  ncMetaAclMw(syncSourceList, 'syncSourceList')
+);
+router.post(
+  '/api/v1/db/meta/projects/:projectId/syncs/:baseId',
+  ncMetaAclMw(syncCreate, 'syncSourceCreate')
+);
 router.delete(
   '/api/v1/db/meta/syncs/:syncId',
   ncMetaAclMw(syncDelete, 'syncSourceDelete')
diff --git a/packages/nocodb/src/lib/meta/api/tableApis.ts b/packages/nocodb/src/lib/meta/api/tableApis.ts
index 8074ed3976..e9aa9442d3 100644
--- a/packages/nocodb/src/lib/meta/api/tableApis.ts
+++ b/packages/nocodb/src/lib/meta/api/tableApis.ts
@@ -89,7 +89,11 @@ export async function tableList(req: Request, res: Response<TableListType>) {
 
 export async function tableCreate(req: Request<any, any, TableReqType>, res) {
   const project = await Project.getWithInfo(req.params.projectId);
-  const base = project.bases[0];
+  let base = project.bases[0];
+
+  if (req.params.baseId) {
+    base = project.bases.find((b) => b.id === req.params.baseId);
+  }
 
   if (
     !req.body.table_name ||
@@ -100,7 +104,7 @@ export async function tableCreate(req: Request<any, any, TableReqType>, res) {
     );
   }
 
-  if (project.prefix) {
+  if (base.is_meta && project.prefix) {
     if (!req.body.table_name.startsWith(project.prefix)) {
       req.body.table_name = `${project.prefix}_${req.body.table_name}`;
     }
@@ -183,6 +187,7 @@ export async function tableCreate(req: Request<any, any, TableReqType>, res) {
 
   await Audit.insert({
     project_id: project.id,
+    base_id: base.id,
     op_type: AuditOperationTypes.TABLE,
     op_sub_type: AuditOperationSubTypes.CREATED,
     user: (req as any)?.user?.email,
@@ -224,15 +229,15 @@ export async function tableUpdate(req: Request<any, any>, res) {
   const model = await Model.get(req.params.tableId);
 
   const project = await Project.getWithInfo(req.body.project_id);
-  const base = project.bases[0];
-
+  const base = project.bases.find((b) => b.id === model.base_id);
+  
   if (!req.body.table_name) {
     NcError.badRequest(
       'Missing table name `table_name` property in request body'
     );
   }
 
-  if (project.prefix) {
+  if (base.is_meta && project.prefix) {
     if (!req.body.table_name.startsWith(project.prefix)) {
       req.body.table_name = `${project.prefix}${req.body.table_name}`;
     }
@@ -353,6 +358,7 @@ export async function tableDelete(req: Request, res: Response) {
 
   await Audit.insert({
     project_id: project.id,
+    base_id: base.id,
     op_type: AuditOperationTypes.TABLE,
     op_sub_type: AuditOperationSubTypes.DELETED,
     user: (req as any)?.user?.email,
@@ -371,11 +377,21 @@ router.get(
   metaApiMetrics,
   ncMetaAclMw(tableList, 'tableList')
 );
+router.get(
+  '/api/v1/db/meta/projects/:projectId/:baseId/tables',
+  metaApiMetrics,
+  ncMetaAclMw(tableList, 'tableList')
+);
 router.post(
   '/api/v1/db/meta/projects/:projectId/tables',
   metaApiMetrics,
   ncMetaAclMw(tableCreate, 'tableCreate')
 );
+router.post(
+  '/api/v1/db/meta/projects/:projectId/:baseId/tables',
+  metaApiMetrics,
+  ncMetaAclMw(tableCreate, 'tableCreate')
+);
 router.get(
   '/api/v1/db/meta/tables/:tableId',
   metaApiMetrics,
diff --git a/packages/nocodb/src/lib/meta/helpers/extractProps.ts b/packages/nocodb/src/lib/meta/helpers/extractProps.ts
index 426937d196..639891992c 100644
--- a/packages/nocodb/src/lib/meta/helpers/extractProps.ts
+++ b/packages/nocodb/src/lib/meta/helpers/extractProps.ts
@@ -1,6 +1,6 @@
 import DOMPurify from 'isomorphic-dompurify';
 
-export function extractProps<T>(body: T, props: string[]): Partial<T> {
+export function extractProps<T extends object>(body: T, props: string[]): Partial<T> {
   // todo: throw error if no props found
   return props.reduce((o, key) => {
     if (key in body) o[key] = body[key];
@@ -8,7 +8,7 @@ export function extractProps<T>(body: T, props: string[]): Partial<T> {
   }, {});
 }
 
-export function extractPropsAndSanitize<T>(
+export function extractPropsAndSanitize<T extends object>(
   body: T,
   props: string[]
 ): Partial<T> {
diff --git a/packages/nocodb/src/lib/meta/helpers/getTableName.ts b/packages/nocodb/src/lib/meta/helpers/getTableName.ts
index cff2d54cbd..4dc49ba652 100644
--- a/packages/nocodb/src/lib/meta/helpers/getTableName.ts
+++ b/packages/nocodb/src/lib/meta/helpers/getTableName.ts
@@ -7,7 +7,7 @@ export default function getTableNameAlias(
   base: Base
 ): string {
   let tn = tableName;
-  if (prefix) {
+  if (base.is_meta && prefix) {
     tn = tn.replace(prefix, '');
   }
 
diff --git a/packages/nocodb/src/lib/meta/helpers/syncMigration.ts b/packages/nocodb/src/lib/meta/helpers/syncMigration.ts
index 3e106c009c..50dff87b29 100644
--- a/packages/nocodb/src/lib/meta/helpers/syncMigration.ts
+++ b/packages/nocodb/src/lib/meta/helpers/syncMigration.ts
@@ -1,5 +1,6 @@
 import Migrator from '../../db/sql-migrator/lib/KnexMigratorv2';
 import Project from '../../models/Project';
+import Base from '../../models/Base';
 
 export default async function syncMigration(project: Project): Promise<void> {
   for (const base of await project.getBases()) {
@@ -19,3 +20,20 @@ export default async function syncMigration(project: Project): Promise<void> {
     }
   }
 }
+
+export async function syncBaseMigration(project: Project, base: Base): Promise<void> {
+  try {
+    /* create sql-migrator */
+    const migrator = new Migrator(project);
+
+    await migrator.init(base);
+
+    /* sql-migrator : sync & up */
+    await migrator.sync(base);
+
+    await migrator.migrationsUp({ base });
+  } catch (e) {
+    console.log(e);
+    // throw e;
+  }
+}
diff --git a/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts b/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
index 280825dddc..0dc39df339 100644
--- a/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
+++ b/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
@@ -10,6 +10,7 @@ import * as nc_019_add_meta_in_meta_tables from './v2/nc_019_add_meta_in_meta_ta
 import * as nc_020_kanban_view from './v2/nc_020_kanban_view';
 import * as nc_021_add_fields_in_token from './v2/nc_021_add_fields_in_token';
 import * as nc_022_qr_code_column_type from './v2/nc_022_qr_code_column_type';
+import * as nc_023_multiple_source from './v2/nc_023_multiple_source';
 
 // Create a custom migration source class
 export default class XcMigrationSourcev2 {
@@ -31,6 +32,7 @@ export default class XcMigrationSourcev2 {
       'nc_020_kanban_view',
       'nc_021_add_fields_in_token',
       'nc_022_qr_code_column_type',
+      'nc_023_multiple_source'
     ]);
   }
 
@@ -64,6 +66,8 @@ export default class XcMigrationSourcev2 {
         return nc_021_add_fields_in_token;
       case 'nc_022_qr_code_column_type':
         return nc_022_qr_code_column_type;
+      case 'nc_023_multiple_source':
+        return nc_023_multiple_source;
     }
   }
 }
diff --git a/packages/nocodb/src/lib/migrations/v2/nc_023_multiple_source.ts b/packages/nocodb/src/lib/migrations/v2/nc_023_multiple_source.ts
new file mode 100644
index 0000000000..cc8b7dd713
--- /dev/null
+++ b/packages/nocodb/src/lib/migrations/v2/nc_023_multiple_source.ts
@@ -0,0 +1,57 @@
+import { Knex } from 'knex';
+import { MetaTable } from '../../utils/globals';
+
+const up = async (knex: Knex) => {
+  await knex.schema.alterTable(MetaTable.SYNC_SOURCE, (table) => {
+    table.string('base_id', 20);
+    table.foreign('base_id').references(`${MetaTable.BASES}.id`);
+  });
+
+  await knex.schema.alterTable(MetaTable.BASES, (table) => {
+    table.boolean('enabled').defaultTo(true);
+    table.float('order');
+  });
+
+  await knex.schema.alterTable(MetaTable.AUDIT, (table) => {
+    table.dropForeign('base_id');
+  });
+};
+
+const down = async (knex) => {
+  await knex.schema.alterTable(MetaTable.SYNC_SOURCE, (table) => {
+    table.dropColumn('base_id');
+  });
+  
+  await knex.schema.alterTable(MetaTable.BASES, (table) => {
+    table.dropColumn('enabled');
+    table.dropColumn('order');
+  });
+
+  await knex.schema.alterTable(MetaTable.AUDIT, (table) => {
+    table.foreign('base_id').references(`${MetaTable.BASES}.id`);
+  });
+};
+
+export { up, down };
+
+/**
+ * @copyright Copyright (c) 2022, Xgene Cloud Ltd
+ *
+ * @author Mert Ersoy <mert@nocodb.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
diff --git a/packages/nocodb/src/lib/models/Base.ts b/packages/nocodb/src/lib/models/Base.ts
index c84395959b..8dc170eeae 100644
--- a/packages/nocodb/src/lib/models/Base.ts
+++ b/packages/nocodb/src/lib/models/Base.ts
@@ -11,6 +11,8 @@ import { BaseType } from 'nocodb-sdk';
 import NocoCache from '../cache/NocoCache';
 import CryptoJS from 'crypto-js';
 import { extractProps } from '../meta/helpers/extractProps';
+import { NcError } from '../meta/helpers/catchError';
+import SyncSource from './SyncSource';
 
 // todo: hide credentials
 export default class Base implements BaseType {
@@ -24,6 +26,8 @@ export default class Base implements BaseType {
   updated_at?: any;
   inflection_column?: string;
   inflection_table?: string;
+  order?: number;
+  enabled?: boolean;
 
   constructor(base: Partial<Base>) {
     Object.assign(this, base);
@@ -43,6 +47,8 @@ export default class Base implements BaseType {
       'updated_at',
       'inflection_column',
       'inflection_table',
+      'order',
+      'enabled',
     ]);
     insertObj.config = CryptoJS.AES.encrypt(
       JSON.stringify(base.config),
@@ -55,13 +61,86 @@ export default class Base implements BaseType {
       MetaTable.BASES,
       insertObj
     );
+
     await NocoCache.appendToList(
       CacheScope.BASE,
       [base.projectId],
       `${CacheScope.BASE}:${id}`
     );
 
-    return this.get(id, ncMeta);
+    // call before reorder to update cache
+    const returnBase = await this.get(id, ncMeta);
+
+    await this.reorderBases(base.projectId);
+
+    return returnBase;
+  }
+
+  public static async updateBase(
+    baseId: string,
+    base: BaseType & {
+      id: string;
+      projectId: string;
+      created_at?;
+      updated_at?;
+    },
+    ncMeta = Noco.ncMeta
+  ) {
+    const oldBase = await Base.get(baseId, ncMeta);
+
+    if (!oldBase) NcError.badRequest('Wrong base id!');
+
+    await NocoCache.deepDel(
+      CacheScope.BASE,
+      `${CacheScope.BASE}:${baseId}`,
+      CacheDelDirection.CHILD_TO_PARENT
+    );
+
+    const updateObj = extractProps(base, [
+      'alias',
+      'config',
+      'type',
+      'is_meta',
+      'created_at',
+      'updated_at',
+      'inflection_column',
+      'inflection_table',
+      'order',
+      'enabled',
+    ]);
+    
+    if (updateObj.config) {
+      updateObj.config = CryptoJS.AES.encrypt(
+        JSON.stringify(base.config),
+        Noco.getConfig()?.auth?.jwt?.secret
+      ).toString();
+    }
+
+    // type property is undefined even if not provided
+    if (!updateObj.type) {
+      updateObj.type = oldBase.type;
+    }
+
+    await ncMeta.metaUpdate(
+      base.projectId,
+      null,
+      MetaTable.BASES,
+      updateObj,
+      oldBase.id
+    );
+
+    await NocoCache.appendToList(
+      CacheScope.BASE,
+      [base.projectId],
+      `${CacheScope.BASE}:${oldBase.id}`
+    );
+
+    // call before reorder to update cache
+    const returnBase = await this.get(oldBase.id, ncMeta);
+
+    await this.reorderBases(base.projectId, returnBase.id, ncMeta);
+
+    return returnBase;
   }
 
   static async list(
@@ -75,14 +154,25 @@ export default class Base implements BaseType {
       baseDataList = await ncMeta.metaList2(
         args.projectId,
         null,
-        MetaTable.BASES
+        MetaTable.BASES,
+        {
+          orderBy: {
+            order: 'asc',
+          },
+        }
       );
       await NocoCache.setList(CacheScope.BASE, [args.projectId], baseDataList);
     }
+
+    baseDataList.sort(
+      (a, b) =>  (a.order ?? Infinity) - (b.order ?? Infinity)
+    );
+
     return baseDataList?.map((baseData) => {
       return new Base(baseData);
     });
   }
+
   static async get(id: string, ncMeta = Noco.ncMeta): Promise<Base> {
     let baseData =
       id &&
@@ -97,6 +187,54 @@ export default class Base implements BaseType {
     return baseData && new Base(baseData);
   }
 
+  static async reorderBases(
+    projectId: string,
+    keepBase?: string,
+    ncMeta = Noco.ncMeta
+  ) {
+    const bases = await this.list({ projectId: projectId }, ncMeta);
+
+    if (keepBase) {
+      const kpBase = bases.splice(
+        bases.indexOf(bases.find((base) => base.id === keepBase)),
+        1
+      );
+      if (kpBase.length) {
+        bases.splice(kpBase[0].order - 1, 0, kpBase[0]);
+      }
+    }
+
+    // update order for bases
+    for (const [i, b] of Object.entries(bases)) {
+
+      await NocoCache.deepDel(
+        CacheScope.BASE,
+        `${CacheScope.BASE}:${b.id}`,
+        CacheDelDirection.CHILD_TO_PARENT
+      );
+
+      b.order = parseInt(i) + 1;
+
+      await ncMeta.metaUpdate(
+        b.project_id,
+        null,
+        MetaTable.BASES,
+        {
+          order: b.order
+        },
+        b.id
+      );
+  
+      await NocoCache.appendToList(
+        CacheScope.BASE,
+        [b.project_id],
+        `${CacheScope.BASE}:${b.id}`
+      );
+
+      await NocoCache.set(`${CacheScope.BASE}:${b.id}`, b);
+    }
+  }
+
   public getConnectionConfig(): any {
     if (this.is_meta) {
       const metaConfig = Noco.getConfig()?.meta?.db;
@@ -123,11 +261,18 @@ export default class Base implements BaseType {
 
     return config;
   }
+
   getProject(ncMeta = Noco.ncMeta): Promise<Project> {
     return Project.get(this.project_id, ncMeta);
   }
 
-  async delete(ncMeta = Noco.ncMeta) {
+  async delete(ncMeta = Noco.ncMeta, { force }: { force?: boolean } = {}) {
+    const bases = await Base.list({ projectId: this.project_id }, ncMeta);
+
+    if (bases[0].id === this.id && !force) {
+      NcError.badRequest('Cannot delete first base');
+    }
+
     const models = await Model.list(
       {
         base_id: this.id,
@@ -143,6 +288,12 @@ export default class Base implements BaseType {
       `${CacheScope.BASE}:${this.id}`,
       CacheDelDirection.CHILD_TO_PARENT
     );
+
+    const syncSources = await SyncSource.list(this.project_id, this.id, ncMeta);
+    for (const syncSource of syncSources) {
+      await SyncSource.delete(syncSource.id, ncMeta);
+    }
+
     return await ncMeta.metaDelete(null, null, MetaTable.BASES, this.id);
   }
 
diff --git a/packages/nocodb/src/lib/models/Model.ts b/packages/nocodb/src/lib/models/Model.ts
index 2cb7f2e14f..d7fabd25ac 100644
--- a/packages/nocodb/src/lib/models/Model.ts
+++ b/packages/nocodb/src/lib/models/Model.ts
@@ -157,7 +157,12 @@ export default class Model implements TableType {
     },
     ncMeta = Noco.ncMeta
   ): Promise<Model[]> {
-    let modelList = await NocoCache.getList(CacheScope.MODEL, [project_id]);
+    let modelList = [];
+    if (base_id) {
+      await NocoCache.getList(CacheScope.MODEL, [project_id, base_id]);
+    } else {
+      await NocoCache.getList(CacheScope.MODEL, [project_id]);
+    }
     if (!modelList.length) {
       modelList = await ncMeta.metaList2(
         project_id,
@@ -170,7 +175,11 @@ export default class Model implements TableType {
         }
       );
 
-      await NocoCache.setList(CacheScope.MODEL, [project_id], modelList);
+      if (base_id) {
+        await NocoCache.setList(CacheScope.MODEL, [project_id, base_id], modelList);
+      } else {
+        await NocoCache.setList(CacheScope.MODEL, [project_id], modelList);
+      }
     }
     modelList.sort(
       (a, b) =>
@@ -597,7 +606,7 @@ export default class Model implements TableType {
       aliasOrId,
     }: {
       project_id: string;
-      base_id: string | undefined;
+      base_id?: string;
       aliasOrId: string;
     },
     ncMeta = Noco.ncMeta
@@ -610,27 +619,49 @@ export default class Model implements TableType {
         CacheGetType.TYPE_OBJECT
       ));
     if (!modelId) {
-      const model = await ncMeta.metaGet2(
-        null,
-        null,
-        MetaTable.MODELS,
-        { project_id, base_id },
-        null,
-        {
-          _or: [
+      const model = base_id
+        ? await ncMeta.metaGet2(
+            null,
+            null,
+            MetaTable.MODELS,
+            { project_id, base_id },
+            null,
             {
-              id: {
-                eq: aliasOrId,
-              },
-            },
+              _or: [
+                {
+                  id: {
+                    eq: aliasOrId,
+                  },
+                },
+                {
+                  title: {
+                    eq: aliasOrId,
+                  },
+                },
+              ],
+            }
+          )
+        : await ncMeta.metaGet2(
+            null,
+            null,
+            MetaTable.MODELS,
+            { project_id },
+            null,
             {
-              title: {
-                eq: aliasOrId,
-              },
-            },
-          ],
-        }
-      );
+              _or: [
+                {
+                  id: {
+                    eq: aliasOrId,
+                  },
+                },
+                {
+                  title: {
+                    eq: aliasOrId,
+                  },
+                },
+              ],
+            }
+          );
       if (model) {
         await NocoCache.set(
           `${CacheScope.MODEL}:${project_id}:${aliasOrId}`,
diff --git a/packages/nocodb/src/lib/models/SyncSource.ts b/packages/nocodb/src/lib/models/SyncSource.ts
index 39f7bf7489..9a5bf685f0 100644
--- a/packages/nocodb/src/lib/models/SyncSource.ts
+++ b/packages/nocodb/src/lib/models/SyncSource.ts
@@ -12,6 +12,7 @@ export default class SyncSource {
   deleted?: boolean;
   order?: number;
   project_id?: string;
+  base_id?: string;
   fk_user_id?: string;
 
   constructor(syncSource: Partial<SyncSource>) {
@@ -37,15 +38,14 @@ export default class SyncSource {
     return syncSource && new SyncSource(syncSource);
   }
 
-  static async list(projectId: string, ncMeta = Noco.ncMeta) {
+  static async list(projectId: string, baseId?: string, ncMeta = Noco.ncMeta) {
+    const condition = baseId ? { project_id: projectId, base_id: baseId } : { project_id: projectId };
     const syncSources = await ncMeta.metaList(
       null,
       null,
       MetaTable.SYNC_SOURCE,
       {
-        condition: {
-          project_id: projectId,
-        },
+        condition,
         orderBy: {
           created_at: 'asc',
         },
@@ -77,6 +77,7 @@ export default class SyncSource {
       type: syncSource?.type,
       details: syncSource?.details,
       project_id: syncSource?.project_id,
+      base_id: syncSource?.base_id,
       fk_user_id: syncSource?.fk_user_id,
     };
 
@@ -107,6 +108,7 @@ export default class SyncSource {
       'deleted',
       'order',
       'project_id',
+      'base_id',
     ]);
 
     if (updateObj.details && typeof updateObj.details === 'object') {
diff --git a/packages/nocodb/src/lib/services/test/TestResetService/index.ts b/packages/nocodb/src/lib/services/test/TestResetService/index.ts
index 020069e152..29725622d0 100644
--- a/packages/nocodb/src/lib/services/test/TestResetService/index.ts
+++ b/packages/nocodb/src/lib/services/test/TestResetService/index.ts
@@ -1,6 +1,7 @@
 import axios from 'axios';
 import Project from '../../../models/Project';
 import NcConnectionMgrv2 from '../../../utils/common/NcConnectionMgrv2';
+import Noco from '../../../Noco';
 import resetMetaSakilaSqliteProject from './resetMetaSakilaSqliteProject';
 import resetMysqlSakilaProject from './resetMysqlSakilaProject';
 import resetPgSakilaProject from './resetPgSakilaProject';
@@ -111,8 +112,9 @@ export class TestResetService {
 
       const bases = await project.getBases();
 
-      if (bases.length > 0) {
-        await NcConnectionMgrv2.deleteAwait(bases[0]);
+      for (const base of bases) {
+        await NcConnectionMgrv2.deleteAwait(base);
+        await base.delete(Noco.ncMeta, { force: true });
       }
 
       await Project.delete(project.id);
diff --git a/packages/nocodb/src/lib/utils/NcConfigFactory.ts b/packages/nocodb/src/lib/utils/NcConfigFactory.ts
index 75c7924475..7424b1b2ba 100644
--- a/packages/nocodb/src/lib/utils/NcConfigFactory.ts
+++ b/packages/nocodb/src/lib/utils/NcConfigFactory.ts
@@ -200,7 +200,6 @@ export default class NcConfigFactory implements NcConfig {
           },
           database:
             url.searchParams.get('d') || url.searchParams.get('database'),
-          useNullAsDefault: true,
         },
       } as any;
     } else {
@@ -496,7 +495,6 @@ export default class NcConfigFactory implements NcConfig {
         connection: {
           ...dbConnectionConfig,
           database: dbConnectionConfig.connection.filename,
-          useNullAsDefault: true,
         },
       };
     }
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 1a05f3cbd1..c007114e09 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -1266,6 +1266,172 @@
         }
       }
     },
+    "/api/v1/db/meta/projects/{projectId}/bases/{baseId}": {
+      "parameters": [
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "projectId",
+          "in": "path",
+          "required": true
+        },
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "baseId",
+          "in": "path",
+          "required": true
+        }
+      ],
+      "get": {
+        "summary": "Base read",
+        "operationId": "base-read",
+        "description": "Read project base details",
+        "parameters": [
+          {
+            "schema": {
+              "type": "string"
+            },
+            "in": "header",
+            "name": "xc-auth",
+            "description": "Auth token"
+          }
+        ],
+        "tags": [
+          "Base"
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {}
+                }
+              }
+            }
+          }
+        }
+      },
+      "delete": {
+        "summary": "Base delete",
+        "operationId": "base-delete",
+        "responses": {
+          "200": {
+            "description": "OK"
+          }
+        },
+        "tags": [
+          "Base"
+        ]
+      },
+      "patch": {
+        "summary": "Base update",
+        "operationId": "base-update",
+        "responses": {
+          "200": {
+            "description": "OK"
+          }
+        },
+        "tags": [
+          "Base"
+        ],
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {}
+            }
+          }
+        }
+      }
+    },
+    "/api/v1/db/meta/projects/{projectId}/bases/": {
+      "parameters": [
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "projectId",
+          "in": "path",
+          "required": true
+        }
+      ],
+      "get": {
+        "summary": "Base list",
+        "operationId": "base-list",
+        "description": "Get project base list",
+        "parameters": [
+          {
+            "schema": {
+              "type": "string"
+            },
+            "in": "header",
+            "name": "xc-auth",
+            "description": "Auth token"
+          }
+        ],
+        "tags": [
+          "Base"
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {}
+                }
+              }
+            }
+          }
+        }
+      },
+      "post": {
+        "summary": "Base create",
+        "operationId": "base-create",
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Base"
+                }
+              }
+            }
+          }
+        },
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "allOf": [
+                  {
+                    "$ref": "#/components/schemas/Base"
+                  },
+                  {
+                    "type": "object",
+                    "properties": {
+                      "external": {
+                        "type": "boolean",
+                        "default": false
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        },
+        "tags": [
+          "Base"
+        ]
+      }
+    },
     "/api/v1/db/meta/projects/{projectId}/shared": {
       "parameters": [
         {
@@ -1558,6 +1724,103 @@
         ]
       }
     },
+    "/api/v1/db/meta/projects/{projectId}/{baseId}/tables": {
+      "parameters": [
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "projectId",
+          "in": "path",
+          "required": true
+        },
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "baseId",
+          "in": "path",
+          "required": true
+        }
+      ],
+      "get": {
+        "summary": "",
+        "operationId": "table-list",
+        "responses": {
+          "200": {
+            "$ref": "#/components/responses/TableList"
+          }
+        },
+        "parameters": [
+          {
+            "schema": {
+              "type": "string"
+            },
+            "in": "header",
+            "name": "xc-auth"
+          },
+          {
+            "schema": {
+              "type": "number"
+            },
+            "in": "query",
+            "name": "page"
+          },
+          {
+            "schema": {
+              "type": "number"
+            },
+            "in": "query",
+            "name": "pageSize"
+          },
+          {
+            "schema": {
+              "type": "string"
+            },
+            "in": "query",
+            "name": "sort"
+          },
+          {
+            "schema": {
+              "type": "boolean"
+            },
+            "in": "query",
+            "name": "includeM2M"
+          }
+        ],
+        "tags": [
+          "Base"
+        ]
+      },
+      "post": {
+        "summary": "",
+        "operationId": "table-create",
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Table"
+                }
+              }
+            }
+          }
+        },
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/TableReq"
+              }
+            }
+          }
+        },
+        "tags": [
+          "Base"
+        ]
+      }
+    },
     "/api/v1/db/meta/tables/{tableId}": {
       "parameters": [
         {
@@ -3052,6 +3315,61 @@
         }
       }
     },
+    "/api/v1/db/meta/projects/{projectId}/meta-diff/{baseId}": {
+      "parameters": [
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "projectId",
+          "in": "path",
+          "required": true
+        },
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "baseId",
+          "in": "path",
+          "required": true
+        }
+      ],
+      "post": {
+        "summary": "",
+        "operationId": "base-meta-diff-sync",
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          }
+        },
+        "tags": [
+          "Base"
+        ]
+      },
+      "get": {
+        "summary": "",
+        "operationId": "base-meta-diff-get",
+        "parameters": [],
+        "tags": [
+          "Base"
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          }
+        }
+      }
+    },
     "/api/v1/db/data/{orgs}/{projectName}/{tableName}": {
       "parameters": [
         {
@@ -6944,6 +7262,12 @@
           },
           "inflection_table": {
             "type": "string"
+          },
+          "order": {
+            "type": "number"
+          },
+          "enabled": {
+            "type": "boolean"
           }
         }
       },
@@ -7040,8 +7364,8 @@
         "examples": [
           {
             "id": "string",
-            "fk_project_id": "string",
-            "fk_base_id": "string",
+            "project_id": "string",
+            "base_id": "string",
             "title": "string",
             "alias": "string",
             "type": "string",
@@ -7107,10 +7431,10 @@
           "id": {
             "type": "string"
           },
-          "fk_project_id": {
+          "project_id": {
             "type": "string"
           },
-          "fk_base_id": {
+          "base_id": {
             "type": "string"
           },
           "table_name": {
@@ -7155,9 +7479,6 @@
           "slug": {
             "type": "string"
           },
-          "project_id": {
-            "type": "string"
-          },
           "mm": {
             "type": [
               "boolean",
diff --git a/tests/playwright/constants/index.ts b/tests/playwright/constants/index.ts
index 8f5c7e1f0e..c76cdafb5b 100644
--- a/tests/playwright/constants/index.ts
+++ b/tests/playwright/constants/index.ts
@@ -1,4 +1,6 @@
 const airtableApiKey = 'keyn1MR87qgyUsYg4';
 const airtableApiBase = 'https://airtable.com/shr4z0qmh6dg5s3eB';
 
-export { airtableApiKey, airtableApiBase };
+const defaultBaseName = 'Base';
+
+export { airtableApiKey, airtableApiBase, defaultBaseName };
diff --git a/tests/playwright/fixtures/expectedBaseDownloadData.txt b/tests/playwright/fixtures/expectedBaseDownloadData.txt
index ffce972614..36d43c36ba 100644
--- a/tests/playwright/fixtures/expectedBaseDownloadData.txt
+++ b/tests/playwright/fixtures/expectedBaseDownloadData.txt
@@ -1,110 +1,110 @@
-Country,City List
-Afghanistan,Kabul
-Algeria,"Batna, Bchar, Skikda"
-American Samoa,Tafuna
-Angola,"Benguela, Namibe"
-Anguilla,South Hill
-Argentina,"Almirante Brown, Avellaneda, Baha Blanca, Crdoba, Escobar, Ezeiza, La Plata, Merlo, Quilmes, San Miguel de Tucumn, Santa F, Tandil, Vicente Lpez"
-Armenia,Yerevan
-Australia,Woodridge
-Austria,"Graz, Linz, Salzburg"
-Azerbaijan,"Baku, Sumqayit"
-Bahrain,al-Manama
-Bangladesh,"Dhaka, Jamalpur, Tangail"
-Belarus,"Mogiljov, Molodetno"
-Bolivia,"El Alto, Sucre"
-Brazil,"Alvorada, Angra dos Reis, Anpolis, Aparecida de Goinia, Araatuba, Bag, Belm, Blumenau, Boa Vista, Braslia, Goinia, Guaruj, guas Lindas de Gois, Ibirit, Juazeiro do Norte, Juiz de Fora, Luzinia, Maring, Po, Poos de Caldas, Rio Claro, Santa Brbara dOeste, Santo Andr, So Bernardo do Campo, So Leopoldo"
-Brunei,Bandar Seri Begawan
-Bulgaria,"Ruse, Stara Zagora"
-Cambodia,"Battambang, Phnom Penh"
-Cameroon,"Bamenda, Yaound"
-Canada,"Gatineau, Halifax, Lethbridge, London, Oshawa, Richmond Hill, Vancouver"
-Chad,NDjamna
-Chile,"Antofagasta, Coquimbo, Rancagua"
-China,"Baicheng, Baiyin, Binzhou, Changzhou, Datong, Daxian, Dongying, Emeishan, Enshi, Ezhou, Fuyu, Fuzhou, Haining, Hami, Hohhot, Huaian, Jinchang, Jining, Jinzhou, Junan, Korla, Laiwu, Laohekou, Lengshuijiang, Leshan"
-Colombia,"Buenaventura, Dos Quebradas, Florencia, Pereira, Sincelejo, Sogamoso"
-"Congo, The Democratic Republic of the","Lubumbashi, Mwene-Ditu"
-Czech Republic,Olomouc
-Dominican Republic,"La Romana, San Felipe de Puerto Plata, Santiago de los Caballeros"
-Ecuador,"Loja, Portoviejo, Robamba"
-Egypt,"Bilbays, Idfu, Mit Ghamr, Qalyub, Sawhaj, Shubra al-Khayma"
-Estonia,Tartu
-Ethiopia,Addis Abeba
-Faroe Islands,Trshavn
-Finland,Oulu
-France,"Brest, Le Mans, Toulon, Toulouse"
-French Guiana,Cayenne
-French Polynesia,"Faaa, Papeete"
-Gambia,Banjul
-Germany,"Duisburg, Erlangen, Halle/Saale, Mannheim, Saarbrcken, Siegen, Witten"
-Greece,"Athenai, Patras"
-Greenland,Nuuk
-Holy See (Vatican City State),Citt del Vaticano
-Hong Kong,Kowloon and New Kowloon
-Hungary,Szkesfehrvr
-India,"Adoni, Ahmadnagar, Allappuzha (Alleppey), Ambattur, Amroha, Balurghat, Berhampore (Baharampur), Bhavnagar, Bhilwara, Bhimavaram, Bhopal, Bhusawal, Bijapur, Chandrapur, Chapra, Dhule (Dhulia), Etawah, Firozabad, Gandhinagar, Gulbarga, Haldia, Halisahar, Hoshiarpur, Hubli-Dharwad, Jaipur"
-Indonesia,"Cianjur, Ciomas, Ciparay, Gorontalo, Jakarta, Lhokseumawe, Madiun, Pangkal Pinang, Pemalang, Pontianak, Probolinggo, Purwakarta, Surakarta, Tegal"
-Iran,"Arak, Esfahan, Kermanshah, Najafabad, Qomsheh, Shahr-e Kord, Sirjan, Tabriz"
-Iraq,Mosul
-Israel,"Ashdod, Ashqelon, Bat Yam, Tel Aviv-Jaffa"
-Italy,"Alessandria, Bergamo, Brescia, Brindisi, Livorno, Syrakusa, Udine"
-Japan,"Akishima, Fukuyama, Higashiosaka, Hino, Hiroshima, Isesaki, Iwaki, Iwakuni, Iwatsuki, Izumisano, Kakamigahara, Kamakura, Kanazawa, Koriyama, Kurashiki, Kuwana, Matsue, Miyakonojo, Nagareyama, Okayama, Okinawa, Omiya, Onomichi, Otsu, Sagamihara"
-Kazakstan,"Pavlodar, Zhezqazghan"
-Kenya,"Kisumu, Nyeri"
-Kuwait,Jalib al-Shuyukh
-Latvia,"Daugavpils, Liepaja"
-Liechtenstein,Vaduz
-Lithuania,Vilnius
-Madagascar,Mahajanga
-Malawi,Lilongwe
-Malaysia,"Ipoh, Kuching, Sungai Petani"
-Mexico,"Acua, Allende, Atlixco, Carmen, Celaya, Coacalco de Berriozbal, Coatzacoalcos, Cuauhtmoc, Cuautla, Cuernavaca, El Fuerte, Guadalajara, Hidalgo, Huejutla de Reyes, Huixquilucan, Jos Azueta, Jurez, La Paz, Matamoros, Mexicali, Monclova, Nezahualcyotl, Pachuca de Soto, Salamanca, San Felipe del Progreso"
-Moldova,Chisinau
-Morocco,"Beni-Mellal, Nador, Sal"
-Mozambique,"Beira, Naala-Porto, Tete"
-Myanmar,"Monywa, Myingyan"
-Nauru,Yangor
-Nepal,Birgunj
-Netherlands,"Amersfoort, Apeldoorn, Ede, Emmen, s-Hertogenbosch"
-New Zealand,Hamilton
-Nigeria,"Benin City, Deba Habe, Effon-Alaiye, Ife, Ikerre, Ilorin, Kaduna, Ogbomosho, Ondo, Owo, Oyo, Sokoto, Zaria"
-North Korea,Pyongyang
-Oman,"Masqat, Salala"
-Pakistan,"Dadu, Mandi Bahauddin, Mardan, Okara, Shikarpur"
-Paraguay,"Asuncin, Ciudad del Este, San Lorenzo"
-Peru,"Callao, Hunuco, Lima, Sullana"
-Philippines,"Baybay, Bayugan, Bislig, Cabuyao, Cavite, Davao, Gingoog, Hagonoy, Iligan, Imus, Lapu-Lapu, Mandaluyong, Ozamis, Santa Rosa, Taguig, Talavera, Tanauan, Tanza, Tarlac, Tuguegarao"
-Poland,"Bydgoszcz, Czestochowa, Jastrzebie-Zdrj, Kalisz, Lublin, Plock, Tychy, Wroclaw"
-Puerto Rico,"Arecibo, Ponce"
-Romania,"Botosani, Bucuresti"
-Runion,Saint-Denis
-Russian Federation,"Atinsk, Balaiha, Dzerzinsk, Elista, Ivanovo, Jaroslavl, Jelets, Kaliningrad, Kamyin, Kirovo-Tepetsk, Kolpino, Korolev, Kurgan, Kursk, Lipetsk, Ljubertsy, Maikop, Moscow, Nabereznyje Telny, Niznekamsk, Novoterkassk, Pjatigorsk, Serpuhov, Smolensk, Syktyvkar"
-Saint Vincent and the Grenadines,Kingstown
-Saudi Arabia,"Abha, al-Hawiya, al-Qatif, Jedda, Tabuk"
-Senegal,Ziguinchor
-Slovakia,Bratislava
-South Africa,"Boksburg, Botshabelo, Chatsworth, Johannesburg, Kimberley, Klerksdorp, Newcastle, Paarl, Rustenburg, Soshanguve, Springs"
-South Korea,"Cheju, Kimchon, Naju, Tonghae, Uijongbu"
-Spain,"A Corua (La Corua), Donostia-San Sebastin, Gijn, Ourense (Orense), Santiago de Compostela"
-Sri Lanka,Jaffna
-Sudan,"al-Qadarif, Omdurman"
-Sweden,Malm
-Switzerland,"Basel, Bern, Lausanne"
-Taiwan,"Changhwa, Chiayi, Chungho, Fengshan, Hsichuh, Lungtan, Nantou, Tanshui, Touliu, Tsaotun"
-Tanzania,"Mwanza, Tabora, Zanzibar"
-Thailand,"Nakhon Sawan, Pak Kret, Songkhla"
-Tonga,Nukualofa
-Tunisia,Sousse
-Turkey,"Adana, Balikesir, Batman, Denizli, Eskisehir, Gaziantep, Inegl, Kilis, Ktahya, Osmaniye, Sivas, Sultanbeyli, Tarsus, Tokat, Usak"
-Turkmenistan,Ashgabat
-Tuvalu,Funafuti
-Ukraine,"Kamjanets-Podilskyi, Konotop, Mukateve, ostka, Simferopol, Sumy"
-United Arab Emirates,"Abu Dhabi, al-Ayn, Sharja"
-United Kingdom,"Bradford, Dundee, London, Southampton, Southend-on-Sea, Southport, Stockport, York"
-United States,"Akron, Arlington, Augusta-Richmond County, Aurora, Bellevue, Brockton, Cape Coral, Citrus Heights, Clarksville, Compton, Dallas, Dayton, El Monte, Fontana, Garden Grove, Garland, Grand Prairie, Greensboro, Joliet, Kansas City, Lancaster, Laredo, Lincoln, Manchester, Memphis"
-Venezuela,"Barcelona, Caracas, Cuman, Maracabo, Ocumare del Tuy, Valencia, Valle de la Pascua"
-Vietnam,"Cam Ranh, Haiphong, Hanoi, Nam Dinh, Nha Trang, Vinh"
-"Virgin Islands, U.S.",Charlotte Amalie
-Yemen,"Aden, Hodeida, Sanaa, Taizz"
-Yugoslavia,"Kragujevac, Novi Sad"
+Country,City List
+Afghanistan,Kabul
+Algeria,"Batna, Bchar, Skikda"
+American Samoa,Tafuna
+Angola,"Benguela, Namibe"
+Anguilla,South Hill
+Argentina,"Almirante Brown, Avellaneda, Baha Blanca, Crdoba, Escobar, Ezeiza, La Plata, Merlo, Quilmes, San Miguel de Tucumn, Santa F, Tandil, Vicente Lpez"
+Armenia,Yerevan
+Australia,Woodridge
+Austria,"Graz, Linz, Salzburg"
+Azerbaijan,"Baku, Sumqayit"
+Bahrain,al-Manama
+Bangladesh,"Dhaka, Jamalpur, Tangail"
+Belarus,"Mogiljov, Molodetno"
+Bolivia,"El Alto, Sucre"
+Brazil,"Alvorada, Angra dos Reis, Anpolis, Aparecida de Goinia, Araatuba, Bag, Belm, Blumenau, Boa Vista, Braslia, Goinia, Guaruj, guas Lindas de Gois, Ibirit, Juazeiro do Norte, Juiz de Fora, Luzinia, Maring, Po, Poos de Caldas, Rio Claro, Santa Brbara dOeste, Santo Andr, So Bernardo do Campo, So Leopoldo"
+Brunei,Bandar Seri Begawan
+Bulgaria,"Ruse, Stara Zagora"
+Cambodia,"Battambang, Phnom Penh"
+Cameroon,"Bamenda, Yaound"
+Canada,"Gatineau, Halifax, Lethbridge, London, Oshawa, Richmond Hill, Vancouver"
+Chad,NDjamna
+Chile,"Antofagasta, Coquimbo, Rancagua"
+China,"Baicheng, Baiyin, Binzhou, Changzhou, Datong, Daxian, Dongying, Emeishan, Enshi, Ezhou, Fuyu, Fuzhou, Haining, Hami, Hohhot, Huaian, Jinchang, Jining, Jinzhou, Junan, Korla, Laiwu, Laohekou, Lengshuijiang, Leshan"
+Colombia,"Buenaventura, Dos Quebradas, Florencia, Pereira, Sincelejo, Sogamoso"
+"Congo, The Democratic Republic of the","Lubumbashi, Mwene-Ditu"
+Czech Republic,Olomouc
+Dominican Republic,"La Romana, San Felipe de Puerto Plata, Santiago de los Caballeros"
+Ecuador,"Loja, Portoviejo, Robamba"
+Egypt,"Bilbays, Idfu, Mit Ghamr, Qalyub, Sawhaj, Shubra al-Khayma"
+Estonia,Tartu
+Ethiopia,Addis Abeba
+Faroe Islands,Trshavn
+Finland,Oulu
+France,"Brest, Le Mans, Toulon, Toulouse"
+French Guiana,Cayenne
+French Polynesia,"Faaa, Papeete"
+Gambia,Banjul
+Germany,"Duisburg, Erlangen, Halle/Saale, Mannheim, Saarbrcken, Siegen, Witten"
+Greece,"Athenai, Patras"
+Greenland,Nuuk
+Holy See (Vatican City State),Citt del Vaticano
+Hong Kong,Kowloon and New Kowloon
+Hungary,Szkesfehrvr
+India,"Adoni, Ahmadnagar, Allappuzha (Alleppey), Ambattur, Amroha, Balurghat, Berhampore (Baharampur), Bhavnagar, Bhilwara, Bhimavaram, Bhopal, Bhusawal, Bijapur, Chandrapur, Chapra, Dhule (Dhulia), Etawah, Firozabad, Gandhinagar, Gulbarga, Haldia, Halisahar, Hoshiarpur, Hubli-Dharwad, Jaipur"
+Indonesia,"Cianjur, Ciomas, Ciparay, Gorontalo, Jakarta, Lhokseumawe, Madiun, Pangkal Pinang, Pemalang, Pontianak, Probolinggo, Purwakarta, Surakarta, Tegal"
+Iran,"Arak, Esfahan, Kermanshah, Najafabad, Qomsheh, Shahr-e Kord, Sirjan, Tabriz"
+Iraq,Mosul
+Israel,"Ashdod, Ashqelon, Bat Yam, Tel Aviv-Jaffa"
+Italy,"Alessandria, Bergamo, Brescia, Brindisi, Livorno, Syrakusa, Udine"
+Japan,"Akishima, Fukuyama, Higashiosaka, Hino, Hiroshima, Isesaki, Iwaki, Iwakuni, Iwatsuki, Izumisano, Kakamigahara, Kamakura, Kanazawa, Koriyama, Kurashiki, Kuwana, Matsue, Miyakonojo, Nagareyama, Okayama, Okinawa, Omiya, Onomichi, Otsu, Sagamihara"
+Kazakstan,"Pavlodar, Zhezqazghan"
+Kenya,"Kisumu, Nyeri"
+Kuwait,Jalib al-Shuyukh
+Latvia,"Daugavpils, Liepaja"
+Liechtenstein,Vaduz
+Lithuania,Vilnius
+Madagascar,Mahajanga
+Malawi,Lilongwe
+Malaysia,"Ipoh, Kuching, Sungai Petani"
+Mexico,"Acua, Allende, Atlixco, Carmen, Celaya, Coacalco de Berriozbal, Coatzacoalcos, Cuauhtmoc, Cuautla, Cuernavaca, El Fuerte, Guadalajara, Hidalgo, Huejutla de Reyes, Huixquilucan, Jos Azueta, Jurez, La Paz, Matamoros, Mexicali, Monclova, Nezahualcyotl, Pachuca de Soto, Salamanca, San Felipe del Progreso"
+Moldova,Chisinau
+Morocco,"Beni-Mellal, Nador, Sal"
+Mozambique,"Beira, Naala-Porto, Tete"
+Myanmar,"Monywa, Myingyan"
+Nauru,Yangor
+Nepal,Birgunj
+Netherlands,"Amersfoort, Apeldoorn, Ede, Emmen, s-Hertogenbosch"
+New Zealand,Hamilton
+Nigeria,"Benin City, Deba Habe, Effon-Alaiye, Ife, Ikerre, Ilorin, Kaduna, Ogbomosho, Ondo, Owo, Oyo, Sokoto, Zaria"
+North Korea,Pyongyang
+Oman,"Masqat, Salala"
+Pakistan,"Dadu, Mandi Bahauddin, Mardan, Okara, Shikarpur"
+Paraguay,"Asuncin, Ciudad del Este, San Lorenzo"
+Peru,"Callao, Hunuco, Lima, Sullana"
+Philippines,"Baybay, Bayugan, Bislig, Cabuyao, Cavite, Davao, Gingoog, Hagonoy, Iligan, Imus, Lapu-Lapu, Mandaluyong, Ozamis, Santa Rosa, Taguig, Talavera, Tanauan, Tanza, Tarlac, Tuguegarao"
+Poland,"Bydgoszcz, Czestochowa, Jastrzebie-Zdrj, Kalisz, Lublin, Plock, Tychy, Wroclaw"
+Puerto Rico,"Arecibo, Ponce"
+Romania,"Botosani, Bucuresti"
+Runion,Saint-Denis
+Russian Federation,"Atinsk, Balaiha, Dzerzinsk, Elista, Ivanovo, Jaroslavl, Jelets, Kaliningrad, Kamyin, Kirovo-Tepetsk, Kolpino, Korolev, Kurgan, Kursk, Lipetsk, Ljubertsy, Maikop, Moscow, Nabereznyje Telny, Niznekamsk, Novoterkassk, Pjatigorsk, Serpuhov, Smolensk, Syktyvkar"
+Saint Vincent and the Grenadines,Kingstown
+Saudi Arabia,"Abha, al-Hawiya, al-Qatif, Jedda, Tabuk"
+Senegal,Ziguinchor
+Slovakia,Bratislava
+South Africa,"Boksburg, Botshabelo, Chatsworth, Johannesburg, Kimberley, Klerksdorp, Newcastle, Paarl, Rustenburg, Soshanguve, Springs"
+South Korea,"Cheju, Kimchon, Naju, Tonghae, Uijongbu"
+Spain,"A Corua (La Corua), Donostia-San Sebastin, Gijn, Ourense (Orense), Santiago de Compostela"
+Sri Lanka,Jaffna
+Sudan,"al-Qadarif, Omdurman"
+Sweden,Malm
+Switzerland,"Basel, Bern, Lausanne"
+Taiwan,"Changhwa, Chiayi, Chungho, Fengshan, Hsichuh, Lungtan, Nantou, Tanshui, Touliu, Tsaotun"
+Tanzania,"Mwanza, Tabora, Zanzibar"
+Thailand,"Nakhon Sawan, Pak Kret, Songkhla"
+Tonga,Nukualofa
+Tunisia,Sousse
+Turkey,"Adana, Balikesir, Batman, Denizli, Eskisehir, Gaziantep, Inegl, Kilis, Ktahya, Osmaniye, Sivas, Sultanbeyli, Tarsus, Tokat, Usak"
+Turkmenistan,Ashgabat
+Tuvalu,Funafuti
+Ukraine,"Kamjanets-Podilskyi, Konotop, Mukateve, ostka, Simferopol, Sumy"
+United Arab Emirates,"Abu Dhabi, al-Ayn, Sharja"
+United Kingdom,"Bradford, Dundee, London, Southampton, Southend-on-Sea, Southport, Stockport, York"
+United States,"Akron, Arlington, Augusta-Richmond County, Aurora, Bellevue, Brockton, Cape Coral, Citrus Heights, Clarksville, Compton, Dallas, Dayton, El Monte, Fontana, Garden Grove, Garland, Grand Prairie, Greensboro, Joliet, Kansas City, Lancaster, Laredo, Lincoln, Manchester, Memphis"
+Venezuela,"Barcelona, Caracas, Cuman, Maracabo, Ocumare del Tuy, Valencia, Valle de la Pascua"
+Vietnam,"Cam Ranh, Haiphong, Hanoi, Nam Dinh, Nha Trang, Vinh"
+"Virgin Islands, U.S.",Charlotte Amalie
+Yemen,"Aden, Hodeida, Sanaa, Taizz"
+Yugoslavia,"Kragujevac, Novi Sad"
 Zambia,Kitwe
\ No newline at end of file
diff --git a/tests/playwright/fixtures/expectedBaseDownloadDataPg.txt b/tests/playwright/fixtures/expectedBaseDownloadDataPg.txt
index ffce972614..36d43c36ba 100644
--- a/tests/playwright/fixtures/expectedBaseDownloadDataPg.txt
+++ b/tests/playwright/fixtures/expectedBaseDownloadDataPg.txt
@@ -1,110 +1,110 @@
-Country,City List
-Afghanistan,Kabul
-Algeria,"Batna, Bchar, Skikda"
-American Samoa,Tafuna
-Angola,"Benguela, Namibe"
-Anguilla,South Hill
-Argentina,"Almirante Brown, Avellaneda, Baha Blanca, Crdoba, Escobar, Ezeiza, La Plata, Merlo, Quilmes, San Miguel de Tucumn, Santa F, Tandil, Vicente Lpez"
-Armenia,Yerevan
-Australia,Woodridge
-Austria,"Graz, Linz, Salzburg"
-Azerbaijan,"Baku, Sumqayit"
-Bahrain,al-Manama
-Bangladesh,"Dhaka, Jamalpur, Tangail"
-Belarus,"Mogiljov, Molodetno"
-Bolivia,"El Alto, Sucre"
-Brazil,"Alvorada, Angra dos Reis, Anpolis, Aparecida de Goinia, Araatuba, Bag, Belm, Blumenau, Boa Vista, Braslia, Goinia, Guaruj, guas Lindas de Gois, Ibirit, Juazeiro do Norte, Juiz de Fora, Luzinia, Maring, Po, Poos de Caldas, Rio Claro, Santa Brbara dOeste, Santo Andr, So Bernardo do Campo, So Leopoldo"
-Brunei,Bandar Seri Begawan
-Bulgaria,"Ruse, Stara Zagora"
-Cambodia,"Battambang, Phnom Penh"
-Cameroon,"Bamenda, Yaound"
-Canada,"Gatineau, Halifax, Lethbridge, London, Oshawa, Richmond Hill, Vancouver"
-Chad,NDjamna
-Chile,"Antofagasta, Coquimbo, Rancagua"
-China,"Baicheng, Baiyin, Binzhou, Changzhou, Datong, Daxian, Dongying, Emeishan, Enshi, Ezhou, Fuyu, Fuzhou, Haining, Hami, Hohhot, Huaian, Jinchang, Jining, Jinzhou, Junan, Korla, Laiwu, Laohekou, Lengshuijiang, Leshan"
-Colombia,"Buenaventura, Dos Quebradas, Florencia, Pereira, Sincelejo, Sogamoso"
-"Congo, The Democratic Republic of the","Lubumbashi, Mwene-Ditu"
-Czech Republic,Olomouc
-Dominican Republic,"La Romana, San Felipe de Puerto Plata, Santiago de los Caballeros"
-Ecuador,"Loja, Portoviejo, Robamba"
-Egypt,"Bilbays, Idfu, Mit Ghamr, Qalyub, Sawhaj, Shubra al-Khayma"
-Estonia,Tartu
-Ethiopia,Addis Abeba
-Faroe Islands,Trshavn
-Finland,Oulu
-France,"Brest, Le Mans, Toulon, Toulouse"
-French Guiana,Cayenne
-French Polynesia,"Faaa, Papeete"
-Gambia,Banjul
-Germany,"Duisburg, Erlangen, Halle/Saale, Mannheim, Saarbrcken, Siegen, Witten"
-Greece,"Athenai, Patras"
-Greenland,Nuuk
-Holy See (Vatican City State),Citt del Vaticano
-Hong Kong,Kowloon and New Kowloon
-Hungary,Szkesfehrvr
-India,"Adoni, Ahmadnagar, Allappuzha (Alleppey), Ambattur, Amroha, Balurghat, Berhampore (Baharampur), Bhavnagar, Bhilwara, Bhimavaram, Bhopal, Bhusawal, Bijapur, Chandrapur, Chapra, Dhule (Dhulia), Etawah, Firozabad, Gandhinagar, Gulbarga, Haldia, Halisahar, Hoshiarpur, Hubli-Dharwad, Jaipur"
-Indonesia,"Cianjur, Ciomas, Ciparay, Gorontalo, Jakarta, Lhokseumawe, Madiun, Pangkal Pinang, Pemalang, Pontianak, Probolinggo, Purwakarta, Surakarta, Tegal"
-Iran,"Arak, Esfahan, Kermanshah, Najafabad, Qomsheh, Shahr-e Kord, Sirjan, Tabriz"
-Iraq,Mosul
-Israel,"Ashdod, Ashqelon, Bat Yam, Tel Aviv-Jaffa"
-Italy,"Alessandria, Bergamo, Brescia, Brindisi, Livorno, Syrakusa, Udine"
-Japan,"Akishima, Fukuyama, Higashiosaka, Hino, Hiroshima, Isesaki, Iwaki, Iwakuni, Iwatsuki, Izumisano, Kakamigahara, Kamakura, Kanazawa, Koriyama, Kurashiki, Kuwana, Matsue, Miyakonojo, Nagareyama, Okayama, Okinawa, Omiya, Onomichi, Otsu, Sagamihara"
-Kazakstan,"Pavlodar, Zhezqazghan"
-Kenya,"Kisumu, Nyeri"
-Kuwait,Jalib al-Shuyukh
-Latvia,"Daugavpils, Liepaja"
-Liechtenstein,Vaduz
-Lithuania,Vilnius
-Madagascar,Mahajanga
-Malawi,Lilongwe
-Malaysia,"Ipoh, Kuching, Sungai Petani"
-Mexico,"Acua, Allende, Atlixco, Carmen, Celaya, Coacalco de Berriozbal, Coatzacoalcos, Cuauhtmoc, Cuautla, Cuernavaca, El Fuerte, Guadalajara, Hidalgo, Huejutla de Reyes, Huixquilucan, Jos Azueta, Jurez, La Paz, Matamoros, Mexicali, Monclova, Nezahualcyotl, Pachuca de Soto, Salamanca, San Felipe del Progreso"
-Moldova,Chisinau
-Morocco,"Beni-Mellal, Nador, Sal"
-Mozambique,"Beira, Naala-Porto, Tete"
-Myanmar,"Monywa, Myingyan"
-Nauru,Yangor
-Nepal,Birgunj
-Netherlands,"Amersfoort, Apeldoorn, Ede, Emmen, s-Hertogenbosch"
-New Zealand,Hamilton
-Nigeria,"Benin City, Deba Habe, Effon-Alaiye, Ife, Ikerre, Ilorin, Kaduna, Ogbomosho, Ondo, Owo, Oyo, Sokoto, Zaria"
-North Korea,Pyongyang
-Oman,"Masqat, Salala"
-Pakistan,"Dadu, Mandi Bahauddin, Mardan, Okara, Shikarpur"
-Paraguay,"Asuncin, Ciudad del Este, San Lorenzo"
-Peru,"Callao, Hunuco, Lima, Sullana"
-Philippines,"Baybay, Bayugan, Bislig, Cabuyao, Cavite, Davao, Gingoog, Hagonoy, Iligan, Imus, Lapu-Lapu, Mandaluyong, Ozamis, Santa Rosa, Taguig, Talavera, Tanauan, Tanza, Tarlac, Tuguegarao"
-Poland,"Bydgoszcz, Czestochowa, Jastrzebie-Zdrj, Kalisz, Lublin, Plock, Tychy, Wroclaw"
-Puerto Rico,"Arecibo, Ponce"
-Romania,"Botosani, Bucuresti"
-Runion,Saint-Denis
-Russian Federation,"Atinsk, Balaiha, Dzerzinsk, Elista, Ivanovo, Jaroslavl, Jelets, Kaliningrad, Kamyin, Kirovo-Tepetsk, Kolpino, Korolev, Kurgan, Kursk, Lipetsk, Ljubertsy, Maikop, Moscow, Nabereznyje Telny, Niznekamsk, Novoterkassk, Pjatigorsk, Serpuhov, Smolensk, Syktyvkar"
-Saint Vincent and the Grenadines,Kingstown
-Saudi Arabia,"Abha, al-Hawiya, al-Qatif, Jedda, Tabuk"
-Senegal,Ziguinchor
-Slovakia,Bratislava
-South Africa,"Boksburg, Botshabelo, Chatsworth, Johannesburg, Kimberley, Klerksdorp, Newcastle, Paarl, Rustenburg, Soshanguve, Springs"
-South Korea,"Cheju, Kimchon, Naju, Tonghae, Uijongbu"
-Spain,"A Corua (La Corua), Donostia-San Sebastin, Gijn, Ourense (Orense), Santiago de Compostela"
-Sri Lanka,Jaffna
-Sudan,"al-Qadarif, Omdurman"
-Sweden,Malm
-Switzerland,"Basel, Bern, Lausanne"
-Taiwan,"Changhwa, Chiayi, Chungho, Fengshan, Hsichuh, Lungtan, Nantou, Tanshui, Touliu, Tsaotun"
-Tanzania,"Mwanza, Tabora, Zanzibar"
-Thailand,"Nakhon Sawan, Pak Kret, Songkhla"
-Tonga,Nukualofa
-Tunisia,Sousse
-Turkey,"Adana, Balikesir, Batman, Denizli, Eskisehir, Gaziantep, Inegl, Kilis, Ktahya, Osmaniye, Sivas, Sultanbeyli, Tarsus, Tokat, Usak"
-Turkmenistan,Ashgabat
-Tuvalu,Funafuti
-Ukraine,"Kamjanets-Podilskyi, Konotop, Mukateve, ostka, Simferopol, Sumy"
-United Arab Emirates,"Abu Dhabi, al-Ayn, Sharja"
-United Kingdom,"Bradford, Dundee, London, Southampton, Southend-on-Sea, Southport, Stockport, York"
-United States,"Akron, Arlington, Augusta-Richmond County, Aurora, Bellevue, Brockton, Cape Coral, Citrus Heights, Clarksville, Compton, Dallas, Dayton, El Monte, Fontana, Garden Grove, Garland, Grand Prairie, Greensboro, Joliet, Kansas City, Lancaster, Laredo, Lincoln, Manchester, Memphis"
-Venezuela,"Barcelona, Caracas, Cuman, Maracabo, Ocumare del Tuy, Valencia, Valle de la Pascua"
-Vietnam,"Cam Ranh, Haiphong, Hanoi, Nam Dinh, Nha Trang, Vinh"
-"Virgin Islands, U.S.",Charlotte Amalie
-Yemen,"Aden, Hodeida, Sanaa, Taizz"
-Yugoslavia,"Kragujevac, Novi Sad"
+Country,City List
+Afghanistan,Kabul
+Algeria,"Batna, Bchar, Skikda"
+American Samoa,Tafuna
+Angola,"Benguela, Namibe"
+Anguilla,South Hill
+Argentina,"Almirante Brown, Avellaneda, Baha Blanca, Crdoba, Escobar, Ezeiza, La Plata, Merlo, Quilmes, San Miguel de Tucumn, Santa F, Tandil, Vicente Lpez"
+Armenia,Yerevan
+Australia,Woodridge
+Austria,"Graz, Linz, Salzburg"
+Azerbaijan,"Baku, Sumqayit"
+Bahrain,al-Manama
+Bangladesh,"Dhaka, Jamalpur, Tangail"
+Belarus,"Mogiljov, Molodetno"
+Bolivia,"El Alto, Sucre"
+Brazil,"Alvorada, Angra dos Reis, Anpolis, Aparecida de Goinia, Araatuba, Bag, Belm, Blumenau, Boa Vista, Braslia, Goinia, Guaruj, guas Lindas de Gois, Ibirit, Juazeiro do Norte, Juiz de Fora, Luzinia, Maring, Po, Poos de Caldas, Rio Claro, Santa Brbara dOeste, Santo Andr, So Bernardo do Campo, So Leopoldo"
+Brunei,Bandar Seri Begawan
+Bulgaria,"Ruse, Stara Zagora"
+Cambodia,"Battambang, Phnom Penh"
+Cameroon,"Bamenda, Yaound"
+Canada,"Gatineau, Halifax, Lethbridge, London, Oshawa, Richmond Hill, Vancouver"
+Chad,NDjamna
+Chile,"Antofagasta, Coquimbo, Rancagua"
+China,"Baicheng, Baiyin, Binzhou, Changzhou, Datong, Daxian, Dongying, Emeishan, Enshi, Ezhou, Fuyu, Fuzhou, Haining, Hami, Hohhot, Huaian, Jinchang, Jining, Jinzhou, Junan, Korla, Laiwu, Laohekou, Lengshuijiang, Leshan"
+Colombia,"Buenaventura, Dos Quebradas, Florencia, Pereira, Sincelejo, Sogamoso"
+"Congo, The Democratic Republic of the","Lubumbashi, Mwene-Ditu"
+Czech Republic,Olomouc
+Dominican Republic,"La Romana, San Felipe de Puerto Plata, Santiago de los Caballeros"
+Ecuador,"Loja, Portoviejo, Robamba"
+Egypt,"Bilbays, Idfu, Mit Ghamr, Qalyub, Sawhaj, Shubra al-Khayma"
+Estonia,Tartu
+Ethiopia,Addis Abeba
+Faroe Islands,Trshavn
+Finland,Oulu
+France,"Brest, Le Mans, Toulon, Toulouse"
+French Guiana,Cayenne
+French Polynesia,"Faaa, Papeete"
+Gambia,Banjul
+Germany,"Duisburg, Erlangen, Halle/Saale, Mannheim, Saarbrcken, Siegen, Witten"
+Greece,"Athenai, Patras"
+Greenland,Nuuk
+Holy See (Vatican City State),Citt del Vaticano
+Hong Kong,Kowloon and New Kowloon
+Hungary,Szkesfehrvr
+India,"Adoni, Ahmadnagar, Allappuzha (Alleppey), Ambattur, Amroha, Balurghat, Berhampore (Baharampur), Bhavnagar, Bhilwara, Bhimavaram, Bhopal, Bhusawal, Bijapur, Chandrapur, Chapra, Dhule (Dhulia), Etawah, Firozabad, Gandhinagar, Gulbarga, Haldia, Halisahar, Hoshiarpur, Hubli-Dharwad, Jaipur"
+Indonesia,"Cianjur, Ciomas, Ciparay, Gorontalo, Jakarta, Lhokseumawe, Madiun, Pangkal Pinang, Pemalang, Pontianak, Probolinggo, Purwakarta, Surakarta, Tegal"
+Iran,"Arak, Esfahan, Kermanshah, Najafabad, Qomsheh, Shahr-e Kord, Sirjan, Tabriz"
+Iraq,Mosul
+Israel,"Ashdod, Ashqelon, Bat Yam, Tel Aviv-Jaffa"
+Italy,"Alessandria, Bergamo, Brescia, Brindisi, Livorno, Syrakusa, Udine"
+Japan,"Akishima, Fukuyama, Higashiosaka, Hino, Hiroshima, Isesaki, Iwaki, Iwakuni, Iwatsuki, Izumisano, Kakamigahara, Kamakura, Kanazawa, Koriyama, Kurashiki, Kuwana, Matsue, Miyakonojo, Nagareyama, Okayama, Okinawa, Omiya, Onomichi, Otsu, Sagamihara"
+Kazakstan,"Pavlodar, Zhezqazghan"
+Kenya,"Kisumu, Nyeri"
+Kuwait,Jalib al-Shuyukh
+Latvia,"Daugavpils, Liepaja"
+Liechtenstein,Vaduz
+Lithuania,Vilnius
+Madagascar,Mahajanga
+Malawi,Lilongwe
+Malaysia,"Ipoh, Kuching, Sungai Petani"
+Mexico,"Acua, Allende, Atlixco, Carmen, Celaya, Coacalco de Berriozbal, Coatzacoalcos, Cuauhtmoc, Cuautla, Cuernavaca, El Fuerte, Guadalajara, Hidalgo, Huejutla de Reyes, Huixquilucan, Jos Azueta, Jurez, La Paz, Matamoros, Mexicali, Monclova, Nezahualcyotl, Pachuca de Soto, Salamanca, San Felipe del Progreso"
+Moldova,Chisinau
+Morocco,"Beni-Mellal, Nador, Sal"
+Mozambique,"Beira, Naala-Porto, Tete"
+Myanmar,"Monywa, Myingyan"
+Nauru,Yangor
+Nepal,Birgunj
+Netherlands,"Amersfoort, Apeldoorn, Ede, Emmen, s-Hertogenbosch"
+New Zealand,Hamilton
+Nigeria,"Benin City, Deba Habe, Effon-Alaiye, Ife, Ikerre, Ilorin, Kaduna, Ogbomosho, Ondo, Owo, Oyo, Sokoto, Zaria"
+North Korea,Pyongyang
+Oman,"Masqat, Salala"
+Pakistan,"Dadu, Mandi Bahauddin, Mardan, Okara, Shikarpur"
+Paraguay,"Asuncin, Ciudad del Este, San Lorenzo"
+Peru,"Callao, Hunuco, Lima, Sullana"
+Philippines,"Baybay, Bayugan, Bislig, Cabuyao, Cavite, Davao, Gingoog, Hagonoy, Iligan, Imus, Lapu-Lapu, Mandaluyong, Ozamis, Santa Rosa, Taguig, Talavera, Tanauan, Tanza, Tarlac, Tuguegarao"
+Poland,"Bydgoszcz, Czestochowa, Jastrzebie-Zdrj, Kalisz, Lublin, Plock, Tychy, Wroclaw"
+Puerto Rico,"Arecibo, Ponce"
+Romania,"Botosani, Bucuresti"
+Runion,Saint-Denis
+Russian Federation,"Atinsk, Balaiha, Dzerzinsk, Elista, Ivanovo, Jaroslavl, Jelets, Kaliningrad, Kamyin, Kirovo-Tepetsk, Kolpino, Korolev, Kurgan, Kursk, Lipetsk, Ljubertsy, Maikop, Moscow, Nabereznyje Telny, Niznekamsk, Novoterkassk, Pjatigorsk, Serpuhov, Smolensk, Syktyvkar"
+Saint Vincent and the Grenadines,Kingstown
+Saudi Arabia,"Abha, al-Hawiya, al-Qatif, Jedda, Tabuk"
+Senegal,Ziguinchor
+Slovakia,Bratislava
+South Africa,"Boksburg, Botshabelo, Chatsworth, Johannesburg, Kimberley, Klerksdorp, Newcastle, Paarl, Rustenburg, Soshanguve, Springs"
+South Korea,"Cheju, Kimchon, Naju, Tonghae, Uijongbu"
+Spain,"A Corua (La Corua), Donostia-San Sebastin, Gijn, Ourense (Orense), Santiago de Compostela"
+Sri Lanka,Jaffna
+Sudan,"al-Qadarif, Omdurman"
+Sweden,Malm
+Switzerland,"Basel, Bern, Lausanne"
+Taiwan,"Changhwa, Chiayi, Chungho, Fengshan, Hsichuh, Lungtan, Nantou, Tanshui, Touliu, Tsaotun"
+Tanzania,"Mwanza, Tabora, Zanzibar"
+Thailand,"Nakhon Sawan, Pak Kret, Songkhla"
+Tonga,Nukualofa
+Tunisia,Sousse
+Turkey,"Adana, Balikesir, Batman, Denizli, Eskisehir, Gaziantep, Inegl, Kilis, Ktahya, Osmaniye, Sivas, Sultanbeyli, Tarsus, Tokat, Usak"
+Turkmenistan,Ashgabat
+Tuvalu,Funafuti
+Ukraine,"Kamjanets-Podilskyi, Konotop, Mukateve, ostka, Simferopol, Sumy"
+United Arab Emirates,"Abu Dhabi, al-Ayn, Sharja"
+United Kingdom,"Bradford, Dundee, London, Southampton, Southend-on-Sea, Southport, Stockport, York"
+United States,"Akron, Arlington, Augusta-Richmond County, Aurora, Bellevue, Brockton, Cape Coral, Citrus Heights, Clarksville, Compton, Dallas, Dayton, El Monte, Fontana, Garden Grove, Garland, Grand Prairie, Greensboro, Joliet, Kansas City, Lancaster, Laredo, Lincoln, Manchester, Memphis"
+Venezuela,"Barcelona, Caracas, Cuman, Maracabo, Ocumare del Tuy, Valencia, Valle de la Pascua"
+Vietnam,"Cam Ranh, Haiphong, Hanoi, Nam Dinh, Nha Trang, Vinh"
+"Virgin Islands, U.S.",Charlotte Amalie
+Yemen,"Aden, Hodeida, Sanaa, Taizz"
+Yugoslavia,"Kragujevac, Novi Sad"
 Zambia,Kitwe
\ No newline at end of file
diff --git a/tests/playwright/fixtures/expectedData.txt b/tests/playwright/fixtures/expectedData.txt
index 6de66cde96..8e6d239482 100644
--- a/tests/playwright/fixtures/expectedData.txt
+++ b/tests/playwright/fixtures/expectedData.txt
@@ -1,4 +1,4 @@
-Address,District,PostalCode,Phone,Location,Customer List,Staff List,City,Staff List1
-1661 Abha Drive,Tamil Nadu,14400,270456873752,"{""x"":78.8214191,""y"":10.3812871}",1,,Pudukkottai,
-1993 Tabuk Lane,Tamil Nadu,64221,648482415405,"{""x"":80.1270701,""y"":12.9246028}",2,,Tambaram,
+Address,District,PostalCode,Phone,Location,Customer List,Staff List,City,Staff List1
+1661 Abha Drive,Tamil Nadu,14400,270456873752,"{""x"":78.8214191,""y"":10.3812871}",1,,Pudukkottai,
+1993 Tabuk Lane,Tamil Nadu,64221,648482415405,"{""x"":80.1270701,""y"":12.9246028}",2,,Tambaram,
 381 Kabul Way,Taipei,87272,55477302294,"{""x"":0,""y"":0}",2,,Hsichuh,
\ No newline at end of file
diff --git a/tests/playwright/fixtures/expectedDataSqlite.txt b/tests/playwright/fixtures/expectedDataSqlite.txt
index cbf8d9cccb..188590b915 100644
--- a/tests/playwright/fixtures/expectedDataSqlite.txt
+++ b/tests/playwright/fixtures/expectedDataSqlite.txt
@@ -1,19 +1,19 @@
-Address,District,PostalCode,Phone,Customer List,Staff List,City,Staff List1
-1013 Tabuk Boulevard," ",96203," ",2,,Kanchrapara,
-1168 Najafabad Parkway," ",40301," ",1,,Kabul,
-1294 Firozabad Drive," ",70618," ",2,,Pingxiang,
-1342 Abha Boulevard," ",10714," ",2,,Bucuresti,
-1368 Maracabo Boulevard," ",32716," ",2,,South Hill,
-1427 Tabuk Place," ",31342," ",2,,Cape Coral,
-1519 Santiago de los Caballeros Loop," ",22025," ",2,,Mwene-Ditu,
-1661 Abha Drive," ",14400," ",1,,Pudukkottai,
-17 Kabul Boulevard," ",38594," ",1,,Nagareyama,
-1838 Tabriz Lane," ",1195," ",1,,Dhaka,
-1888 Kabul Drive," ",20936," ",1,,Ife,
-1892 Nabereznyje Telny Lane," ",28396," ",2,,Tafuna,
-1993 Tabuk Lane," ",64221," ",2,,Tambaram,
-217 Botshabelo Place," ",49521," ",2,,Davao,
-381 Kabul Way," ",87272," ",2,,Hsichuh,
-44 Najafabad Way," ",61391," ",2,,Donostia-San Sebastin,
-48 Maracabo Place," ",1570," ",1,,Talavera,
+Address,District,PostalCode,Phone,Customer List,Staff List,City,Staff List1
+1013 Tabuk Boulevard," ",96203," ",2,,Kanchrapara,
+1168 Najafabad Parkway," ",40301," ",1,,Kabul,
+1294 Firozabad Drive," ",70618," ",2,,Pingxiang,
+1342 Abha Boulevard," ",10714," ",2,,Bucuresti,
+1368 Maracabo Boulevard," ",32716," ",2,,South Hill,
+1427 Tabuk Place," ",31342," ",2,,Cape Coral,
+1519 Santiago de los Caballeros Loop," ",22025," ",2,,Mwene-Ditu,
+1661 Abha Drive," ",14400," ",1,,Pudukkottai,
+17 Kabul Boulevard," ",38594," ",1,,Nagareyama,
+1838 Tabriz Lane," ",1195," ",1,,Dhaka,
+1888 Kabul Drive," ",20936," ",1,,Ife,
+1892 Nabereznyje Telny Lane," ",28396," ",2,,Tafuna,
+1993 Tabuk Lane," ",64221," ",2,,Tambaram,
+217 Botshabelo Place," ",49521," ",2,,Davao,
+381 Kabul Way," ",87272," ",2,,Hsichuh,
+44 Najafabad Way," ",61391," ",2,,Donostia-San Sebastin,
+48 Maracabo Place," ",1570," ",1,,Talavera,
 669 Firozabad Loop," ",92265," ",1,,al-Ayn,
\ No newline at end of file
diff --git a/tests/playwright/package-lock.json b/tests/playwright/package-lock.json
index 18132ac04f..6ee489570a 100644
--- a/tests/playwright/package-lock.json
+++ b/tests/playwright/package-lock.json
@@ -14,7 +14,7 @@
         "xlsx": "^0.18.5"
       },
       "devDependencies": {
-        "@playwright/test": "1.27.1",
+        "@playwright/test": "^1.27.1",
         "@typescript-eslint/eslint-plugin": "^4.0.1",
         "@typescript-eslint/parser": "^4.0.1",
         "axios": "^0.24.0",
diff --git a/tests/playwright/pages/Dashboard/Grid/Column/index.ts b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
index 48107c7800..787b2253d1 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
@@ -34,7 +34,7 @@ export class ColumnPageObject extends BasePage {
     childColumn = '',
     relationType = '',
     rollupType = '',
-    format = '',
+    format,
     insertAfterColumnTitle,
     insertBeforeColumnTitle,
   }: {
@@ -81,12 +81,14 @@ export class ColumnPageObject extends BasePage {
         });
         break;
       case 'Duration':
-        await this.get().locator('.ant-select-single').nth(1).click();
-        await this.rootPage
-          .locator(`.ant-select-item`, {
-            hasText: format,
-          })
-          .click();
+        if (format) {
+          await this.get().locator('.ant-select-single').nth(1).click();
+          await this.rootPage
+            .locator(`.ant-select-item`, {
+              hasText: format,
+            })
+            .click();
+        }
         break;
       case 'Formula':
         await this.get().locator('.nc-formula-input').fill(formula);
@@ -95,7 +97,7 @@ export class ColumnPageObject extends BasePage {
         await this.get().locator('.ant-select-single').nth(1).click();
         await this.rootPage
           .locator(`.ant-select-item`, {
-            hasText: qrCodeValueColumnTitle,
+            hasText: new RegExp(`^${qrCodeValueColumnTitle}$`),
           })
           .click();
         break;
diff --git a/tests/playwright/pages/Dashboard/Settings/Acl.ts b/tests/playwright/pages/Dashboard/Settings/Acl.ts
index 789cea9a72..0e0c2d0e97 100644
--- a/tests/playwright/pages/Dashboard/Settings/Acl.ts
+++ b/tests/playwright/pages/Dashboard/Settings/Acl.ts
@@ -1,17 +1,16 @@
-import { expect, Locator } from '@playwright/test';
-import { SettingsPage } from '.';
 import BasePage from '../../Base';
+import { DataSourcesPage } from './DataSources';
 
 export class AclPage extends BasePage {
-  private readonly settings: SettingsPage;
+  readonly dataSources: DataSourcesPage;
 
-  constructor(settings: SettingsPage) {
-    super(settings.rootPage);
-    this.settings = settings;
+  constructor(dataSources: DataSourcesPage) {
+    super(dataSources.rootPage);
+    this.dataSources = dataSources;
   }
 
   get() {
-    return this.settings.get().locator(`[data-testid="nc-settings-subtab-UI Access Control"]`);
+    return this.dataSources.get();
   }
 
   async toggle({ table, role }: { table: string; role: string }) {
diff --git a/tests/playwright/pages/Dashboard/Settings/DataSources.ts b/tests/playwright/pages/Dashboard/Settings/DataSources.ts
new file mode 100644
index 0000000000..1da4c02416
--- /dev/null
+++ b/tests/playwright/pages/Dashboard/Settings/DataSources.ts
@@ -0,0 +1,40 @@
+import { SettingsPage } from '.';
+import { defaultBaseName } from '../../../constants';
+import BasePage from '../../Base';
+import { AclPage } from './Acl';
+import { SettingsErdPage } from './Erd';
+import { MetaDataPage } from './Metadata';
+
+export class DataSourcesPage extends BasePage {
+  private readonly settings: SettingsPage;
+  readonly erd: SettingsErdPage;
+  readonly acl: AclPage;
+  readonly metaData: MetaDataPage;
+
+  constructor(settings: SettingsPage) {
+    super(settings.rootPage);
+    this.settings = settings;
+    this.erd = new SettingsErdPage(this);
+    this.acl = new AclPage(this);
+    this.metaData = new MetaDataPage(this);
+  }
+
+  get() {
+    return this.settings.get().locator(`[data-testid="nc-settings-subtab-Data Sources"]`);
+  }
+
+  async openErd({ dataSourceName }: { dataSourceName: string }) {
+    await this.get().locator('.ds-table-row', { hasText: dataSourceName }).locator('button:has-text("ERD")').click();
+  }
+
+  async openAcl({ dataSourceName = defaultBaseName }: { dataSourceName?: string } = {}) {
+    await this.get().locator('.ds-table-row', { hasText: dataSourceName }).locator('button:has-text("UI ACL")').click();
+  }
+
+  async openMetaSync({ dataSourceName = defaultBaseName }: { dataSourceName?: string } = {}) {
+    await this.get()
+      .locator('.ds-table-row', { hasText: dataSourceName })
+      .locator('button:has-text("Sync Metadata")')
+      .click();
+  }
+}
diff --git a/tests/playwright/pages/Dashboard/Settings/Erd.ts b/tests/playwright/pages/Dashboard/Settings/Erd.ts
index 38f4fc633a..09e83ee154 100644
--- a/tests/playwright/pages/Dashboard/Settings/Erd.ts
+++ b/tests/playwright/pages/Dashboard/Settings/Erd.ts
@@ -1,15 +1,15 @@
-import { SettingsPage } from '.';
 import { ErdBasePage } from '../commonBase/Erd';
+import { DataSourcesPage } from './DataSources';
 
 export class SettingsErdPage extends ErdBasePage {
-  readonly settings: SettingsPage;
+  readonly dataSources: DataSourcesPage;
 
-  constructor(settings: SettingsPage) {
-    super(settings.rootPage);
-    this.settings = settings;
+  constructor(dataSources: DataSourcesPage) {
+    super(dataSources.rootPage);
+    this.dataSources = dataSources;
   }
 
   get() {
-    return this.rootPage.locator(`[data-testid="nc-settings-subtab-ERD View"]`);
+    return this.dataSources.get();
   }
 }
diff --git a/tests/playwright/pages/Dashboard/Settings/Metadata.ts b/tests/playwright/pages/Dashboard/Settings/Metadata.ts
index ee274b759c..803e6dfb65 100644
--- a/tests/playwright/pages/Dashboard/Settings/Metadata.ts
+++ b/tests/playwright/pages/Dashboard/Settings/Metadata.ts
@@ -1,17 +1,17 @@
 import { expect } from '@playwright/test';
-import { SettingsPage } from '.';
 import BasePage from '../../Base';
+import { DataSourcesPage } from './DataSources';
 
 export class MetaDataPage extends BasePage {
-  private readonly settings: SettingsPage;
+  private readonly dataSources: DataSourcesPage;
 
-  constructor(settings: SettingsPage) {
-    super(settings.rootPage);
-    this.settings = settings;
+  constructor(dataSources: DataSourcesPage) {
+    super(dataSources.rootPage);
+    this.dataSources = dataSources;
   }
 
   get() {
-    return this.settings.get().locator(`[data-testid="nc-settings-subtab-Metadata"]`);
+    return this.dataSources.get();
   }
 
   async clickReload() {
diff --git a/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts b/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts
index ad71c2d1b5..9e641f5314 100644
--- a/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts
+++ b/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts
@@ -1,4 +1,3 @@
-import { expect } from '@playwright/test';
 import { SettingsPage } from '.';
 import BasePage from '../../Base';
 
@@ -11,10 +10,15 @@ export class MiscSettingsPage extends BasePage {
   }
 
   get() {
-    return this.settings.get().locator(`[data-testid="nc-settings-subtab-Miscellaneous"]`);
+    return this.settings.get().locator(`[data-testid="nc-settings-subtab-Misc"]`);
   }
 
   async clickShowM2MTables() {
-    await this.get().locator('input[type="checkbox"]').click();
+    const clickAction = this.get().locator('input[type="checkbox"]').click();
+    await this.waitForResponse({
+      uiAction: clickAction,
+      requestUrlPathToMatch: 'tables?includeM2M',
+      httpMethodsToMatch: ['GET'],
+    });
   }
 }
diff --git a/tests/playwright/pages/Dashboard/Settings/Teams.ts b/tests/playwright/pages/Dashboard/Settings/Teams.ts
index 581bc5d698..0bc59edaef 100644
--- a/tests/playwright/pages/Dashboard/Settings/Teams.ts
+++ b/tests/playwright/pages/Dashboard/Settings/Teams.ts
@@ -28,6 +28,10 @@ export class TeamsPage extends BasePage {
     return this.rootPage.getByTestId('nc-share-base-sub-modal');
   }
 
+  async clickInviteTeamBtn() {
+    await this.inviteTeamBtn.click();
+  }
+
   async invite({ email, role, skipOpeningModal }: { email: string; role: string; skipOpeningModal?: boolean }) {
     email = this.prefixEmail(email);
 
diff --git a/tests/playwright/pages/Dashboard/Settings/index.ts b/tests/playwright/pages/Dashboard/Settings/index.ts
index 9986981170..c46f55396f 100644
--- a/tests/playwright/pages/Dashboard/Settings/index.ts
+++ b/tests/playwright/pages/Dashboard/Settings/index.ts
@@ -1,18 +1,17 @@
 import { DashboardPage } from '..';
 import BasePage from '../../Base';
 import { AuditSettingsPage } from './Audit';
-import { SettingsErdPage } from './Erd';
-import { MetaDataPage } from './Metadata';
 import { AppStoreSettingsPage } from './AppStore';
 import { MiscSettingsPage } from './Miscellaneous';
 import { TeamsPage } from './Teams';
-import { AclPage } from './Acl';
+import { DataSourcesPage } from './DataSources';
 
 export enum SettingTab {
   TeamAuth = 'teamAndAuth',
   AppStore = 'appStore',
-  ProjectMetadata = 'projMetaData',
+  DataSources = 'dataSources',
   Audit = 'audit',
+  ProjectSettings = 'projectSettings',
 }
 
 export enum SettingsSubTab {
@@ -22,25 +21,19 @@ export enum SettingsSubTab {
 }
 
 export class SettingsPage extends BasePage {
-  private readonly dashboard: DashboardPage;
   readonly audit: AuditSettingsPage;
   readonly appStore: AppStoreSettingsPage;
-  readonly metaData: MetaDataPage;
   readonly miscellaneous: MiscSettingsPage;
-  readonly erd: SettingsErdPage;
+  readonly dataSources: DataSourcesPage;
   readonly teams: TeamsPage;
-  readonly acl: AclPage;
 
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
-    this.dashboard = dashboard;
     this.audit = new AuditSettingsPage(this);
     this.appStore = new AppStoreSettingsPage(this);
-    this.metaData = new MetaDataPage(this);
     this.miscellaneous = new MiscSettingsPage(this);
-    this.erd = new SettingsErdPage(this);
+    this.dataSources = new DataSourcesPage(this);
     this.teams = new TeamsPage(this);
-    this.acl = new AclPage(this);
   }
 
   get() {
diff --git a/tests/playwright/pages/Dashboard/TreeView.ts b/tests/playwright/pages/Dashboard/TreeView.ts
index 25efc080bc..38d14f725e 100644
--- a/tests/playwright/pages/Dashboard/TreeView.ts
+++ b/tests/playwright/pages/Dashboard/TreeView.ts
@@ -6,14 +6,12 @@ export class TreeViewPage extends BasePage {
   readonly dashboard: DashboardPage;
   readonly project: any;
   readonly quickImportButton: Locator;
-  readonly inviteTeamButton: Locator;
 
   constructor(dashboard: DashboardPage, project: any) {
     super(dashboard.rootPage);
     this.dashboard = dashboard;
     this.project = project;
     this.quickImportButton = dashboard.get().locator('.nc-import-menu');
-    this.inviteTeamButton = dashboard.get().locator('.nc-share-base');
   }
 
   get() {
@@ -131,13 +129,14 @@ export class TreeViewPage extends BasePage {
     await importMenu.locator(`.ant-dropdown-menu-title-content:has-text("${title}")`).click();
   }
 
+  // todo: Break this into smaller methods
   async validateRoleAccess(param: { role: string }) {
     // Add new table button
     await expect(this.get().locator(`.nc-add-new-table`)).toHaveCount(param.role === 'creator' ? 1 : 0);
     // Import menu
     await expect(this.get().locator(`.nc-import-menu`)).toHaveCount(param.role === 'creator' ? 1 : 0);
-    // Invite Team button
-    await expect(this.get().locator(`.nc-share-base`)).toHaveCount(param.role === 'creator' ? 1 : 0);
+    // Team and Settings button
+    await expect(this.get().locator(`.nc-new-base`)).toHaveCount(param.role === 'creator' ? 1 : 0);
     // Right click context menu
     await this.get().locator(`.nc-project-tree-tbl-Country`).click({
       button: 'right',
diff --git a/tests/playwright/pages/Dashboard/common/Cell/RatingCell.ts b/tests/playwright/pages/Dashboard/common/Cell/RatingCell.ts
index e5ec9a7bc9..da8b44d9f7 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/RatingCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/RatingCell.ts
@@ -14,6 +14,14 @@ export class RatingCellPageObject extends BasePage {
     return this.cell.get({ index, columnHeader });
   }
 
+  async select({ index, columnHeader, rating }: { index?: number; columnHeader: string; rating: number }) {
+    await this.waitForResponse({
+      uiAction: this.get({ index, columnHeader }).locator('.ant-rate-star > div').nth(rating).click(),
+      httpMethodsToMatch: ['POST', 'PATCH'],
+      requestUrlPathToMatch: 'api/v1/db/data/noco/',
+    });
+  }
+
   async verify({ index, columnHeader, rating }: { index?: number; columnHeader: string; rating: number }) {
     await expect(await this.get({ index, columnHeader }).locator(`div[role="radio"][aria-checked="true"]`)).toHaveCount(
       rating
diff --git a/tests/playwright/pages/Dashboard/common/Cell/index.ts b/tests/playwright/pages/Dashboard/common/Cell/index.ts
index 22052a2ca6..4e1ddb538e 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/index.ts
@@ -51,7 +51,20 @@ export class CellPageObject extends BasePage {
       index,
       columnHeader,
     });
-    await this.get({ index, columnHeader }).locator('input').fill(text);
+    const isInputBox = async () => (await this.get({ index, columnHeader }).locator('input').count()) > 0;
+
+    for (let i = 0; i < 10; i++) {
+      if (await isInputBox()) {
+        break;
+      }
+      await this.rootPage.waitForTimeout(200);
+    }
+
+    if (await isInputBox()) {
+      await this.get({ index, columnHeader }).locator('input').fill(text);
+    } else {
+      await this.get({ index, columnHeader }).locator('textarea').fill(text);
+    }
   }
 
   async inCellExpand({ index, columnHeader }: { index: number; columnHeader: string }) {
@@ -192,7 +205,9 @@ export class CellPageObject extends BasePage {
     ...clickOptions: Parameters<Locator['click']>
   ) {
     await this.get({ index, columnHeader }).click(...clickOptions);
+    await (await this.get({ index, columnHeader }).elementHandle()).waitForElementState('stable');
 
     await this.get({ index, columnHeader }).press((await this.isMacOs()) ? 'Meta+C' : 'Control+C');
+    await this.verifyToast({ message: 'Copied to clipboard' });
   }
 }
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts b/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts
index ca999fb118..508e958be9 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts
@@ -4,6 +4,7 @@ import { GridPage } from '../../Grid';
 import { ToolbarPage } from './index';
 // @ts-ignore
 import fs from 'fs';
+import XLSX from 'xlsx';
 
 export class ToolbarViewMenuPage extends BasePage {
   readonly toolbar: ToolbarPage;
@@ -38,14 +39,42 @@ export class ToolbarViewMenuPage extends BasePage {
     ]);
 
     // Save downloaded file somewhere
-    await download.saveAs('./output/at.txt');
+    await download.saveAs('./output/test.txt');
 
     // verify downloaded content against expected content
-    const expectedData = fs.readFileSync(expectedDataFile, 'utf8');
-    const file = fs.readFileSync('./output/at.txt', 'utf8');
+    const expectedData = fs.readFileSync(expectedDataFile, 'utf8').replace(/\r/g, '').split('\n');
+    const file = fs.readFileSync('./output/test.txt', 'utf8').replace(/\r/g, '').split('\n');
     await expect(file).toEqual(expectedData);
   }
 
+  async verifyDownloadAsXLSX({
+    downloadLocator,
+    expectedDataFile,
+  }: {
+    downloadLocator: Locator;
+    expectedDataFile: string;
+  }) {
+    const [download] = await Promise.all([
+      // Start waiting for the download
+      this.rootPage.waitForEvent('download'),
+      // Perform the action that initiates download
+      downloadLocator.click(),
+    ]);
+
+    // Save downloaded file somewhere
+    await download.saveAs('./output/test.xlsx');
+
+    // convert xlsx to csv
+    const wb = XLSX.readFile('./output/test.xlsx');
+    XLSX.writeFile(wb, './output/test.txt', { bookType: 'csv' });
+
+    // verify downloaded content against expected content
+    const expectedData = fs.readFileSync(expectedDataFile, 'utf8');
+    const file = fs.readFileSync('./output/test.txt', 'utf8');
+    // XLSX writes file with UTF-8 BOM, adds '\ufeff' to cater it
+    await expect(file).toEqual('\ufeff' + expectedData);
+  }
+
   // menu items
   //    Collaborative View
   //    Download
@@ -68,6 +97,13 @@ export class ToolbarViewMenuPage extends BasePage {
             .last(),
           expectedDataFile: verificationInfo?.verificationFile ?? './fixtures/expectedBaseDownloadData.txt',
         });
+      } else if (subMenu === 'Download as XLSX') {
+        await this.verifyDownloadAsXLSX({
+          downloadLocator: await this.rootPage
+            .locator(`.ant-dropdown-menu-title-content:has-text("${subMenu}")`)
+            .last(),
+          expectedDataFile: verificationInfo?.verificationFile ?? './fixtures/expectedBaseDownloadData.txt',
+        });
       } else {
         await this.rootPage.locator(`.ant-dropdown-menu-title-content:has-text("${subMenu}")`).last().click();
       }
@@ -78,6 +114,11 @@ export class ToolbarViewMenuPage extends BasePage {
             message: 'Successfully exported all table data',
           });
           break;
+        case 'Download as XLSX':
+          await this.verifyToast({
+            message: 'Successfully exported all table data',
+          });
+          break;
         case 'Locked View':
           await this.verifyToast({
             message: 'Successfully Switched to locked view',
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
index 02c1f6bedb..c97c263051 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
@@ -128,8 +128,8 @@ export class ToolbarPage extends BasePage {
     await download.saveAs('./output/at.txt');
 
     // verify downloaded content against expected content
-    const expectedData = fs.readFileSync(`./fixtures/${verificationFile}`, 'utf8');
-    const file = fs.readFileSync('./output/at.txt', 'utf8');
+    const expectedData = fs.readFileSync(`./fixtures/${verificationFile}`, 'utf8').replace(/\r/g, '').split('\n');
+    const file = fs.readFileSync('./output/at.txt', 'utf8').replace(/\r/g, '').split('\n');
     await expect(file).toEqual(expectedData);
   }
 
diff --git a/tests/playwright/pages/Dashboard/index.ts b/tests/playwright/pages/Dashboard/index.ts
index 6f70b854bf..bbfab4c6db 100644
--- a/tests/playwright/pages/Dashboard/index.ts
+++ b/tests/playwright/pages/Dashboard/index.ts
@@ -115,9 +115,11 @@ export class DashboardPage extends BasePage {
     await this.get().getByTestId('grid-load-spinner').waitFor({ state: 'hidden' });
 
     if (mode === 'standard') {
-      await expect(this.rootPage).toHaveURL(
-        `/#/nc/${this.project.id}/${title === 'Team & Auth' ? 'auth' : `table/${title}`}`
-      );
+      if (title === 'Team & Auth') {
+        await expect(this.rootPage).toHaveURL(`/#/nc/${this.project.id}/auth`);
+      } else {
+        await expect(this.rootPage).toHaveURL(new RegExp(`#/nc/${this.project.id}/table/md_.{14}`));
+      }
     }
   }
 
diff --git a/tests/playwright/tests/baseShare.spec.ts b/tests/playwright/tests/baseShare.spec.ts
index 720d391ed3..656ef5846e 100644
--- a/tests/playwright/tests/baseShare.spec.ts
+++ b/tests/playwright/tests/baseShare.spec.ts
@@ -58,15 +58,18 @@ test.describe('Shared base', () => {
     // close 'Team & Auth' tab
     await dashboard.closeTab({ title: 'Team & Auth' });
 
-    await dashboard.treeView.inviteTeamButton.click();
+    await dashboard.gotoSettings();
+    await dashboard.settings.teams.clickInviteTeamBtn();
     await dashboard.settings.teams.toggleSharedBase({ toggle: true });
     await dashboard.settings.teams.sharedBaseRole({ role: 'editor' });
     let url = await dashboard.settings.teams.getSharedBaseUrl();
     await dashboard.settings.teams.closeInvite();
+    await dashboard.settings.close();
 
     await dashboard.rootPage.waitForTimeout(2000);
     // access shared base link
     await dashboard.signOut();
+    await dashboard.rootPage.waitForTimeout(2000);
     // todo: Move this to a page object
     await dashboard.rootPage.goto(url);
 
@@ -81,11 +84,13 @@ test.describe('Shared base', () => {
     await projectPage.openProject({ title: context.project.title, withoutPrefix: true });
     await dashboard.closeTab({ title: 'Team & Auth' });
 
-    await dashboard.treeView.inviteTeamButton.click();
+    await dashboard.gotoSettings();
+    await dashboard.settings.teams.clickInviteTeamBtn();
     await dashboard.settings.teams.toggleSharedBase({ toggle: true });
     await dashboard.settings.teams.sharedBaseRole({ role: 'viewer' });
     url = await dashboard.settings.teams.getSharedBaseUrl();
     await dashboard.settings.teams.closeInvite();
+    await dashboard.settings.close();
 
     await dashboard.rootPage.waitForTimeout(2000);
     // access shared base link
diff --git a/tests/playwright/tests/erd.spec.ts b/tests/playwright/tests/erd.spec.ts
index ac45036d61..4d4a5af20f 100644
--- a/tests/playwright/tests/erd.spec.ts
+++ b/tests/playwright/tests/erd.spec.ts
@@ -11,6 +11,7 @@ import { SettingsSubTab, SettingTab } from '../pages/Dashboard/Settings';
 import setup from '../setup';
 import { isMysql, isPg, isSqlite } from '../setup/db';
 import { SettingsErdPage } from '../pages/Dashboard/Settings/Erd';
+import { defaultBaseName } from '../constants';
 
 test.describe('Erd', () => {
   let dashboard: DashboardPage;
@@ -35,15 +36,21 @@ test.describe('Erd', () => {
     }
   });
 
-  const enableMM = async () => {
-    await dashboard.settings.selectTab({ tab: SettingTab.ProjectMetadata, subTab: SettingsSubTab.Miscellaneous });
+  const toggleMMAndOpenErd = async () => {
+    await dashboard.settings.selectTab({ tab: SettingTab.ProjectSettings, subTab: SettingsSubTab.Miscellaneous });
     await dashboard.settings.miscellaneous.clickShowM2MTables();
-    await dashboard.settings.selectSubTab({ subTab: SettingsSubTab.ERD });
+    await dashboard.settings.selectTab({ tab: SettingTab.DataSources });
+    await dashboard.settings.dataSources.openErd({
+      dataSourceName: defaultBaseName,
+    });
   };
 
   const openSettingsErd = async () => {
     await dashboard.gotoSettings();
-    await dashboard.settings.selectTab({ tab: SettingTab.ProjectMetadata, subTab: SettingsSubTab.ERD });
+    await dashboard.settings.selectTab({ tab: SettingTab.DataSources });
+    await dashboard.settings.dataSources.openErd({
+      dataSourceName: defaultBaseName,
+    });
   };
 
   const openErdOfATable = async (tableName: string) => {
@@ -54,9 +61,9 @@ test.describe('Erd', () => {
 
   test('Verify default config, all columns disabled, only PK and FK disabled, Sql views and MM table option, junction table names', async () => {
     await openSettingsErd();
-    await enableMM();
+    await toggleMMAndOpenErd();
 
-    const erd: SettingsErdPage = dashboard.settings.erd;
+    const erd: SettingsErdPage = dashboard.settings.dataSources.erd;
 
     await erd.dbClickShowColumnNames();
 
@@ -219,7 +226,7 @@ test.describe('Erd', () => {
     await dashboard.grid.column.create({ title: 'test_column' });
     // Verify in Settings ERD and table ERD
     await openSettingsErd();
-    await dashboard.settings.erd.verifyNode({
+    await dashboard.settings.dataSources.erd.verifyNode({
       tableName: `country`,
       columnName: 'test_column',
     });
@@ -242,7 +249,7 @@ test.describe('Erd', () => {
     });
     // Verify in Settings ERD and table ERD
     await openSettingsErd();
-    await dashboard.settings.erd.verifyNode({
+    await dashboard.settings.dataSources.erd.verifyNode({
       tableName: `country`,
       columnName: 'new_test_column',
     });
@@ -261,7 +268,7 @@ test.describe('Erd', () => {
     await dashboard.grid.column.delete({ title: 'new_test_column' });
     // Verify in Settings ERD and table ERD
     await openSettingsErd();
-    await dashboard.settings.erd.verifyNode({
+    await dashboard.settings.dataSources.erd.verifyNode({
       tableName: `country`,
       columnNameShouldNotExist: 'new_test_column',
     });
@@ -285,7 +292,7 @@ test.describe('Erd', () => {
     await dashboard.treeView.createTable({ title: 'Test' });
     // Verify in Settings ERD and table ERD
     await openSettingsErd();
-    await dashboard.settings.erd.verifyNode({
+    await dashboard.settings.dataSources.erd.verifyNode({
       tableName: `Test`,
     });
     await dashboard.settings.close();
@@ -293,14 +300,13 @@ test.describe('Erd', () => {
     // Delete table and verify ERD
     await dashboard.treeView.deleteTable({ title: 'Test' });
     await openSettingsErd();
-    await dashboard.settings.erd.verifyNodeDoesNotExist({
+    await dashboard.settings.dataSources.erd.verifyNodeDoesNotExist({
       tableName: `Test`,
     });
 
     // Verify that `show mm table` option disabled will not trigger easter in ERD options
-    await dashboard.settings.selectSubTab({ subTab: SettingsSubTab.Miscellaneous });
-    await dashboard.settings.miscellaneous.clickShowM2MTables(); // disable
-    await dashboard.settings.selectSubTab({ subTab: SettingsSubTab.ERD });
+    await dashboard.settings.dataSources.erd.dbClickShowColumnNames();
+    await dashboard.settings.dataSources.erd.verifyEasterEggNotShown();
     await dashboard.settings.close();
   });
 });
diff --git a/tests/playwright/tests/gridOperations.spec.ts b/tests/playwright/tests/gridOperations.spec.ts
deleted file mode 100644
index d05b9fcc54..0000000000
--- a/tests/playwright/tests/gridOperations.spec.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { expect, test } from '@playwright/test';
-import { DashboardPage } from '../pages/Dashboard';
-import setup from '../setup';
-
-test.describe('Grid operations', () => {
-  let dashboard: DashboardPage;
-  let context: any;
-
-  test.beforeEach(async ({ page }) => {
-    context = await setup({ page });
-    dashboard = new DashboardPage(page, context.project);
-  });
-
-  test('Clipboard support', async () => {
-    // close 'Team & Auth' tab
-    await dashboard.closeTab({ title: 'Team & Auth' });
-
-    await dashboard.treeView.createTable({ title: 'Sheet1' });
-
-    await dashboard.grid.column.create({
-      title: 'Number',
-      type: 'Number',
-    });
-    await dashboard.grid.column.create({
-      title: 'Checkbox',
-      type: 'Checkbox',
-    });
-    await dashboard.grid.column.create({
-      title: 'Date',
-      type: 'Date',
-    });
-    await dashboard.grid.column.create({
-      title: 'Attachment',
-      type: 'Attachment',
-    });
-
-    await dashboard.grid.addNewRow({
-      index: 0,
-    });
-    await dashboard.grid.cell.click({
-      index: 0,
-      columnHeader: 'Number',
-    });
-    await dashboard.grid.cell.fillText({
-      index: 0,
-      columnHeader: 'Number',
-      text: '123',
-    });
-    await dashboard.grid.cell.click({
-      index: 0,
-      columnHeader: 'Checkbox',
-    });
-
-    const today = new Date().toISOString().slice(0, 10);
-    await dashboard.grid.cell.date.open({
-      index: 0,
-      columnHeader: 'Date',
-    });
-    await dashboard.grid.cell.date.selectDate({
-      date: today,
-    });
-    await dashboard.grid.cell.date.close();
-
-    await dashboard.grid.cell.attachment.addFile({
-      index: 0,
-      columnHeader: 'Attachment',
-      filePath: `${process.cwd()}/fixtures/sampleFiles/1.json`,
-    });
-
-    await dashboard.grid.cell.copyToClipboard({
-      index: 0,
-      columnHeader: 'Title',
-    });
-    expect(await dashboard.grid.cell.getClipboardText()).toBe('Row 0');
-
-    await dashboard.grid.cell.copyToClipboard({
-      index: 0,
-      columnHeader: 'Number',
-    });
-    expect(await dashboard.grid.cell.getClipboardText()).toBe('123');
-
-    await dashboard.grid.cell.copyToClipboard(
-      {
-        index: 0,
-        columnHeader: 'Checkbox',
-      },
-      { position: { x: 1, y: 1 } }
-    );
-    await new Promise(resolve => setTimeout(resolve, 5000));
-    expect(await dashboard.grid.cell.getClipboardText()).toBe('true');
-
-    await dashboard.grid.cell.click({
-      index: 0,
-      columnHeader: 'Checkbox',
-    });
-    await dashboard.grid.cell.copyToClipboard(
-      {
-        index: 0,
-        columnHeader: 'Checkbox',
-      },
-      { position: { x: 1, y: 1 } }
-    );
-    expect(await dashboard.grid.cell.getClipboardText()).toBe('false');
-
-    await dashboard.grid.cell.copyToClipboard({
-      index: 0,
-      columnHeader: 'Date',
-    });
-    expect(await dashboard.grid.cell.getClipboardText()).toBe(today);
-
-    await dashboard.grid.cell.copyToClipboard({
-      index: 0,
-      columnHeader: 'Attachment',
-    });
-    // expect(await dashboard.grid.cell.getClipboardText()).toBe('1.json');
-  });
-});
diff --git a/tests/playwright/tests/keyboardShortcuts.spec.ts b/tests/playwright/tests/keyboardShortcuts.spec.ts
index 168bbe948c..d9de119030 100644
--- a/tests/playwright/tests/keyboardShortcuts.spec.ts
+++ b/tests/playwright/tests/keyboardShortcuts.spec.ts
@@ -101,4 +101,354 @@ test.describe('Verify shortcuts', () => {
     await page.waitForTimeout(2000);
     await grid.cell.verify({ index: 1, columnHeader: 'Country', value: 'NewAlgeria' });
   });
+
+  test('Clipboard support for cells', async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: 'Team & Auth' });
+
+    await dashboard.treeView.createTable({ title: 'Sheet1' });
+
+    await dashboard.grid.column.create({
+      title: 'SingleLineText',
+      type: 'SingleLineText',
+    });
+    await dashboard.grid.column.create({
+      title: 'LongText',
+      type: 'LongText',
+    });
+    await dashboard.grid.column.create({
+      title: 'Number',
+      type: 'Number',
+    });
+    await dashboard.grid.column.create({
+      title: 'PhoneNumber',
+      type: 'PhoneNumber',
+    });
+    await dashboard.grid.column.create({
+      title: 'Email',
+      type: 'Email',
+    });
+    await dashboard.grid.column.create({
+      title: 'URL',
+      type: 'URL',
+    });
+    await dashboard.grid.column.create({
+      title: 'Decimal',
+      type: 'Decimal',
+    });
+    await dashboard.grid.column.create({
+      title: 'Percent',
+      type: 'Percent',
+    });
+    await dashboard.grid.column.create({
+      title: 'Currency',
+      type: 'Currency',
+    });
+    await dashboard.grid.column.create({
+      title: 'Duration',
+      type: 'Duration',
+    });
+    await dashboard.grid.column.create({
+      title: 'Rating',
+      type: 'Rating',
+    });
+    await dashboard.grid.column.create({
+      title: 'SingleSelect',
+      type: 'SingleSelect',
+    });
+    await dashboard.grid.column.create({
+      title: 'MultiSelect',
+      type: 'MultiSelect',
+    });
+    await dashboard.grid.column.create({
+      title: 'Checkbox',
+      type: 'Checkbox',
+    });
+    await dashboard.grid.column.create({
+      title: 'Date',
+      type: 'Date',
+    });
+    await dashboard.grid.column.create({
+      title: 'Attachment',
+      type: 'Attachment',
+    });
+
+    // ########################################
+
+    await dashboard.grid.addNewRow({
+      index: 0,
+    });
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'SingleLineText',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'SingleLineText',
+      text: 'SingleLineText',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'LongText',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'LongText',
+      text: 'LongText',
+    });
+
+    await grid.cell.selectOption.select({ index: 0, columnHeader: 'SingleSelect', option: 'Option 1' });
+    await grid.cell.selectOption.select({
+      index: 0,
+      columnHeader: 'MultiSelect',
+      option: 'Option 2',
+      multiSelect: true,
+    });
+    await grid.cell.selectOption.select({
+      index: 0,
+      columnHeader: 'MultiSelect',
+      option: 'Option 1',
+      multiSelect: true,
+    });
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Number',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'Number',
+      text: '123',
+    });
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'PhoneNumber',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'PhoneNumber',
+      text: '987654321',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Email',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'Email',
+      text: 'test@example.com',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'URL',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'URL',
+      text: 'nocodb.com',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Decimal',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'Decimal',
+      text: '1.1',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Percent',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'Percent',
+      text: '80',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Currency',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'Currency',
+      text: '20',
+    });
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Duration',
+    });
+    await dashboard.grid.cell.fillText({
+      index: 0,
+      columnHeader: 'Duration',
+      text: '0008',
+    });
+
+    await dashboard.grid.cell.rating.select({
+      index: 0,
+      columnHeader: 'Rating',
+      rating: 3,
+    });
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Checkbox',
+    });
+
+    const today = new Date().toISOString().slice(0, 10);
+    await dashboard.grid.cell.date.open({
+      index: 0,
+      columnHeader: 'Date',
+    });
+    await dashboard.grid.cell.date.selectDate({
+      date: today,
+    });
+    await dashboard.grid.cell.date.close();
+
+    await dashboard.grid.cell.attachment.addFile({
+      index: 0,
+      columnHeader: 'Attachment',
+      filePath: `${process.cwd()}/fixtures/sampleFiles/1.json`,
+    });
+
+    // ########################################
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'SingleLineText',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('SingleLineText');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'LongText',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('LongText');
+
+    await dashboard.grid.cell.copyToClipboard(
+      {
+        index: 0,
+        columnHeader: 'SingleSelect',
+      },
+      { position: { x: 1, y: 1 } }
+    );
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('Option 1');
+
+    await dashboard.grid.cell.copyToClipboard(
+      {
+        index: 0,
+        columnHeader: 'MultiSelect',
+      },
+      { position: { x: 1, y: 1 } }
+    );
+    expect(await dashboard.grid.cell.getClipboardText()).toContain('Option 1');
+    expect(await dashboard.grid.cell.getClipboardText()).toContain('Option 2');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Title',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('Row 0');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Number',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('123');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'PhoneNumber',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('987654321');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Email',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('test@example.com');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'URL',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('nocodb.com');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Decimal',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('1.1');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Percent',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('80');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Currency',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('20');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Duration',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('480');
+
+    await dashboard.grid.cell.copyToClipboard(
+      {
+        index: 0,
+        columnHeader: 'Rating',
+      },
+      { position: { x: 1, y: 1 } }
+    );
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('4');
+
+    await dashboard.grid.cell.copyToClipboard(
+      {
+        index: 0,
+        columnHeader: 'Checkbox',
+      },
+      { position: { x: 1, y: 1 } }
+    );
+    await new Promise(resolve => setTimeout(resolve, 5000));
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('true');
+
+    await dashboard.grid.cell.click({
+      index: 0,
+      columnHeader: 'Checkbox',
+    });
+    await dashboard.grid.cell.copyToClipboard(
+      {
+        index: 0,
+        columnHeader: 'Checkbox',
+      },
+      { position: { x: 1, y: 1 } }
+    );
+    expect(await dashboard.grid.cell.getClipboardText()).toBe('false');
+
+    await dashboard.grid.cell.copyToClipboard({
+      index: 0,
+      columnHeader: 'Date',
+    });
+    expect(await dashboard.grid.cell.getClipboardText()).toBe(today);
+
+    await dashboard.grid.cell.copyToClipboard(
+      {
+        index: 0,
+        columnHeader: 'Attachment',
+      },
+      { position: { x: 1, y: 1 } }
+    );
+    const attachmentsInfo = JSON.parse(await dashboard.grid.cell.getClipboardText());
+    expect(attachmentsInfo[0]['title']).toBe('1.json');
+  });
 });
diff --git a/tests/playwright/tests/metaSync.spec.ts b/tests/playwright/tests/metaSync.spec.ts
index 7d2d34e837..2f50fd90bb 100644
--- a/tests/playwright/tests/metaSync.spec.ts
+++ b/tests/playwright/tests/metaSync.spec.ts
@@ -4,7 +4,6 @@ import { SettingsPage, SettingTab } from '../pages/Dashboard/Settings';
 import setup, { NcContext } from '../setup';
 import { isMysql, isPg, isSqlite, mysqlExec, pgExec, sqliteExec } from '../setup/db';
 
-// todo: Enable when view bug is fixed
 test.describe('Meta sync', () => {
   let dashboard: DashboardPage;
   let settings: SettingsPage;
@@ -33,30 +32,31 @@ test.describe('Meta sync', () => {
     test.setTimeout(process.env.CI ? 100000 : 70000);
 
     await dashboard.gotoSettings();
-    await settings.selectTab({ tab: SettingTab.ProjectMetadata });
+    await settings.selectTab({ tab: SettingTab.DataSources });
+    await settings.dataSources.openMetaSync();
 
     await dbExec(`CREATE TABLE table1 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))`);
     await dbExec(`CREATE TABLE table2 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))`);
 
-    await settings.metaData.clickReload();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.clickReload();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: `table1`,
       state: 'New table',
     });
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 22 : 17,
       model: `table2`,
       state: 'New table',
     });
 
-    await settings.metaData.sync();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.sync();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: 'Table1',
       state: 'No change identified',
     });
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 22 : 17,
       model: 'Table2',
       state: 'No change identified',
@@ -72,16 +72,16 @@ test.describe('Meta sync', () => {
           `ALTER TABLE table1 ADD CONSTRAINT fk1 FOREIGN KEY (col1) REFERENCES table2 (id) ON DELETE NO ACTION ON UPDATE NO ACTION`
         );
       }
-      await settings.metaData.clickReload();
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.clickReload();
+      await settings.dataSources.metaData.verifyRow({
         index: isPg(context) ? 21 : 16,
         model: 'Table1',
         state: 'New relation added',
       });
 
       //verify after sync
-      await settings.metaData.sync();
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.sync();
+      await settings.dataSources.metaData.verifyRow({
         index: isPg(context) ? 21 : 16,
         model: 'Table1',
         state: 'No change identified',
@@ -94,16 +94,16 @@ test.describe('Meta sync', () => {
         await dbExec(`ALTER TABLE table1 DROP FOREIGN KEY fk1`);
         await dbExec(`ALTER TABLE table1 DROP INDEX fk1_idx`);
       }
-      await settings.metaData.clickReload();
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.clickReload();
+      await settings.dataSources.metaData.verifyRow({
         index: isPg(context) ? 21 : 16,
         model: 'Table1',
         state: 'Relation removed',
       });
 
       //verify after sync
-      await settings.metaData.sync();
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.sync();
+      await settings.dataSources.metaData.verifyRow({
         index: isPg(context) ? 21 : 16,
         model: 'Table1',
         state: 'No change identified',
@@ -119,16 +119,16 @@ test.describe('Meta sync', () => {
       await dbExec(`ALTER TABLE table1 ADD COLUMN newCol INT`);
     }
 
-    await settings.metaData.clickReload();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.clickReload();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: `Table1`,
       state: 'New column(newCol)',
     });
 
     //verify after sync
-    await settings.metaData.sync();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.sync();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: 'Table1',
       state: 'No change identified',
@@ -143,16 +143,16 @@ test.describe('Meta sync', () => {
       await dbExec(`ALTER TABLE table1 RENAME COLUMN newCol TO newColName`);
     }
 
-    await settings.metaData.clickReload();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.clickReload();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: `Table1`,
       state: 'New column(newColName), Column removed(newCol)',
     });
 
     //verify after sync
-    await settings.metaData.sync();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.sync();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: 'Table1',
       state: 'No change identified',
@@ -162,16 +162,16 @@ test.describe('Meta sync', () => {
     // todo: Add for sqlite
     if (!isSqlite(context)) {
       await dbExec(`ALTER TABLE table1 DROP COLUMN newColName`);
-      await settings.metaData.clickReload();
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.clickReload();
+      await settings.dataSources.metaData.verifyRow({
         index: isPg(context) ? 21 : 16,
         model: `Table1`,
         state: 'Column removed(newColName)',
       });
 
       //verify after sync
-      await settings.metaData.sync();
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.sync();
+      await settings.dataSources.metaData.verifyRow({
         index: isPg(context) ? 21 : 16,
         model: 'Table1',
         state: 'No change identified',
@@ -181,51 +181,51 @@ test.describe('Meta sync', () => {
     // Delete table
     await dbExec(`DROP TABLE table1`);
     await dbExec(`DROP TABLE table2`);
-    await settings.metaData.clickReload();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.clickReload();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: `table1`,
       state: 'Table removed',
     });
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 22 : 17,
       model: `table2`,
       state: 'Table removed',
     });
 
     //verify after sync
-    await settings.metaData.sync();
+    await settings.dataSources.metaData.sync();
 
     if (isSqlite(context)) {
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.verifyRow({
         index: 16,
         model: 'CustomerList',
         state: 'No change identified',
       });
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.verifyRow({
         index: 17,
         model: 'FilmList',
         state: 'No change identified',
       });
     }
     if (isPg(context)) {
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.verifyRow({
         index: 21,
         model: 'ActorInfo',
         state: 'No change identified',
       });
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.verifyRow({
         index: 22,
         model: 'CustomerList',
         state: 'No change identified',
       });
     } else if (isMysql(context)) {
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.verifyRow({
         index: 16,
         model: 'ActorInfo',
         state: 'No change identified',
       });
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.verifyRow({
         index: 17,
         model: 'CustomerList',
         state: 'No change identified',
@@ -242,10 +242,11 @@ test.describe('Meta sync', () => {
     );
 
     await dashboard.gotoSettings();
-    await settings.selectTab({ tab: SettingTab.ProjectMetadata });
+    await settings.selectTab({ tab: SettingTab.DataSources });
+    await settings.dataSources.openMetaSync();
 
-    await settings.metaData.clickReload();
-    await settings.metaData.sync();
+    await settings.dataSources.metaData.clickReload();
+    await settings.dataSources.metaData.sync();
     await settings.close();
 
     await dashboard.treeView.openTable({ title: 'Table1' });
diff --git a/tests/playwright/tests/rolesCreate.spec.ts b/tests/playwright/tests/rolesCreate.spec.ts
index 9fd25f7d95..79aa72649e 100644
--- a/tests/playwright/tests/rolesCreate.spec.ts
+++ b/tests/playwright/tests/rolesCreate.spec.ts
@@ -1,7 +1,7 @@
 import { test } from '@playwright/test';
 import { DashboardPage } from '../pages/Dashboard';
 import setup from '../setup';
-import { SettingsPage, SettingsSubTab, SettingTab } from '../pages/Dashboard/Settings';
+import { SettingsPage, SettingTab } from '../pages/Dashboard/Settings';
 import { SignupPage } from '../pages/SignupPage';
 import { ProjectsPage } from '../pages/ProjectsPage';
 
@@ -46,16 +46,16 @@ test.describe('User roles', () => {
     // configure access control
     await dashboard.gotoSettings();
     await settings.selectTab({
-      tab: SettingTab.ProjectMetadata,
-      subTab: SettingsSubTab.ACL,
+      tab: SettingTab.DataSources,
     });
-    await settings.acl.toggle({ table: 'Language', role: 'editor' });
-    await settings.acl.toggle({ table: 'Language', role: 'commenter' });
-    await settings.acl.toggle({ table: 'Language', role: 'viewer' });
-    await settings.acl.toggle({ table: 'CustomerList', role: 'editor' });
-    await settings.acl.toggle({ table: 'CustomerList', role: 'commenter' });
-    await settings.acl.toggle({ table: 'CustomerList', role: 'viewer' });
-    await settings.acl.save();
+    await settings.dataSources.openAcl();
+    await settings.dataSources.acl.toggle({ table: 'Language', role: 'editor' });
+    await settings.dataSources.acl.toggle({ table: 'Language', role: 'commenter' });
+    await settings.dataSources.acl.toggle({ table: 'Language', role: 'viewer' });
+    await settings.dataSources.acl.toggle({ table: 'CustomerList', role: 'editor' });
+    await settings.dataSources.acl.toggle({ table: 'CustomerList', role: 'commenter' });
+    await settings.dataSources.acl.toggle({ table: 'CustomerList', role: 'viewer' });
+    await settings.dataSources.acl.save();
     await settings.close();
 
     // Role test
diff --git a/tests/playwright/tests/rolesPreview.spec.ts b/tests/playwright/tests/rolesPreview.spec.ts
index c60ba81dfe..0ecea16c31 100644
--- a/tests/playwright/tests/rolesPreview.spec.ts
+++ b/tests/playwright/tests/rolesPreview.spec.ts
@@ -2,7 +2,7 @@ import { test } from '@playwright/test';
 import { DashboardPage } from '../pages/Dashboard';
 import setup from '../setup';
 import { ToolbarPage } from '../pages/Dashboard/common/Toolbar';
-import { SettingsPage, SettingsSubTab, SettingTab } from '../pages/Dashboard/Settings';
+import { SettingsPage, SettingTab } from '../pages/Dashboard/Settings';
 
 const roles = ['Editor', 'Commenter', 'Viewer'];
 
@@ -30,16 +30,16 @@ test.describe('Preview Mode', () => {
     // configure access control
     await dashboard.gotoSettings();
     await settings.selectTab({
-      tab: SettingTab.ProjectMetadata,
-      subTab: SettingsSubTab.ACL,
+      tab: SettingTab.DataSources,
     });
-    await settings.acl.toggle({ table: 'Language', role: 'editor' });
-    await settings.acl.toggle({ table: 'Language', role: 'commenter' });
-    await settings.acl.toggle({ table: 'Language', role: 'viewer' });
-    await settings.acl.toggle({ table: 'CustomerList', role: 'editor' });
-    await settings.acl.toggle({ table: 'CustomerList', role: 'commenter' });
-    await settings.acl.toggle({ table: 'CustomerList', role: 'viewer' });
-    await settings.acl.save();
+    await settings.dataSources.openAcl();
+    await settings.dataSources.acl.toggle({ table: 'Language', role: 'editor' });
+    await settings.dataSources.acl.toggle({ table: 'Language', role: 'commenter' });
+    await settings.dataSources.acl.toggle({ table: 'Language', role: 'viewer' });
+    await settings.dataSources.acl.toggle({ table: 'CustomerList', role: 'editor' });
+    await settings.dataSources.acl.toggle({ table: 'CustomerList', role: 'commenter' });
+    await settings.dataSources.acl.toggle({ table: 'CustomerList', role: 'viewer' });
+    await settings.dataSources.acl.save();
     await settings.close();
 
     // Role test
diff --git a/tests/playwright/tests/viewMenu.spec.ts b/tests/playwright/tests/viewMenu.spec.ts
index 51037e3b6b..39ac76bd33 100644
--- a/tests/playwright/tests/viewMenu.spec.ts
+++ b/tests/playwright/tests/viewMenu.spec.ts
@@ -56,4 +56,24 @@ test.describe('Grid view locked', () => {
       },
     });
   });
+
+  test('Download XLSX', async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: 'Team & Auth' });
+    await dashboard.treeView.openTable({ title: 'Country' });
+
+    await dashboard.grid.toolbar.clickFields();
+    // Hide 'LastUpdate' column
+    await dashboard.grid.toolbar.fields.click({
+      title: 'LastUpdate',
+    });
+
+    await dashboard.grid.toolbar.viewsMenu.click({
+      menu: 'Download',
+      subMenu: 'Download as XLSX',
+      verificationInfo: {
+        verificationFile: isPg(context) ? './fixtures/expectedBaseDownloadDataPg.txt' : null,
+      },
+    });
+  });
 });